登录界面优化

pages/login/index.vue

@@ -1,26 +1,35 @@
 <template>
 	<view class="wrap login">
-		<view class="sys-name">
-			施工管理系统
+		<!-- 顶部：背景图 -->
+		<view class="login-header">
+			<image class="login-header__bg" src="/static/images/bg.jpg" mode="widthFix" />
 		</view>
 
-		<view class="login-form">
-			<u-form :model="form" ref="uFormRef">
-				<u-form-item prop="account" >
-					<template #leftIcon>
-						<u-icon name="account" size="32" />
-					</template>
-					<u-input v-model="loginForm.account" placeholder="请输入账号" /></u-form-item>
-				<u-form-item prop="password">
-					<template #leftIcon>
-						<u-icon name="lock" size="32" />
-					</template>
-					<u-input v-model="loginForm.password" type="password" :password-icon="true"  placeholder="请输入密码" />
-				</u-form-item>
-				<view class="u-margin-top-60">
-					<u-button type="primary" :loading="loading" @click="fetchLogin">登录</u-button>
-				</view>
-			</u-form>
+		<!-- 登录表单卡片 -->
+		<view class="login-card">
+			<view class="login-card__brand">
+				<image class="login-logo" src="/static/images/logo.png" mode="aspectFit" />
+				<view class="sys-name">管道安装管理系统</view>
+			</view>
+			<view class="login-form">
+				<u-form :model="form" ref="uFormRef">
+					<u-form-item prop="account">
+						<template #leftIcon>
+							<u-icon name="account" size="32" color="#2979ff" />
+						</template>
+						<u-input v-model="loginForm.account" placeholder="请输入账号" />
+					</u-form-item>
+					<u-form-item prop="password">
+						<template #leftIcon>
+							<u-icon name="lock" size="32" color="#2979ff" />
+						</template>
+						<u-input v-model="loginForm.password" type="password" :password-icon="true" placeholder="请输入密码" />
+					</u-form-item>
+					<view class="u-margin-top-60">
+						<u-button type="primary" :loading="loading" @click="fetchLogin">登录</u-button>
+					</view>
+				</u-form>
+			</view>
 		</view>
 	</view>
 </template>