besiweb/pages/my/index.vue

<template>
	<view class="uni-main">
		<view class="uni-header">
			<view class="uni-header-nav">
				<text class="uni-header-title">个人中心</text>
				<text class="uni-header-setting">
					<navigator url="/pages/my/setting"><img src="../../static/my/addwork_setting_white.png" width="24"></navigator>
				</text>
			</view>
			<view v-if="userInfo.id" class="uni-header-info online">
				<navigator url="/pages/my/setting">
				<text class="uni-member-logo"><img src="../../static/my/avatar.png" alt=""></text>
				<view class="uni-member-info">
					<view class="uni-row_text">测试用户<img :src="userInfo.gender==1? '../../static/my/icon_male.png' : '../../static/my/icon_female.png'" width="14"></view>
					<view class="uni-row_text"><img class="icon" src="../../static/my/location_user_bold_icon_white.png" width="18">南宁</view>
					<view class="uni-row_text">美好愿满三千大千</view>
				</view>
				<text class="uni-member-qr">
					<img src="../../static/my/user_qr_code_white.png" width="30">
					<img src="../../static/my/turn_right_white.png" width="20">
				</text>
				</navigator>
				<view class="uni-member-join_vip">
					<navigator url=""><text><img src="../../static/my/vip_icon.png" width="16">加入会员</text></navigator>
				</view>
			</view>
			<view v-else class="uni-header-info">
				<text class="uni-member-logo"><img src="../../static/my/avatar.png" alt=""></text>
				<text class="uni-member-info">
					<navigator url="/pages/entry/login"><text>登陆/注册</text></navigator>
				</text>
			</view>
			
			<view v-if="userInfo.id" class="uni-nav">
				<view class="uni-nav-item">
					<navigator url="">
						<text class="uni-nav-item_text num">0</text>
						<text class="uni-nav-item_text">关注</text>
					</navigator>
				</view>
				<view class="uni-nav-item">
					<navigator url="">
						<text class="uni-nav-item_text num">0</text>
						<text class="uni-nav-item_text">粉丝</text>
					</navigator>
				</view>
				<view class="uni-nav-item">
					<navigator url="">
						<text class="uni-nav-item_text num">0</text>
						<text class="uni-nav-item_text">功德值</text>
					</navigator>
				</view>
			</view>
		</view>
		<view class="uni-menu">
			<view class="uni-menu-list">
				<view class="uni-menu-list-item">
					<navigator url="/pages/my/card">
					<img class="uni-list-icon" src="../../static/my/wallet_user_icon.png" width="30">
					<text class="uni-list-text">我的券包</text>
					<img class="uni-list-icon_right" src="../../static/my/gx_input.png" alt="">
					<text class="uni-list-text_mark">账户安全保障中</text>
					</navigator>
				</view>
				<view class="uni-menu-list-item">
					<navigator url="/pages/my/collect">
					<img class="uni-list-icon" src="../../static/my/collection_success_icon.png" width="30">
					<text class="uni-list-text">我的收藏</text>
					<img class="uni-list-icon_right" src="../../static/my/gx_input.png" alt="">
					</navigator>
				</view>
				<view class="uni-menu-list-item">
					<navigator url="/pages/my/dynamic">
					<img class="uni-list-icon" src="../../static/my/bottom_image_dynamic_press.png" width="30">
					<text class="uni-list-text">我的动态</text>
					<img class="uni-list-icon_right" src="../../static/my/gx_input.png" alt="">
					</navigator>
				</view>
				<view class="uni-menu-list-item">
					<navigator url="/pages/index/gongdeng/myGongdeng">
					<img class="uni-list-icon" src="../../static/my/light_user_icon_theme.png" width="30">
					<text class="uni-list-text">我的供灯</text>
					<img class="uni-list-icon_right" src="../../static/my/gx_input.png" alt="">				
					</navigator>
				</view>
				<view class="uni-menu-list-item">
					<navigator url="/pages/my/activity">
					<img class="uni-list-icon" src="../../static/my/my_active_icon.png" width="30">
					<text class="uni-list-text">我的活动</text>
					<img class="uni-list-icon_right" src="../../static/my/gx_input.png" alt="">
					</navigator>
				</view>
				<view class="uni-menu-list-item">
					<navigator url="/pages/my/card">
					<img class="uni-list-icon" src="../../static/my/blessing_card.png" width="30">
					<text class="uni-list-text">祝福贺卡</text>
					<img class="uni-list-icon_right" src="../../static/my/gx_input.png" alt="">
					</navigator>
				</view>
				<view class="uni-menu-list-item">
					<navigator url="/pages/my/setting">
					<img class="uni-list-icon" src="../../static/my/ren_zheng_user_icon_theme.png" width="30">
					<text class="uni-list-text">安全中心</text>
					<img class="uni-list-icon_right" src="../../static/my/gx_input.png" alt="">
					</navigator>
				</view>
				<view class="uni-menu-list-item">
					<navigator url="/pages/my/share">
					<img class="uni-list-icon" src="../../static/my/user_invited_friend.png" width="30">
					<text class="uni-list-text">邀请好友</text>
					<img class="uni-list-icon_right" src="../../static/my/gx_input.png" alt="">
					</navigator>
				</view>
				<view class="uni-menu-list-item">
					<navigator url="/pages/my/kefu">
					<img class="uni-list-icon" src="../../static/my/help_question_user_icon_theme.png" width="30">
					<text class="uni-list-text">帮助反馈</text>
					<img class="uni-list-icon_right" src="../../static/my/gx_input.png" alt="">
					</navigator>
				</view>
				<view class="uni-menu-list-item">
					<navigator url="">
					<img class="uni-list-icon" src="../../static/my/online_customer.png" width="30">
					<text class="uni-list-text">在线客服</text>
					<img class="uni-list-icon_right" src="../../static/my/gx_input.png" alt="">
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {id: 1, gender: 1},
			}
		},
		onLoad() {

		},
		methods: {
			// 跳转
			switchUrl(url) {
				console.log(url)
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.uni-main {
		width: 100%;
		height: 100%;
		background-color: #f6f7f5;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		padding-bottom: 120rpx;
	}
	.uni-header {
		min-height: 470rpx;
		background: url('../../static/my/user_center_bg.png') no-repeat 100%/100%;
	}

	.uni-header-nav {
		padding: 60rpx 20rpx 26rpx;
	}

	.uni-header-title {
		font-size: 40rpx;
		font-weight: bold;
		color: #ffffff;
	}

	.uni-header-setting {
		float: right;
	}

	.uni-header-nav img {
		vertical-align: middle;
	}

	.uni-header-info {
		width: calc(100% - 40rpx);
		margin: 10rpx 20rpx;
		display: inline-block;
		position: relative;
	}

	.uni-member-info {
		display: inline-block;
		font-size: 36rpx;
		color: #fff;
		
	}

	.uni-header-info.online .uni-member-info {
		font-size: 32rpx;
	}
	.uni-member-logo {
		width: 124rpx;
		height: 124rpx;
		display: inline-block;
		vertical-align: middle;
		margin-right: 30rpx;
	}
	.uni-header-info.online .uni-member-logo {
		vertical-align: top;
	}
	.uni-member-logo img {
		width: 100%;
		height: 100%;
		border-radius: 100%;
	}

	.uni-row_text {
		margin-bottom: 6rpx;
	}
	.uni-row_text .icon {
		vertical-align: top;
		margin-right: 10rpx;
	}
	.uni-member-join_vip {
		position: absolute;
		right: 10rpx;
		bottom: 8rpx;
		background-color: #FFFFFF;
		padding: 4rpx 6rpx;
		border-radius: 8rpx;
		color: #f88000;
		box-shadow: 0rpx 2rpx 2rpx 2rpx #666;
	}
	.uni-member-join_vip img {
		margin-right: 8rpx;
		vertical-align: middle;
	}
	.uni-nav {
		margin: 20rpx 20rpx 10rpx;
	}
	.uni-nav .uni-nav-item {
		width: 33.3%;
		display: inline-block;
		text-align: center;
		color: #FFFFFF;
		font-size: 36rpx;
	}
	.uni-nav-item_text.num {
		/* font-size: 38rpx; */
	}
	.uni-nav-item_text {
		text-align: center;
		display: block;
	}
	.uni-member-qr {
		float: right;
		margin-right: 10rpx;
	}
	.uni-member-qr img {
		vertical-align: middle;
	}
	.uni-menu {
		width: 100%;
		position: relative;
		
	}
	.uni-menu-list {
		width: 100%;
		position: relative;
		top: -40rpx;
	}
	
	.uni-menu-list-item {
		background-color: #FFFFFF;
		width: calc(100% - 40rpx);
		padding: 20rpx 20rpx;
		margin: 0 auto;
		border-radius: 10rpx;
		font-size: 36rpx;
		margin-bottom: 20rpx;
	}
	.uni-menu-list-item img {
		vertical-align: middle;
		margin-right: 10rpx;
	}
	.uni-list-text_mark {
		margin-right: 20rpx;
		color: #46bb6c;
		float: right;
		font-size: 32rpx;
		line-height: 40rpx;
		margin-top: 10rpx;
	}
	.uni-menu-list-item .uni-list-icon {
		margin-right: 20rpx;
	}
	.uni-menu-list-item .uni-list-icon_right {
		float: right;
		width: 50rpx;
		margin-top: 4rpx;
		vertical-align: middle;
	}
</style>