|
|
@@ -0,0 +1,343 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <ujp-navbar title="个人资料"></ujp-navbar>
|
|
|
+
|
|
|
+ <!-- 个人信息 -->
|
|
|
+ <view class="userCell">
|
|
|
+ <view class="title">
|
|
|
+ 个人信息
|
|
|
+ </view>
|
|
|
+ <!-- 头像 -->
|
|
|
+ <view class="userCell-item" >
|
|
|
+ <view class="userCell-title oldTextjp" oldstyle="font-size: 20px;">
|
|
|
+ <text class="user" ><img style="visibility: middle;;" src="../../assets/img/account-circle-fill.svg" alt=""></text>
|
|
|
+ <p>头像</p>
|
|
|
+ </view>
|
|
|
+ <view class="userCell-content">
|
|
|
+ <view class="value">
|
|
|
+
|
|
|
+ <u-avatar class="avatar" :src="src" size="80">
|
|
|
+ <img src="" alt="">
|
|
|
+
|
|
|
+ </u-avatar>
|
|
|
+ <view class="box">
|
|
|
+ <img class="camera" src="../../assets/img/camera-fill.svg" alt="">
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="48"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 昵称 -->
|
|
|
+ <view class="userCell-item" >
|
|
|
+ <view class="userCell-title oldTextjp" oldstyle="font-size: 20px;">
|
|
|
+ <text class="user" ><img style="visibility: middle;;" src="../../assets/img/edit-box-fill.svg" alt=""></text>
|
|
|
+ <p>昵称</p>
|
|
|
+ </view>
|
|
|
+ <view class="userCell-content" @click="show=true">
|
|
|
+ <view class="value black">
|
|
|
+ 萌萌哒
|
|
|
+ </view>
|
|
|
+ <u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="48"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 生日 -->
|
|
|
+ <view class="userCell-item" >
|
|
|
+ <view class="userCell-title oldTextjp" oldstyle="font-size: 20px;">
|
|
|
+ <text class="user" ><img style="visibility: middle;;" src="../../assets/img/cake-2-fill.svg" alt=""></text>
|
|
|
+ <p>生日</p>
|
|
|
+ </view>
|
|
|
+ <view class="userCell-content">
|
|
|
+ <view class="value">
|
|
|
+ 请选择
|
|
|
+ </view>
|
|
|
+ <u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="48"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <u-line color="#F2F2F2 100%" length="87.2%" margin="8px auto 0" />
|
|
|
+ <!-- 账户与安全 -->
|
|
|
+ <view class="userCell">
|
|
|
+ <view class="title">
|
|
|
+ 账户与安全
|
|
|
+ </view>
|
|
|
+ <!-- 更换手机号 -->
|
|
|
+ <view class="userCell-item" >
|
|
|
+ <view class="userCell-title oldTextjp" oldstyle="font-size: 20px;">
|
|
|
+ <text class="user" ><img style="visibility: middle;;" src="../../assets/img/smartphone-fill.svg" alt=""></text>
|
|
|
+ <p>更换手机号</p>
|
|
|
+ </view>
|
|
|
+ <view class="userCell-content">
|
|
|
+ <view class="value black">
|
|
|
+ 139****9333
|
|
|
+ </view>
|
|
|
+ <u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="48"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 实名认证 -->
|
|
|
+ <view class="userCell-item" >
|
|
|
+ <view class="userCell-title oldTextjp" oldstyle="font-size: 20px;">
|
|
|
+ <text class="user" ><img style="visibility: middle;;" src="../../assets/img/shield-user-fill.svg" alt=""></text>
|
|
|
+ <p>实名认证</p>
|
|
|
+ </view>
|
|
|
+ <view class="userCell-content">
|
|
|
+ <view class="value">
|
|
|
+ 未实名
|
|
|
+ </view>
|
|
|
+ <u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="48"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-line color="#F2F2F2 100%" length="87.2%" margin="8px auto 0" />
|
|
|
+ <!-- 更多操作 -->
|
|
|
+ <view class="userCell">
|
|
|
+ <view class="title">
|
|
|
+ 更多操作
|
|
|
+ </view>
|
|
|
+ <!-- 车辆信息 -->
|
|
|
+ <view class="userCell-item" >
|
|
|
+ <view class="userCell-title oldTextjp" oldstyle="font-size: 20px;">
|
|
|
+ <text class="user" ><img style="visibility: middle;;" src="../../assets/img/car-fill (1).svg" alt=""></text>
|
|
|
+ <p>车辆信息</p>
|
|
|
+ </view>
|
|
|
+ <view class="userCell-content">
|
|
|
+ <view class="value">
|
|
|
+ 未绑定
|
|
|
+ </view>
|
|
|
+ <u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="48"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 长辈模式 -->
|
|
|
+ <view class="userCell-item" >
|
|
|
+ <view class="userCell-title oldTextjp" oldstyle="font-size: 20px;">
|
|
|
+ <text class="user" ><img style="visibility: middle;;" src="../../assets/img/zoom-in-fill.svg" alt=""></text>
|
|
|
+ <p>长辈模式</p>
|
|
|
+ </view>
|
|
|
+ <view class="userCell-content">
|
|
|
+ <view class="value">
|
|
|
+
|
|
|
+ <view class="text black">
|
|
|
+ 字体更多 看得清
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <u-switch v-model="checked" active-color="#00E266" ></u-switch>
|
|
|
+ </view>
|
|
|
+ <u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="48"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 注销账号 -->
|
|
|
+ <view class="userCell-item" >
|
|
|
+ <view class="userCell-title oldTextjp" oldstyle="font-size: 20px;">
|
|
|
+ <text class="user" ><img style="visibility: middle;;" src="../../assets/img/spam-3-fill.svg" alt=""></text>
|
|
|
+ <p>注销账号</p>
|
|
|
+ </view>
|
|
|
+ <view class="userCell-content">
|
|
|
+ <view class="value black" style="font-size: 14px;">
|
|
|
+ 注销后无法恢复，请谨慎操作
|
|
|
+ </view>
|
|
|
+ <u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="48"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <view class="exit">
|
|
|
+ 退出账号
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 遮罩层 -->
|
|
|
+ <u-mask :show="show" @click="show = false" :zoom='false'>
|
|
|
+ <view class="warp">
|
|
|
+ <view class="rect" @tap.stop>
|
|
|
+ <p>修改昵称</p>
|
|
|
+
|
|
|
+ <textarea name="" id="" cols="30" rows="10">
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </textarea>
|
|
|
+ <img class="canc" src="../../assets/img/md-cancel Copy@3x.png" alt="">
|
|
|
+ <u-button type="success">保存</u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-mask>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ checked:false,
|
|
|
+ src: '',
|
|
|
+ show: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ page{
|
|
|
+ background-color: #fff;
|
|
|
+ padding-bottom: 67px;
|
|
|
+ }
|
|
|
+ .userCell{
|
|
|
+ .user{
|
|
|
+
|
|
|
+ img{
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ padding: 24px 20px 8px 20px;
|
|
|
+ font-size: 18px;
|
|
|
+ color: rgba(16, 16, 16, 100);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .userCell-item{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 16px;
|
|
|
+
|
|
|
+ .userCell-title{
|
|
|
+ font-size: 16px;
|
|
|
+ display: flex;
|
|
|
+ p{
|
|
|
+ margin-left: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 28px;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .userCell-content{
|
|
|
+ display: flex;
|
|
|
+ color: rgba(153, 153, 153, 100);
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 20px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .value{
|
|
|
+ display: flex;
|
|
|
+ .text{
|
|
|
+ line-height: 28px;
|
|
|
+ }
|
|
|
+ .circle{
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ .u-avatar{
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ .camera{
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ z-index: 9999;
|
|
|
+
|
|
|
+ }
|
|
|
+ .box{
|
|
|
+ border-radius: 999px;
|
|
|
+ height: 40px;
|
|
|
+ width: 40px;
|
|
|
+ position: relative;
|
|
|
+ background: url(@/assets/img/circle.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: 30% 10%;
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .u-switch{
|
|
|
+ width: 48px;
|
|
|
+ height: 24px;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ /deep/.u-switch__node{
|
|
|
+ width: 24px !important;
|
|
|
+ height: 24px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ span{
|
|
|
+ color:#999;
|
|
|
+
|
|
|
+ }
|
|
|
+ .add{
|
|
|
+ color:#999;
|
|
|
+ }
|
|
|
+ .black{
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+.exit{
|
|
|
+ color: rgba(238, 49, 56, 100);
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.warp {
|
|
|
+
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rect {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 24px 0;
|
|
|
+ p{
|
|
|
+ color: rgba(16, 16, 16, 100);
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ padding:0 24px;
|
|
|
+ }
|
|
|
+ textarea{
|
|
|
+ width: 87.2%;
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: rgba(229, 231, 234, 100);
|
|
|
+ margin: 12px auto 0;
|
|
|
+ height: 44px;
|
|
|
+ line-height: 44px !important;
|
|
|
+ padding: 0 8px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .canc{
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ position: absolute;
|
|
|
+ top: 70px;
|
|
|
+ right: 7vw;
|
|
|
+ }
|
|
|
+ .u-btn{
|
|
|
+ width: 89.2%;
|
|
|
+ color: rgba(255, 255, 255, 100);
|
|
|
+ font-size: 18px;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-top: 24px;
|
|
|
+ z-index: 99999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+</style>
|
