From 4c66a8974f4609855da778e9d628aaa1f7ca4691 Mon Sep 17 00:00:00 2001
From: MrKBear <mrkbear@qq.com>
Date: Fri, 10 Jun 2022 12:33:38 +0800
Subject: [PATCH] Add login UI style

---
 miniprogram/app.scss                   | 11 ++++
 miniprogram/pages/Account/Account.wxml | 43 +++++++++++++-
 miniprogram/pages/Account/Login.scss   | 77 +++++++++++++++++++++++++-
 3 files changed, 127 insertions(+), 4 deletions(-)

diff --git a/miniprogram/app.scss b/miniprogram/app.scss
index ae0fd63..b519616 100644
--- a/miniprogram/app.scss
+++ b/miniprogram/app.scss
@@ -6,15 +6,18 @@ $theme-color-light-layout: #F8F8F8;
 $theme-color-light-background: #f4f0f1;
 $theme-color-light-title: rgba(0, 0, 0, .65);
 $theme-color-light-text: rgba(0, 0, 0, .5);
+$theme-color-light-line: rgba(0, 0, 0, .25);
 
 $theme-color-dark-layout: #1f1f1f;
 $theme-color-dark-background: #181615;
 $theme-color-dark-title: rgba(255, 255, 255, .65);
 $theme-color-dark-text: rgba(255, 255, 255, .5);
+$theme-color-dark-line: rgba(255, 255, 255, .25);
 
 $black-filter: brightness(0) opacity(.65);
 $white-filter: brightness(100) opacity(.65);
 $blue-filter: opacity(1);
+$green-filter: hue-rotate(-110deg) opacity(1);
 
 @mixin container {
     width: 88%;
@@ -83,6 +86,14 @@ view.h3 {
     font-size: 1em;
     letter-spacing: .1em;
 }
+
+view.button {
+    color: white;
+    background-color: $theme-color-blue;
+    text-align: center;
+    padding: 10px;
+    border-radius: 10px;
+}
  
 @media (prefers-color-scheme: dark){
     page {
diff --git a/miniprogram/pages/Account/Account.wxml b/miniprogram/pages/Account/Account.wxml
index 1220164..0abd249 100644
--- a/miniprogram/pages/Account/Account.wxml
+++ b/miniprogram/pages/Account/Account.wxml
@@ -33,7 +33,48 @@
             </view>
         </view>
 
-        <view class="student-id-input"></view>
+        <!-- 学号输入框 -->
+        <view class="student-info-input">
+            <view class="input-icon">
+                <image class="icon" src="../../image/account/Account_UserName.svg"></image>
+            </view>
+            <view class="input-view">
+                <input placeholder="请输入学号"/>
+            </view>
+        </view>
+
+        <!-- 密码输入框 -->
+        <view class="student-info-input">
+            <view class="input-icon">
+                <image class="icon" src="../../image/account/Account_PasswordHidden.svg"></image>
+            </view>
+            <view class="input-view">
+                <input placeholder="请输入密码"/>
+            </view>
+        </view>
+
+        <view style="height: 30px"/>
+
+        <!-- 提示语 -->
+        <view class="tip-info last-active">
+            <image src="../../image/account/Account_Info.svg"></image>
+            <view>账号最后活动时间: 2022.1.25-8.20</view>
+        </view>
+
+        <view class="tip-info agree-lic">
+            <image src="../../image/account/Account_Complete.svg"></image>
+            <view>同意<text>《用户协议》</text>和<text>《隐私政策》</text></view>
+        </view>
+
+        <view class="tip-info helper-link">
+            <image src="../../image/account/Account_Question.svg"></image>
+            <view>遇到问题了戳这里-><text>常见问题</text></view>
+        </view>
+
+        <!-- 登录按钮 -->
+        <view class="button save-button">
+            保存并验证
+        </view>
     </view>
 </view>
 
diff --git a/miniprogram/pages/Account/Login.scss b/miniprogram/pages/Account/Login.scss
index a044448..8403a87 100644
--- a/miniprogram/pages/Account/Login.scss
+++ b/miniprogram/pages/Account/Login.scss
@@ -6,7 +6,7 @@ view.login-layer {
 
     view.school-logo {
         height: 0;
-        padding-top: 20px;
+        padding-top: 25px;
         width: 100%;
         text-align: center;
 
@@ -40,7 +40,8 @@ view.login-layer {
         view {
             height: 0;
             width: 100%;
-            border-top: 2px solid rgba(0,0,0,.1);
+            opacity: .5;
+            border-top: 2px solid $theme-color-light-line;
         }
     }
 
@@ -78,6 +79,72 @@ view.login-layer {
             }
         }
     }
+
+    view.student-info-input {
+        display: flex;
+        justify-content: center;
+        padding: 8px 0;
+
+        view.input-icon {
+            box-sizing: border-box;
+            padding: 3px 12px 3px 0;
+            flex-shrink: 0;
+            width: 38px;
+            height: 32px;
+
+            image {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        view.input-view {
+            position: relative;
+            bottom: 3px;
+            box-sizing: border-box;
+            border-bottom: 1.5px solid $theme-color-light-line;
+            flex-grow: 1;
+            width: 100%;
+            height: 32px;
+
+            input {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+
+    view.tip-info {
+        width: 100%;
+        vertical-align: middle;
+        padding: 1px 0;
+        font-size: .9em;
+
+        image {
+            vertical-align: middle;
+            width: 16px;
+            height: 16px;
+            margin-right: 5px;
+        }
+
+        view {
+            vertical-align: middle;
+            display: inline;
+
+            text {
+                color: $theme-color-blue;
+                text-decoration: underline;
+            }
+        }
+    }
+
+    view.agree-lic image {
+        filter: $green-filter;
+    }
+
+    view.save-button {
+        margin: 15px 0 25px 0;
+    }
 }
 
 @media (prefers-color-scheme: dark) {
@@ -93,7 +160,11 @@ view.login-layer {
         }
         
         view.line-bg view {
-            border-top: 2px solid rgba(255,255,255,.1);
+            border-top: 2px solid $theme-color-dark-line;
+        }
+
+        view.student-info-input view.input-view {
+            border-bottom: 1.5px solid $theme-color-dark-line;
         }
     }
 }
\ No newline at end of file