搞搞搞

src/App.vue

@@ -1,5 +1,13 @@
 <template>
   <div class="app-wrap">
+    <Transition
+      name="fade-out"
+    >
+      <StartUp
+        v-show="!store.state.haveShownStartUp"
+        @loading-over="store.commit('recordShowStartUp')"
+      />
+    </Transition>
     <div class="top-bar">
       <img
         class="logo"
@@ -80,6 +88,7 @@
 import { ref, computed, watch, onMounted } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
+import StartUp from '@/components/StartUp.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -110,10 +119,10 @@ html, body {
 // }
 
 // 字体
-// @font-face {
-//   font-family: 'Source Han Serif CN';
-//   src: url('@/assets/style/SourceHanSerifCN-Regular.otf');
-// }
+@font-face {
+  font-family: 'Source Han Sans CN';
+  src: url('@/assets/style/SourceHanSansCN-Regular.otf');
+}
 // @font-face {
 //   font-family: 'Source Han Serif CN-Bold';
 //   src: url('@/assets/style/SourceHanSerifCN-Bold.otf');
@@ -144,14 +153,6 @@ html, body {
   opacity: 0;
 }
 
-.fade-out-leave-active {
-  transition: opacity 1s;
-  pointer-events: none;
-}
-.fade-out-leave-to {
-  opacity: 0;
-}
-
 .fade-in-out-enter-active {
   transition: opacity 2s;
 }

