besiweb/pages/index/answer/applyForm.vue

<template>
	<view>
		<view class="sticky-nav">
			<view class="nav-box">
				<u-icon name="arrow-left" color="#000" size="48" @click="backHome()"></u-icon>
				<text class="apply-record">表单详情</text>
			</view>
		</view>
		<view class="left-nav">
			<ul>
				<li v-for="(item,index) in navList" :class="{active:!(index-menuIndex)}" @click="menuShow(index)"
					:key="index">
					{{item}}
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				menuIndex: 0,
				navList: ['法师', '善知识'],
			}
		},
		methods:{
			backHome() {
				uni.navigateBack({
					delta: 1
				});
			},
			menuShow(index) {
				this.menuIndex = index;
			},
		}
	}
</script>
<style>
	page {
		background-color: rgb(247, 246, 242);
	}
</style>
<style lang="less" scoped>
	.sticky-nav {
		position: sticky;
		width: 100%;
		top: 0;
		z-index: 1;
		border-bottom: 1rpx solid rgb(229,229,229);
	}
	.nav-box {
		width: 100%;
		padding-top: 50rpx;
		display: flex;
		align-items: center;
		background: #fff;
		height: 100rpx;
		padding-bottom: 50rpx;
	    /deep/.u-icon{
			margin-left: 20rpx!important;
		}
		.apply-record {
			font-size: 38rpx;
			color: #000;
			margin-left: 250rpx;
		}
	}
	.left-nav {
		width: 100%;
		background-color: #fff;
		ul {
			padding: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
		ul li {
			list-style: none;
			display: inline-block;
			height: 65rpx;
			line-height: 65rpx;
			color: #000;
			font-size: 16px;
		}
		.active {
			color: rgb(166,166,166);
			font-size: 18px;
			border-bottom: 2px solid rgb(187,13,38);
		}
	}
</style>