feat: 浏览界面功能组件样式（尚无逻辑）

src/App.vue

@@ -18,12 +18,12 @@ body {
 <style lang="scss">
 @font-face {
   font-family: 'iconfont'; /* project id 1598214 */
-  src: url('//at.alicdn.com/t/font_1598214_8n94nr4m8ja.eot');
-  src: url('//at.alicdn.com/t/font_1598214_8n94nr4m8ja.eot?#iefix')
+  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_8n94nr4m8ja.woff2') format('woff2'),
-    url('//at.alicdn.com/t/font_1598214_8n94nr4m8ja.woff') format('woff'),
-    url('//at.alicdn.com/t/font_1598214_8n94nr4m8ja.ttf') format('truetype'),
-    url('//at.alicdn.com/t/font_1598214_8n94nr4m8ja.svg#iconfont') format('svg');
+    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');
 }
 </style>

src/common/button-common.scss

@@ -0,0 +1,16 @@
+button {
+  border: none;
+  outline: none;
+  background: transparent;
+
+  cursor: pointer;
+
+  font-weight: bold;
+
+  border: none;
+  outline: none;
+  background: transparent;
+
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
+}

src/common/slide/slide.scss

@@ -1,9 +1,11 @@
+$slide-width: 1100px;
+
 .slide {
   box-sizing: border-box;
   text-align: justify;
   margin: 0 auto;
   outline: none;
-  max-width: 1100px;
+  max-width: $slide-width;
 
   line-height: 1.6;
 

src/views/reader/components/Reader.vue

@@ -11,6 +11,16 @@
         @change-mode="handleChangeMode"
       ></read-mode-button-group-vue>
     </div>
+    <div class="tools-bottom">
+      <marker-button-vue></marker-button-vue>
+      <div class="spacer"></div>
+      <scale-pad-vue></scale-pad-vue>
+      <div class="spacer"></div>
+      <discuss-button-small-vue></discuss-button-small-vue>
+    </div>
+    <discuss-button-large-vue
+      class="discuss-button-large"
+    ></discuss-button-large-vue>
   </div>
 </template>
 
@@ -18,9 +28,21 @@
 import { mapState } from 'vuex'
 import generatePages from '@/utils/generate-pages'
 import ReaderPageVue from './ReaderPage.vue'
-import ReadModeButtonGroupVue from '../../../components/ReadModeButtonGroup.vue'
+import ReadModeButtonGroupVue from './components/ReadModeButtonGroup.vue'
+import ScalePadVue from './components/ScalePad.vue'
+import DiscussButtonLargeVue from './components/DiscussButtonLarge.vue'
+import DiscussButtonSmallVue from './components/DiscussButtonSmall.vue'
+import MarkerButtonVue from './components/MarkerButton.vue'
+
 export default {
-  components: { ReaderPageVue, ReadModeButtonGroupVue },
+  components: {
+    ReaderPageVue,
+    ReadModeButtonGroupVue,
+    ScalePadVue,
+    DiscussButtonLargeVue,
+    MarkerButtonVue,
+    DiscussButtonSmallVue
+  },
   computed: {
     ...mapState({
       items: state => state.reader.items
@@ -39,12 +61,30 @@ export default {
 
 <style lang="scss" scoped>
 @import '@/common/slide/slide.scss';
-.tools-top {
+.tools-top,
+.tools-bottom {
+  width: 100vw;
   position: fixed;
-  top: 20px;
-  left: 0;
-  right: 0;
   display: flex;
+  // flex-wrap: wrap;
   justify-content: center;
 }
+
+.tools-top {
+  top: 20px;
+}
+
+.tools-bottom {
+  bottom: 20px;
+}
+
+.spacer {
+  flex: 1;
+  max-width: 12px;
+}
+.discuss-button-large {
+  position: fixed;
+  right: 24px;
+  top: calc(50vh - 20px);
+}
 </style>

src/views/reader/components/components/DiscussButtonLarge.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <button @click="handleClick" :class="isActive ? 'active' : ''">
+      &#xe610;
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isActive: false
+    }
+  },
+  methods: {
+    handleClick() {
+      this.isActive = !this.isActive
+      this.$emit('discuss-mode-change', this.isActive)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '@/common/button-common';
+
+button {
+  white-space: nowrap;
+  width: 40px;
+  height: 40px;
+  border-radius: 100px;
+  margin: 0 24px;
+
+  font-family: 'iconfont';
+  font-size: 26px;
+
+  color: #ffffff;
+  // backdrop-filter: saturate(180%) blur(20px);
+  background-color: #aabaca;
+
+  &::after {
+    content: '\e813';
+    position: absolute;
+    z-index: -1;
+    color: #aabaca;
+    transform: translateX(-72px);
+    transition: 0.2s;
+  }
+}
+
+.active {
+  &::after {
+    transform: translateX(16px) rotateY(180deg);
+  }
+}
+</style>

src/views/reader/components/components/DiscussButtonSmall.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="marker-button-wrapper">
+    <button>&#xe610;</button>
+    <div>&#xe7d9;</div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+<style lang="scss" scoped>
+@import '@/common/button-common';
+button {
+  color: #999;
+  font-family: 'iconfont';
+  font-weight: bold;
+  font-size: 24px;
+
+  transform: translateY(1px);
+  transition: 0.1s color;
+
+  &:hover {
+    color: #5a5a5a;
+  }
+}
+
+.marker-button-wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+
+  border-radius: 100px;
+  backdrop-filter: saturate(180%) blur(20px);
+  background-color: #aaaaaa22;
+  transition: 0.2s background-color;
+
+  font-family: 'iconfont';
+  font-size: 16px;
+  font-weight: bold;
+
+  transition: 0.1s color;
+  color: #777;
+
+  & > div {
+    margin-right: 12px;
+    &:hover {
+      cursor: default;
+      color: #3a3a3a;
+    }
+  }
+}
+</style>

src/views/reader/components/components/MarkerButton.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="marker-button-wrapper">
+    <button>&#xe6d6;</button>
+    <div>标记</div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+<style lang="scss" scoped>
+@import '@/common/button-common';
+button {
+  color: #999;
+  font-family: 'iconfont';
+  font-weight: bold;
+  font-size: 24px;
+
+  transform: translateY(1px);
+  transition: 0.1s color;
+
+  &:hover {
+    color: #5a5a5a;
+  }
+}
+
+.marker-button-wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+
+  border-radius: 100px;
+  backdrop-filter: saturate(180%) blur(20px);
+  background-color: #aaaaaa22;
+  transition: 0.2s background-color;
+
+  font-family: 'iconfont';
+  font-size: 16px;
+  font-weight: bold;
+
+  transition: 0.1s color;
+  color: #777;
+
+  & > div {
+    margin-right: 12px;
+    &:hover {
+      cursor: default;
+      color: #3a3a3a;
+    }
+  }
+}
+</style>

src/components/ReadModeButtonGroup.vue → src/views/reader/components/components/ReadModeButtonGroup.vue

@@ -42,26 +42,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/common/button-common';
 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;
   }
@@ -97,10 +90,10 @@ button {
     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);
-    }
+}
+@media (max-width: 300px) {
+  .button-group-wrapper::before {
+    width: calc(33.3333% - 3px);
   }
 }
 

src/views/reader/components/components/ScalePad.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="scale-pad-wrapper">
+    <button>&#xe775;</button>
+    <div>
+      <span class="icon">&#xe7f9;</span>
+      <span class="text"> 100%</span>
+    </div>
+    <button>&#xe71d;</button>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+@import '@/common/button-common';
+.scale-pad-wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-around;
+  box-sizing: border-box;
+
+  border-radius: 100px;
+  backdrop-filter: saturate(180%) blur(20px);
+  background-color: #aaaaaa22;
+  transition: 0.2s background-color;
+
+  font-family: 'iconfont';
+  font-size: 16px;
+  font-weight: bold;
+
+  transition: 0.1s color;
+  color: #777;
+
+  & > div {
+    &:hover {
+      cursor: default;
+      color: #3a3a3a;
+    }
+
+    & > .class {
+      display: inline-block;
+      font-size: 18px;
+      vertical-align: -1px;
+    }
+  }
+}
+
+@media (max-width: 300px) {
+  .scale-pad-wrapper > div > .text {
+    display: none;
+  }
+}
+button {
+  color: #999;
+  font-family: 'iconfont';
+  font-weight: bold;
+  font-size: 20px;
+
+  padding: 6px;
+
+  transition: 0.1s color;
+
+  &:hover {
+    color: #5a5a5a;
+  }
+}
+</style>