推广小程序前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

246 lines
5.5 KiB

<template>
<view class="">
<view class="head-box"></view>
<uv-navbar autoBack title="主理人认证" leftIconColor="#fff" bgColor="transparent" height="100rpx" :titleStyle="{color:'#fff'}"></uv-navbar>
<view class="content">
<view class="user-box">
<uv-avatar src="https://via.placeholder.com/200x200.png/2878ff" size="98rpx" shape="circle"></uv-avatar>
<view class="user-msg">
<view class="user-msg-top">
<view>点击授权登录</view>
<view class="level-box">普通用户</view>
</view>
<view class="id-box">
<text>ID:000001</text>
<text class="copy-text">复制</text>
</view>
</view>
</view>
<view class="base-msg">
<view class="title-box">基础信息</view>
<view class="form-box">
<view class="form-box-line">
<view class="label-box">真实姓名</view>
<view class="value-box">
<uv-input placeholder="请输入真实姓名" v-model="info.name" border="none" color="#fff"></uv-input>
</view>
</view>
<view class="form-box-line">
<view class="label-box">联系方式</view>
<view class="value-box">
<uv-input placeholder="请输入联系方式" v-model="nfo.phone" border="none" color="#fff"></uv-input>
</view>
</view>
<view class="form-box-line">
<view class="label-box">身份证号</view>
<view class="value-box">
<uv-input placeholder="请输入身份证号" v-model="nfo.idCard" border="none" color="#fff"></uv-input>
</view>
</view>
<view class="form-box-line">
<view class="label-box">简历附件</view>
<view class="value-box">
<uv-input placeholder="请输入真实姓名" v-model="nfo.jianli" border="none" color="#fff"></uv-input>
<view class="upload-btn">上传简历</view>
</view>
</view>
</view>
</view>
<view class="xie-box">
<view class="title-box">阅读并同意协议</view>
<view class="xie-box-val">
<view class="val-text">
<view>我已经阅读并同意</view>
<view class="xieyi-val">《主理人协议》</view>
</view>
<view class="choose-box" @click="isAgree = !isAgree">
<view class="normol-box" v-if="!isAgree"></view>
<image src="@/static/image/member/choose-icon.png" mode="widthFix" v-else></image>
</view>
</view>
</view>
</view>
<view class="btn-box">
<uv-button text="保存" color="#381615" shape="circle" :customStyle="btnCustomStyle"></uv-button>
</view>
</view>
</template>
<script>
export default{
data() {
return {
isAgree:false,
btnCustomStyle:{
color:'#FF5858'
},
info:{
name:'',
phone:'',
idCard:'',
jianli:''
}
}
}
}
</script>
<style lang="scss">
page {
background-color: #060504;
}
</style>
<style lang="scss" scoped>
.head-box {
background: url('@/static/image/nav-bg.png') no-repeat;
background-size: 100% 100%;
width: 100%;
height: 534rpx;
position: absolute;
}
.content {
padding: 0 30rpx;
padding-top: calc(var(--status-bar-height) + 100rpx);
.user-box {
display: flex;
align-items: center;
margin-bottom: 74rpx;
.user-msg {
margin-left: 20rpx;
.user-msg-top {
font-weight: 600;
font-size: 32rpx;
color: #E6E6E6;
display: flex;
align-items: center;
.level-box {
width: 108rpx;
height: 31rpx;
background: RGBA(40, 19, 4, 1);
border-radius: 16rpx;
font-weight: 400;
font-size: 20rpx;
color: #FF9C00;
text-align: center;
margin-left: 14rpx;
}
}
.id-box {
color: #999999;
font-size: 22rpx;
margin-top: 20rpx;
.copy-text {
font-weight: 400;
font-size: 22rpx;
color: #E6E6E6;
margin-left: 18rpx;
}
}
}
}
.title-box {
display: inline-block;
font-weight: bold;
font-size: 29rpx;
color: #FFFFFF;
position: relative;
z-index: 2;
&::after{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 9rpx;
background: #FF2828;
border-radius: 4rpx 4rpx 4rpx 4rpx;
opacity: 0.2;
z-index: 1;
}
}
.base-msg {
.form-box {
background: #1B1713;
border-radius: 27rpx;
padding:0 40rpx;
margin-top: 20rpx;
.form-box-line {
height: 112rpx;
border-bottom: 1px solid #403D3A;
display: flex;
align-items: center;
&:last-child {
border: none;
}
.label-box {
font-weight: 500;
font-size: 29rpx;
color: #FFFFFF;
margin-right: 34rpx;
}
.value-box {
display: flex;
align-items: center;
justify-content: space-between;
.upload-btn {
font-weight: 400;
font-size: 28rpx;
color: #FF5858;
}
}
}
}
}
.xie-box {
margin-top:37rpx;
.xie-box-val {
margin-top: 25rpx;
height: 116rpx;
background: #1B1713;
border-radius: 27rpx 27rpx 27rpx 27rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 36rpx;
.val-text {
font-weight: 400;
font-size: 25rpx;
color: #FFFFFF;
display: flex;
align-items: center;
.xieyi-val {
color: #FF5858;
}
}
.choose-box {
.normol-box {
width: 31rpx;
height: 31rpx;
border: 1px solid #fff;
border-radius: 5rpx;
}
image {
width: 31rpx;
height: 31rpx;
}
}
}
}
}
.btn-box {
position: fixed;
bottom: 70rpx;
left: 0;
right: 0;
padding: 0 40rpx;
}
</style>