feat: 切换浏览模式的按钮以及样式

src/components/ReadModeButtonGroup.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="button-group-wrapper" :class="mode">
+    <button
+      v-for="button of buttons"
+      :key="button.value"
+      @click="changeMode(button.value)"
+    >
+      {{ button.name }}
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['defaultMode'],
+  data() {
+    return {
+      mode: this.defaultMode,
+      buttons: [
+        {
+          value: 'show',
+          name: '放映'
+        },
+        {
+          value: 'read',
+          name: '阅读'
+        },
+        {
+          value: 'auto',
+          name: '自适应'
+        }
+      ]
+    }
+  },
+  methods: {
+    changeMode(value) {
+      this.mode = value
+      this.$emit('change-mode', this.mode)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+button {
+  flex: 1;
+  display: block;
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  padding: 8px 0;
+
+  cursor: pointer;
+
+  color: #777;
+  font-weight: bold;
+  font-size: 14px;
+
+  transition: 0.1s color;
+
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
+
+  &:hover {
+    color: #3a3a3a;
+  }
+}
+
+.button-group-wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+
+  width: 300px;
+  border-radius: 100px;
+  backdrop-filter: saturate(180%) blur(20px);
+  background-color: #aaaaaa22;
+  transition: 0.2s background-color;
+
+  &:hover {
+    background-color: #aaaaaa33;
+  }
+
+  &::before {
+    content: '';
+    // bug fix: safari 宽度计算机制太奇葩，只好写死宽度外加 media
+    width: calc(100px - 3px);
+    z-index: -1;
+    height: calc(100% - 8px);
+    border-radius: 100px;
+    display: inline-block;
+    position: absolute;
+    opacity: 0.8;
+    background: #ffffff;
+    box-shadow: 0 1px 1px #00000022;
+    transition: 0.2s cubic-bezier(0, 0.5, 0.5, 1.25);
+  }
+  @media (max-width: 300px) {
+    &::before {
+      width: calc(33.3333% - 3px);
+    }
+  }
+}
+
+.show::before {
+  transform: translateX(-100%);
+}
+
+.auto::before {
+  transform: translateX(100%);
+}
+</style>

src/views/Home.vue

@@ -3,19 +3,13 @@
     调试链接：<br />
     <router-link to="/typography">排版布局原型</router-link><br />
     <router-link to="/teacher">教师主页</router-link><br />
-    <router-link to="/student">学生主页</router-link>
-    {{ height }}
+    <router-link to="/student">学生主页</router-link> <br />
+    <router-link to="/reader/1">阅读器🔗</router-link><br />
   </div>
 </template>
 
 <script>
-export default {
-  data() {
-    return {
-      height: window.innerHeight
-    }
-  }
-}
+export default {}
 </script>
 
 <style lang="scss">

src/views/reader/components/Reader.vue

@@ -1,17 +1,26 @@
 <template>
-  <div class="slide show-mode">
-    <template v-for="page in pages">
-      <reader-page-vue :key="page.id" :page="page"></reader-page-vue>
-    </template>
+  <div>
+    <div class="slide show-mode">
+      <template v-for="page in pages">
+        <reader-page-vue :key="page.id" :page="page"></reader-page-vue>
+      </template>
+    </div>
+    <div class="tools-top">
+      <read-mode-button-group-vue
+        defaultMode="show"
+        @change-mode="handleChangeMode"
+      ></read-mode-button-group-vue>
+    </div>
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import ReaderPageVue from './ReaderPage.vue'
 import generatePages from '@/utils/generate-pages'
+import ReaderPageVue from './ReaderPage.vue'
+import ReadModeButtonGroupVue from '../../../components/ReadModeButtonGroup.vue'
 export default {
-  components: { ReaderPageVue },
+  components: { ReaderPageVue, ReadModeButtonGroupVue },
   computed: {
     ...mapState({
       items: state => state.reader.items
@@ -19,10 +28,23 @@ export default {
     pages() {
       return generatePages(this.$store.state.reader.items)
     }
+  },
+  methods: {
+    handleChangeMode(mode) {
+      // todo
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
 @import '@/common/slide/slide.scss';
+.tools-top {
+  position: fixed;
+  top: 20px;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+}
 </style>