mlh/pages/user/vip.vue

<template>
	<view class="center">
		<view class="title">请选择认证身份</view>
		<view class="tip">请选择您认证的身份类型</view>
		<view class="id-box" @click="navTo('/pages/user/shop')">
			<view class="id-box-bg"><image src="../../static/img/vip-shop.png" mode=""></image></view>
			<view class="id-name">店家</view>
			<view class="id-tip">进出货服务特权</view>
		</view>
		<view class="id-box" @click="navTo('/pages/user/teacher')">
			<view class="id-box-bg"><image src="../../static/img/vip-people.png" mode=""></image></view>
			<view class="id-name">老师</view>
			<view class="id-tip">标杆服务老师</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		navTo(url) {
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss">
.center,
page {
	height: auto;
	min-height: 100%;
	background: #fff;
}
.title {
	padding: 43rpx 0 0 35rpx;
	font-size: 42rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #000000;
}
.tip {
	padding: 27rpx 0 0 35rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #9f9f9f;
}
.id-box {
	margin: 34rpx auto 0;
	width: 700rpx;
	height: 184rpx;
	border-radius: 20rpx;
	position: relative;
	padding: 57rpx 0 0 182rpx;
	line-height: 1;
	.id-box-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 700rpx;
		height: 184rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.id-name {
		position: relative;
		z-index: 2;
		font-size: 35rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #6a4714;
	}
	.id-tip {
		position: relative;
		z-index: 2;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ad8958;
		margin-top: 20rpx;
	}
}
</style>