From 0b8dd7af00f5354bb79e4b847a59f0f904668d6c Mon Sep 17 00:00:00 2001
From: sexygoat <1538832180@qq.com>
Date: Tue, 14 Apr 2026 09:50:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=BE=AE=E4=BF=A1?=
 =?UTF-8?q?=E7=BD=91=E9=A1=B5=E6=8E=88=E6=9D=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/login/login.vue | 195 ++++++++++++++++++++++--------------------
 1 file changed, 100 insertions(+), 95 deletions(-)

diff --git a/pages/login/login.vue b/pages/login/login.vue
index b79b874..291a40c 100644
--- a/pages/login/login.vue
+++ b/pages/login/login.vue
@@ -1,48 +1,47 @@
 <template>
 	<view class="login-page">
 		<view class="content">
-			<view class="card">
-				<view class="card-title">用户登录</view>
-				
-				<view class="form-item">
-					<view class="label">设备标识</view>
-					<view class="input-wrap" :class="{ focus: inputFocus }">
-						<input 
-							v-model="identifier"
-							class="input"
-							placeholder="请输入SN/IMEI/虚拟号/ICCID/MSISDN"
-							placeholder-class="placeholder"
-							@focus="inputFocus = true"
-							@blur="inputFocus = false"
-							@input="showError = false"
-						/>
-						<view v-if="identifier" class="clear" @tap="identifier = ''">
-							<text>×</text>
-						</view>
+			<view class="header">
+				<view class="main-title">设备管理登录</view>
+				<view class="sub-title">请输入设备标识进行登录</view>
+			</view>
+
+			<view class="form-section">
+				<view class="input-wrap" :class="{ focus: inputFocus }">
+					<input
+						v-model="identifier"
+						class="input"
+						placeholder="请输入设备标识"
+						placeholder-class="placeholder"
+						@focus="inputFocus = true"
+						@blur="inputFocus = false"
+						@input="showError = false"
+					/>
+				</view>
+				<text v-if="showError" class="error">请输入设备标识</text>
+			</view>
+
+			<view class="btn-section">
+				<button
+					class="btn-login"
+					:class="{ disabled: !identifier || loading || !agreed }"
+					:disabled="!identifier || loading || !agreed"
+					@tap="handleLogin"
+				>
+					<view v-if="loading" class="loading">
+						<view class="dot"/>
+						<view class="dot"/>
+						<view class="dot"/>
 					</view>
-					<text v-if="showError" class="error">请输入设备标识</text>
-				</view>
+					<text v-else>登录</text>
+				</button>
+			</view>
 
-				<view class="form-item">
-					<button 
-						class="btn-login" 
-						:class="{ disabled: !identifier || loading }"
-						:disabled="!identifier || loading"
-						@tap="handleLogin"
-					>
-						<view v-if="loading" class="loading">
-							<view class="dot"/>
-							<view class="dot"/>
-							<view class="dot"/>
-						</view>
-						<text v-else>登录</text>
-					</button>
-				</view>
-
-				<view class="agreement">
-					<text class="agree-text">登录即表示同意</text>
+			<view class="agreement">
+				<view class="agreement-text">
+					<text class="text">登录即表示同意</text>
 					<text class="link">《用户协议》</text>
-					<text class="agree-text">和</text>
+					<text class="text">和</text>
 					<text class="link">《隐私政策》</text>
 				</view>
 			</view>
@@ -143,105 +142,99 @@
 		min-height: 100vh;
 		display: flex;
 		flex-direction: column;
-		align-items: center;
-		justify-content: center;
 		background: #FFFFFF;
-		padding: 0 40rpx;
+		padding: 60rpx 40rpx;
 	}
 
 	.content {
 		width: 100%;
 	}
 
-	.card {
-		background: #FFFFFF;
-		border-radius: 24rpx;
-		padding: 48rpx;
-		box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.08);
+	.header {
+		margin-bottom: 80rpx;
 	}
 
