exhibit-front/subPages/login/login.vue

<template>
	<view class="login-container">
		<!-- 背景图 -->
		<image class="bg-image" src="@/subPages/static/登录_背景图.png" mode="aspectFill"></image>
		
		<!-- 主要内容 -->
		<view class="content">
			<!-- Logo和标题区域 -->
			<view class="logo-section">
				<image class="logo" src="@/static/logo.png" mode="aspectFit"></image>
				<text class="title-text">展品维保报修小程序</text>
			</view>
			
			<!-- 登录按钮区域 -->
			<view class="login-section">
				<button class="login-btn" @click="handleLogin">
					授权手机号登录
				</button>
				
				<button class="guest-btn" @click="handleGuestLogin">
					暂不登录
				</button>
				
				<!-- 协议文本 -->
				<view class="agreement-text">
					<view class="agreement-content">
						<view class="checkbox-container" @click="toggleAgreement">
							<view class="checkbox" :class="{ 'checked': isAgreed }">
								<view class="checkbox-inner" v-if="isAgreed"></view>
							</view>
						</view>
						<text>阅读并同意我们的
							<text class="link-text" @click="showServiceAgreement">《服务协议与隐私条款》</text>
							<text>与</text>
							<text class="link-text" @click="showPrivacyPolicy">《个人信息保护指引》</text>
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'Login',
	data() {
		return {
			isAgreed: false
		}
	},
	methods: {
		// 授权登录
		handleLogin() {
			// 这里实现微信授权登录逻辑
			console.log('授权登录');
			// 可以调用微信授权API
			// uni.getUserProfile({
			//   desc: '用于完善用户资料',
			//   success: (res) => {
			//     // 登录成功后跳转
			//     uni.switchTab({
			//       url: '/pages/index/home'
			//     });
			//   }
			// });
		},
		
		// 游客登录
		handleGuestLogin() {
			console.log('暂不登录');
			// 跳转到主页
			uni.switchTab({
				url: '/pages/index/home'
			});
		},
		
		// 显示服务协议
		showServiceAgreement() {
			console.log('查看服务协议');
			// 这里可以跳转到协议页面或显示弹窗
		},
		
		// 显示隐私政策
		showPrivacyPolicy() {
			console.log('查看隐私条款');
			// 这里可以跳转到隐私政策页面或显示弹窗
		},
		
		// 切换协议同意状态
		toggleAgreement() {
			this.isAgreed = !this.isAgreed;
		}
	}
}
</script>

<style lang="scss" scoped>
.login-container {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	
	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}
	
	.content {
		position: relative;
		z-index: 2;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0 60rpx;
		
		.logo-section {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 120rpx;
			
			.logo {
				width: 120rpx;
				height: 120rpx;
				margin-bottom: 40rpx;
			}
			
			.title-text {
				font-size: 36rpx;
				font-weight: 600;
				color: $primary-text-color;
				text-align: center;
			}
		}
		
		.login-section {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.login-btn {
				width: 630rpx;
				height: 88rpx;
				margin-bottom: 30rpx;
				background-color: $primary-color;
				border: none;
				border-radius: 44rpx;
				color: white;
				font-size: 32rpx;
				font-weight: 500;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.guest-btn {
				width: 630rpx;
				height: 88rpx;
				margin-bottom: 60rpx;
				border: 2rpx solid $secondary-text-color;
				border-radius: 44rpx;
				color: $secondary-text-color;
				font-size: 32rpx;
				font-weight: 400;
				background-color: transparent;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.agreement-text {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: $secondary-text-color;
				line-height: 1.5;
				
				.checkbox-container {
					margin-right: 12rpx;
					cursor: pointer;
					
					.checkbox {
						width: 29rpx;
						height: 29rpx;
						border: 1rpx solid $secondary-text-color;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						transition: all 0.3s ease;
						
						&.checked {
							border-color: $primary-color;
							background-color: $primary-color;
						}
						
						.checkbox-inner {
							width: 16rpx;
							height: 16rpx;
							background-color: white;
							border-radius: 50%;
						}
					}
				}
				
				.agreement-content {
					flex: 1;
					text-align: left;
					display: flex;
					.link-text {
						color: $primary-color;
						text-decoration: underline;
					}
				}
			}
		}
	}
}
</style>