<template>
	<view class="content">
		<button @click="getwindow">获取窗口信息</button>
		<view class="">
			宽度：{{width}}
			宽度：{{height}}
		</view>
		<view class="container">
			<input class="input" v-model="title" type="text" placeholder="请输入内容"></input>
			<button class="button" @touchend.prevent="send" @touchstart.prevent='p'>发送</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "",
				width:0,
				height:0
			};
		},
		onLoad() {},
		methods: {
			getwindow(){
				 // 获取窗口信息
						let getWindowInfo = uni.getWindowInfo()
						this.height=getWindowInfo.screenHeight
						console.log(this.height);//屏幕高度
						this.width=getWindowInfo.screenWidth
						console.log(this.width);//屏幕宽度
						console.log(getWindowInfo.windowHeight);//可操作页面高度
						console.log(getWindowInfo.windowWidth);//可操作页面宽度
						console.log(getWindowInfo);  
						console.log('获取窗口信息');
			},
				       
			send() {
				console.log(this.title);
				// 清空输入框
				this.title = "";
				uni.getWindowInfo(res=>{
					 console.log('窗口宽度: ', res.windowWidth);
				})
			},
			p() {}, //空的函数
		}
	};
</script>



<style lang="scss">
	.container {
		display: flex;
		background-color: #FFFAE8;
		padding: 10px;
		align-items: center;
		
		border-radius: 65px;
		/* 添加border-radius属性，设置圆角 */

		position: fixed;
		right: 30rpx;
		left: 30rpx;
		bottom: 15px;
		// 让元素沉底
	}
	

	.input {
		flex: 1;
		height: 30px;
		border: none;
		border-radius: 5px;
		padding: 5px;
	}

	.button {
		margin-left: 10px;
		background-color: #F0F0F0;
		color: #000000;
		border: none;
		border-radius: 5px;
		padding: 5px 10px;
	}
</style>