gate-mini-program/packagePage/pages/my/my.vue

<template>
	<view class="container">
		<view class="top-container">
			<image class="bg-img" :src="apiHost+'/miniapp/static/mybg.png'"></image>
			<view class="user">
				<view class="user-info-mobile">
					<image class="avatar-img" :src="apiHost+'/miniapp/static/def_avatar.png'"></image>
					<view class="userinfo">
						<view class="username">{{name}}</view>
						<view>{{title}}</view>
					</view>
					<view class="exitbtn" @tap="exitauth">
						安全退出
					</view>
				</view>
			</view>
		</view>

		<view class="middle-container" @tap="goUserinfo">
			<view data-index="1" class="middle-item" hover-class="opcity" :hover-stay-time="150">
				<image class="ticket-img" :src="apiHost+'/miniapp/static/myicon1.png'"></image>
				<text class="middle-tag">个人信息</text>
				<image class="rightarrow-img" :src="apiHost+'/miniapp/static/rightarrow.png'"></image>
			</view>
		</view>
		<!-- <view class="middle-container" @tap="goFaq">
			<view data-index="1" class="middle-item" hover-class="opcity" :hover-stay-time="150">
				<image class="ticket-img" :src="apiHost+'/miniapp/static/myicon2.png'"></image>
				<text class="middle-tag">常见问题</text>
				<image class="rightarrow-img" :src="apiHost+'/miniapp/static/rightarrow.png'"></image>
			</view>
		</view>
		<view class="middle-container" @tap="goDoc">
			<view data-index="1" class="middle-item" hover-class="opcity" :hover-stay-time="150">
				<image class="ticket-img" :src="apiHost+'/miniapp/static/myicon3.png'"></image>
				<text class="middle-tag">国家标准</text>
				<image class="rightarrow-img" :src="apiHost+'/miniapp/static/rightarrow.png'"></image>
			</view>
		</view> -->

		<tui-tabbar :current="tabbarCurrent"  backdropFilter :backgroundColor="tabbarBackgroundColor" :tabBar="tabBar" color="#777" selectedColor="#AC9157" @click="tabbarSwitch"></tui-tabbar>
	</view>
</template>

<script>
	import myapp from '@/common/js/myapp.js'	
	export default {
		data() {
			return {
				apiHost: myapp.apiHost,
				tabBar: myapp.tabBar,
				tabbarCurrent: 1,
				tabbarBackgroundColor: '#FFF',
				name: '',
				title: ''
			}
		},
		onShow: function() {
			let info = myapp.checkLogin()
			this.name = info.name
			this.title = info.title
			uni.setStorageSync('lastPagePath', '/packagePage/pages/my/my')
		},
		methods: {
			tabbarSwitch: myapp.tabbarSwitch,
			exitauth: function() {
				uni.removeStorageSync('user');
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			goUserinfo:function() {
				uni.navigateTo({
					url:'/packagePage/pages/userinfo/userinfo'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F6FA;
	}
	
	.container {
		position: relative;
		padding-bottom: 100rpx;
	}

	.top-container {
		height: 320rpx;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.bg-img {
		position: absolute;
		width: 100%;
		height: 460rpx;
	}

	.user {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		z-index: 2;
		margin-top: 30rpx;
	}

	.avatar-img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		align-self: center;
	}
	
	.userinfo {
		height:200rpx;
		vertical-align:middle;
		display:inline-block;
		padding-left:20rpx;
	}
	
	.exitbtn {
		vertical-align:middle;
		display:inline-block;
		background-color: #1F1EAE;
		color: #FFF;
		position:absolute;
		right: 100rpx;
		padding:20rpx;
		margin-top: 50rpx;
		border-radius: 30rpx 0 0 30rpx;
	}
	
	.username {
		font-weight: bold;
		padding-bottom: 10rpx;
	}

	.user-info-mobile {
		margin-top: 0rpx;
		position: relative;
		font-size: 28rpx;
		color: #fefefe;
		line-height: 28rpx;
		align-self: left;
		padding: 0 50rpx;
		width:100%;
	}

	.middle-container {
		height: 90rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-radius: 10rpx;
		background-color: #ffffff;
		margin: -60rpx 30rpx 80rpx 30rpx;
		box-shadow: 0 15rpx 10rpx -15rpx #efefef;
		position: relative;
		z-index: 2;
		border-radius: 30rpx;
	}

	.middle-item {
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.ticket-img {
		width: 40rpx;
		height: 40rpx;
		margin-left: 35rpx;
	}
	
	.rightarrow-img {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 25rpx;
	}

	.middle-tag {
		font-size: 28rpx;
		color: #333333;
		line-height: 28rpx;
		font-weight: bold;
		padding-left: 22rpx;
	}

</style>