xiaochengxu/components/Mine/Mine.vue

<!--我的-->
<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>