公司小程序
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.

256 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>