NewZkgj/pages/mine/consultanonduty/index.vue

<template>
	<view class="box">
		<!-- 顾问选择 -->
		<view class="nextcon">
			下一位接待顾问：毛丫丫
		</view>
		<view class="tab">
			<view class="tabbox">
				<view :class="{ activecllasscet: activeTotal == 0 }" @click="tabtimetap(0)">全部</view>
			</view>
			<view class="tabbox">
				<view :class="{ activecllasscet: activeTotal == 1 }" @click="tabtimetap(1)">正在接待</view>
			</view>
			<view class="tabbox">
				<view :class="{ activecllasscet: activeTotal == 2 }" @click="tabtimetap(2)">空闲顾问</view>
			</view>
		</view>
		<view class="content">
				<view class="content-tips">
					<view class="top">
						<view class="tit">
							<view class="img">
								宋
							</view>
							<view class="test">
								宋幸运
							</view>
						</view>
						<view class="state">
							<view class="point"></view>
							接待中
						</view>
					</view>
					<view class="reception">
						<view class="">
							今日接待：<test class="num">4</test>
						</view>
						<view class="btn">
							暂停
						</view>
					</view>
				</view>
				<view class="content-tips">
					<view class="top">
						<view class="tit">
							<view class="img">
								宋
							</view>
							<view class="test">
								宋幸运
							</view>
						</view>
						<view class="state">
							<!-- <view class="point"></view> -->
							<text style="color: #666666;">暂停接待</text>
						</view>
					</view>
					<view class="reception">
						<view class="">
							今日接待：<test class="num">4</test>
						</view>
						<view class="btn">
							恢复
						</view>
					</view>
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				value:"",
				activeTotal: 0,
			}
		},
		methods:{
			tabtimetap(idx){
				console.log(idx)
				this.activeTotal=idx
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		background: #F8F8F8;
		width: 100%;
		height: 100%;
		font-size: 30rpx;
		font-weight: 400;
		// line-height: 30px;
		.tab{
			height: 88rpx;
			border-bottom: 1px solid #E0E0E0;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			.tabbox {
				flex: 1;
				height: 100%;
				text-align: center;
				line-height: 92rpx;
				color: #666666;
				font-size: 28rpx;
				display: flex;
				justify-content: center;
				
				.activecllasscet {
					border-bottom: 2px solid #2671E2;
					color: #2671E2;
					font-weight: 600;
				}
			}
		}
		.nextcon{
			height: 78rpx;
			background: #F4F8FD;
			color: #2671E2;
			text-align: center;
			line-height: 78rpx;
		}
		.content-tips{
			background: #fff;
			padding: 0 30rpx;
			height: 168rpx;
			margin-bottom: 20rpx;
			overflow: hidden;
			.top{
				margin-top: 19rpx;
				display: flex;
				justify-content: space-between;
				.tit{
					height: 52rpx;
					display: flex;
					.img{
						width: 52rpx;
						height: 52rpx;
						border-radius: 50%;
						line-height: 47rpx;
						text-align: center;
						background: #FFFFFF;
						border: 1px solid #C9C9C9;
						margin-right: 20rpx;
					}
					.test{
						font-weight: 600;
						color: #333333;
						margin-top: 6rpx;
					}
				}
				.state{
					display: flex;
					.point{
						width: 12rpx;
						height: 12rpx;
						background: #2B6EFF;
						border-radius: 50%;
						margin-right: 9rpx;
						margin-top: 16rpx;
						
					}
				}
			}
			.reception{
				display: flex;
				font-weight: 400;
				width: 100%;
				margin-top: 28rpx;
				justify-content: space-between;
				color: #666666;
				line-height: 30rpx;
				.btn{
					width: 100rpx;
					height: 48rpx;
					background: #FFFFFF;
					border-radius: 4rpx;
					border: 1px solid #C9C9C9;
					text-align: center;
					line-height: 48rpx;
					color: #333333;
					font-size: 28rpx;
				}
			}
			
		}
	}
</style>