<template>
	<view class="content">
		<view class="header">
			<view class="header-name">
				<navigator open-type="navigateBack"  hover-class="navigator-hover">
					<image src="/static/back.png"></image>
				</navigator>
				<text>在线客服</text>
			</view>
		</view>
		<view class="hr"></view>
		<!-- <scroll-view scroll-y class="srcollview"> -->
		<view class="customer">
			<template>
				<view class="talk-time">
					<text>2020-10-22  12:34:58</text>
				</view>
				<view class="servicer"><image src="../../static/customerService-pic.png"></image><text>亲，请问有什么需要？</text></view>
				<view class="user"><image src="../../static/customerService-pic.png"></image><text>我想问下我买的货发了么</text></view>
				<view class="servicer"><image src="../../static/customerService-pic.png"></image><text>请问是昨天晚上下单的吗？</text></view>
				<view class="user"><image src="../../static/customerService-pic.png"></image><text>嗯嗯,对,是的</text></view>
			</template>

		</view>
		<!-- </scroll-view> -->
		<view class="bottom-input">
			<image src="../../static/customerService-horn.png" class="img1"></image>
			<input />
			<image src="../../static/customerService-simle.png" class="img2"></image>
			<image src="../../static/customerService-btn.png" class="img3"></image>
		</view>
	</view>
</template>

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

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
	}
	
	.header{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 44px;
		position: fixed;
		top: 0;
		z-index: 999;
		background-color: #fff;
		.header-name{
			display: flex;
			align-items: center;
			width: 670rpx;
			image {
				width: 11px;
				height: 18px;
			}
			text {
				// font-family:  "PingFangSC-Regular";
				font-size: 36rpx;
				color: #333333;
				letter-spacing: -0.34px;
	            margin: 0 0 10rpx 54rpx;
			}
		}
	}
	.hr {
		width: 100%;
		border-bottom: 1px solid #E9E9E9;
	}
	.customer {
		width: 100%;
		min-height: 1335rpx;
		background-color: #f2f2f2;
		box-sizing: border-box;
		padding: 0 40rpx;
		.talk-time{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 54rpx;
			margin-bottom: 2rpx;
			text{
				// font-family: PingFangSC-Regular;
				font-size: 12px;
				color: #999999;
				letter-spacing: -0.23px;
			}
		}
		.user {
			display: flex;
			flex-direction: row-reverse;
			align-items: center;
			margin-top: 48rpx;
			image{
				width: 30px;
				height: 30px;
				margin-top: -14rpx;
				margin-left: 16rpx;
			}
			text{
				min-height: 80rpx;
				max-width: 512rpx;
				box-sizing: border-box;
				padding: 22rpx 36rpx 22rpx 38rpx;
				margin-top: 14rpx;
				// ont-family: PingFangSC-Regular;
				font-size: 12px;
				color: #333333;
				letter-spacing: -0.23px;
				background: #FFFFFF;
				border: 1px solid #E9E9E9;
				border-radius: 16rpx 0 16rpx 16rpx;
			}
		}
		.servicer {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 42rpx;
			image{
				width: 30px;
				height: 30px;
				margin-top: -14rpx;
				margin-right: 16rpx;
			}
			text{
				min-height: 80rpx;
				max-width: 512rpx;
				box-sizing: border-box;
				padding: 22rpx 36rpx 22rpx 38rpx;
				margin-top: 14rpx;
				// font-family: PingFangSC-Regular;
				font-size: 12px;
				color: #FFFFFF;
				letter-spacing: -0.23px;
				background: #FF6B4A;
				border-radius: 0 16rpx 16rpx 16rpx;
			}
		}
	}
	
	// .srcollview {
	// 	// min-height: 1335rpx;
	// 	background-color: #f2f2f2;
	// }
	.bottom-input {
		width: 100%;
		height: 112rpx;
		background: #F7F7F7;
		box-shadow: 0 -2px 3px 0 rgba(0,0,0,0.06);
		position: fixed;
		bottom: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 19rpx 40rpx 15rpx 40rpx;
		.img1{
			width: 19px;
			height: 28px;
			margin-right: 10px;
		}
		input {
			width: 536rpx;
			min-height: 78rpx;
			background: #FFFFFF;
			border: 1px solid #999999;
			border-radius: 4px;
			box-sizing: border-box;
			padding-right: 30px;
		}
		.img2 {
			width: 21px;
			height: 21px;
			margin-left: -30px;
			margin-right: 19px;
		}
		.img3{
			width: 28px;
			height: 28px;
		}
	}
	
</style>
