745 lines
17 KiB
Vue
745 lines
17 KiB
Vue
|
<template>
|
|||
|
|
<view class="me_container" v-cloak v-if="userInfos.token">
|
|||
|
|
<view class="m_c_header">
|
|||
|
|
<view class="header_top">
|
|||
|
|
<view class="h_t_left">
|
|||
|
|
<view class="avt">
|
|||
|
|
<image :src="userInfos.avatar" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="identity">
|
|||
|
|
<view class="" @tap="modalUserName = true">{{userInfos.nickname}}</view>
|
|||
|
|
<view style="margin-top: 20rpx;font-size: 28rpx;">身份資格：{{userInfos.level_text.title}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="h_t_right" @click="toShenfen">
|
|||
|
|
升級
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view style="font-size: 20px;margin-top: 20px;">身份資格</view> -->
|
|||
|
|
<!-- 遊客 -->
|
|||
|
|
<!-- <view v-if="userInfos.level_text.title" style="
|
|||
|
|
font-size: 29px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
">{{userInfos.level_text.title}}</view> -->
|
|||
|
|
<!-- 第二部分 -->
|
|||
|
|
<!-- <view v-if="userInfos.area && userInfos.level && userInfos.level > 2 && userInfos.area.slice(0,2) != '99'">
|
|||
|
|
{{ "("+chineseCity(userInfos.area)+")" }}</view>
|
|||
|
|
<view v-if="userInfos.area && userInfos.area.slice(0,2) == '99'">(直營代理)</view>
|
|||
|
|
<view class="btnSj" @tap="toShenfen">升級</view> -->
|
|||
|
|
<!-- 名字錢包地址 -->
|
|||
|
|
<!-- <view class="user_name" v-if="userInfos.nickname" @tap="modalUserName = true">{{userInfos.nickname}}</view> -->
|
|||
|
|
<!-- <view class="user_adress" v-if="userInfos.wallet.address" @tap="copyAdress(userInfos.wallet.address)">{{userMoneyAdressOptions(userInfos.wallet.address)}}</view> -->
|
|||
|
|
</view>
|
|||
|
|
<!-- 內容 -->
|
|||
|
|
<view style="padding: 30rpx;">
|
|||
|
|
<view style="background-color: #3B3D83;border-radius: 30rpx 30rpx 0 0 ;">
|
|||
|
|
<scroll-view scroll-y="true" class="m_c_footer">
|
|||
|
|
<view style="padding:0 30rpx;">
|
|||
|
|
<view class="listBox" v-for="(item,index) in srcollList" :key="index"
|
|||
|
|
@tap="listClick(item.title)">
|
|||
|
|
<view class="l_left">
|
|||
|
|
<view class="l_icon">
|
|||
|
|
<image :src="item.img" mode="widthFix"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="l_title" style="margin-left: 30rpx;">{{item.title}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="l_right"><u-icon name="arrow-right" color="#FFF" size="16"></u-icon></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 退出登錄 -->
|
|||
|
|
<view class="outlogin">
|
|||
|
|
<view class="out_cent" @click="outlogin">
|
|||
|
|
<view class="out_img">
|
|||
|
|
<image src="/static/icon/uid.png" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="out">
|
|||
|
|
退出登錄
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 測試舔磚 -->
|
|||
|
|
<!-- 用戶名彈窗 -->
|
|||
|
|
<view class="modal" v-if="modalUserName">
|
|||
|
|
<view class="modal-content">
|
|||
|
|
<view class="modal-header">
|
|||
|
|
<view class="zz_content">請輸入新用戶名</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="modal-body">
|
|||
|
|
<view class="modal-item">
|
|||
|
|
<text class="modal-label">用戶名:</text>
|
|||
|
|
<input v-model="newUserName" type="text" style="flex: 1;"/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="modal-footer">
|
|||
|
|
<button class="modal-button cancel" @tap="modalUserName = false">取消</button>
|
|||
|
|
<button class="modal-button confirm" @tap="submitUserName">確定</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 密碼彈窗 -->
|
|||
|
|
<view class="modal" v-if="modalName">
|
|||
|
|
<view class="modal-content">
|
|||
|
|
<view class="modal-header">
|
|||
|
|
<view class="zz_content">請輸入驗證信息</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="modal-body">
|
|||
|
|
<view class="modal-item zf_mod_item">
|
|||
|
|
<text class="modal-label">郵箱:</text>
|
|||
|
|
<view class="">{{userInfos.email}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="modal-item zf_mod_item">
|
|||
|
|
<text class="modal-label">支付密碼:</text>
|
|||
|
|
<u--input color="#fff" style="width: 70%;" :value="zhifuMima" :password="showPassword"
|
|||
|
|
border="none" @input="handleInput"></u--input>
|
|||
|
|
<img :src="!showPassword ? showpwdImg : hidepwdImg" @tap="changePassword"
|
|||
|
|
style="width: 50rpx;height: 50rpx;"></img>
|
|||
|
|
</view>
|
|||
|
|
<view class="modal-item zf_mod_item">
|
|||
|
|
<text class="modal-label">郵箱驗證碼:</text>
|
|||
|
|
<u--input color="#fff" style="width: 70%;" v-model="emailCode" border="none"></u--input>
|
|||
|
|
<view class="sendcode" @click="tosendemail">{{emaiTip}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="modal-item zf_mod_item">
|
|||
|
|
<text class="modal-label">谷歌驗證碼:</text>
|
|||
|
|
<u--input color="#fff" style="width: 70%;" v-model="googleCode" border="none"></u--input>
|
|||
|
|
<view class="sendcode" @click="googleemail">{{googleTip}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="modal-footer">
|
|||
|
|
<button class="modal-button cancel" @tap="modalName = false">取消</button>
|
|||
|
|
<button class="modal-button confirm" @tap="modalBtn">確定</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 助記詞私鑰彈窗 -->
|
|||
|
|
<view class="modal" v-if="modalNameZj">
|
|||
|
|
<view class="modal-content">
|
|||
|
|
<view class="modal-header">
|
|||
|
|
<view class="zz_content" v-if="exportType == 1 || exportType == 2">點擊可複製：</view>
|
|||
|
|
<view class="zz_content" v-if="exportType == 3">關聯錢包</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="modal-body" v-if="exportType == 1" @tap="copeZhuji(userMnemonic)" style="
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
">
|
|||
|
|
助記詞：{{userMnemonic}}
|
|||
|
|
</view>
|
|||
|
|
<view class="modal-body" v-if="exportType == 2" @tap="copeZhuji(userPrivateKey)" style="
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
">
|
|||
|
|
私鑰：{{privateKeyOptions(userPrivateKey)}}
|
|||
|
|
</view>
|
|||
|
|
<view class="modal-body" v-if="exportType == 3">
|
|||
|
|
<view class="modal-item">
|
|||
|
|
<text class="modal-label">關聯地址:</text>
|
|||
|
|
<text class="modal-value" style="text-align: left;">
|
|||
|
|
<input v-model="acconToAdress" type="text" style="color: #fff;" />
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="modal-footer">
|
|||
|
|
<button class="modal-button cancel" @tap="modalNameZj = false">取消</button>
|
|||
|
|
<button class="modal-button confirm" @tap="modalNameZj = false">確定</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
publicjiemi
|
|||
|
|
} from "@/common/jiemi.js";
|
|||
|
|
import area from "@/components/mpvue-citypicker/city-data/area.js";
|
|||
|
|
import city from "@/components/mpvue-citypicker/city-data/city.js";
|
|||
|
|
import province from "@/components/mpvue-citypicker/city-data/province.js";
|
|||
|
|
import {
|
|||
|
|
_emailSend,
|
|||
|
|
_profile,
|
|||
|
|
_userInfos,
|
|||
|
|
_walletinfo
|
|||
|
|
} from "@/request/api.js";
|
|||
|
|
import MD5 from "blueimp-md5";
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
emailCode:"",
|
|||
|
|
googleCode:"",
|
|||
|
|
emaiTip:"發送",
|
|||
|
|
googleTip:"發送",
|
|||
|
|
acconToAdress: "",
|
|||
|
|
showPassword: true,
|
|||
|
|
showpwdImg: "static/icon/eye_on.png",
|
|||
|
|
hidepwdImg: "static/icon/eye_off.png",
|
|||
|
|
newUserName: "",
|
|||
|
|
modalUserName: false,
|
|||
|
|
exportType: "",
|
|||
|
|
allProvince: null,
|
|||
|
|
allCity: null,
|
|||
|
|
allArea: null,
|
|||
|
|
modalName: false,
|
|||
|
|
modalNameZj: false,
|
|||
|
|
zhifuMima: "",
|
|||
|
|
userInfos: {},
|
|||
|
|
userMnemonic: "",
|
|||
|
|
userPrivateKey: "",
|
|||
|
|
srcollList: [{
|
|||
|
|
title: "邀請好友",
|
|||
|
|
img: "/static/icon/tongxunlu.png"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "推薦客戶",
|
|||
|
|
img: "/static/icon/tuandui1.png"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "導出助記詞",
|
|||
|
|
img: "/static/icon/zhuciqi.png"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "導出私鑰",
|
|||
|
|
img: "/static/icon/yinsi.png"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "修改密碼",
|
|||
|
|
img: "/static/icon/qianbao.png"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "重置密碼",
|
|||
|
|
img: "/static/icon/reset.png"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
modalName: {
|
|||
|
|
handler(val) {
|
|||
|
|
if (val == false) {
|
|||
|
|
this.emailCode = "";
|
|||
|
|
this.googleCode = "";
|
|||
|
|
this.zhifuMima = "";
|
|||
|
|
this.emaiTip = "發送";
|
|||
|
|
this.googleTip = "發送";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
this.allProvince = province;
|
|||
|
|
this.allCity = city;
|
|||
|
|
this.allArea = area;
|
|||
|
|
},
|
|||
|
|
mounted(){
|
|||
|
|
this.getUserInfos();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
async tosendemail(){
|
|||
|
|
if (this.emaiTip == "發送") {
|
|||
|
|
let num = 60;
|
|||
|
|
let emaiTimer = setInterval(() => {
|
|||
|
|
this.emaiTip = num + 's';
|
|||
|
|
num--;
|
|||
|
|
if (num < 0) {
|
|||
|
|
this.emaiTip = "發送";
|
|||
|
|
clearInterval(emaiTimer)
|
|||
|
|
}
|
|||
|
|
}, 1000)
|
|||
|
|
let res = await _emailSend({
|
|||
|
|
email: this.userInfos.email,
|
|||
|
|
event: "check"
|
|||
|
|
});
|
|||
|
|
if (res.code === 1) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '發送成功',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
}else{
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg,
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
googleemail() {
|
|||
|
|
let num = 60;
|
|||
|
|
let googleTimer = setInterval(() => {
|
|||
|
|
this.googleTip = num + 's';
|
|||
|
|
num--;
|
|||
|
|
if (num < 0) {
|
|||
|
|
this.googleTip = "發送";
|
|||
|
|
clearInterval(googleTimer)
|
|||
|
|
}
|
|||
|
|
}, 1000)
|
|||
|
|
},
|
|||
|
|
privateKeyOptions(data) {
|
|||
|
|
let start = data.substring(0, 26);
|
|||
|
|
let end = data.substring(data.length - 4);
|
|||
|
|
let middle = "…";
|
|||
|
|
let finalString = start + middle + end;
|
|||
|
|
return finalString
|
|||
|
|
},
|
|||
|
|
changePassword() {
|
|||
|
|
this.showPassword = !this.showPassword;
|
|||
|
|
},
|
|||
|
|
async submitUserName() {
|
|||
|
|
if (!this.newUserName) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: "請輸入新用戶名",
|
|||
|
|
icon: "none"
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
const params = {
|
|||
|
|
nickname: this.newUserName,
|
|||
|
|
newpassword: "",
|
|||
|
|
newpaykey: ""
|
|||
|
|
};
|
|||
|
|
let res = await _profile(params);
|
|||
|
|
if (res.code === 1) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '修改成功',
|
|||
|
|
icon: "success",
|
|||
|
|
duration: 1000
|
|||
|
|
})
|
|||
|
|
this.newUserName = "";
|
|||
|
|
this.modalUserName = false;
|
|||
|
|
this.getUserInfos();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
copyAdress(adress) {
|
|||
|
|
uni.setClipboardData({
|
|||
|
|
data: adress,
|
|||
|
|
success: () => {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '複製成功',
|
|||
|
|
icon: 'success'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
chineseCity(cityCode) {
|
|||
|
|
let _that = this;
|
|||
|
|
let pppp = "";
|
|||
|
|
let qqqq = "";
|
|||
|
|
if (cityCode) {
|
|||
|
|
let a = cityCode.substring(0, 2);
|
|||
|
|
let b = cityCode.substring(0, 4);
|
|||
|
|
_that.allProvince.map((item, index) => {
|
|||
|
|
if (item.value == a) {
|
|||
|
|
pppp = item.label;
|
|||
|
|
if (b == "00") {
|
|||
|
|
return
|
|||
|
|
} else {
|
|||
|
|
_that.allCity[index].map((item1, index1) => {
|
|||
|
|
if (item1.value == b) {
|
|||
|
|
_that.allArea[index][index1].map((item2, index2) => {
|
|||
|
|
if (item2.value == cityCode) {
|
|||
|
|
qqqq = item2.label;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
return (pppp + qqqq)
|
|||
|
|
} else {
|
|||
|
|
return ""
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async getUserInfos() {
|
|||
|
|
let res = await _userInfos();
|
|||
|
|
if (res.code === 1) {
|
|||
|
|
this.userInfos = res.data.userinfo;
|
|||
|
|
console.log('userInfos',this.userInfos);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
copeZhuji(address) {
|
|||
|
|
uni.setClipboardData({
|
|||
|
|
data: address,
|
|||
|
|
success: () => {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '複製成功',
|
|||
|
|
icon: 'success'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
async modalBtn() {
|
|||
|
|
if (!this.zhifuMima || !this.emailCode || !this.googleCode) return uni.showToast({
|
|||
|
|
title: '請填寫正確資訊',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
const params = {
|
|||
|
|
code: this.emailCode,
|
|||
|
|
googlecode: this.googleCode,
|
|||
|
|
paykey: MD5(this.zhifuMima + (Math.floor(Date.now() / 1000))),
|
|||
|
|
timestamp: Math.floor(Date.now() / 1000),
|
|||
|
|
}
|
|||
|
|
let res = await _walletinfo(params);
|
|||
|
|
if (res.code === 1) {
|
|||
|
|
this.modalName = false;
|
|||
|
|
let jiemiinfos = await publicjiemi(this.exportType, this.zhifuMima, this.userInfos.wallet.address);
|
|||
|
|
console.log('sssss')
|
|||
|
|
this.exportType == 1 ? this.userMnemonic = jiemiinfos : this.userPrivateKey = jiemiinfos;
|
|||
|
|
this.modalNameZj = true;
|
|||
|
|
this.emailCode = "";
|
|||
|
|
this.googleCode = "";
|
|||
|
|
this.zhifuMima = "";
|
|||
|
|
this.emaiTip = "發送";
|
|||
|
|
this.googleTip = "發送";
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg,
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
toShenfen() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: "/pages/myProxy/myProxy"
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
userMoneyAdressOptions(data) {
|
|||
|
|
let start = data.substring(0, 4);
|
|||
|
|
let end = data.substring(data.length - 4);
|
|||
|
|
let middle = "…";
|
|||
|
|
let finalString = start + middle + end;
|
|||
|
|
return finalString
|
|||
|
|
},
|
|||
|
|
listClick(title) {
|
|||
|
|
switch (title) {
|
|||
|
|
case "邀請好友":
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: "/pages/myuser/myuser"
|
|||
|
|
})
|
|||
|
|
break;
|
|||
|
|
case "推薦客戶":
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/mymoney/allDetail?detailLabel=${title}`
|
|||
|
|
})
|
|||
|
|
break;
|
|||
|
|
case "修改關聯錢包":
|
|||
|
|
this.exportInfos(3);
|
|||
|
|
break;
|
|||
|
|
case "導出助記詞":
|
|||
|
|
this.exportInfos(1);
|
|||
|
|
break;
|
|||
|
|
case "導出私鑰":
|
|||
|
|
this.exportInfos(2);
|
|||
|
|
break;
|
|||
|
|
case "修改密碼":
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: "/pages/me/editUserInfo"
|
|||
|
|
})
|
|||
|
|
break;
|
|||
|
|
case "重置密碼":
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: "/pages/me/resetPwd"
|
|||
|
|
})
|
|||
|
|
break;
|
|||
|
|
// case "退出登錄":
|
|||
|
|
// uni.removeStorageSync("token");
|
|||
|
|
// uni.reLaunch({
|
|||
|
|
// url: "/pages/login/login"
|
|||
|
|
// })
|
|||
|
|
// break;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 退出登錄
|
|||
|
|
outlogin() {
|
|||
|
|
uni.removeStorageSync("token");
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url: "/pages/login/login"
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//導出助記詞私鑰
|
|||
|
|
exportInfos(n) {
|
|||
|
|
this.modalName = true;
|
|||
|
|
this.exportType = n;
|
|||
|
|
},
|
|||
|
|
handleInput(event) {
|
|||
|
|
this.zhifuMima = event;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.me_container {
|
|||
|
|
border-top: 1px solid dimgrey;
|
|||
|
|
width: 100vw;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background-color: #000033;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
|
|||
|
|
.m_c_header {
|
|||
|
|
height: 10%;
|
|||
|
|
color: #fff;
|
|||
|
|
// display: flex;
|
|||
|
|
// flex-direction: column;
|
|||
|
|
// align-items: center;
|
|||
|
|
padding: 0 15px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
>view {
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user_name {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 15px;
|
|||
|
|
top: 20px;
|
|||
|
|
font-size: 10px;
|
|||
|
|
background-color: #4e538b;
|
|||
|
|
padding: 5px 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user_adress {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 15px;
|
|||
|
|
top: 50px;
|
|||
|
|
font-size: 10px;
|
|||
|
|
background-color: #4e538b;
|
|||
|
|
padding: 5px 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btnSj {
|
|||
|
|
background-color: #4caf50;
|
|||
|
|
width: 40%;
|
|||
|
|
height: 30px;
|
|||
|
|
line-height: 30px;
|
|||
|
|
text-align: center;
|
|||
|
|
border-radius: 15px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 新加
|
|||
|
|
.header_top {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 80rpx;
|
|||
|
|
|
|||
|
|
.h_t_left {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 120rpx;
|
|||
|
|
|
|||
|
|
.avt {
|
|||
|
|
width: 120rpx;
|
|||
|
|
height: 120rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.identity {
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.h_t_right {
|
|||
|
|
width: 135rpx;
|
|||
|
|
height: 55rpx;
|
|||
|
|
background-color: #263773;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.m_c_footer {
|
|||
|
|
height: calc(75% - 40rpx);
|
|||
|
|
margin-top: 40rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
.listBox {
|
|||
|
|
background-color: #3B3D83;
|
|||
|
|
height: 120rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
color: #fff;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border-bottom: 2rpx solid #534a84;
|
|||
|
|
|
|||
|
|
.l_left {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal {
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
top: 0;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
z-index: 999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-content {
|
|||
|
|
background-color: #b6b5c8;
|
|||
|
|
border-radius: 20px 20px 0 0;
|
|||
|
|
padding: 20px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
width: 100%;
|
|||
|
|
animation: slideUp 0.3s ease-out;
|
|||
|
|
box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes slideUp {
|
|||
|
|
from {
|
|||
|
|
transform: translateY(100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
transform: translateY(0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-title {
|
|||
|
|
font-size: 20px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-close {
|
|||
|
|
font-size: 24px;
|
|||
|
|
color: #999;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-body {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-item {
|
|||
|
|
display: flex;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
padding-bottom: 10px;
|
|||
|
|
border-bottom: 1px solid #f0f0f0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.zf_mod_item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-label {
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 14px;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-value {
|
|||
|
|
flex: 1;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 14px;
|
|||
|
|
word-break: break-all;
|
|||
|
|
text-align: right;
|
|||
|
|
overflow: hidden;
|
|||
|
|
/* 超出部分隱藏 */
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
/* 超出部分顯示省略號 */
|
|||
|
|
white-space: nowrap;
|
|||
|
|
/* 不換行 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-footer {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-button {
|
|||
|
|
width: 48%;
|
|||
|
|
height: 44px;
|
|||
|
|
border-radius: 22px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
border: none;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-button.cancel {
|
|||
|
|
background-color: #f0f0f0;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-button.cancel:hover {
|
|||
|
|
background-color: #e0e0e0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-button.confirm {
|
|||
|
|
background-color: #4CAF50;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-button.confirm:hover {
|
|||
|
|
background-color: #45a049;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 退出登錄
|
|||
|
|
.outlogin {
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
|
|||
|
|
.out_cent {
|
|||
|
|
background-color: #515496;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 110rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
|
|||
|
|
.out_img {
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|