From ab826d12b52265bc4f25044d43a042df2104f972 Mon Sep 17 00:00:00 2001
From: kyy <3283105747@qq.com>
Date: 星期一, 14 七月 2025 21:34:10 +0800
Subject: [PATCH] 最新代码
---
pages/BasePages/login.vue | 217 +++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 172 insertions(+), 45 deletions(-)
diff --git a/pages/BasePages/login.vue b/pages/BasePages/login.vue
index e37efc7..13757da 100644
--- a/pages/BasePages/login.vue
+++ b/pages/BasePages/login.vue
@@ -1,16 +1,27 @@
<template>
<uni-base-page>
- <view slot="page"
- style="background-color:#e6e6e6;margin-top: 5%;margin-left:15px;margin-right:15px;padding: 20px;border-radius: 10px;">
- <view class="image-container">
- <image src="../../static/img/bj/bg2.png" style=" max-width: 99%;"></image>
- </view>
- <uni-input-row type="text" title="璐﹀彿" v-model="account" :focus="accountFocus"
- @resetFocus="e=>{accountFocus=e;}" clearable placeholder="璇疯緭鍏ヨ处鍙�"></uni-input-row>
- <uni-input-row type="password" title="瀵嗙爜" v-model="password" :focus="passwordFocus"
- @resetFocus="e=>{passwordFocus=e}" displayable @confirm="bindLogin" placeholder="璇疯緭鍏ュ瘑鐮�"></uni-input-row>
- <view class="btn-row">
- <button type="primary" class="primary" @tap="bindLogin">鐧诲綍</button>
+ <view slot="page" class="login-container">
+ <view class="login-card">
+ <view class="logo-container">
+ <image src="../../static/img/bj/bg2.png" class="logo-image" mode="aspectFit"></image>
+ </view>
+ <view class="form-title">绯荤粺鐧诲綍</view>
+
+ <uni-input-row type="text" title="璐﹀彿" v-model="account" :focus="accountFocus"
+ @resetFocus="e=>{accountFocus=e;}" clearable placeholder="璇疯緭鍏ヨ处鍙�"
+ class="input-item"></uni-input-row>
+
+ <uni-input-row type="password" title="瀵嗙爜" v-model="password" :focus="passwordFocus"
+ @resetFocus="e=>{passwordFocus=e}" displayable @confirm="bindLogin"
+ placeholder="璇疯緭鍏ュ瘑鐮�" class="input-item"></uni-input-row>
+
+ <view class="btn-row">
+ <button type="primary" class="login-button" @tap="bindLogin">
+ <text class="button-text">鐧� 褰�</text>
+ </button>
+ </view>
+
+ <view class="footer-text">漏 2025 骞挎繁绉戞妧鐗堟潈鎵�鏈�</view>
</view>
</view>
</uni-base-page>
@@ -31,9 +42,8 @@
userName: '',
password: '',
factoryArray: [],
- //selectFactory: { value: this.$loginInfo.factoryKey||'',text:this.$loginInfo.factoryName||'',index: this.$loginInfo.factoryIndex}, //閫夋嫨鐨勮处濂椾俊鎭�
selectFactory: {},
- selectLanguage: {}, //閫夋嫨鐨勮瑷�
+ selectLanguage: {},
};
},
async onReady() {
@@ -117,41 +127,158 @@
</script>
<style>
- .action-row {
- display: flex;
- flex-direction: row;
- justify-content: center;
- }
+/* 鍩虹鏍峰紡閲嶇疆 */
+page {
+ background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ed 100%);
+ min-height: 100vh;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ overflow-x: hidden;
+}
- .action-row navigator {
- color: #007aff;
- padding: 0 10px;
- }
+/* 鑷�傚簲瀹瑰櫒 */
+.login-container {
+ width: 100%;
+ min-height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 20px;
+ box-sizing: border-box;
+}
- .btn-row {
- /* margin-top: 20px; */
- padding: 10px;
- }
+/* 鐧诲綍鍗＄墖 - 鑷�傚簲璁捐 */
+.login-card {
+ background-color: #fff;
+ border-radius: 16px;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+ padding: clamp(25px, 5vw, 40px);
+ width: 100%;
+ max-width: clamp(300px, 80vw, 450px);
+ transition: all 0.3s ease;
+}
- button.primary {
- background-color: #0faeff;
- }
-
- .img-container {
- width: 100%;
- height: auto;
- max-width: 100%;
- }
-
- .img-container image {
- max-width: 100%;
- height: auto;
- display: block;
+/* 璁惧鏂瑰悜浼樺寲 */
+@media (orientation: landscape) and (max-height: 500px) {
+ .login-container {
+ align-items: flex-start;
+ padding-top: 30px;
}
- @media screen and (min-width: 768px) {
- .img-container {
- max-width: 50%; /* 鏍规嵁瀹為檯鎯呭喌璁剧疆閫傚綋鐨勫搴� */
- }
+ .login-card {
+ max-width: 80%;
}
-</style>
\ No newline at end of file
+}
+
+/* 澶撮儴Logo */
+.logo-container {
+ display: flex;
+ justify-content: center;
+ margin-bottom: clamp(15px, 3vw, 25px);
+}
+
+.logo-image {
+ width: clamp(80px, 20vw, 140px);
+ height: clamp(80px, 20vw, 140px);
+ border-radius: 50%;
+ transition: all 0.3s ease;
+}
+
+.logo-image:hover {
+ transform: scale(1.05);
+}
+
+/* 鏍囬鏍峰紡 */
+.form-title {
+ text-align: center;
+ font-size: clamp(1.5rem, 4vw, 2rem);
+ font-weight: 600;
+ color: #333;
+ margin-bottom: clamp(20px, 5vw, 35px);
+ position: relative;
+}
+
+.form-title::after {
+ content: '';
+ display: block;
+ width: clamp(40px, 10vw, 60px);
+ height: 3px;
+ background-color: #0faeff;
+ margin: 10px auto 0;
+ border-radius: 3px;
+}
+
+/* 杈撳叆妗嗘牱寮� */
+.input-item {
+ margin-bottom: clamp(15px, 3vw, 20px);
+}
+
+uni-input-row {
+ border-radius: 8px;
+ overflow: hidden;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+ transition: all 0.3s ease;
+}
+
+uni-input-row:hover {
+ box-shadow: 0 4px 15px rgba(15, 174, 255, 0.15);
+}
+
+uni-input-row .uni-input-group {
+ border: none;
+}
+
+uni-input-row .uni-input-title {
+ color: #555;
+ font-weight: 500;
+}
+
+uni-input-row .uni-input {
+ padding-right: 15px;
+}
+
+/* 鎸夐挳鏍峰紡 */
+.btn-row {
+ margin-top: clamp(20px, 4vw, 30px);
+}
+
+.login-button {
+ background-color: #0faeff;
+ border-radius: 8px;
+ height: clamp(40px, 10vw, 50px);
+ line-height: clamp(40px, 10vw, 50px);
+ font-size: clamp(1rem, 3vw, 1.2rem);
+ font-weight: 500;
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 12px rgba(15, 174, 255, 0.3);
+}
+
+.login-button:active {
+ transform: translateY(2px);
+ box-shadow: 0 2px 8px rgba(15, 174, 255, 0.2);
+}
+
+.button-text {
+ color: #fff;
+}
+
+/* 搴曢儴鐗堟潈淇℃伅 */
+.footer-text {
+ text-align: center;
+ color: #999;
+ font-size: clamp(0.8rem, 2vw, 1rem);
+ margin-top: clamp(15px, 3vw, 25px);
+}
+
+/* 鍔ㄧ敾鏁堟灉 */
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(20px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+.login-card {
+ animation: fadeIn 0.5s ease forwards;
+}
+</style>
--
Gitblit v1.9.3