-	.card-title {
-		font-size: 40rpx;
-		font-weight: 600;
+	.main-title {
+		font-size: 56rpx;
+		font-weight: 700;
 		color: #1A1A1A;
-		margin-bottom: 20rpx;
+		line-height: 1.3;
+		margin-bottom: 24rpx;
+		letter-spacing: 0.5rpx;
 	}
 
-	.form-item {
-		margin-bottom: 32rpx;
+	.sub-title {
+		font-size: 28rpx;
+		color: #9CA3AF;
+		line-height: 1.5;
+		letter-spacing: 0.5rpx;
 	}
 
-	.label {
-		font-size: 26rpx;
-		color: #6B7280;
-		margin-bottom: 16rpx;
+	.form-section {
+		margin-bottom: 60rpx;
 	}
 
 	.input-wrap {
 		display: flex;
 		align-items: center;
-		background: #F9FAFB;
-		border: 2rpx solid #E5E7EB;
-		border-radius: 16rpx;
-		padding: 28rpx 24rpx;
-		margin-top: 40rpx;
-		transition: all 0.2s;
+		background: #f7f7f7;
+		border-radius: 20rpx;
+		padding: 32rpx 40rpx;
+		transition: all 0.3s;
 	}
 
 	.input-wrap.focus {
-		border-color: #2563EB;
 		background: #FFFFFF;
+		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
 	}
 
 	.input {
 		flex: 1;
-		font-size: 30rpx;
+		font-size: 32rpx;
 		color: #1A1A1A;
 		background: transparent;
 	}
 
 	.placeholder {
-		color: #9CA3AF;
-	}
-
-	.clear {
-		width: 40rpx;
-		height: 40rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: #9CA3AF;
-		font-size: 36rpx;
+		color: #C4C4C4;
 	}
 
 	.error {
 		font-size: 24rpx;
 		color: #EF4444;
-		margin-top: 12rpx;
+		margin-top: 16rpx;
+		padding-left: 8rpx;
+	}
+
+	.btn-section {
+		margin-bottom: 60rpx;
 	}
 
 	.btn-login {
 		width: 100%;
-		height: 96rpx;
-		background: #2563EB;
+		height: 108rpx;
+		background: linear-gradient(135deg, #00DDA2 0%, #00E5A8 100%);
 		border: none;
-		border-radius: 16rpx;
-		font-size: 32rpx;
-		font-weight: 500;
-		color: #FFFFFF;
+		border-radius: 20rpx;
+		font-size: 36rpx;
+		font-weight: 600;
+		color: #1A1A1A;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		transition: all 0.2s;
+		transition: all 0.3s;
+		box-shadow: 0 8rpx 24rpx rgba(0, 221, 162, 0.25);
 	}
 
 	.btn-login.disabled {
 		background: #E5E7EB;
 		color: #9CA3AF;
+		box-shadow: none;
 	}
 
 	.btn-login:active:not(.disabled) {
-		background: #1D4ED8;
+		transform: scale(0.98);
+		box-shadow: 0 4rpx 16rpx rgba(0, 221, 162, 0.3);
 	}
 
 	.loading {
@@ -251,9 +244,9 @@
 	}
 
 	.dot {
-		width: 8rpx;
-		height: 8rpx;
-		background: #9CA3AF;
+		width: 10rpx;
+		height: 10rpx;
+		background: #1A1A1A;
 		border-radius: 50%;
 		animation: load 1.4s infinite ease-in-out both;
 	}
@@ -262,27 +255,39 @@
 	.dot:nth-child(2) { animation-delay: -0.16s; }
 
 	@keyframes load {
-		0%, 80%, 100% { transform: scale(0); }
-		40% { transform: scale(1); }
+		0%, 80%, 100% {
+			transform: scale(0.5);
+			opacity: 0.3;
+		}
+		40% {
+			transform: scale(1);
+			opacity: 1;
+		}
 	}
 
 	.agreement {
 		display: flex;
-		flex-wrap: nowrap;
 		align-items: center;
 		justify-content: center;
-		gap: 8rpx;
-		margin-top: 40rpx;
+		padding: 0 8rpx;
 	}
 
-	.agree-text {
+	.agreement-text {
 		font-size: 24rpx;
+		line-height: 1.6;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: center;
+		gap: 4rpx;
+	}
+
+	.text {
 		color: #9CA3AF;
 		white-space: nowrap;
 	}
 
 	.link {
-		font-size: 24rpx;
 		color: #2563EB;
 		white-space: nowrap;
 	}