init

pages/mine/consultanonduty/index.vue

@@ -1,8 +1,191 @@
 <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>
+<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>