写俩基本组件

package.json

@@ -9,7 +9,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@vueuse/core": "^10.4.1",
+    "@vueuse/core": "^10.11.0",
     "axios": "^1.1.3",
     "core-js": "^3.8.3",
     "dayjs": "^1.11.7",
@@ -19,8 +19,8 @@
     "mitt": "^3.0.0",
     "v-viewer": "^3.0.11",
     "viewerjs": "^1.11.6",
-    "vue-router": "^4.0.3",
     "vue": "^3.2.13",
+    "vue-router": "^4.0.3",
     "vuex": "^4.0.0"
   },
   "devDependencies": {

src/App.vue

@@ -7,8 +7,8 @@ import { ref, computed, watch, onMounted } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import {
-  // checkLoginStatusAndProcess,
-  // getUserFromStorageIfNeed
+// checkLoginStatusAndProcess,
+// getUserFromStorageIfNeed
 } from '@/api.js'
 
 const route = useRoute()
@@ -31,34 +31,35 @@ const store = useStore()
 </script>
 
 <style lang="less">
-// html, body {
-//   overscroll-behavior: none;
-//   overflow: hidden;
-// }
+html, body {
+  // overscroll-behavior: none;
+  overflow: hidden;
+  height: 100%;
+}
 
-// * {
-//   user-select: none;
-//   -webkit-touch-callout: none;
-// }
+* {
+  user-select: none;
+  -webkit-touch-callout: none;
+}
 
-// #app {
-//   height: 100%;
-// }
+// 360浏览器不支持not()
+input, textarea {
+  user-select: initial;
+}
 
-// // 360浏览器不支持not()
-// input, textarea {
-//   user-select: initial;
-// }
+#app {
+  height: 100%;
+}
 
 // 字体
-// @font-face {
-//   font-family: 'Source Han Serif CN';
-//   src: url('@/assets/style/SourceHanSerifCN-Regular.otf');
-// }
-// @font-face {
-//   font-family: 'Source Han Serif CN-Bold';
-//   src: url('@/assets/style/SourceHanSerifCN-Bold.otf');
-// }
+@font-face {
+  font-family: 'KingHwa_OldSong';
+  src: url('@/assets/style/KingHwa_OldSong.TTF');
+}
+@font-face {
+  font-family: 'KaiTi';
+  src: url('@/assets/style/SIMKAI.TTF');
+}
 // i {
 //   font-style: italic;
 // }
