Add login layer

miniprogram/pages/Account/Account.scss

@@ -1,6 +1,7 @@
 @import "./UserCard.scss";
 @import "./MainFunction.scss";
 @import "./FunctionList.scss";
+@import "./Login.scss";
 @import "../../modular/PopupLayer.scss";
 
 view.container{

miniprogram/pages/Account/Account.ts

@@ -2,8 +2,8 @@ import { Manager } from "../../core/Module";
 import { UserCard } from "./UserCard";
 import { MainFunction } from "./MainFunction";
 import { FunctionList } from "./FunctionList";
+import { Login } from "./Login";
 import { PopupLayer } from "../../modular/PopupLayer";
-import { TestLayerA } from "./TestLayerA";
 
 (async () => {
 
@@ -11,21 +11,20 @@ import { TestLayerA } from "./TestLayerA";
     const { manager, query } = await Manager.PageAsync();
 
     // 添加弹出层 Modular
-    const popupLayer: PopupLayer<"layerA" | "layerB"> = manager.addModule(PopupLayer, "mask") as any;
+    const popupLayer: PopupLayer<"loginLayer"> = manager.addModule(PopupLayer, "mask") as any;
+    
+    // 初始化弹出层
+    popupLayer.initLayers(["loginLayer"]);
 
     // 添加 UserCard Modular
     const userCard = manager.addModule(UserCard, "userCard");
 
-    //#region test layer
-    popupLayer.initLayers(["layerA", "layerB"]);
-    const testLayerA = manager.addModule(TestLayerA, "testLayerA");
+    // 添加登录模块
+    const loginLayer = manager.addModule(Login, "loginLayer");
+
     userCard.on("clickChangeTheme", () => {
-        popupLayer.emit("show", "layerA");
-    })
-    testLayerA.on("click", () => {
-        popupLayer.emit("show", "layerB");
-    })
-    //#endregion
+        popupLayer.emit("show", "loginLayer");
+    });
 
     // 添加 MainFunction Modular
     manager.addModule(MainFunction, "mainFunction");

miniprogram/pages/Account/Account.wxml

@@ -4,14 +4,37 @@
 <!-- 蒙版 -->
 <view class="{{ mask$mask$className }}" bindtap="mask$clickMask"></view>
 
-<!-- 层A -->
-<view class="{{ mask$layerA$className }}" bindtap="mask$clickMask">
-    <view class="card" style="height: 300px; line-height: 300px; text-align:center" catchtap="testLayerA$click">layerA(点击显示layerB)</view>
-</view>
+<!-- 登录层 -->
+<view class="{{ mask$loginLayer$className }}" bindtap="mask$clickMask">
+    <view class="card login-layer" catchtap>
 
-<!-- 层B -->
-<view class="{{ mask$layerB$className }}" bindtap="mask$clickMask">
-    <view class="card" style="height: 200px; line-height: 200px; text-align:center" catchtap>layerB</view>
+        <!-- 学校logo -->
+        <view class="school-logo">
+            <view>
+                <image src="../../image/account/School_DLPU.png"></image>
+            </view>
+        </view>
+        
+        <view class="line-bg">
+            <view wx:for="{{ [0, 1, 2, 3, 4] }}" wx:key="item"></view>
+        </view>
+
+        <!-- 学生姓名 -->
+        <view class="student-name h2">秦浩轩</view>
+
+        <!-- 学号 -->
+        <view class="student-id">1806240113</view>
+
+        <!-- 状态 -->
+        <view class="login-state">
+            <view class="certified">
+                <view class="certifi-info">已认证</view>
+                <image class="text-icon" src="../../image/account/Account_OK.svg"></image>
+            </view>
+        </view>
+
+        <view class="student-id-input"></view>
+    </view>
 </view>
 
 <!-- 顶部的阴影 -->

miniprogram/pages/Account/Login.scss

@@ -0,0 +1,99 @@
+@import "../../app.scss";
+
+$logo-height: 100px;
+
+view.login-layer {
+
+    view.school-logo {
+        height: 0;
+        padding-top: 20px;
+        width: 100%;
+        text-align: center;
+
+        view {
+            z-index: 2;
+            display: inline-block;
+            position: relative;
+            border-radius: 1000px;
+            background-color: $theme-color-light-layout;
+            width: $logo-height;
+            height: $logo-height;
+
+            image {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+
+    view.line-bg {
+        display: flex;
+        box-sizing: border-box;
+        padding: 35px 0;
+        height: $logo-height;
+        width: calc( 100% + 40px );
+        position: relative;
+        left: -20px;
+        flex-direction: column;
+        justify-content: space-around;
+
+        view {
+            height: 0;
+            width: 100%;
+            border-top: 2px solid rgba(0,0,0,.1);
+        }
+    }
+
+    view.student-name {
+        margin: 10px 0 1px 0;
+        text-align: center;
+    }
+
+    view.student-id {
+        margin-bottom: 1px;
+        text-align: center;
+    }
+
+    view.login-state {
+        width: 100%;
+        margin-bottom: 20px;
+        text-align: center;
+
+        view.certified {
+            color: $theme-color-blue;
+            border: 1px solid $theme-color-blue;
+            border-radius: 4px;
+            margin-left: .3em;
+            font-size: .85em;
+            height: 1.2em;
+            padding: 0 2px;
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+
+            image.text-icon {
+                margin-left: .25em;
+                width: 10px;
+                height: 10px;
+            }
+        }
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+
+    view.login-layer {
+
+        view.school-logo view {
+            background-color: $theme-color-dark-layout;
+            
+            image {
+                filter: $white-filter;
+            }
+        }
+        
+        view.line-bg view {
+            border-top: 2px solid rgba(255,255,255,.1);
+        }
+    }
+}

miniprogram/pages/Account/Login.ts

@@ -0,0 +1,15 @@
+import { Modular, Manager } from "../../core/Module";
+
+type ILoginEvent = {
+    
+}
+
+class Login<M extends Manager> extends Modular<M, {}> {
+
+    public override onLoad() {
+        
+    }
+}
+
+export { Login };
+export default Login;

miniprogram/pages/Account/TestLayerA.ts

@@ -1,26 +0,0 @@
-import { Modular, Manager } from "../../core/Module";
-
-type IUserCardEvent = {
-
-    /**
-     * 主题更换按钮点击事件
-     */
-    click: void;
-}
-
-class TestLayerA<M extends Manager> extends Modular<M, {}, IUserCardEvent> {
-
-    public override onLoad() {
-        this.setFunc(this.handleClick, "click");
-    }
-    
-    /**
-     * 弹窗点击时
-     */
-    private handleClick() {
-        this.emit("click");
-    }
-}
-
-export { TestLayerA };
-export default TestLayerA;