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.
255 lines
5.3 KiB
255 lines
5.3 KiB
<!--我的-->
|
|
<template>
|
|
<view class="main">
|
|
<view class="back"/>
|
|
<image class="top" src="../../static/images/wode/bg_3.png" mode="widthFix">
|
|
<u-navbar
|
|
title="个人中心"
|
|
:safeAreaInsetTop="true"
|
|
:fixed="true"
|
|
bgColor="#FFFFFF00"
|
|
:isShowLeftIcon="false"
|
|
/>
|
|
<view class="top_head_area">
|
|
<view class="head_background">
|
|
<image class="head" src="../../static/images/wode/touxaingkuang.png" mode="widthFix"/>
|
|
</view>
|
|
<text class="nickname">登录 | 注册</text>
|
|
</view>
|
|
<view class="walletBox">
|
|
<text class="wallet_title">钱包</text>
|
|
<image class="eye_close" src="../../static/images/wode/bukejian.png" mode="widthFix"></image>
|
|
<view class="wallet_number_box">
|
|
<text class="wallet_number">******</text>
|
|
</view>
|
|
<u-icon name="arrow-right" customStyle="width: 14rpx;height: 25rpx;position: absolute;top: 53rpx;right: 30rpx;"/>
|
|
</view>
|
|
</image>
|
|
<view class="body">
|
|
<view v-for="(item,index) in items" :key="index" class="item">
|
|
<image :src="item.icon" class="item_icon" />
|
|
<view class="item_title_box">
|
|
<text class="item_title">{{item.title}}</text>
|
|
<text v-if="item.message != null" class="item_message">{{item.message}}</text>
|
|
</view>
|
|
<u-icon name="arrow-right" customStyle="width: 12rpx;height: 21rpx;position: absolute;top: 45rpx;right: 20rpx;"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:"Mine",
|
|
data() {
|
|
return {
|
|
items : [
|
|
{
|
|
title : "实名认证",
|
|
icon : "../../static/images/wode/shiming.png",
|
|
message : "提现必须进行实名认证",
|
|
},
|
|
{
|
|
title : "在线客服",
|
|
icon : "../../static/images/wode/kefu2.png",
|
|
message : null,
|
|
},
|
|
{
|
|
title : "帮助",
|
|
icon : "../../static/images/wode/bangzhu.png",
|
|
message : null,
|
|
},
|
|
],
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.back{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background:#F6F6F6
|
|
}
|
|
.main{
|
|
position: relative;
|
|
}
|
|
.top{
|
|
position: relative;
|
|
width: 750rpx;
|
|
height: 495rpx;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
//background-color: #0081FF;
|
|
}
|
|
///头像-名字-登录|注册区域
|
|
.top_head_area{
|
|
width: 100%;
|
|
height: 150rpx;
|
|
//background-color: #1CBBB4;
|
|
position: absolute;
|
|
top: 200rpx;
|
|
}
|
|
///头像背景是一个白色的圆
|
|
.head_background{
|
|
width: 138rpx;
|
|
height: 138rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 50%;
|
|
opacity: 1;
|
|
position: absolute;
|
|
left: 24rpx;
|
|
top: 6rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
///头像的大小
|
|
.head{
|
|
width: 125rpx;
|
|
height: 125rpx;
|
|
}
|
|
///昵称或者登录|注册
|
|
.nickname{
|
|
height: 46rpx;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
opacity: 1;
|
|
position: absolute;
|
|
left: 182rpx;
|
|
top: 52rpx;
|
|
}
|
|
//本来是导航栏的，但是那玩意儿好像不支持，所以现在没用
|
|
.title{
|
|
width: 144rpx;
|
|
height: 50rpx;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
opacity: 1;
|
|
position: absolute;
|
|
top: 100rpx;
|
|
left: 303rpx;
|
|
}
|
|
///钱包外包围框
|
|
.walletBox{
|
|
width: 702rpx;
|
|
height: 132rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 3rpx 6rpx rgba(0, 0, 0, 0.06);
|
|
opacity: 1;
|
|
border-radius: 20rpx;
|
|
position: relative;
|
|
left: 24rpx;
|
|
bottom: 96rpx;
|
|
}
|
|
.wallet_title{
|
|
width: 64rpx;
|
|
height: 45rpx;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
opacity: 1;
|
|
position: absolute;
|
|
left: 30rpx;
|
|
top: 44rpx;
|
|
}
|
|
///闭着的眼睛的图片
|
|
.eye_close{
|
|
width: 31rpx;
|
|
height: 15rpx;
|
|
position: absolute;
|
|
left: 110rpx;
|
|
top: 59rpx;
|
|
}
|
|
///钱包的数字的外包围，为了让钱包的数字可以居中显示
|
|
.wallet_number_box{
|
|
position: absolute;
|
|
text-align: center;
|
|
height: 45rpx;
|
|
width: 400rpx;
|
|
top: 48rpx;
|
|
left: 151rpx;
|
|
text-align: center;
|
|
//background-color: #9000FF;
|
|
}
|
|
///钱包数字
|
|
.wallet_number{
|
|
height: 45rpx;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
line-height: 45rpx;
|
|
opacity: 1;
|
|
}
|
|
//下方的实名认证那些玩意儿
|
|
.body{
|
|
width: 702rpx;
|
|
height: 340rpx;
|
|
padding-top: 5rpx;
|
|
padding-bottom: 5rpx;
|
|
//background-color: #2979FF;
|
|
position: relative;
|
|
left: 24rpx;
|
|
top: -56rpx;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
///一行的内容，比如 实名认证，在线客服的外包围框
|
|
.item{
|
|
width: 100%;
|
|
height: 110rpx;
|
|
//background-color: #1CBBB4;
|
|
border-radius: 20rpx;
|
|
position: relative;
|
|
}
|
|
///每一行的图标的大小，位置等
|
|
.item_icon{
|
|
width: 33rpx;
|
|
height: 33rpx;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 39rpx;
|
|
}
|
|
///为了让每一行的标题和下方的message可以显示正确，这个是他们的外包围
|
|
.item_title_box{
|
|
height: 100rpx;
|
|
width: 600rpx;
|
|
//background-color: #2979FF;
|
|
position: relative;
|
|
left: 50rpx;
|
|
top: 5rpx;
|
|
}
|
|
///每一行的标题，例如 实名认证
|
|
.item_title{
|
|
height: 40rpx;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
opacity: 1;
|
|
position: absolute;
|
|
left: 0rpx;
|
|
top: 30rpx;
|
|
}
|
|
///每一行的提示信息，例如：提现必须进行实名认证
|
|
.item_message{
|
|
height: 33rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
opacity: 1;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 2rpx;
|
|
}
|
|
</style>
|
|
|