@@ -101,7 +102,7 @@ const store = useStore()
 
 // 不断渐变显隐 animation
 .animation-show-hide {
-  animation: show-hide 1.8s infinite;
+  animation: show-hide 1.5s infinite;
 }
 @keyframes show-hide {
   0% {

src/api.js

@@ -1,8 +1,8 @@
 import axios from "axios"
-import { encodeStr } from "@/pass.js"
-import { Base64 } from "js-base64"
-import store from "@/store/index.js"
-import router from "@/router"
+// import { encodeStr } from "@/pass.js"
+// import { Base64 } from "js-base64"
+// import store from "@/store/index.js"
+// import router from "@/router"
 
 // axios.interceptors.response.use(function (response) {
 //   // 2xx 范围内的状态码都会触发该函数。

src/components/BtnBack.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="btn-back">
+    <button
+      @click="router.go(-1)"
+    >
+      <img
+        class=""
+        :src="require(`@/assets/images/icon_back_${props.color}.png`)"
+        alt=""
+        draggable="false"
+      >
+    </button>
+  </div>
+</template>
+
+<script setup>
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+import { ref, computed, watch, onMounted, inject } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const $env = inject('$env')
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'white',
+  }
+})
+
+</script>
+
+<style lang="less" scoped>
+.btn-back{
+  position: fixed;
+  left: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  bottom: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  width: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  >button{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    >img{
+      width: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+  }
+}
+</style>

src/components/OperationTip.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    v-show="isShow"
+    class="operation-tip"
+    :class="{
+      'animation-show-hide': isShow,
+    }"
+  >
+    <div
+      v-if="props.text"
+      class="text"
+    >
+      {{ props.text }}
+    </div>
+    <img
+      class=""
+      :src="require(`@/assets/images/icon_operation_${props.direction}_${props.color}.png`)"
+      alt=""
+      draggable="false"
+    >
+  </div>
+</template>
+
+<script setup>
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+import { ref, computed, watch, onMounted, inject } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const $env = inject('$env')
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+const props = defineProps({
+  direction: {
+    type: String,
+    default: 'v', // h
+  },
+  color: {
+    type: String,
+    default: 'white', // 'green'
+  },
+  text: {
+    type: String,
+    default: '',
+  },
+  isShow: {
+    type: Boolean,
+    default: true,
+  }
+})
+
+const isShow = ref(true)
+let blinkCount = 0
+const intervalId = setInterval(() => {
+  blinkCount++
+  if (blinkCount >= 3 || !props.isShow) {
+    isShow.value = false
+    clearInterval(intervalId)
+  }
+}, 1500)
+</script>
+
+<style lang="less" scoped>
+.operation-tip{
+  position: fixed;
+  display: flex;
+  align-items: center;
+  >.text{
+    color: v-bind('props.color');
+    margin-right: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    font-family: KaiTi, KaiTi;
+    font-weight: 400;
+    font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  >img{
+    width: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(41 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+}
+</style>

src/directives/v-click-outside.js

@@ -1,44 +0,0 @@
-export default {
-  install(app) {
-    app.directive('click-outside', {
-      mounted(el, binding) {
-        function documentHandler(e) {
-          if (el.contains(e.target)) {
-            return false
-          }
-          if (binding.value) {
-            binding.value(e)
-          }
-        }
-        el.__vueClickOutside__ = documentHandler
-        if (binding.modifiers.click) {
-          document.addEventListener('click', documentHandler, {
-            capture: binding.modifiers.capture
-          })
-        }
-        if (binding.modifiers.mousedown) {
-          document.addEventListener('mousedown', documentHandler, {
-            capture: binding.modifiers.capture
-          })
-        }
-        if (binding.modifiers.touchstart) {
-          document.addEventListener('touchstart', documentHandler, {
-            capture: binding.modifiers.capture
-          })
-        }
-      },
-      unMounted(el, binding) {
-        document.removeEventListener('click', el.__vueClickOutside__, {
-          capture: binding.modifiers.capture
-        })
-        document.removeEventListener('mousedown', el.__vueClickOutside__, {
-          capture: binding.modifiers.capture
-        })
-        document.removeEventListener('tarchstart', el.__vueClickOutside__, {
-          capture: binding.modifiers.capture
-        })
-        delete el.__vueClickOutside__
-      }
-    })
-  }
-}

src/main.js

@@ -5,13 +5,15 @@ import store from './store'
 import "@/assets/style/reset.css"
 import "@/assets/style/my-reset.css"
 import UAParser from "@/libs/ua-parser.min.js"
-import clickOutside from "@/directives/v-click-outside.js"
 import mitt from "mitt"
 import 'viewerjs/dist/viewer.css'
 import VueViewer from 'v-viewer'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 
+import BtnBack from '@/components/BtnBack.vue'
+import OperationTip from '@/components/OperationTip.vue'
+
 console.log(`version: ${process.env.VUE_APP_VERSION}`)
 console.log(`Build time: ${process.env.VUE_APP_UPDATE_TIME}`)
 
@@ -61,9 +63,9 @@ window.addEventListener('resize', () => {
 })
 
 // // 禁用上下文菜单
-// document.oncontextmenu = function(e) {
-//   e.preventDefault()
-// }
+document.oncontextmenu = function(e) {
+  e.preventDefault()
+}
 
 // // safari里只能在交互行为的回调中成功地首次调用audio的play方法，所以需要一个全局的audio元素来播放随时可能需要自发播放的音频。
 // const audioNode = document.createElement("audio")
@@ -74,10 +76,10 @@ window.addEventListener('resize', () => {
 
 app.use(store)
   .use(router)
-  .use(clickOutside)
   .use(VueViewer)
   .use(ElementPlus)
-  // .component('HotSpot', HotSpot)
+  .component('BtnBack', BtnBack)
+  .component('OperationTip', OperationTip)
   .mount('#app')
 
 //  you can reset the default options at any other time

src/useFunctions/useSizeAdapt.js

@@ -3,7 +3,7 @@
 
 import { onBeforeUnmount, ref } from 'vue'
 
-export default function useSizeAdapt(windowWidthWhenDesign = 1920, windowHeightWhenDesign = 1080, needReactivity = true) {
+export default function useSizeAdapt(windowWidthWhenDesign = 390, windowHeightWhenDesign = 844, needReactivity = true) {
   const windowSizeInCssForRef = ref('')
   const windowSizeWhenDesignForRef = ref('')
   const scaleRate = ref(-1)

src/views/HomeView.vue

@@ -2,6 +2,11 @@
   <div
     class="home"
   >
+    <OperationTip
+      :text="`testtest`"
+      :is-show="isShowOperationTip"
+    />
+    <BtnBack />
   </div>
 </template>
 
@@ -15,11 +20,17 @@ const router = useRouter()
 const store = useStore()
 
 const $env = inject('$env')
+
+const isShowOperationTip = ref(true)
+setTimeout(() => {
+  isShowOperationTip.value = false
+}, 1000)
 </script>
 
 <style lang="less" scoped>
 .home {
   width: 100%;
   height: 100%;
+  background-color: #000;
 }
 </style>

yarn.lock

@@ -1809,7 +1809,7 @@
   resolved "https://registry.npmmirror.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz#b6b40a7625429d2bd7c2281ddba601ed05dc7f1a"
   integrity sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==
 
-"@vueuse/core@^10.4.1":
+"@vueuse/core@^10.11.0":
   version "10.11.0"
   resolved "https://registry.npmmirror.com/@vueuse/core/-/core-10.11.0.tgz#b042585a8bf98bb29c177b33999bd0e3fcd9e65d"
   integrity sha512-x3sD4Mkm7PJ+pcq3HX8PLPBadXCAlSDR/waK87dz0gQE+qJnaaFhc/dZVfJz+IUYzTMVGum2QlR7ImiJQN4s6g==