Home Explore Help
Register Sign In
renyicun
/
NanjingMuseumWuJinZang
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

优化

任一存 1 year ago
parent
23472baad0
commit
f0eeb72275
5 changed files with 61 additions and 5 deletions
Split View Show Diff Stats
  1. 2 2
      public/index.html
  2. 1 0
      src/App.vue
  3. 53 0
      src/components/HotspotForHomepage.vue
  4. 2 0
      src/main.js
  5. 3 3
      src/views/HomeView.vue

+ 2 - 2
public/index.html
View File 

@@ -21,7 +21,7 @@
 
   <body>
 
     <script src="./configText.js"></script>
 
     <script src="./configExcel.js"></script>
 
-    <!-- <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script> -->
 
+    <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
 
     <noscript>
 
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 
     </noscript>
 
@@ -29,7 +29,7 @@
 
     <!-- built files will be auto injected -->
 
 
     <script>
 
-      // new VConsole()
 
+      new VConsole()
 
     </script>
 
   </body>
 
 </html>

+ 1 - 0
src/App.vue
View File 

@@ -124,6 +124,7 @@ input, textarea {
 
   }
 
 }
 
 
+
 
 // 不断渐变显隐，显示时间较长 animation
 
 .animation-show-long-hide {
 
   animation: show-long-hide 2.5s infinite;

+ 53 - 0
src/components/HotspotForHomepage.vue
View File 

@@ -0,0 +1,53 @@
 
+<template>

+  <div class="hotspot animation-show-hide-for-home-hotspot">

+    <img

+      class=""

+      src="@/assets/images/icon_hotspot.png"

+      alt=""

+      draggable="false"

+    >

+  </div>

+</template>

+

+<script setup>

+import { ref, computed, watch, onMounted, inject } from "vue"

+import { useRoute, useRouter } from "vue-router"

+import { useStore } from "vuex"

+import useSizeAdapt from "@/useFunctions/useSizeAdapt"

+

+const {

+  windowSizeInCssForRef,

+  windowSizeWhenDesignForRef,

+} = useSizeAdapt()

+

+const route = useRoute()

+const router = useRouter()

+const store = useStore()

+

+const $env = inject('$env')

+</script>

+

+<style lang="less" scoped>

+.hotspot{

+  width: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

+  height: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

+  >img{

+    width: 100%;

+    height: 100%;

+  }

+}

+.animation-show-hide-for-home-hotspot {

+  animation: show-hide 2.5s infinite;

+}

+@keyframes show-hide {

+  0% {

+    opacity: 0;

+  }

+  50% {

+    opacity: 0.4;

+  }

+  100% {

+    opacity: 0;

+  }

+}

+</style>

+ 2 - 0
src/main.js
View File 

@@ -17,6 +17,7 @@ import 'swiper/css/pagination' // 分页器样式
 
 import BtnBack from '@/components/BtnBack.vue'

 import OperationTip from '@/components/OperationTip.vue'

 import HotspotComp from '@/components/HotspotComp.vue'

+import HotspotForHomepage from '@/components/HotspotForHomepage.vue'

 import SerialFrames from '@/components/LongImageSerialFrames.vue'

 import BtnSkip from '@/components/BtnSkip.vue'

 import PaginationComp from '@/components/PaginationComp.vue'

@@ -88,6 +89,7 @@ app.use(store)
 
   .component('BtnBack', BtnBack)

   .component('OperationTip', OperationTip)

   .component('HotspotComp', HotspotComp)

+  .component('HotspotForHomepage', HotspotForHomepage)

   .component('Swiper', Swiper)

   .component('SwiperSlide', SwiperSlide)

   .component('SerialFrames', SerialFrames)

+ 3 - 3
src/views/HomeView.vue
View File 

@@ -116,17 +116,17 @@
 
         top: `${paintingTop / windowSizeWhenDesignForRef * windowSizeInCssForRef.substring(0, windowSizeInCssForRef.length - 2)}px`

       }"

     >

-      <HotspotComp

+      <HotspotForHomepage

         v-show="isShowHotspot"

         class="hotspot-1"

         @click="isShowHotspotDetail1 = true"

       />

-      <HotspotComp

+      <HotspotForHomepage

         v-show="isShowHotspot"

         class="hotspot-2"

         @click="showBigPainting"

       />

-      <HotspotComp

+      <HotspotForHomepage

         v-show="isShowHotspot"

         class="hotspot-3"

         @click="isShowHotspotDetail3 = true"