Merge branch 'master' into api

src/App.vue

@@ -1,10 +1,15 @@
 <template>
-  <router-view/>
+  <div>
+    <router-view/>
+    <global-message></global-message>
+  </div>
 </template>
 
 <script>
+import GlobalMessage from '@/components/GlobalMessage'
+
 export default {
-  components: {},
+  components: { GlobalMessage },
   mounted () {}
 }
 </script>

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>

src/components/GlobalMessage.vue

@@ -1,30 +1,62 @@
 <template>
-  <div class="message-wrapper">
+  <div class="message-wrapper" :class="type" v-if="show">
     <div class="message">
-      <div class="icon warning">{{iconfontMap['error']}}</div>
-      自动保存成功！
+      <span class="icon warning">{{iconMap[type] ? iconMap[type] : iconMap['info']}}</span>
+      <span class="message-content">{{ message }}</span>
     </div>
   </div>
 
 </template>
 
 <script>
-import iconfontMap from '@/utils/iconfont-map'
+import iconMap from '@/utils/icon-map'
+import { mapState } from 'vuex'
+import { USE_MESSAGE } from '@/store/types/message-types'
 
 export default {
   data () {
     return {
-      iconfontMap: iconfontMap
+      iconMap: iconMap,
+      show: false
     }
   },
-  computed: {}
+  computed: {
+    ...mapState({
+      message: state => state.message.message,
+      type: state => state.message.type,
+      duration: state => state.message.duration
+    })
+  },
+  watch: {
+    message (newMessage) {
+      if (newMessage) {
+        this.show = false
+        this.$nextTick(() => {
+          this.show = true
+          setTimeout(() => {
+            this.show = false
+            this.$store.commit(USE_MESSAGE)
+          }, 5000)
+        })
+      }
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+@import "~@/style/theme.scss";
+
 .message-wrapper {
+  width: 100%;
+  opacity: 0;
   display: flex;
   justify-content: center;
+  position: fixed;
+  top: 20px;
+  margin: 0 auto;
+  z-index: 2;
+  animation: show 5s ease-out;
 }
 
 .icon {
@@ -35,24 +67,54 @@ export default {
   user-select: none;
 }
 
-.warning {
-  color: darkorange;
+.message-content {
+  padding: 0 12px 0 4px
 }
 
 .message {
-  color: #2a3a4a;
+  color: #6a7a8a;
   display: flex;
   align-items: center;
   justify-content: center;
-  position: fixed;
-  top: 20px;
-  z-index: 2;
   font-size: 16px;
   font-weight: bold;
   margin: 0 auto;
   padding: 8px 10px;
   border-radius: 100px;
   backdrop-filter: saturate(180%) blur(20px);
-  background: rgba(230, 230, 230, 0.6);
+  background: $theme-blue-transparent;
+}
+
+.error {
+  .message {
+    color: $theme-red;
+    background: $theme-red-transparent;
+  }
+}
+
+.success {
+  .message {
+    color: $theme-green;
+    background: $theme-green-transparent;
+  }
+}
+
+@keyframes show {
+  0% {
+    opacity: 0;
+    transform: translateY(-100px);
+  }
+  12% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  95% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-100px);
+  }
 }
 </style>

src/store/modules/message.js

@@ -3,20 +3,17 @@ import { SET_MESSAGE, USE_MESSAGE } from '@/store/types/message-types'
 export default {
   state: {
     message: null,
-    type: null,
-    duration: 0
+    type: null
   },
 
   mutations: {
     [SET_MESSAGE] (state, payload) {
-      this.message = payload.message ? payload.message : '未知消息信息'
-      this.type = payload.type ? payload.type : 'info'
-      this.duration = payload.duration ? payload.duration : 3000
+      state.message = payload.message ? payload.message : '未知消息信息'
+      state.type = payload.type ? payload.type : 'info'
     },
-    [USE_MESSAGE] (state, payload) {
-      this.message = 0
-      this.type = null
-      this.duration = 0
+    [USE_MESSAGE] (state) {
+      state.message = 0
+      state.type = null
     }
   }
 }

src/style/theme.scss

@@ -1,10 +1,12 @@
 $theme-blue: #5485e5;
 $theme-orange: #ffaa44;
 $theme-red: #f44336;
+$theme-green: #4caf50;
 
 $theme-blue-transparent: rgba(84, 133, 229, .1);
 $theme-orange-transparent: rgba(255, 170, 68, .1);
 $theme-red-transparent: rgba(244, 67, 54, .1);
+$theme-green-transparent: rgba(76, 175, 80, .1);
 
 
 $icon-normal-color: #7a8a9a;

src/utils/icon-map.js

@@ -7,6 +7,7 @@ const iconMap = {
   'discussion': '\ue610',
   'error': '\ue686',
   'info': '\ue68e',
+  'success': '\ue67b',
   'explore': '\ue684',
   'courses': '\ue67d',
   'add': '\ue71b',

src/views/Home.vue

@@ -1,26 +1,47 @@
 <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" @click.native="showMessage">去注册</c-button>
+    </div>
+    <background></background>
   </div>
 </template>
 
 <script>
 import CButton from '@/components/CButton'
+import Background from '@/components/Background'
+import { SET_MESSAGE } from '@/store/types/message-types'
+
 export default {
-  components: { CButton },
+  components: { CButton, Background },
   methods: {
     handleLoginButtonClick () {
       this.$router.push('/login')
+    },
+    showMessage () {
+      // todo
+      this.$store.commit(SET_MESSAGE, {
+        message: '消息提醒测试',
+        type: 'success'
+      })
     }
   }
 }
 </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>

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>

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>
@@ -43,6 +43,7 @@ export default {
 
   & .c-input {
     margin-bottom: unset;
+    flex: 1;
   }
 
   & .c-button {

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;
+  }
+}