Просмотр исходного кода

feat: 添加了丑陋的主页

ChenYangfan 6 лет назад
Родитель
Сommit
05b665093a

+ 65 - 0
src/components/Background.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="background">
+    <div class="sun"></div>
+    <div class="mountain"></div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/style/theme.scss";
+
+.background {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: -1;
+
+  .sun {
+    position: absolute;
+    right: 20vw;
+    top: 10vh;
+    background: $theme-orange;
+    width: 25vmin;
+    height: 25vmin;
+    border-radius: 1000px;
+  }
+
+  .mountain {
+    position: absolute;
+    bottom: 0;
+    left: 15vmax;
+    border-bottom: $theme-blue 30vmin solid;
+    border-right: transparent 30vmin solid;
+    border-top: transparent 30vmin solid;
+    border-left: transparent 30vmin solid;
+
+    &::after {
+      z-index: -1;
+      content: '';
+      display: block;
+      position: absolute;
+      top: -8vmin;
+      left: 8vmin;
+      border-bottom: lighten($theme-blue, 15) 20vmin solid;
+      border-right: transparent 24vmin solid;
+      border-top: transparent 24vmin solid;
+      border-left: transparent 24vmin solid;
+    }
+  }
+  @media (max-width: 700px) {
+    .mountain {
+      left: 5vmin;
+    }
+    .sun {
+      right: 10vw;
+      top: 5vh;
+    }
+  }
+}
+</style>

+ 17 - 4
src/views/Home.vue

@@ -1,13 +1,22 @@
 <template>
   <div class="home-container">
-    <c-button @click.native="handleLoginButtonClick">去登录</c-button>
+    <div class="content">
+      <h1 class="title">
+        SEEC 课堂助手
+      </h1>
+      <c-button @click.native="handleLoginButtonClick" class="full-width mb-12">去登录</c-button>
+      <c-button class="secondary full-width">去注册</c-button>
+    </div>
+    <background></background>
   </div>
 </template>
 
 <script>
 import CButton from '@/components/CButton'
+import Background from '@/components/Background'
+
 export default {
-  components: { CButton },
+  components: { CButton, Background },
   methods: {
     handleLoginButtonClick () {
       this.$router.push('/login')
@@ -17,10 +26,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-div {
+.home-container {
   display: flex;
-  height: 90vh;
+  height: 100vh;
   align-items: center;
   justify-content: center;
 }
+
+.content {
+  z-index: 1;
+}
 </style>

+ 4 - 16
src/views/login/Login.vue

@@ -6,8 +6,9 @@
       <c-input placeholder="密码"></c-input>
       <div class="button-area">
         <c-button @click.native="handleSubmit">确认</c-button>
-        <c-button class="help-button">帮助</c-button>
+        <c-button class="secondary">帮助</c-button>
       </div>
+      <background></background>
     </div>
   </div>
 </template>
@@ -15,8 +16,9 @@
 <script>
 import CInput from '@/components/CInput'
 import CButton from '@/components/CButton'
+import Background from '@/components/Background'
 export default {
-  components: { CButton, CInput },
+  components: { CButton, CInput, Background },
   methods: {
     handleSubmit () {
       this.$router.push('/teacher')
@@ -62,18 +64,4 @@ h1 {
     margin: 0 8px;
   }
 }
-
-.help-button {
-  $background-color: #e6e8ea;
-  background: #e6e8ea;
-  color: #3a4a5a;
-
-  &:hover {
-    background: darken($background-color, 5);
-  }
-
-  &:active {
-    background: darken($background-color, 10);
-  }
-}
 </style>

+ 1 - 1
src/views/teacher/components/TeacherCourseDetail.vue

@@ -3,7 +3,7 @@
     <back-title>课程详情</back-title>
     <div class="sub-title">修改选课码:</div>
     <div class="change-wrapper mb-24">
-      <c-input placeholder="不影响已选学生上课"/>
+      <c-input placeholder="不影响已选学生"/>
       <c-button class="secondary">确认修改</c-button>
     </div>
     <c-button class="secondary full-width mb-16" @click.native="handleCheckSlideList(123)">点击查看课件列表</c-button>

+ 13 - 0
src/views/teacher/tabs/tab-common.scss

@@ -32,3 +32,16 @@
   }
 }
 
+
+@media (max-width: 600px) {
+  .tab {
+    min-width: unset;
+    max-width: unset;
+  }
+  .left {
+    padding-right: unset;
+    padding-bottom: 20vh;
+    max-height: unset;
+    overflow: unset;
+  }
+}