fix: 去除前段时间写的工具栏样式，重新进行一些尝试，提交过年啦

src/App.vue

@@ -1,11 +1,17 @@
 <template>
   <div>
     <router-view/>
+    <message></message>
+    <global-form></global-form>
   </div>
 </template>
 
 <script>
-export default {}
+import Message from '@/components/Message'
+import GlobalForm from '@/components/GlobalForm'
+export default {
+  components: { Message, GlobalForm }
+}
 </script>
 
 <style lang="scss">
@@ -17,12 +23,12 @@ body {
 
 <style lang="scss">
 @font-face {
-  font-family: 'iconfont'; /* project id 1598214 */
-  src: url('//at.alicdn.com/t/font_1598214_alt7gplefub.eot');
-  src: url('//at.alicdn.com/t/font_1598214_alt7gplefub.eot?#iefix') format('embedded-opentype'),
-  url('//at.alicdn.com/t/font_1598214_alt7gplefub.woff2') format('woff2'),
-  url('//at.alicdn.com/t/font_1598214_alt7gplefub.woff') format('woff'),
-  url('//at.alicdn.com/t/font_1598214_alt7gplefub.ttf') format('truetype'),
-  url('//at.alicdn.com/t/font_1598214_alt7gplefub.svg#iconfont') format('svg');
+  font-family: 'iconfont';  /* project id 1598214 */
+  src: url('//at.alicdn.com/t/font_1598214_ps1btaikhd.eot');
+  src: url('//at.alicdn.com/t/font_1598214_ps1btaikhd.eot?#iefix') format('embedded-opentype'),
+  url('//at.alicdn.com/t/font_1598214_ps1btaikhd.woff2') format('woff2'),
+  url('//at.alicdn.com/t/font_1598214_ps1btaikhd.woff') format('woff'),
+  url('//at.alicdn.com/t/font_1598214_ps1btaikhd.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_1598214_ps1btaikhd.svg#iconfont') format('svg');
 }
 </style>

src/common/slide/page.scss

@@ -5,6 +5,7 @@
   margin: 0 auto;
   align-items: center;
 
+  width: 100%;
   padding: 0 2rem;
 
   box-sizing: border-box;
@@ -34,4 +35,4 @@
     font-weight: 800;
     font-size: 1em
   }
-}
+}

src/common/slide/slide.scss

@@ -17,4 +17,4 @@ $slide-width: 1100px;
       padding: 0 10vw;
     }
   }
-}
+}

src/common/tab-common.scss

@@ -15,13 +15,13 @@
 
 .title {
   font-size: 28px;
-  font-weight: 500;
+  font-weight: 600;
   margin-bottom: 12px;
 }
 
 .sub-title {
   font-size: 22px;
-  font-weight: 500;
+  font-weight: 600;
   margin-bottom: 16px;
 }
 
