浏览代码

优化登录效果

liqk 4 年之前
父节点
当前提交
5165507441

二进制
TEAMModelOS/ClientApp/src/assets/login/1-3.png


二进制
TEAMModelOS/ClientApp/src/assets/login/2-1.png


二进制
TEAMModelOS/ClientApp/src/assets/login/3-2.png


+ 12 - 2
TEAMModelOS/ClientApp/src/view/login/page/Student.vue

@@ -11,11 +11,13 @@
     height: 400px;
     display: flex;
     align-items: center;
-    box-shadow: 2px 0px 15px 0px rgba(75, 113, 136, 0.9);
+    justify-content: center;
+    flex-direction: column;
+    box-shadow: 2px 0px 15px 5px rgba(35, 57, 71, 0.3);
 }
 .right-box {
     padding: 40px 120px;
-    box-shadow: -2px 0px 15px 0px rgba(75, 113, 136, 0.9);
+    // box-shadow: -2px 0px 15px 0px rgba(75, 113, 136, 0.9);
     display: flex;
     height: 400px;
     min-width: 600px;
@@ -71,6 +73,13 @@
 .tmd-login-box {
     margin-right: 35px;
 }
+.client-label {
+    color: white;
+    font-size: 30px;
+    text-align: center;
+    margin-top: -20px;
+    margin-left: -7px;
+}
 </style>
 
 <style lang="less">
@@ -158,6 +167,7 @@
         <div class="left-box">
             <!-- 这张图片需要裁剪顶部 -->
             <img src="@/assets/login/2-1.png" class="student-login-img" style="margin-top:-30px">
+            <p class="client-label">学生端</p>
         </div>
         <div class="right-box">
             <div v-show="!qrloginFlag" class="tmd-login-box">

+ 13 - 2
TEAMModelOS/ClientApp/src/view/login/page/Teacher.vue

@@ -10,14 +10,17 @@
     padding: 0px 55px;
     height: 400px;
     display: flex;
+    flex-direction: column;
+    justify-content: center;
     align-items: center;
-    box-shadow: 2px 0px 15px 0px rgba(75, 113, 136, 0.9);
+    box-shadow: 2px 0px 15px 5px rgba(35, 57, 71, 0.3);
+    // border-right: 1px solid rgba(35, 57, 71, 0.1);
 }
 .right-box {
     padding: 40px 150px;
     width: 600px;
     height: 400px;
-    box-shadow: -2px 0px 15px 0px rgba(75, 113, 136, 0.9);
+    // box-shadow: -2px 0px 15px 5px rgba(35, 57, 71, 0.5);
 }
 .teacher-login-title {
     color: white;
@@ -63,6 +66,13 @@
     font-size: 50px;
     display: block;
 }
+.client-label {
+    color: white;
+    font-size: 30px;
+    text-align: center;
+    margin-top: -20px;
+    margin-left: -7px;
+}
 </style>
 
 <style lang="less">
@@ -149,6 +159,7 @@
         <div class="left-box">
             <!-- 这张图片需要裁剪顶部 -->
             <img src="@/assets/login/3-2.png" class="teacher-login-img" style="margin-top:-30px">
+            <p class="client-label">教师端</p>
         </div>
         <div class="right-box" v-show="!qrloginFlag">
             <p class="teacher-login-title">醍摩豆账号登录</p>