clockIn-wechat-uniapp-241018/pages/login/login.vue

<template>
	<div class="login">
		<!-- logo -->
		<div class="logo">
			打卡系统
		</div>

		<!-- 标题 -->
		<view class="login-title">工程项目打卡系统</view>

		<!-- 使用说明 -->
		<view class="usage-notice">
			<text class="notice-icon">⚠️</text>
			<text class="notice-text">仅限公司内部人员使用</text>
			<text class="notice-desc">请确保您是本公司员工，未经授权禁止使用</text>
		</view>

		<!-- 登录按钮 -->
		<view @click="login" class="login-btn">
			<uni-icons type="weixin" size="30" color="#fff"></uni-icons>
			<text class="wx">微信登录</text>
		</view>

		<!-- 隐私政策 -->
		<view class="privacy">
			<uv-radio-group>
				<uv-checkbox-group v-model="consent">
					<uv-checkbox :size="30" shape="circle" active-color="#05C160" :name="privacy"></uv-checkbox>
				</uv-checkbox-group>
				已同意
				<!-- <text class="privacy-title">《隐私政策》</text> -->
				<text class="privacy-title" @click="$refs.popup.open('bottom')">《服务条款》</text>
			</uv-radio-group>
		</view>
		
		<uv-popup ref="popup" :round="30" :customStyle="{height: '50vh'}">
			<view class="content">
				<uv-parse :content="content"></uv-parse>
			</view>
		</uv-popup>
		
		<!-- 隐私政策弹框 -->
		<PrivacyAgreementPoup></PrivacyAgreementPoup>
	</div>
</template>

<script>
	import PrivacyAgreementPoup from '@/components/PrivacyAgreementPoup/PrivacyAgreementPoup.vue'
	import txt from './txt.js'
	export default {
		name : "Login",
		components : { PrivacyAgreementPoup },
		data() {
			return {
				consent : [],
				content : '',
			}
		},
		onLoad() {
			this.content = txt.txt.replaceAll('\n', '<br>')
		},
		methods: {
			login() {
				if(this.consent.length <= 0){
					return uni.showToast({
						icon: "none",
						title: "请勾选隐私协议"
					})
				}
				this.$store.commit('login')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background: white;
		// logo
		.logo {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 0rpx;
			width: 40%;
			color: white;
			background: linear-gradient(180deg, #4C9EEA, #6DB9FF);
			border-radius: 45rpx 13rpx 45rpx 13rpx;
			font-size: 60rpx;
		}

		// 标题
		.login-title {
			font-size: 40rpx;
			font-weight: bold;
			margin: 20rpx 0rpx;
		}

		// 使用说明
		.usage-notice {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 80%;
			margin: 40rpx 0rpx;
			padding: 30rpx 20rpx;
			background: linear-gradient(135deg, #fff3e0, #ffecb3);
			border: 2rpx solid #ff9800;
			border-radius: 20rpx;
			box-shadow: 0rpx 4rpx 12rpx rgba(255, 152, 0, 0.2);

			.notice-icon {
				font-size: 32rpx;
				margin-bottom: 10rpx;
			}

			.notice-text {
				font-size: 28rpx;
				font-weight: bold;
				color: #e65100;
				margin-bottom: 8rpx;
				text-align: center;
			}

			.notice-desc {
				font-size: 22rpx;
				color: #bf360c;
				text-align: center;
				line-height: 1.4;
			}
		}

		//登录按钮
		.login-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 70%;
			background: #05C160;
			height: 90rpx;
			border-radius: 45rpx;
			color: white;
			margin-top: 200rpx;

			.wx {
				margin-left: 10rpx;
			}
		}
		
		//隐私政策
		.privacy {
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			
			&::v-deep .uv-checkbox-group {
				align-items: center !important;
				justify-content: center !important;
				flex-wrap : nowrap !important;
			}
			
			.privacy-title {
				color: #05C160;
			}
		}
		
		.content{
			padding: 30rpx 20rpx;
			overflow: scroll;
			height: 100%;
			box-sizing: border-box;
		}
	}
</style>