@@ -36,7 +36,7 @@
   border: none;
   outline: none;
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 600;
 
   &:hover {
     background: darken($theme-blue, 5);

src/components/GlobalForm.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="global-form-wrapper">
+    <div class="global-form">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+.global-form-wrapper {
+  display: none;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  backdrop-filter: saturate(180%) blur(20px);
+  background: rgba(255, 255, 255, 0.6);
+}
+
+.global-form {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  max-width: 600px;
+  max-height: 600px;
+  background: white;
+  margin: auto;
+  padding: 16px;
+  box-sizing: border-box;
+  box-shadow: 0 0 20px -4px rgba(0, 0, 0, .2);
+}
+
+@media (max-width: 600px) {
+  .global-form {
+    margin: auto;
+    max-height: 100vh;
+    overflow: auto;
+  }
+}
+</style>

src/components/IconLink.vue

@@ -1,18 +1,11 @@
 <template>
-  <div>
-    <template v-if="tab.name !== 'line'">
-      <router-link :to="tab.name">
-        <div
-          class="icon"
-          :class="currentRouteName === tab.name ? 'active' : ''"
-        >{{ tab.unicode }}
-        </div>
-      </router-link>
-    </template>
-    <template v-else>
-      <div class="line"></div>
-    </template>
-  </div>
+  <router-link :to="tab.name" class="icon-link">
+    <div
+      class="icon"
+      :class="currentRouteName === tab.name ? 'active' : ''"
+    >{{ tab.unicode }}
+    </div>
+  </router-link>
 </template>
 
 <script>
@@ -37,7 +30,6 @@ export default {
 .icon {
   user-select: none;
   cursor: pointer;
-  padding: 12px 0;
   text-align: center;
   font-family: 'iconfont', sans-serif;
   font-size: 34px;

src/components/Message.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="message-wrapper">
+    <div class="icon"></div>
+    <div class="message">
+      自动保存成功！
+    </div>
+  </div>
+
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+.message-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.message {
+  color: #2a3a4a;
+  text-align: 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;
+  border-radius: 100px;
+  backdrop-filter: saturate(180%) blur(20px);
+  background: rgba(230,230,230,0.6);
+}
+</style>

src/components/ReturnIconButton.vue

@@ -0,0 +1,19 @@
+<template>
+  <button>&#xe714;</button>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/common/button-common.scss";
+button {
+  font-family: 'iconfont', sans-serif;
+  font-size: 34px;
+  user-select: none;
+  width: 50px;
+  height: 50px;
+  border-radius: 100px;
+}
+</style>

src/components/SearchBar.vue

@@ -27,7 +27,7 @@ $input-background-color: #ebf0f5;
 input {
   box-sizing: border-box;
   font-size: 16px;
-  font-weight: 500;
+  font-weight: 600;
   color: #3a4a5a;
   background: $input-background-color;
   border-radius: 24px;

src/layouts/RoleHome.vue

@@ -2,11 +2,9 @@
   <div class="main-container">
     <div class="menu-container">
       <div class="tab-container-large">
-        <div class="tab">
-          <template v-for="tab of tabs">
-            <icon-link :tab="tab" :key="tab.unicode"></icon-link>
-          </template>
-        </div>
+        <template v-for="tab of tabs">
+          <icon-link :tab="tab" :key="tab.unicode"></icon-link>
+        </template>
       </div>
       <div class="view-container">
         <transition name="fade" mode="out-in">
@@ -20,7 +18,7 @@
 
     <div class="tab-container-small">
       <template v-for="tab of tabs">
-        <icon-link :tab="tab" :key="tab.name" v-if="tab.name!=='line'"></icon-link>
+        <icon-link :tab="tab" :key="tab.unicode"></icon-link>
       </template>
     </div>
   </div>
@@ -61,11 +59,15 @@ export default {
 // 大屏幕情况
 @media (min-width: 600px) {
   .tab-container-large {
-    padding: 24px 18px 24px 36px;
+    padding: 24px 18px;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
+
+    .icon-link {
+      margin: 16px 0;
+    }
   }
 
   .view-container {
@@ -93,19 +95,22 @@ export default {
 
   .main-container {
     justify-content: unset;
+    min-height: calc(100vh - 54px);
   }
 
   .tab-container-small {
+    z-index: 2;
+    backdrop-filter: saturate(180%) blur(20px);
+    background: rgba(255,255,255,0.8);
     width: 100%;
     position: fixed;
-    bottom: 10px;
+    padding: 12px 0;
+    height: 54px;
+    box-sizing: border-box;
+    bottom: 0;
     display: flex;
     align-items: center;
     justify-content: space-around;
   }
 }
-
-.tab {
-  margin: -12px 0;
-}
 </style>

src/views/reader/components/Reader.vue

@@ -1,10 +1,16 @@
 <template>
-  <div>
+  <div class="reader-container">
     <div class="slide show-mode">
       <template v-for="page in pages">
         <reader-page :key="page.id" :page="page"></reader-page>
       </template>
     </div>
+
+    <div class="tools-wrapper">
+      <div class="tools">
+        <return-icon-button></return-icon-button>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -12,10 +18,12 @@
 import { mapState } from 'vuex'
 import generatePages from '@/utils/generate-pages'
 import ReaderPage from './ReaderPage.vue'
+import ReturnIconButton from '@/components/ReturnIconButton'
 
 export default {
   components: {
-    ReaderPage
+    ReaderPage,
+    ReturnIconButton
   },
   computed: {
     ...mapState({
@@ -32,30 +40,30 @@ export default {
 <style lang="scss" scoped>
 @import '~@/common/slide/slide.scss';
 
-.tools-top,
-.tools-bottom {
-  width: 100vw;
-  position: fixed;
-  display: flex;
-  // flex-wrap: wrap;
-  justify-content: center;
+.tools-wrapper {
+  width: 50px;
+  height: 100vh;
+  position: absolute;
 }
 
-.tools-top {
-  top: 20px;
+.tools {
+  /*position: fixed;*/
 }
 
-.tools-bottom {
-  bottom: 20px;
+.reader-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.spacer {
-  flex: 1;
-  max-width: 12px;
+.slide {
+  position: relative;
+  flex-grow: 1;
+  overflow: auto;
 }
 
 .discuss-button-large {
-  position: fixed;
+  /*position: fixed;*/
   right: 24px;
   top: calc(50vh - 20px);
 }

src/views/student/StudentHomeView.vue

@@ -30,12 +30,7 @@ export default {
         },
         {
           name: 'student-discussion',
-          unicode: '\ue69e'
-        },
-        { name: 'line' },
-        {
-          name: 'student-info',
-          unicode: '\ue68e'
+          unicode: '\ue610'
         }
       ]
     }

src/views/teacher/TeacherHomeView.vue

@@ -30,12 +30,7 @@ export default {
         },
         {
           name: 'teacher-discussion',
-          unicode: '\ue69e'
-        },
-        { name: 'line' },
-        {
-          name: 'teacher-info',
-          unicode: '\ue68e'
+          unicode: '\ue610'
         }
       ]
     }

src/views/teacher/tabs/AddTab.vue

@@ -71,7 +71,7 @@ select,
 input {
   box-sizing: border-box;
   font-size: 16px;
-  font-weight: 500;
+  font-weight: bold;
   color: #3a4a5a;
   background: $input-background-color;
   border-radius: 8px;