dl_uniapp/pages/mine/auth/auth-choose.vue

<template>
	<view class="auth-choose-box">
		<navigation-bar-vue title="通告主认证" style="width: 100%;" background-color="#ffffff"
			title-color="#000000"></navigation-bar-vue>
		<view class="choose-detail">
			<view class="item-title">依照相关法律法规，请先验证身份</view>
			<view class="item-detail" style="background-color: #FFF1F3;" @click="goForm('01')">
				<view class="detail-left-box">
					<view class="left-top">
						<image src="@/static/mine/auth/dian.png" mode="aspectFit"></image>
						<text>品牌方</text>
					</view>
					<view class="left-bottom">如果你要推广自己公司的产品，请选择“品牌方”</view>
				</view>
				<image class="detail-right-img" src="@/static/mine/auth/pinpaifang.png" mode="aspectFit"></image>
			</view>
			<view class="item-detail" style="background-color: #F2FAFE;" @click="goForm('02')">
				<view class="detail-left-box">
					<view class="left-top">
						<image src="@/static/mine/auth/dian.png" mode="aspectFit"></image>
						<text>代运营公司</text>
					</view>
					<view class="left-bottom">如果你所在的公司需要推广其他公司的产品，请选择“代运营公司”</view>
				</view>
				<image class="detail-right-img" src="@/static/mine/auth/gognsi.png" mode="aspectFit"></image>
			</view>
			<view class="item-detail" style="background-color: #F8F4FF;" @click="goForm('03')">
				<view class="detail-left-box">
					<view class="left-top">
						<image src="@/static/mine/auth/dian.png" mode="aspectFit"></image>
						<text>个人PR</text>
					</view>
					<view class="left-bottom">如果你是以个人名义推广其他公司的产品，请选择“个人PR”</view>
				</view>
				<image class="detail-right-img" src="@/static/mine/auth/geren.png" mode="aspectFit"></image>
			</view>
			<view class="item-detail" style="background-color: #F8F4FF;" @click="goForm('05')">
				<view class="detail-left-box">
					<view class="left-top">
						<image src="@/static/mine/auth/dian.png" mode="aspectFit"></image>
						<text>转发PR</text>
					</view>
					<view class="left-bottom">如果你是以个人名义推广其他公司的产品，请选择“转发PR”</view>
				</view>
				<image class="detail-right-img" src="@/static/mine/auth/geren.png" mode="aspectFit"></image>
			</view>
			<view class="item-detail" style="background-color: #FEF8F3;" @click="goForm('04')">
				<view class="detail-left-box">
					<view class="left-top">
						<image src="@/static/mine/auth/dian.png" mode="aspectFit"></image>
						<text>电商</text>
					</view>
					<view class="left-bottom">如果你是淘宝/天猫/京东等电商商家，想推广自己店铺的产品，请选择“电商”</view>
				</view>
				<image class="detail-right-img" src="@/static/mine/auth/dianshang.png" mode="aspectFit"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import navigationBarVue from '@/components/navigation/navigationBar.vue';
	export default {
		components: {
			navigationBarVue
		},
		data() {
			return {

			}
		},
		methods: {
			goForm(value) {
				this.$tab.navigateTo('/pages/mine/auth/auth-form?key=' + value)
			}
		}
	}
</script>

<style lang="scss">
	.auth-choose-box {
		padding-top: calc(90rpx + var(--status-bar-height));
		border-top: 1rpx solid #F4F4F4;
		background-color: white;
		width: 100%;
		color: #363636;
		font-size: 30rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: self-start;
		justify-content: center;
		position: relative;

		.choose-detail {
			border-top: 1rpx solid #F4F4F4;
			height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 95rpx);
			overflow-y: scroll;
			width: 100%;
			padding: 20rpx 30rpx;
			background-color: white;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: self-start;
			justify-content: start;
			position: relative;

			.item-title {
				padding-bottom: 20rpx;
				font-weight: bold;
				background-image: url('/static/mine/auth/xiantiao.png');
				background-repeat: no-repeat;
				background-position: bottom right;
				background-size: 43% 60%;
			}

			.item-detail {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: start;
				margin-top: 20rpx;
				padding: 30rpx;
				border-radius: 20rpx;

				.detail-left-box {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: start;
					padding-right: 20rpx;

					.left-top {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: start;
						margin-bottom: 20rpx;

						image {
							width: 30rpx;
							height: 30rpx;
						}

						text {
							margin-left: 10rpx;
							font-weight: bold;
							font-size: 34rpx;
						}
					}

					.left-bottom {
						font-size: 26rpx;
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: start;
					}
				}

				.detail-right-img {
					width: 180rpx;
					height: 180rpx;
					margin-right: 30rpx;
				}
			}
		}
	}
</style>