AiToyCXWx/pages/my.vue

<template>
	<view class="tabPage" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='我的' :showback="false" bgColor='transparent'></cus-header>
		<image class="topbg" src="http://106.54.209.120:8188/static/my_topbg.png"></image>
		<div class="info adffcacjc">
			<image src="http://106.54.209.120:8188/static/my_avatat_default.png"></image>
			<p>{{username}}</p>
		</div>
		<div class="items">
			<div class="item adfacjb" @tap="toTurn('/pagesMy/device')">
				<div class="il adfac">
					<image src="http://106.54.209.120:8188/static/my_device.png"></image>
					<text>我的设备</text>
				</div>
				<div class="ir">
					<u-icon name="arrow-right" color="#D3D2D2" size="34"></u-icon>
				</div>
			</div>
			<div class="item adfacjb" @tap="toTurn('/pagesMy/useBook')">
				<div class="il adfac">
					<image src="http://106.54.209.120:8188/static/my_book.png"></image>
					<text>用户使用手册</text>
				</div>
				<div class="ir">
					<u-icon name="arrow-right" color="#D3D2D2" size="34"></u-icon>
				</div>
			</div>
			<div class="item adfacjb" @tap="toTurn('/pagesMy/feedback')">
				<div class="il adfac">
					<image src="http://106.54.209.120:8188/static/myu_idea.png"></image>
					<text>意见反馈</text>
				</div>
				<div class="ir">
					<u-icon name="arrow-right" color="#D3D2D2" size="34"></u-icon>
				</div>
			</div>
			<div class="item adfacjb">
				<div class="il adfac">
					<image src="http://106.54.209.120:8188/static/my_version.png"></image>
					<text>版本</text>
				</div>
				<div class="ir">{{'1.0.0'}}</div>
			</div>
		</div>
		<div class="exit">退出登录</div>
		<cus-tabbar :tabbarIndex="2"></cus-tabbar>
	</view>
</template>

<script>
	import cusTabbar from '@/components/CusTabbar/index.vue'
	export default {
		components:{
			cusTabbar
		},
		data(){
			return {
				username:''
			}
		},
		onShow() {
			if(uni.getStorageSync('userInfo')){
				let username = JSON.parse(uni.getStorageSync('userInfo')).username;
				this.username = username.replace(/^(.{3})(?:\d+)(.{4})$/, "$1 **** $2");
			}
		},
		methods:{
			toTurn(url){
				if(!url) return
				uni.navigateTo({ url })
			}
		}
	}
</script>

<style scoped lang="less">
	.tabPage{
		background: #FFFFFF;
		padding: 0 30rpx 192rpx;
		box-sizing: border-box;
		
		.topbg{
			width: 100%;
			height: 720rpx;
			position: fixed;
			top: 0;
			left: 0;
		}
		
		.info{
			position: relative;
			margin-top: 68rpx;
			&>image{
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
			}
			p{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 48rpx;
				color: #111111;
				line-height: 32rpx;
				text-align: center;
				margin-top: 40rpx;
			}
		}
		
		.items{
			position: relative;
			margin-top: 93rpx;
			.item{
				width: 100%;
				padding: 39rpx 20rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECECEC;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
				.il{
					image{
						width: 36rpx;
						height: 36rpx;
					}
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #111111;
						line-height: 32rpx;
						margin-left: 34rpx;
					}
				}
				.ir{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #111111;
					line-height: 32rpx;
					text-align: right;
				}
			}
		}
		
		.exit{
			width: 100%;
			height: 88rpx;
			background: #F8F8F7;
			border-radius: 24rpx;
			margin-top: 190rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #111111;
			line-height: 88rpx;
			text-align: center;
			letter-spacing: 2rpx;
		}
	}
</style>