pet-system-merchant-app/pages/login/index.vue

<template>
	<view class="login-page">
		<!-- 顶部渐变装饰区 -->
		<view class="hero-bg">
			<view class="deco-circle c1"></view>
			<view class="deco-circle c2"></view>
			<view class="deco-circle c3"></view>

			<!-- 返回按钮 -->
			<view class="back-btn" @click="onClickLeft">
				<uni-icons type="left" size="20" color="#fff"></uni-icons>
			</view>

			<!-- Logo 区域 -->
			<view class="hero-content">
				<view class="logo-wrap">
					<uni-icons type="headphones" size="42" color="#fff"></uni-icons>
				</view>
				<text class="brand-name">宠物服务平台</text>
				<text class="brand-desc">专业 · 安心 · 便捷</text>
			</view>
		</view>

		<!-- 表单白色卡片区 -->
		<view class="form-card">
			<text class="form-title">账号登录</text>

			<!-- 账号输入框 -->
			<view class="input-group">
				<view class="input-icon-wrap">
					<uni-icons type="person" size="18" color="#ffc837"></uni-icons>
				</view>
				<input class="custom-input" v-model="username" placeholder="请输入登录账号" placeholder-class="input-placeholder" />
			</view>

			<!-- 密码输入框 -->
			<view class="input-group">
				<view class="input-icon-wrap">
					<uni-icons type="locked" size="18" color="#ffc837"></uni-icons>
				</view>
				<input class="custom-input" v-model="password" type="password" placeholder="请输入密码" placeholder-class="input-placeholder" />
			</view>

			<!-- 提示信息 -->
			<view class="tip-row">
				<uni-icons type="info" size="13" color="#ffaa00"></uni-icons>
				<text>账号由后台创建，不支持自主注册</text>
			</view>

			<!-- 协议勾选 -->
			<view class="agreement-row">
				<checkbox-group @change="onCheckChange">
					<label class="agree-label">
						<checkbox :checked="checked" color="#ffc837" style="transform: scale(0.7);" />
						<text class="agree-text">我已阅读并同意</text>
						<text class="text-link" @click.stop="showAgreement('隐私政策')">《隐私政策》</text>
						<text class="agree-text">和</text>
						<text class="text-link" @click.stop="showAgreement('商家托运协议')">《托运协议》</text>
					</label>
				</checkbox-group>
			</view>

			<!-- 登录按钮 -->
			<button class="login-btn" @click="onSubmit">安全登录</button>
		</view>

		<!-- 底部装饰 -->
		<view class="footer-hint">
			<text>安全加密 · 保护您的账号信息</text>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

const username = ref('')
const password = ref('')
const checked = ref(false)

const onClickLeft = () => uni.navigateBack()

const onCheckChange = () => {
	checked.value = !checked.value
}

const onSubmit = () => {
	if (!username.value) {
		uni.showToast({ title: '请填写账号', icon: 'none' })
		return
	}
	if (!password.value) {
		uni.showToast({ title: '请填写密码', icon: 'none' })
		return
	}
	if (!checked.value) {
		uni.showToast({ title: '请先阅读并勾选协议', icon: 'none' })
		return
	}
	uni.showToast({ title: '登录成功 (模拟)', icon: 'success' })
	setTimeout(() => {
		uni.reLaunch({ url: '/pages/index/index' })
	}, 1000)
}

const showAgreement = (name) => {
	uni.showToast({ title: `查看 ${name} 详情 (演示)`, icon: 'none' })
}
</script>

<style lang="scss" scoped>
.login-page { min-height: 100vh; background: #f2f3f7; display: flex; flex-direction: column; }
.hero-bg { background: linear-gradient(150deg, #ffd53f 0%, #ff9500 100%); padding: 0 40rpx 140rpx; position: relative; overflow: hidden; min-height: 560rpx; display: flex; flex-direction: column; justify-content: flex-end; }
.deco-circle { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.c1 { width: 400rpx; height: 400rpx; top: -160rpx; right: -120rpx; }
.c2 { width: 260rpx; height: 260rpx; top: 80rpx; left: -100rpx; }
.c3 { width: 160rpx; height: 160rpx; bottom: 80rpx; right: 80rpx; }
.back-btn { position: absolute; top: calc(var(--status-bar-height, 44px) + 20rpx); left: 32rpx; width: 72rpx; height: 72rpx; border-radius: 50%; background: rgba(255, 255, 255, 0.25); display: flex; align-items: center; justify-content: center; }
.hero-content { position: relative; z-index: 2; }
.logo-wrap { width: 140rpx; height: 140rpx; background: rgba(255, 255, 255, 0.25); border-radius: 44rpx; display: flex; align-items: center; justify-content: center; margin-bottom: 28rpx; }
.brand-name { display: block; font-size: 52rpx; font-weight: 800; color: #fff; margin-bottom: 8rpx; }
.brand-desc { display: block; font-size: 28rpx; color: rgba(255, 255, 255, 0.8); letter-spacing: 4rpx; }
.form-card { background: #fff; border-radius: 56rpx 56rpx 0 0; margin-top: -60rpx; padding: 60rpx 48rpx 40rpx; flex: 1; position: relative; z-index: 10; }
.form-title { display: block; font-size: 38rpx; font-weight: 700; color: #1a1a1a; margin-bottom: 48rpx; }
.input-group { display: flex; align-items: center; background: #f8f8f8; border-radius: 28rpx; padding: 8rpx 24rpx; margin-bottom: 28rpx; border: 3rpx solid transparent; }
.input-icon-wrap { margin-right: 16rpx; flex-shrink: 0; }
.custom-input { flex: 1; height: 88rpx; font-size: 30rpx; color: #222; background: transparent; }
.input-placeholder { color: #c0c0c0; }
.tip-row { display: flex; align-items: center; gap: 10rpx; font-size: 24rpx; color: #aaa; padding: 8rpx 8rpx 24rpx; }
.agreement-row { margin-bottom: 48rpx; padding: 0 4rpx; }
.agree-label { display: flex; align-items: center; flex-wrap: wrap; }
.agree-text { font-size: 24rpx; color: #999; }
.text-link { font-size: 24rpx; color: #ff9500; }
.login-btn { width: 100%; height: 104rpx; font-size: 34rpx; font-weight: 700; color: #333; background: linear-gradient(90deg, #ffd53f, #ff9500); border: none; border-radius: 52rpx; letter-spacing: 4rpx; }
.footer-hint { text-align: center; font-size: 22rpx; color: #bbb; padding: 32rpx 0 60rpx; background: #fff; }
</style>