点赞功能和其他乱七八糟

.eslintrc.js

@@ -46,8 +46,9 @@ module.exports = {
     'no-prototype-builtins': "off",
   },
   globals: {
-    // config: true,
+    globalConfig: true,
+    globalApi: true,
+    globalUtils: true,
     // store: true,
-    // utils: true,
   }
 }

src/App.vue

@@ -1,9 +1,17 @@
 <template>
   <div id="app">
     <router-view />
+    <BottomBar />
   </div>
 </template>
 
+<script>
+import BottomBar from './components/BottomBar.vue'
+export default {
+  components: { BottomBar },
+}
+</script>
+
 <style>
 #app {
   height: 100%;

src/api.js

@@ -0,0 +1,12 @@
+function _like() {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      console.log('like!')
+      resolve()
+    }, 500)
+  })
+}
+
+export default {
+  like: globalUtils.throttle(_like, 2000)
+}

src/components/BottomBar.vue

@@ -0,0 +1,174 @@
+<template>
+  <div
+    class="bottom-bar"
+    :class="{collapsed: isCollapsed}"
+  >
+    <img
+      class="bg-image"
+      src="@/assets/images/bottom-bar-bg.png"
+      alt=""
+      draggable="false"
+    >
+    <button
+      class="arrow"
+      @click="isCollapsed = !isCollapsed"
+    >
+      <img
+        src="@/assets/images/arrow-sharp.png"
+        alt="show-hide"
+        draggable="false"
+      >
+    </button>
+    <menu>
+      <button @click="$router.push({name: 'HomeView'})">
+        <img
+          src="@/assets/images/home.png"
+          alt="首页"
+          draggable="false"
+        >
+        <span>首页</span>
+      </button>
+      <button>
+        <img
+          src="@/assets/images/music.png"
+          alt="声音"
+          draggable="false"
+        >
+        <span>声音</span>
+      </button>
+      <button @click="onClickLike">
+        <img
+          src="@/assets/images/like.png"
+          alt="点赞"
+          draggable="false"
+        >
+        <span>点赞</span>
+        <transition name="bubble">
+          <div
+            v-if="isShowPlusOne"
+            class="plus-one"
+          >
+            +1
+          </div>
+        </transition>
+      </button>
+      <button @click="onClickShare">
+        <img
+          src="@/assets/images/share.png"
+          alt="分享"
+          draggable="false"
+        >
+        <span>分享</span>
+      </button>
+    </menu>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isCollapsed: false,
+      isShowPlusOne: false,
+    }
+  },
+  methods: {
+    onClickLike() {
+      globalApi.like().then(() => {
+        this.isShowPlusOne = true
+        setTimeout(() => {
+          this.isShowPlusOne = false
+        }, 1000)
+      })
+    },
+    onClickShare() {
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.bottom-bar {
+  width: 100vw;
+  position: fixed;
+  left: 0;
+  bottom: -2px;
+  .bg-image {
+    width: 100%;
+  }
+  .arrow {
+    position: absolute;
+    left: 50%;
+    top: 0;
+    transform: translateX(-50%);
+    width: 2.21rem;
+    height: 1.96rem;
+    padding: 0.62rem;
+    box-sizing: initial;
+    > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  > menu {
+    position: absolute;
+    left: 50%;
+    top: 2.96rem;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    gap: 2.12rem;
+    > button {
+      padding: 0.4rem;
+      position: relative;
+      > img {
+        width: 3.17rem;
+        height: 3.17rem;
+        object-fit: contain;
+      }
+      > span {
+        display: block;
+        line-height: 1.37rem;
+        color: #F9F2E8;
+        font-size: 1.17rem;
+      }
+      .plus-one {
+        position: absolute;
+        top: 0;
+        right: 0;
+        transform: translate(50%, -50%);
+      }
+    }
+  }
+}
+
+.collapsed {
+  transform: translateY(calc(100% - 3.5rem));
+  .arrow {
+    transform: translateX(-50%) rotate(180deg);
+  }
+}
+
+.bubble-enter {
+  opacity: 0;
+  top: 1rem !important;
+}
+.bubble-enter-to {
+  opacity: 1;
+  top: 0 !important;
+}
+.bubble-enter-active {
+  transition: all 0.5s;
+}
+.bubble-leave {
+  opacity: 1;
+  top: 0 !important;
+}
+.bubble-leave-to {
+  opacity: 0;
+  top: -1rem !important;
+}
+.bubble-leave-active {
+  transition: all 0.5s;
+}
+</style>

src/config.js

@@ -0,0 +1,3 @@
+export default {
+  version: 'v20221018.1122',
+}

src/main.js

@@ -7,7 +7,7 @@ import "@/assets/style/reset.css"
 import "@/assets/style/my-reset.css"
 import clickOutside from "@/directives/v-click-outside.js"
 
-console.log('v1012.1146')
+console.log(globalConfig.version)
 
 const uaParser = new UAParser()
 const uaInfo = uaParser.getResult()

src/utils.js

@@ -0,0 +1,16 @@
+export default {
+  throttle(fn, interval) {
+    let lastRunTime = 0
+
+    return function (...args) {
+      let elapsedTime = Date.now() - lastRunTime
+      if (elapsedTime < interval) {
+        return
+      }
+
+      let context = this
+      lastRunTime = Date.now()
+      return fn.apply(context, args)
+    }
+  },
+}

src/views/RelicsAppr.vue

@@ -272,7 +272,7 @@ export default {
   }
   .relics-list {
     width: 100%;
-    padding: 9rem 0;
+    padding: 9rem 0 14rem 0;
     > .relic-item {
     }
   }

vue.config.js

@@ -1,4 +1,27 @@
+const webpack = require('webpack')
 const { defineConfig } = require('@vue/cli-service')
+
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+  configureWebpack: {
+    module: {
+      rules: [
+        {
+          test: /\.cur$/,
+          use: {
+            loader: 'file-loader'
+          }
+        }
+      ]
+    },
+    plugins: [
+      new webpack.ProvidePlugin({
+        // utils: ['/src/utils.js', 'default']
+        // mapGetters: ['vuex', 'mapGetters']
+        globalConfig: ['/src/config.js', 'default'],
+        globalApi: ['/src/api.js', 'default'],
+        globalUtils: ['/src/utils.js', 'default'],
+      }),
+    ],
+  },
 })