feat: 登录页面，css文件略微改动（需要重新整理）

src/App.vue

@@ -1,21 +1,20 @@
 <template>
   <div>
     <router-view/>
-    <message></message>
     <global-form></global-form>
   </div>
 </template>
 
 <script>
-import Message from '@/components/Message'
 import GlobalForm from '@/components/GlobalForm'
 
 export default {
-  components: { Message, GlobalForm }
+  components: { GlobalForm }
 }
 </script>
 
 <style lang="scss">
+@import '~@/common/reset.scss';
 body {
   margin: 0;
   padding: 0;
@@ -25,11 +24,11 @@ body {
 <style lang="scss">
 @font-face {
   font-family: 'iconfont';  /* project id 1598214 */
-  src: url('//at.alicdn.com/t/font_1598214_6jvqeh0ns29.eot');
-  src: url('//at.alicdn.com/t/font_1598214_6jvqeh0ns29.eot?#iefix') format('embedded-opentype'),
-  url('//at.alicdn.com/t/font_1598214_6jvqeh0ns29.woff2') format('woff2'),
-  url('//at.alicdn.com/t/font_1598214_6jvqeh0ns29.woff') format('woff'),
-  url('//at.alicdn.com/t/font_1598214_6jvqeh0ns29.ttf') format('truetype'),
-  url('//at.alicdn.com/t/font_1598214_6jvqeh0ns29.svg#iconfont') format('svg');
+  src: url('//at.alicdn.com/t/font_1598214_furlqpeeigp.eot');
+  src: url('//at.alicdn.com/t/font_1598214_furlqpeeigp.eot?#iefix') format('embedded-opentype'),
+  url('//at.alicdn.com/t/font_1598214_furlqpeeigp.woff2') format('woff2'),
+  url('//at.alicdn.com/t/font_1598214_furlqpeeigp.woff') format('woff'),
+  url('//at.alicdn.com/t/font_1598214_furlqpeeigp.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_1598214_furlqpeeigp.svg#iconfont') format('svg');
 }
 </style>

src/common/button-common.scss

@@ -1,3 +1,4 @@
+@import "theme.scss";
 button {
   border: none;
   outline: none;
@@ -5,7 +6,23 @@ button {
 
   cursor: pointer;
 
-  font-weight: bold;
 
   -webkit-tap-highlight-color: transparent;
+
+  display: block;
+  width: 120px;
+  height: 40px;
+  background: $theme-blue;
+  color: white;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+
+  &:hover {
+    background: darken($theme-blue, 5);
+  }
+
+  &:active {
+    background: darken($theme-blue, 10);
+  }
 }

src/common/input-common.scss

@@ -0,0 +1,16 @@
+@import "theme.scss";
+
+select, input {
+  box-sizing: border-box;
+  font-size: 16px;
+  font-weight: bold;
+  color: #3a4a5a;
+  background: $input-background-color;
+  border-radius: 8px;
+  border: none;
+  outline: none;
+  width: 100%;
+  height: 48px;
+  line-height: 40px;
+  padding: 0 0 0 12px;
+}

src/common/slide/item.scss

@@ -3,7 +3,7 @@
 
 h1, h2, h3, h4, h5, h6 {
   font-weight: 600;
-  line-height: 2;
+  padding: 3px 0;
 }
 
 h1 {

src/common/slide/slide.scss

@@ -4,6 +4,7 @@ $slide-width: 1100px;
   box-sizing: border-box;
   text-align: justify;
   outline: none;
+  color: #1a2a3a;
   max-width: $slide-width;
 
   line-height: 1.6;

src/common/tab-common.scss

@@ -2,7 +2,9 @@
 
 .tab-wrapper {
   max-width: 320px;
+  min-height: 320px;
   margin: 0 auto;
+  flex: 1;
 
   color: #3a4a5a;
 }
@@ -25,28 +27,6 @@
   margin-bottom: 16px;
 }
 
-
-.my-button {
-  display: block;
-  width: 120px;
-  height: 40px;
-  background: $theme-blue;
-  color: white;
-  border-radius: 8px;
-  border: none;
-  outline: none;
-  font-size: 14px;
-  font-weight: 600;
-
-  &:hover {
-    background: darken($theme-blue, 5);
-  }
-
-  &:active {
-    background: darken($theme-blue, 10);
-  }
-}
-
 a {
   outline: none;
   text-decoration: none;

src/common/theme.scss

@@ -1,4 +1,6 @@
 $theme-blue: #5485e5;
 
 $icon-normal-color: #7a8a9a;
-$icon-hover-color: lighten($theme-blue, 10);
+$icon-hover-color: lighten($theme-blue, 10);
+
+$input-background-color: #ebf0f5;

src/components/IconLink.vue

@@ -3,8 +3,7 @@
     <div
       class="icon"
       :class="currentRouteName === tab.name ? 'active' : ''"
-    >{{ tab.unicode }}
-    </div>
+    >{{ tab.unicode }}</div>
   </router-link>
 </template>
 

src/components/Message.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="message-wrapper">
-    <div class="icon"></div>
     <div class="message">
+      <div class="icon warning">{{iconfontMap['error']}}</div>
       自动保存成功！
     </div>
   </div>
@@ -9,7 +9,16 @@
 </template>
 
 <script>
-export default {}
+import iconfontMap from '@/utils/iconfont-map'
+
+export default {
+  data () {
+    return {
+      iconfontMap: iconfontMap
+    }
+  },
+  computed: {}
+}
 </script>
 
 <style lang="scss" scoped>
@@ -18,20 +27,32 @@ export default {}
   justify-content: center;
 }
 
+.icon {
+  font-family: 'iconfont', sans-serif;
+  padding-right: 8px;
+  font-size: 1.4em;
+  line-height: 0;
+  user-select: none;
+}
+
+.warning {
+  color: darkorange;
+}
+
 .message {
   color: #2a3a4a;
-  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   position: fixed;
   top: 20px;
   z-index: 2;
   font-size: 16px;
   font-weight: bold;
-  display: inline-block;
   margin: 0 auto;
-  max-width: 320px;
-  padding: 10px 24px;
+  padding: 8px 10px;
   border-radius: 100px;
   backdrop-filter: saturate(180%) blur(20px);
-  background: rgba(230,230,230,0.6);
+  background: rgba(230, 230, 230, 0.6);
 }
 </style>

src/config/server-info.js

@@ -1,4 +1,5 @@
 // const host = 'http://106.14.178.184:8080/seec_helper'
+// const host = 'http://192.168.3.70:18080'
 const host = 'http://localhost:18080'
 
 const slideUrl = host + '/api/slide'

src/layouts/RoleHome.vue

@@ -71,6 +71,8 @@ export default {
   }
 
   .view-container {
+    display: flex;
+    align-items: center;
     padding: 24px 18px;
     width: 460px;
   }

src/router/index.js

@@ -12,6 +12,10 @@ const routes = [{
   path: '/editor/:id',
   name: 'editor',
   component: () => import('../views/editor/EditorView.vue')
+}, {
+  path: '/login',
+  name: 'login',
+  component: () => import('../views/login/Login.vue')
 }, {
   path: '/reader/:id',
   name: 'reader',

src/store/modules/message.js

@@ -0,0 +1,16 @@
+import {
+  SET_MESSAGE
+} from '../types/message-types'
+
+export default {
+  state: {
+    message: null,
+    type: null
+  },
+
+  mutations: {
+    [SET_MESSAGE] (state, payload) {
+      this.message = payload.message
+    }
+  }
+}

src/store/types/message-types.js

@@ -0,0 +1 @@
+export const SET_MESSAGE = 'setMessage'

src/utils/iconfont-map.js

@@ -1,4 +1,6 @@
 const iconfontMap = {}
+
+// editor
 iconfontMap.div = '\ue737'
 iconfontMap.h1 = '\ue61c'
 iconfontMap.h2 = '\ue61a'
@@ -11,4 +13,10 @@ iconfontMap.olli = '\ue7f8'
 iconfontMap.ulli = '\ue7fa'
 iconfontMap.slideBreak = '\ue673'
 
+// warning success error info
+iconfontMap.success = '\ue67b'
+iconfontMap.warning = '\ue6bc'
+iconfontMap.error = '\ue686'
+iconfontMap.info = '\ue68e'
+
 export default iconfontMap

src/views/editor/components/EditableItem.vue

@@ -197,6 +197,7 @@ export default {
       this.$store.commit(SET_HOVER, { frontendId: this.item.frontendId })
     },
     handleMouseLeave () {
+      this.$store.commit(SET_HOVER, { frontendId: '' })
     }
   }
 }

src/views/login/Login.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="login-view-container">
+    <div>
+      <h1><span>SEEC</span> 用户登录</h1>
+      <label>
+        <input type="text" placeholder="用户名">
+      </label>
+      <label>
+        <input type="password" placeholder="密码">
+      </label>
+      <div class="button-area">
+        <button>确认</button>
+        <button class="help-button">帮助</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/common/input-common.scss';
+@import '~@/common/button-common.scss';
+
+h1 {
+  color: #3a4a5a;
+  font-size: 28px;
+  font-weight: bold;
+  margin-bottom: 32px;
+
+  & > span {
+    font-family: 'Courier New', 'Courier', monospace;
+    font-size: 1.15em;
+  }
+}
+
+.login-view-container {
+  height: 95vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  & > div {
+    max-width: 260px;
+    width: 100%;
+  }
+}
+
+input {
+  margin-bottom: 24px;
+  background: #f2f6fa;
+}
+
+.button-area {
+  display: flex;
+  margin: 0 -8px;
+  & > button {
+    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/tabs/AddTab.vue

@@ -54,8 +54,8 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '~@/common/tab-common.scss';
-
-$input-background-color: #ebf0f5;
+@import '~@/common/input-common.scss';
+@import '~@/common/button-common.scss';
 
 .title {
   margin-bottom: 32px;
@@ -67,22 +67,6 @@ $input-background-color: #ebf0f5;
   margin-bottom: 36px;
 }
 
-select,
-input {
-  box-sizing: border-box;
-  font-size: 16px;
-  font-weight: bold;
-  color: #3a4a5a;
-  background: $input-background-color;
-  border-radius: 8px;
-  border: none;
-  outline: none;
-  width: 100%;
-  height: 48px;
-  line-height: 40px;
-  padding: 0 0 0 12px;
-}
-
 select {
   //隐藏select的下拉图标
   appearance: none;

src/views/teacher/tabs/HomeTab.vue

@@ -8,7 +8,7 @@
             您还没有创建过幻灯片 (´・ω・`)
           </div>
           <router-link to="/teacher/teacher-add">
-            <button class="my-button">新建幻灯片</button>
+            <button>新建幻灯片</button>
           </router-link>
         </div>
         <div v-else>
@@ -43,6 +43,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '~@/common/tab-common.scss';
+@import '~@/common/button-common.scss';
 
 .tab-wrapper {
   max-height: 80vh;