1

.eslintrc.js

@@ -49,6 +49,7 @@ module.exports = {
     globalConfig: true,
     globalApi: true,
     globalUtils: true,
-    // store: true,
+    globalMapState: true,
+    globalMapMutations: true,
   }
 }

src/components/BottomBar.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    v-show="$route.meta.isShowBottomBar"
     class="bottom-bar"
     :class="{collapsed: isCollapsed}"
   >
@@ -30,9 +31,10 @@
       </button>
       <button>
         <img
-          src="@/assets/images/music.png"
+          :src="isMuted ? require('@/assets/images/music-muted.png') : require('@/assets/images/music.png')"
           alt="声音"
           draggable="false"
+          @click="toggleMute"
         >
         <span>声音</span>
       </button>
@@ -60,6 +62,17 @@
         >
         <span>分享</span>
       </button>
+      <button
+        v-show="$route.meta.canFullScreen"
+        @click="onClickFullScreen"
+      >
+        <img
+          src="@/assets/images/enlarge.png"
+          alt="全屏"
+          draggable="false"
+        >
+        <span>全屏</span>
+      </button>
     </menu>
   </div>
 </template>
@@ -72,17 +85,30 @@ export default {
       isShowPlusOne: false,
     }
   },
+  computed: {
+    ...globalMapState([
+      'isMuted',
+    ])
+  },
   methods: {
+    ...globalMapMutations([
+      'toggleMute',
+    ]),
     onClickLike() {
-      globalApi.like().then(() => {
-        this.isShowPlusOne = true
-        setTimeout(() => {
-          this.isShowPlusOne = false
-        }, 1000)
-      })
+      const res = globalApi.like()
+      if (res && res.then) {
+        res.then(() => {
+          this.isShowPlusOne = true
+          setTimeout(() => {
+            this.isShowPlusOne = false
+          }, 1000)
+        })
+      }
     },
     onClickShare() {
     },
+    onClickFullScreen() {
+    }
   }
 }
 </script>

src/router/index.js

@@ -9,12 +9,16 @@ const routes = [
   {
     path: '/',
     name: 'HomeView',
-    component: HomeView
+    component: HomeView,
   },
   {
     path: '/relics-appr',
     name: 'RelicsAppr',
     component: RelicsAppr,
+    meta: {
+      isShowBottomBar: true,
+      canFullScreen: false,
+    }
   },
   {
     path: '/about',

src/store/index.js

@@ -5,10 +5,14 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    isMuted: false,
   },
   getters: {
   },
   mutations: {
+    toggleMute(state) {
+      state.isMuted = !state.isMuted
+    }
   },
   actions: {
   },

src/utils.js

@@ -5,7 +5,7 @@ export default {
     return function (...args) {
       let elapsedTime = Date.now() - lastRunTime
       if (elapsedTime < interval) {
-        return
+        return null
       }
 
       let context = this

src/views/HomeView.vue

@@ -58,6 +58,8 @@ export default {
   position: relative;
   height: 100%;
   background-color: #D8B275;
+  background-image: url(@/assets/images/homepage-bg.jpg);
+  background-size: cover;
   .title {
     position: absolute;
     width: 39.63rem;

vue.config.js

@@ -17,7 +17,8 @@ module.exports = defineConfig({
     plugins: [
       new webpack.ProvidePlugin({
         // utils: ['/src/utils.js', 'default']
-        // mapGetters: ['vuex', 'mapGetters']
+        globalMapState: ['vuex', 'mapState'],
+        globalMapMutations: ['vuex', 'mapMutations'],
         globalConfig: ['/src/config.js', 'default'],
         globalApi: ['/src/api.js', 'default'],
         globalUtils: ['/src/utils.js', 'default'],