src/components/StartUp.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="start-up">
+    <div class="loading-bar">
+      <div
+        class="loading-progress"
+        :style="{
+          width: `${progress * 100}%`,
+        }"
+      />
+      <img
+        src="@/assets/images/icon_shop-active.png"
+        alt=""
+        class="cursor"
+        draggable="false"
+        :style="{
+          left: `${progress * 100}%`,
+        }"
+      >
+    </div>
+    <div class="text">
+      LOADING...
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const emit = defineEmits(['loading-over'])
+
+const progress = ref(0)
+let intervalId = null
+onMounted(() => {
+  intervalId = setInterval(() => {
+    progress.value += 0.03
+    if (progress.value >= 0.96) {
+      clearInterval(intervalId)
+      progress.value = 1
+      emit('loading-over')
+    }
+  }, 100)
+})
+
+</script>
+
+<style lang="less" scoped>
+.start-up{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  background-color: #fff;
+  background-image: url(@/assets/images/start-up-bg.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  >.loading-bar{
+    position: absolute;
+    bottom: 103px;
+    left: 50%;
+    transform: translate(-50%, 0);
+    width: calc(1325 / 1920 * 100%);
+    height: 14px;
+    border-radius: 7px;
+    background: rgba(0,0,0,0.19);
+    border: 1px solid #FFFFFF;
+    >.loading-progress{
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+      background: #FF8888;
+      border-radius: 7px;
+    }
+    >img.cursor {
+      position: absolute;
+      bottom: 100%;
+      transform: translate(-50%, 0);
+      width: 73px;
+    }
+  }
+  >.text{
+    position: absolute;
+    bottom: 48px;
+    left: 50%;
+    transform: translate(-50%, 0);
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 400;
+    font-size: 30px;
+    color: #FF9494;
+    line-height: 35px;
+  }
+}
+</style>

src/store/index.js

@@ -2,13 +2,13 @@ import { createStore } from 'vuex'
 
 export default createStore({
   state: {
-    usingChinese: true,
+    haveShownStartUp: false,
   },
   getters: {
   },
   mutations: {
-    setUsingChinese(state, value) {
-      state.usingChinese = value
+    recordShowStartUp(state) {
+      state.haveShownStartUp = true
     },
   },
   actions: {

src/views/HomeView.vue

@@ -41,30 +41,37 @@
           height: imgWrapSize + 'px',
         }"
       >
-        <div
-          v-for="item in hotRelicList"
-          :key="item.id"
-          class="img-item-wrap"
+        <img
+          v-for="(item, idx) in hotRelicList"
+          v-show="idx !== activeHotRelicIdx"
+          :key="item.name + 'no-color'"
+          class="no-color"
+          :src="require(`@/assets/images/relic-drawings/${item.imgName}.png`)"
+          alt=""
+          draggable="false"
           :style="{
-            left: `${item.x / 734 * 100}%`,
-            top: `${item.y / 734 * 100}%`,
-            width: `${item.width / 734 * 100}%`,
-            height: `${item.height / 734 * 100}%`,
+            left: `${(item.x + item.widthNoColor / 2) / 734 * 100}%`,
+            top: `${(item.y + item.heightNoColor / 2) / 734 * 100}%`,
+            width: `${item.widthNoColor / 734 * 100}%`,
+            height: `${item.heightNoColor / 734 * 100}%`,
+          }"
+          @click="activeHotRelicIdx = idx"
+        >
+        <img
+          v-for="(item, idx) in hotRelicList"
+          v-show="idx === activeHotRelicIdx"
+          :key="item.name + 'colorful'"
+          class="colorful"
+          :src="require(`@/assets/images/relic-drawings/${item.imgName}上色.png`)"
+          alt=""
+          draggable="false"
+          :style="{
+            left: `${(item.x + item.widthNoColor / 2) / 734 * 100}%`,
+            top: `${(item.y + item.heightNoColor / 2) / 734 * 100}%`,
+            width: `${item.widthColorful / 734 * 100}%`,
+            height: `${item.heightColorful / 734 * 100}%`,
           }"
         >
-          <img
-            class="no-color"
-            :src="require(`@/assets/images/relic-drawings/${item.imgName}.png`)"
-            alt=""
-            draggable="false"
-          >
-          <img
-            class="colorful"
-            :src="require(`@/assets/images/relic-drawings/${item.imgName}上色.png`)"
-            alt=""
-            draggable="false"
-          >
-        </div>
       </div>
     </div>
     <div class="right">
@@ -197,214 +204,241 @@ watchEffect(() => {
 
 const hotRelicList = ref([
   {
-    id: 6,
     x: 634,
     y: 305,
-    width: 100,
-    height: 66,
+    widthNoColor: 129,
+    heightNoColor: 81,
+    widthColorful: 169,
+    heightColorful: 101,
     imgName: '6竺西书院',
   },
   {
-    id: 14,
     x: 651,
     y: 391,
-    width: 84,
-    height: 47,
+    widthNoColor: 84,
+    heightNoColor: 48,
+    widthColorful: 84,
+    heightColorful: 48,
     imgName: '14宝界桥',
   },
   {
-    id: 9,
     x: 619,
     y: 428,
-    width: 51,
-    height: 72,
+    widthNoColor: 52,
+    heightNoColor: 72,
+    widthColorful: 52,
+    heightColorful: 72,
     imgName: '9祝大椿故居',
   },
   {
-    id: 3,
     x: 620,
     y: 516,
-    width: 94,
-    height: 35,
+    widthNoColor: 90,
+    heightNoColor: 36,
+    widthColorful: 94,
+    heightColorful: 64,
     imgName: '3尚仁初级商科职业学校',
   },
   {
-    id: 23,
     x: 562,
     y: 540,
-    width: 78,
-    height: 66,
+    widthNoColor: 78,
+    heightNoColor: 66,
+    widthColorful: 82,
+    heightColorful: 66,
     imgName: '23怀海义庄',
   },
   {
-    id: 7,
     x: 504,
     y: 587,
-    width: 48,
-    height: 87,
+    widthNoColor: 48,
+    heightNoColor: 87,
+    widthColorful: 63,
+    heightColorful: 87,
     imgName: '7坎宫救熄会',
   },
   {
-    id: 13,
     x: 397,
     y: 644,
-    width: 88,
-    height: 54,
+    widthNoColor: 88,
+    heightNoColor: 54,
+    widthColorful: 97,
+    heightColorful: 54,
     imgName: '13大公图书馆',
   },
   {
-    id: 11,
     x: 314,
     y: 630,
-    width: 64,
-    height: 83,
+    widthNoColor: 65,
+    heightNoColor: 83,
+    widthColorful: 66,
+    heightColorful: 86,
     imgName: '11惠山古镇',
   },
   {
-    id: 4,
     x: 211,
     y: 636,
-    width: 87,
-    height: 48,
+    widthNoColor: 87,
+    heightNoColor: 49,
+    widthColorful: 112,
+    heightColorful: 73,
     imgName: '4善卷洞',
   },
   {
-    id: 19,
     x: 140,
     y: 597,
-    width: 52,
-    height: 67,
+    widthNoColor: 52,
+    heightNoColor: 68,
+    widthColorful: 54,
+    heightColorful: 70,
     imgName: '19徐氏义庄（查桥）',
   },
   {
-    id: 16,
     x: 27,
     y: 547,
-    width: 109,
-    height: 53,
+    widthNoColor: 109,
+    heightNoColor: 53,
+    widthColorful: 109,
+    heightColorful: 72,
     imgName: '16华氏老义庄',
   },
   {
-    id: 21,
     x: 47,
     y: 473,
-    width: 50,
-    height: 67,
+    widthNoColor: 50,
+    heightNoColor: 68,
+    widthColorful: 79,
+    heightColorful: 88,
     imgName: '21李金镛故居',
   },
   {
-    id: 12,
     x: -9,
     y: 385,
-    width: 96,
-    height: 74,
+    widthNoColor: 97,
+    heightNoColor: 75,
+    widthColorful: 99,
+    heightColorful: 78,
     imgName: '12公花园',
   },
   {
-    id: 20,
     x: -32,
     y: 334,
-    width: 129,
-    height: 37,
+    widthNoColor: 129,
+    heightNoColor: 37,
+    widthColorful: 133,
+    heightColorful: 73,
     imgName: '20唐氏花厅',
   },
   {
-    id: 12,
     x: 8,
     y: 248,
-    width: 85,
-    height: 61,
+    widthNoColor: 85,
+    heightNoColor: 61,
+    widthColorful: 85,
+    heightColorful: 61,
     imgName: '12市慈善总会',
   },
   {
-    id: 5,
     x: 59,
     y: 204,
-    width: 56,
-    height: 48,
+    widthNoColor: 56,
+    heightNoColor: 49,
+    widthColorful: 68,
+    heightColorful: 60,
     imgName: '5洑溪徐氏宗祠（现名：徐大宗祠）',
   },
   {
-    id: 96,
     x: 65,
     y: 136,
-    width: 95,
-    height: 47,
+    widthNoColor: 95,
+    heightNoColor: 47,
+    widthColorful: 95,
+    heightColorful: 52,
     imgName: '96匡村中学旧址',
   },
   {
-    id: 15,
     x: 141,
     y: 83,
-    width: 74,
-    height: 56,
+    widthNoColor: 74,
+    heightNoColor: 56,
+    widthColorful: 91,
+    heightColorful: 70,
     imgName: '15钱伟长旧居',
   },
   {
-    id: 18,
     x: 202,
     y: 54,
-    width: 72,
-    height: 42,
+    widthNoColor: 72,
+    heightNoColor: 42,
+    widthColorful: 72,
+    heightColorful: 53,
     imgName: '18徐义庄（荡口）',
   },
   {
-    id: 40,
     x: 282,
     y: 27,
-    width: 50,
-    height: 56,
+    widthNoColor: 51,
+    heightNoColor: 57,
+    widthColorful: 68,
+    heightColorful: 61,
     imgName: '40景云楼',
   },
   {
-    id: 30,
     x: 343,
     y: 49,
-    width: 66,
-    height: 40,
+    widthNoColor: 67,
+    heightNoColor: 40,
+    widthColorful: 67,
+    heightColorful: 41,
     imgName: '30炎黄陈列馆',
   },
   {
-    id: 22,
     x: 427,
     y: 36,
-    width: 59,
-    height: 61,
+    widthNoColor: 60,
+    heightNoColor: 61,
+    widthColorful: 61,
+    heightColorful: 61,
     imgName: '22村前公立蒙学堂',
   },
   {
-    id: 24,
     x: 492,
     y: 80,
-    width: 86,
-    height: 40,
+    widthNoColor: 86,
+    heightNoColor: 86,
+    widthColorful: 86,
+    heightColorful: 86,
     imgName: '24周新镇',
   },
   {
-    id: 17,
     x: 553,
     y: 137,
-    width: 109,
-    height: 40,
+    widthNoColor: 109,
+    heightNoColor: 40,
+    widthColorful: 109,
+    heightColorful: 72,
     imgName: '17襄义庄',
   },
   {
-    id: 10,
     x: 603,
     y: 186,
-    width: 52,
-    height: 66,
+    widthNoColor: 53,
+    heightNoColor: 68,
+    widthColorful: 56,
+    heightColorful: 71,
     imgName: '10施子祠',
   },
   {
-    id: 1,
     x: 655,
     y: 238,
-    width: 79,
-    height: 54,
+    widthNoColor: 80,
+    heightNoColor: 56,
+    widthColorful: 80,
+    heightColorful: 56,
     imgName: '1缪氏义庄',
   },
 ])
+const activeHotRelicIdx = ref(0)
 
 </script>
 
@@ -505,27 +539,22 @@ const hotRelicList = ref([
       background-position: center center;
       position: relative;
       cursor: pointer;
-      >.img-item-wrap{
+      >img.no-color{
         position: absolute;
-        >img{
-          position: absolute;
-          left: 0;
-          top: 0;
-          width: 100%;
-          height: 100%;
-        }
-        >img.colorful{
-          display: none;
-        }
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0.3;
+        transform: translate(-50%, -50%);
       }
-      >.img-item-wrap:hover{
-        >img.no-color{
-          display: none;
-        }
-        >img.colorful{
-          display: initial;
-          transform: scale(1.3);
-        }
+      >img.colorful{
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        transform: translate(-50%, -50%);
       }
     }
   }