登录页

frontend/src/views/login.vue

@@ -6,6 +6,9 @@
           <div class="brand-mark" aria-hidden="true">教</div>
           <h1 class="brand-title">{{ title }}</h1>
           <p class="brand-tagline">开课计划 · 课表编排 · 成绩管理 · 教学分析</p>
+          <div class="brand-illustration" aria-hidden="true">
+            <svg-icon icon-class="education" />
+          </div>
         </div>
         <p class="brand-footnote">仅限授权单位内部使用</p>
       </aside>
@@ -174,26 +177,32 @@ export default {
 .brand-panel {
   display: flex;
   flex-direction: column;
+  position: relative;
   width: 42%;
   padding: 48px 40px 24px;
   color: #ffffff;
   background: transparent;
+  overflow: hidden;
 }
 
 .brand-main {
   display: flex;
   flex-direction: column;
+  justify-content: center;
   flex: 1;
   min-height: 0;
+  padding-bottom: 12px;
 }
 
 .brand-mark {
   display: flex;
   align-items: center;
   justify-content: center;
+  position: absolute;
+  top: 48px;
+  left: 40px;
   width: 48px;
   height: 48px;
-  margin-bottom: 22px;
   color: #7a5410;
   font-size: 26px;
   font-weight: 700;
@@ -211,12 +220,28 @@ export default {
 }
 
 .brand-tagline {
-  margin: 0 0 28px;
+  margin: 0;
   color: rgba(255, 255, 255, 0.78);
   font-size: 13px;
   letter-spacing: 0.4px;
 }
 
+.brand-illustration {
+  width: 116px;
+  height: 116px;
+  margin-top: 44px;
+  color: rgba(255, 255, 255, 0.12);
+  font-size: 116px;
+  line-height: 1;
+  transform: rotate(-6deg);
+}
+
+.brand-illustration .svg-icon {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
 .brand-footnote {
   margin: 16px 0 0;
   color: rgba(255, 255, 255, 0.52);
@@ -398,10 +423,19 @@ export default {
     padding: 28px 24px 20px;
   }
 
+  .brand-mark {
+    position: static;
+    margin-bottom: 22px;
+  }
+
   .brand-title {
     font-size: 26px;
   }
 
+  .brand-illustration {
+    display: none;
+  }
+
   .form-panel {
     padding: 32px 24px 20px;
   }