APP/pages/common/user/index.vue

<template>
	<view class="pageContent">
		<image src="/static/images/login.png" mode="" class="login-bg"></image>
		<view class="content_con">
			<view class="user_logo">
				<image src="/static/images/logo.png" class="logo"></image>
			</view>
			<view class="user-right">
				<view class="user-title">星汉研创</view>
				<view class="ID">ID:123456</view>
			</view>
		</view>
		<view class="content">
			<view class="menu-list">
				<view class="menu-item" @click="userAgree">
					<image src="/static/images/xy.png" class="icon"></image>
					<text class="title">用户协议</text>
					<uni-icons type="right" size="25" color="rgba(255, 255, 255, 0.4)" class="uniIcon"></uni-icons>
				</view>
				<view class="menu-item" @click="privacyAgree">
					<image src="/static/images/ys.png" class="icon"></image>
					<text class="title">隐私协议</text>
					<uni-icons type="right" size="25" color="rgba(255, 255, 255, 0.4)" class="uniIcon"></uni-icons>
				</view>
				<view class="menu-item" @click="aboutUs">
					<image src="/static/images/wm.png" class="icon"></image>
					<text class="title">关于我们</text>
					<uni-icons type="right" size="25" color="rgba(255, 255, 255, 0.4)" class="uniIcon"></uni-icons>
				</view>
				<view class="btn_footer">
					<button class="logout" @click="logout">退出登录</button>
				</view>
			</view>
		</view>
		<!-- 弹框 -->
		<view class="agreement-mask" v-if="showAgreement">
			<!-- 协议弹窗 -->
			<view class="agreement-popup" @click.stop>
				<!-- 标题 -->
				<view class="popup-title">退出登录</view>
				<!-- 协议内容 -->
				<view class="popup-content">
					您确定要退出登录吗？
				</view>
				<!-- 按钮组 -->
				<view class="popup-buttons">
					<button class="btn disagree" @click="handleDisagree">取消</button>
					<button class="btn agree" @click="handleAgree">确定</button>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				showAgreement: false // 控制弹窗显示
			}
		},
		methods: {
			// 不同意
			handleDisagree() {
				this.showAgreement = false,
				uni.showTabBar()
			},
			// 同意
			handleAgree() {
				this.showAgreement = false
				uni.navigateTo({
					url: '/pages/common/login/index'
				})
				uni.showTabBar()
			},
			// 退出登录
			logout() {
				this.showAgreement = true
				uni.hideTabBar()
			},
			// 用户协议
			userAgree(){
				uni.navigateTo({
					url: '/pages/common/userAgreement/index'
				})
			},
			// 隐私协议
			privacyAgree(){
				uni.navigateTo({
					url: '/pages/common/privacyAgreement/index'
				})
			},
			// 关于我们
			aboutUs(){
				uni.navigateTo({
					url: '/pages/common/aboutUs/index'
				})
			}
		},
	}
</script>

<style scoped>
	.pageContent {
		background: rgb(26, 26, 26);
		height: 100vh;
	}

	.login-bg {
		background-size: 100% 100%;
		width: 100%;
		height: 100%;
		position: relative;
	}

	.content {
		height: 78%;
		width: 100%;
		background: rgb(26, 26, 26);
		position: absolute;
		bottom: 0px;
		border-radius: 60px 60px 0px 0px;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.content_con {
		position: absolute;
		top: 100rpx;
		color: rgba(255, 255, 255, 0.87);
		left: 30rpx;
		font-size: 60rpx;
		display: flex;
		align-items: center;
	}

	.user-title {
		color: rgba(255, 255, 255, 0.87);
		font-size: 36rpx;
	}

	.ID {
		color: rgba(255, 255, 255, 0.6);
		font-size: 24rpx;
	}

	.logo {
		width: 120rpx;
		height: 120rpx;
	}

	.menu-list {
		background-color: rgb(42, 42, 42);
		border-radius: 16rpx;
		padding: 0 30rpx;
		margin-top: 50rpx;
		/* 使菜单靠底部 */
	}

	.menu-item {
		font-size: 32rpx;
		color: rgb(255, 255, 255);
		padding: 30rpx 0;
		border-bottom: 1rpx solid rgba(255, 255, 255, 0.04);
		display: flex;
		align-items: center;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.icon {
		width: 36rpx;
		height: 36rpx;

	}

	.title {
		padding-left: 20rpx;
		padding-top: -8rpx;
		font-size: 28rpx;
	}

	.uniIcon {
		position: absolute;
		right: 50rpx;
	}

	.user-right {
		margin-left: 30rpx;
	}

	.btn_footer {
		height: 80rpx;
		background: rgb(42, 42, 42);
		position: absolute;
		width: 92%;
		bottom: 60rpx;
		left: 30rpx;
		border-radius: 16rpx;
	}

	.logout {
		background: rgb(42, 42, 42);
		color: rgba(255, 255, 255, 0.87);
	}

	/* 遮罩层 */
	.agreement-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

	/* 弹窗主体 */
	.agreement-popup {
		width: 80%;
		background-color: rgba(42, 42, 42);
		border-radius: 16rpx;
		padding: 40rpx;
		box-sizing: border-box;
		border: 1rpx solid rgba(187, 230, 0, 0.3);
	}

	/* 标题 */
	.popup-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30rpx;
		color: rgba(255, 255, 255, 0.87);
	}

	/* 内容文本 */
	.popup-content {
		font-size: 30rpx;
		line-height: 1.6;
		color: rgba(255, 255, 255, 0.87);
		margin-bottom: 50rpx;
	}

	/* 协议链接 */
	.protocol-link {
		color: rgb(187, 230, 0);
		margin: 0 10rpx;
	}

	/* 按钮容器 */
	.popup-buttons {
		display: flex;
		justify-content: space-between;
	}

	/* 通用按钮样式 */
	.btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		font-size: 32rpx;
		margin: 0 20rpx;
	}

	/* 不同意按钮 */
	.disagree {
		background-color: transparent;
		color: rgba(255, 255, 255, 0.87);
		border: 1px solid rgb(255, 255, 255);
		font-size: 24rpx;
	}

	/* 同意按钮 */
	.agree {
		background-color: rgb(187, 230, 0);
		color: #232323;
		border: none;
		font-size: 24rpx;
	}
</style>