besiweb/pages/index/answer/index.vue

<template>
	<view>
		<view class="sticky-nav">
			<view class="nav-box">
				<image src="../../../static/index/answer/trun_left_black.png" class="answer_back" @click="backHome">
				</image>
				<text class="answer-text">法师答疑</text>
				<image src="../../../static/index/gongdeng/more_black.png" class="answer_operate"
					@click="showAnswerMore"></image>
			</view>
		</view>
		<view class="master_info_box">
			<view v-for="(item,index) in masterList" :key="index">
				<view class="master_list_item">
					<view class="master_img_box">
						<image :src="item.avatar" class="master_img"></image>
					</view>
					<view class="master_name">{{item.name}}</view>
					<view class="master_consult_box">
						<text class="master_status">{{item.status}}</text>
						<text class="consult_count">{{item.consultCount}}</text>人咨询
					</view>
				</view>
			</view>
		</view>
		<u-mask :show="showMask" :duration="200" :custom-style="{background: 'transparent'}" @click="showMask = false">
			<view class="wrap">
				<div class="answer_operate_wrap answer_operate_wrap_top">
					<view v-for="(item,index) in operateList" :key="index" class="operate_list">
						<view class="operate_item" @tap.stop="answerDetail(item)">
							<image :src="item.icon" class="oprate_icon"></image>
							<text class="oprate_content">{{item.content}}</text>
						</view>
					</view>
				</div>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				masterList: [{
					avatar: '../../../static/index/gongdeng/default_face_image.png',
					name: "天然居士",
					status: "在线",
					consultCount: 13
				}, {
					avatar: '../../../static/index/gongdeng/default_face_image.png',
					name: "国慧法师",
					status: "离线",
					consultCount: 24
				}, {
					avatar: '../../../static/index/gongdeng/default_face_image.png',
					name: "明心居士",
					status: "离线",
					consultCount: 165
				}],
				showMask: false, //是否显示遮罩层
				operateList: [{
					icon: '../../../static/index/answer/enter_icon.png',
					content: '法师入驻'
				}, {
					icon: '../../../static/index/answer/answer_icon.png',
					content: '答疑说明'
				}]
			}
		},
		methods: {
			backHome() {
				uni.navigateBack({
					delta: 1
				});
			},
			showAnswerMore() {
				this.showMask = true;
			},
			answerDetail(item) {
				// console.log(item.content);
				switch (item.content) {
					case '法师入驻':
						uni.navigateTo({
							url: '../answer/applyRecord'
						});
						break;
					case '答疑说明':
						uni.navigateTo({
							url: '../answer/answerIntroduction'
						});
						break;
				}
			}
		}
	}
</script>
<style>
	page {
		padding: 0;
		margin: 0;
		background-color: rgb(247, 246, 242);
	}
</style>
<style lang="less" scoped>
	.sticky-nav {
		position: sticky;
		width: 100%;
		top: 0;
		z-index: 1;
	}

	.nav-box {
		width: 100%;

		display: flex;
		align-items: center;
		background: #fff;
		height: 95rpx;

		.answer_back {
			width: 45rpx;
			height: 45rpx;
			padding-left: 20rpx;
			padding-right: 215rpx;
		}

		.answer-text {
			font-size: 37rpx;
			color: #000;
		}

		.answer_operate {
			width: 21px;
			height: 19px;
			padding-left: 260rpx;
		}
	}

	.master_info_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10rpx 30rpx 0 30rpx;

		.master_list_item {
			background-color: #fff;
			border-radius: 12rpx;

			.master_img_box {
				display: flex;
				justify-content: center;

				.master_img {
					width: 125rpx;
					height: 125rpx;
					border-radius: 50%;
					overflow: hidden;
					margin: 20rpx 0;
				}
			}

			.master_name {
				font-size: 35rpx;
				text-align: center;
				padding-bottom: 15rpx;
			}

			.master_consult_box {
				display: flex;
				flex-direction: row;
				padding: 0 20rpx 20rpx 20rpx;

				.master_status {
					color: rgb(174, 174, 174);
					font-size: 25rpx;
					padding-right: 15rpx;
				}

				.consult_count {
					color: rgb(206, 133, 98);
					font-size: 25rpx;
				}
			}
		}
	}

	.wrap {
		position: fixed;
		top: 115rpx;
		right: 0;

		.answer_operate_wrap {
			// width: 300rpx;
			// height: 430rpx;
			background-color: #fff;
			border-radius: 10rpx;
			border: 5rpx solid rgb(247, 246, 242);
			position: relative;

			.operate_list {
				margin: 0 5rpx 0 25rpx;

				// border-bottom: 1rpx solid rgb(247, 246, 242);
				.operate_item {
					padding: 27rpx 55rpx 27rpx 20rpx;
					display: flex;
					align-items: center;
				}

				.oprate_icon {
					width: 50rpx;
					height: 50rpx;
					padding-right: 40rpx;
				}

				.oprate_content {
					font-size: 35rpx;
				}
			}
		}

		.answer_operate_wrap_top::before {
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			left: 259rpx;
			top: -52rpx;
			border: 25rpx solid;
			border-color: transparent transparent rgb(255, 255, 255) transparent;
			z-index: 999;
			/*上 右 下 左 */
		}

		.answer_operate_wrap_top::after {
			content: "";
			position: absolute;
			width: 0;
			height: 0;
			top: -31rpx;
			left: 257rpx;
			border-width: 0 29rpx 29rpx;
			border-style: solid;
			border-color: transparent transparent rgb(247, 246, 242);
		}
	}
</style>