soulspace/pages/visitor/mine.vue

<template>
	<view class="commonPage commonPageBox">
		<view class="bg_top">
			<u-icon @click="goSetting()" class="setIcon" labelColor="#294a97" labelPos="bottom" label="设置" name="setting"
				:style="`top:${(20 + statusBarHeight) * 2}rpx`" color="#294a97" size="22"></u-icon>
		</view>
		
		<view class="mine_box" :style="`top:${(80 + statusBarHeight) * 2}rpx`">
			<view class="per_mes">
				<view class="per_mes_user">
					<view style="display: flex; align-items: center; flex-direction: column">
						<image src="../../static/logo.png" class="per_mes_img color_shandow"></image>
					</view>
				</view>
				<view class="userInfoBox">
					<view class="name" style=" font-size: 32rpx;" @click="toLogin()">未登录</view>
				</view>
			</view>
			<view class="list_box" style=" margin-top: 50rpx;">
				<view class="xiugai boxShadow box_fillet">
					<common-list :dataList="pageList" @hancleClick="handleClickTab" label="name">
						<template slot="rightSlot" slot-scope="slotProps">
							<text class="fdButtonBox aui-text-success"
								style="line-height: 40rpx">{{ slotProps.row.content }}</text>
						</template>
					</common-list>
				</view>
			</view>
		</view>
		
		<view class="footer_box">
			<view class="footer_item" @click="toHome()">
				<view class="footer_nav_item" @click="selected=1">
					<image v-if="selected == 1" class="footer_item_image"
						src="/static/tab/home_active.png" mode="aspectFit"></image>
					<image v-else class="footer_item_image" src="/static/tab/home.png" mode="aspectFit">
					</image>
					<text class="footer_item_text"
						:class="[selected == 1 ? 'footer_item_text_active' : '']">首页</text>
				</view>
			</view>
			<view class="footer_item" @click="toMine()">
				<view class="footer_nav_item" @click="selected=4">
					<image v-if="selected == 4" class="footer_item_image"
						src="/static/tab/mine_active.png" mode="aspectFit"></image>
					<image v-else class="footer_item_image" src="/static/tab/mine.png" mode="aspectFit">
					</image>
					<text class="footer_item_text"
						:class="[selected == 4 ? 'footer_item_text_active' : '']">我的</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			selected : 4,
			pageList: [
				{
					name: "关于我们",
					url: "/pages/my/aboutUs",
					type: "pageJump",
				}
			],
		}
	},
	onShow() {
		
	},
	methods: {
		//首页
		toHome(){
			uni.navigateTo({
				url: '/pages/visitor/index'
			})
		},
		//跳转设置
		goSetting() {
			uni.navigateTo({
				url: '/pages/my/set?name=visitor',
			});
		},
		//点击切换
		handleClickTab(v) {
			switch (v.type) {
				case "pageJump":
					this.onPageJump(v.url);
					break;
			}
		},
		onPageJump(url) {
			uni.navigateTo({
				url: url,
			});
		},
		//去登录
		toLogin(){
			this.onPageJump('/pages/user/login')
		}
	}
}
</script>

<style lang="scss" scoped>
.commonPage{
	background-image: linear-gradient(-10deg, #fdf0ed 0%, #bfe3f0 40%, #e4eefa 60%, #bfe3f0 80%, #7dc1f0 100%);
}
.mine_box {
	width: 100%;
	position: absolute;
	left: 0;
	padding: 0 0rpx;
}
.per_mes {
	padding: 0 20rpx;
	margin-bottom: 20rpx;
	position: relative;
	align-items: center;
	display: flex;
	align-items: center;

	.per_mes_img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 90rpx;
		margin: 0 0 0 0;
		float: left;
	}
	.userInfoBox{
		padding-left: 20rpx;
	}

	view {
		
		.name {
			font-weight: bold;
			width: 100%;
			font-size: 30rpx;
			line-height: 40rpx;
			color: #6990c7 !important;
		}

		.phone {
			font-size: 26rpx;
			line-height: 40rpx;
			color: #6990c7;
		}
		.per_user_img {
			display: inline-block;
			width: 40upx;
			height: 40upx;
			margin-left: 10rpx;
			vertical-align: super;
		}
	}
}
.bg_top {
	padding: 0 30rpx;
	height: 30vh;
	position: relative;

	.setIcon {
		position: absolute;
		right: 30rpx;
	}
}
.list_box {
	padding: 20rpx 0;
}
.xiugai {
	border-radius: 10rpx !important;
	margin: 0 20rpx;
	background: rgba(255, 255, 255, 0.65);

	.nav_list {
		background-color: #b7e0e2;
		padding: 15rpx 0 15rpx 10rpx;
		display: flex;
		align-items: center;
		font-size: 22rpx;
		position: relative;
		font-weight: bold;
		border-bottom: 1px solid #e5e5e5;

		&:active {
			background-color: #f5f5f5;
		}

		text {
			color: #333;
			margin-left: 10rpx;
		}

		&::after {
			content: "";
			position: absolute;
			right: 20rpx;
			top: 50%;
			transform: translateY(-50%);
			width: 30rpx;
			height: 30rpx;
			background-image: url("@/static/icon/icon_right.png");
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
		}
	}

	.nav_list:nth-last-child(1) {
		border-bottom: 0;
	}
}

	
.footer_box {
	height: 90rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	box-sizing: content-box;
	background: #fff;
	padding-top: 5rpx;
}
.footer_item {
	position: relative;
	flex: 1;
}

.footer_nav_item {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.footer_item_text {
	font-size: 12px;
	color: #333;
	margin-top: 4rpx;
}

.footer_item_text_active {
	color: #7dc1f0 !important;
}

.footer_item_image {
	width: 24px;
	height: 24px;
}
</style>