<template>
	<view class="pages">
		<view class="diaBox">
			<view class="contents">
				<view class="left">
					<view class="time">
						11:00
					</view>
					<view class="leftCon">
						这里有内容这里有内容这里有内容这里有内容
					</view>
				</view>
				
				<view class="right">
					<view class="time">
						11:05
					</view>
					<view class="leftCon">
						这里有内容这里有内容这里有内容这里有内容
					</view>
				</view>
			</view>
		</view>
		<!-- 输入框 -->
		<view class="footer">
			<view class="" style="width: 90%;margin: 0 auto;">
				<view class="footer_box">
					<input type="text" placeholder="请输入" style="font-size: 24rpx;" name="" id="">
					<view class="right">
						发送
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.pages{
		width: 100vw;
		height: 100%;
		position: relative;
		overflow-y: auto;
		background-color: #f6f6f6;
		
		.diaBox{
			width: 100%;
			.contents{
				width: 90%;
				margin: 0 auto;
				.left{
					margin-top: 20rpx;
					.time{
						margin: 0 auto;
						font-size: 21rpx;
						text-align: center;
						color: #939393;
					}
					.leftCon{
						width: 60%;
						padding: 20rpx;
						background-color: #fff;
						border-radius: 20rpx;
						border-top-left-radius: 0;
						margin-top: 20rpx;
					}
				}
				
				.right{
					margin-top: 20rpx;
					.time{
						margin: 0 auto;
						font-size: 21rpx;
						text-align: center;
						color: #939393;
					}
					.leftCon{
						float: right;
						width: 60%;
						padding: 20rpx;
						background-color: #95EC69;
						border-radius: 20rpx;
						border-top-right-radius: 0;
						margin-top: 20rpx;
					}
				}
			}
		}
		
		.footer{
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 166rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			.footer_box{
				width: 100%;
				display: flex;
				align-items: center;
				input{
					background-color: #F1F1F1;
					width: 100%;
					margin: 0 auto;
					height: 80rpx;
					border-radius: 30rpx;
					line-height: 80rpx;
				}
				.input-placeholder{
					margin-left: 20rpx;
				}
				
				.right{
					text-align: center;
					width: 144rpx;
					height: 80rpx;
					line-height: 80rpx;
					color: #fff;
					background-color: #0FBB59;
					border-radius: 40rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>
