161 lines
4.5 KiB
Vue
161 lines
4.5 KiB
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: #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> |