Merge branch 'master' of http://192.168.0.115:3000/renyicun/NanjingMuseumWuJinZang

src/views/HomeView.vue

@@ -1056,7 +1056,7 @@ function onClickGoNextPage() {
   }
 
   >.hotspot-detail {
-    z-index: 20;
+    z-index: 21;
   }
 
   >.hotspot-detail.painting-detail {

src/views/HotspotDetail1 copy.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="hotspot-detail-1">
+    <div class="bg-mask" />
+    <div class="row row-1">
+      <div class="text">
+        <h3>
+          {{ craftInfo[3].title }}666
+        </h3>
+        <p>
+          {{ craftInfo[3].desc }}
+        </p>
+      </div>
+      <div class="image">
+        <img
+          class=""
+          :src="`${$env.BASE_URL}configMultiMedia/${craftInfo[3].title}.png`"
+          alt=""
+          draggable="false"
+        >
+      </div>
+    </div>
+    <div class="row row-2">
+      <div class="text">
+        <h3>
+          {{ craftInfo[4].title }}
+        </h3>
+        <p>
+          {{ craftInfo[4].desc }}
+        </p>
+      </div>
+      <div class="image">
+        <img
+          class=""
+          :src="`${$env.BASE_URL}configMultiMedia/${craftInfo[4].title}.png`"
+          alt=""
+          draggable="false"
+        >
+      </div>
+    </div>
+    <div class="row row-3">
+      <div class="text">
+        <h3>
+          {{ craftInfo[5].title }}
+        </h3>
+        <p>
+          {{ craftInfo[5].desc }}
+        </p>
+      </div>
+      <div class="image">
+        <img
+          class=""
+          :src="`${$env.BASE_URL}configMultiMedia/${craftInfo[5].title}.png`"
+          alt=""
+          draggable="false"
+        >
+      </div>
+    </div>
+    <BtnBack
+      color="green"
+      @click="emit('close')"
+    />
+  </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')
+
+const emit = defineEmits(['close'])
+
+const craftInfo = configText.craft
+
+</script>
+
+<style lang="less" scoped>
+.hotspot-detail-1{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url(@/assets/images/home-painting-line-small.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  >.bg-mask{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(48, 74, 56, 0.70);
+    backdrop-filter: blur(calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
+    z-index: -1;
+  }
+  >.row{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    >.text{
+      width: calc(170 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      >h3{
+        font-family: KaiTi, KaiTi;
+        font-weight: 400;
+        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        color: #FFFFFF;
+        line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        margin-bottom: calc(11 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        text-align: end;
+      }
+      >p{
+        font-family: KaiTi, KaiTi;
+        font-weight: 400;
+        font-size: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        color: rgba(255, 255, 255, 0.8);
+        line-height: 1.3;
+        text-align: justify;
+      }
+    }
+    >.image{
+      flex: 0 0 auto;
+      width: calc(159 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(159 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      border-radius: 50%;
+      border: 1px solid #FFFFFF;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      >img{
+        width: calc(131 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(131 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        border-radius: 50%;
+      }
+    }
+  }
+  >.row-1{
+    flex-direction: row-reverse
+  }
+  >.row-3{
+    flex-direction: row-reverse
+  }
+}
+</style>

src/views/HotspotDetail1.vue

@@ -1,62 +1,51 @@
 <template>
   <div class="hotspot-detail-1">
-    <div class="bg-mask" />
-    <div class="row row-1">
-      <div class="text">
-        <h3>
-          {{ craftInfo[3].title }}
-        </h3>
-        <p>
-          {{ craftInfo[3].desc }}
-        </p>
-      </div>
-      <div class="image">
-        <img
-          class=""
-          :src="`${$env.BASE_URL}configMultiMedia/${craftInfo[3].title}.png`"
-          alt=""
-          draggable="false"
-        >
-      </div>
+    <!-- 左上角 -->
+    <img
+      class="HD1_1"
+      :src="require(`@/assets/images/HD1/img_title.png`)"
+      :style="`opacity:${pageLev === 1 ? '1' : '0'}`"
+    >
+    <!-- 中间--点击查看 -->
+    <div :class="`HD1_2 ${isLookImg ? '' : 'HD1_2Hide'}`">
+      <img
+        class=""
+        :src="require(`@/assets/images/icon-click-tip.png`)"
+        alt=""
+        draggable="false"
+      >
+      <div>点 击 查 看</div>
     </div>
-    <div class="row row-2">
-      <div class="text">
-        <h3>
-          {{ craftInfo[4].title }}
-        </h3>
-        <p>
-          {{ craftInfo[4].desc }}
-        </p>
-      </div>
-      <div class="image">
-        <img
-          class=""
-          :src="`${$env.BASE_URL}configMultiMedia/${craftInfo[4].title}.png`"
-          alt=""
-          draggable="false"
-        >
-      </div>
+
+    <!-- 右边三个画 -->
+    <div
+      v-for="(item, index) in imgList"
+      :key="item.id"
+      :class="`HD1_3 HD1_3_${index + 1}
+      ${pageLev === item.id ? 'HD1_3Ac' : ''}
+      ${pageShow && pageLev !== item.id ? 'HD1_3Hide' : ''}
+      `"
+      @click="ImgClick(item)"
+    >
+      <img
+        :src="
+          require(`@/assets/images/HD1/img${
+            pageLev === item.id ? '' : '_list'
+          }_${item.imgName}.png`)
+        "
+        alt=""
+      >
     </div>
-    <div class="row row-3">
-      <div class="text">
-        <h3>
-          {{ craftInfo[5].title }}
-        </h3>
-        <p>
-          {{ craftInfo[5].desc }}
-        </p>
-      </div>
-      <div class="image">
-        <img
-          class=""
-          :src="`${$env.BASE_URL}configMultiMedia/${craftInfo[5].title}.png`"
-          alt=""
-          draggable="false"
-        >
-      </div>
+
+    <!-- 顶部文字 -->
+    <div :class="`HD1_4 ${pageShow ? 'HD1_4Ac' : ''}`">
+      <H3>{{ txtShow.title }}</H3>
+      <p>{{ txtShow.desc }}</p>
     </div>
+
     <BtnBack
-      @click="emit('close')"
+      color="green"
+      @click="backBtnFu"
     />
   </div>
 </template>
@@ -67,93 +56,196 @@ import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 
-const {
-  windowSizeInCssForRef,
-  windowSizeWhenDesignForRef,
-} = useSizeAdapt()
+const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
 
 const route = useRoute()
 const router = useRouter()
 const store = useStore()
 
-const $env = inject('$env')
+const $env = inject("$env")
 
-const emit = defineEmits(['close'])
+const emit = defineEmits(["close"])
 
 const craftInfo = configText.craft
 
+const imgList = [
+  {
+    id: 1.1,
+    imgName: "juan",
+    title: craftInfo[3].title,
+    desc: craftInfo[3].desc,
+  },
+  {
+    id: 1.2,
+    imgName: "ling",
+    title: craftInfo[5].title,
+    desc: craftInfo[5].desc,
+  },
+  {
+    id: 1.3,
+    imgName: "paper",
+    title: craftInfo[4].title,
+    desc: craftInfo[4].desc,
+  },
+]
+
+// 当前页面 层级
+const pageLev = ref(1)
+const pageShow = ref(false)
+
+// 点击返回按钮
+const backBtnFu = () => {
+  if (pageLev.value !== 1) {
+    pageShow.value = false
+    pageLev.value = 1
+  } else emit("close")
+}
+
+// 点击查看自动消失
+const isLookImg = ref(true)
+onMounted(() => {
+  setTimeout(() => {
+    isLookImg.value = false
+  }, 3000)
+})
+
+// 页面展示的文字
+const txtShow = ref({
+  title: "",
+  desc: "",
+})
+
+// 点击图片
+const ImgClick = (item) => {
+  pageShow.value = true
+  isLookImg.value = false
+  pageLev.value = item.id
+  txtShow.value = {
+    title: item.title,
+    desc: item.desc,
+  }
+}
 </script>
 
 <style lang="less" scoped>
-.hotspot-detail-1{
+.hotspot-detail-1 {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
-  background-image: url(@/assets/images/home-painting-line-small.jpg);
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center center;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-  >.bg-mask{
+  background-image: url("../assets/images/HD1/bg_caizhi.jpg");
+  background-size: 100% 100%;
+  transition: all 1s;
+  .btn-back {
+    z-index: 20;
+  }
+  .HD1_1 {
+    transition: all 1s;
     position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(48, 74, 56, 0.70);
-    backdrop-filter: blur(calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
-    z-index: -1;
+    z-index: 10;
+    top: 60px;
+    left: 30px;
+    width: 100px;
   }
-  >.row{
+
+  .HD1_2 {
+    position: absolute;
+    z-index: 11;
+    top: 48%;
+    left: 40%;
+    transform: translate(-50%, -50%);
+    width: 30px;
     display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    >.text{
-      width: calc(170 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      >h3{
-        font-family: KaiTi, KaiTi;
-        font-weight: 400;
-        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        color: #FFFFFF;
-        line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        margin-bottom: calc(11 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        text-align: end;
-      }
-      >p{
-        font-family: KaiTi, KaiTi;
-        font-weight: 400;
-        font-size: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        color: rgba(255, 255, 255, 0.8);
-        line-height: 1.3;
-        text-align: justify;
-      }
+    flex-direction: column;
+    pointer-events: none;
+    transition: opacity 1s;
+    opacity: 1;
+    & > img {
+      width: 30px;
     }
-    >.image{
-      flex: 0 0 auto;
-      width: calc(159 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(159 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      border-radius: 50%;
-      border: 1px solid #FFFFFF;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      >img{
-        width: calc(131 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        height: calc(131 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        border-radius: 50%;
-      }
+    & > div {
+      margin-top: 10px;
+      position: relative;
+      line-height: 20px;
+      left: 4px;
+      font-weight: 400;
+      font-family: KaiTi, KaiTi;
+      color: #fff;
+      text-align: center;
     }
   }
-  >.row-1{
-    flex-direction: row-reverse
+  .HD1_2Hide {
+    opacity: 0;
+  }
+
+  .HD1_3 {
+    position: absolute;
+    z-index: 10;
+    transition: top 1s, right 1s, opacity 0.5s;
+    width: 100%;
+    & > img {
+      width: 100%;
+    }
+  }
+  .HD1_3_1 {
+    top: 10%;
+    right: -60%;
+    z-index: 1;
+  }
+  .HD1_3_2 {
+    top: 24%;
+    right: -50%;
+    z-index: 2;
+  }
+  .HD1_3_3 {
+    top: 38%;
+    right: -40%;
+    z-index: 3;
+  }
+  .HD1_3Ac {
+    top: 38%;
+    right: 0;
+  }
+  .HD1_3Hide {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .HD1_4 {
+    position: absolute;
+    z-index: 11;
+    left: 50%;
+    top: -14%;
+    transform: translateX(-50%);
+    font-family: KaiTi, KaiTi;
+    font-weight: 400;
+    color: #5e715d;
+    width: 70%;
+    height: 30%;
+    opacity: 0;
+    pointer-events: none;
+    transition: top 1s, opacity 0.5s;
+    h3 {
+      font-weight: 700;
+      text-align: center;
+      font-size: 30px;
+    }
+    p {
+      font-size: 16px;
+      position: absolute;
+      top: 50px;
+      left: 50%;
+      transform: translateX(-50%);
+      letter-spacing: 2px;
+      height: calc(100% - 50px);
+      writing-mode: vertical-rl;
+      line-height: 120%;
+    }
   }
-  >.row-3{
-    flex-direction: row-reverse
+  .HD1_4Ac {
+    opacity: 1;
+    top: 4%;
   }
 }
-</style>
+</style>