feat:修改热点三的样式

src/views/HomeView(横向滑动).vue

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

src/views/HomeView.vue

@@ -229,7 +229,7 @@
     <OperationTip
       v-if="isStartupOver"
       class="operation-tip"
-      text="了解作品"
+      text="向左滑动"
       direction="h"
       :is-show="isShowOperationTip"
     />
@@ -773,7 +773,7 @@ function onClickGoNextPage() {
   }
 
   >.startup {
-    z-index: 10;
+    z-index: 20;
   }
 
   >.title-wrap {
@@ -1056,7 +1056,7 @@ function onClickGoNextPage() {
   }
 
   >.hotspot-detail {
-    z-index: 10;
+    z-index: 20;
   }
 
   >.hotspot-detail.painting-detail {

src/views/HotspotDetail3.vue

@@ -1,156 +1,181 @@
 <template>
   <div class="hotspot-detail-3">
-    <div class="bg-mask" />
-    <div class="row row-1">
-      <div class="text">
-        <h3>
-          {{ craftInfo[0].title }}
-        </h3>
-        <p>
-          {{ craftInfo[0].desc }}
-        </p>
-      </div>
-      <div class="image">
-        <img
-          class=""
-          :src="`${$env.BASE_URL}configMultiMedia/${craftInfo[0].title}.png`"
-          alt=""
-          draggable="false"
-        >
-      </div>
-    </div>
-    <div class="row row-2">
-      <div class="text">
-        <h3>
-          {{ craftInfo[1].title }}
-        </h3>
-        <p>
-          {{ craftInfo[1].desc }}
-        </p>
-      </div>
-      <div class="image">
-        <img
-          class=""
-          :src="`${$env.BASE_URL}configMultiMedia/${craftInfo[1].title}.png`"
-          alt=""
-          draggable="false"
-        >
-      </div>
+    <!-- 阴影 -->
+    <img
+      class="shadow-box"
+      :src="shadow"
+      :style="{ width: state === 1 ? '50%' : '80%' }"
+    >
+
+    <img
+      v-show="state == 1"
+      class="content1"
+      :src="hots3StateContent1"
+      alt=""
+    >
+    <div
+      v-show="state == 2"
+      id="content2"
+      ref="content2Dom"
+      class="content2"
+    >
+      <img
+        id="content2Img"
+        :src="hots3StateContent2"
+        alt=""
+      >
     </div>
-    <div class="row row-3">
-      <div class="text">
-        <h3>
-          {{ craftInfo[2].title }}
-        </h3>
-        <p>
-          {{ craftInfo[2].desc }}
-        </p>
-      </div>
-      <div class="image">
-        <img
-          class=""
-          :src="`${$env.BASE_URL}configMultiMedia/${craftInfo[2].title}.png`"
-          alt=""
-          draggable="false"
-        >
-      </div>
+    <img
+      v-show="state == 3"
+      class="content3"
+      :src="hots3StateContent3"
+      alt=""
+    >
+    <div class="btns-box">
+      <img
+        :src="state == 1 ? hots3StateBtn1 : hots3StateBtn1Ac"
+        alt=""
+        @click="state = 1"
+      >
+      <img
+        :src="state == 2 ? hots3StateBtn2 : hots3StateBtn2Ac"
+        alt=""
+        @click="goState2"
+      >
+      <img
+        :src="state == 3 ? hots3StateBtn3 : hots3StateBtn3Ac"
+        alt=""
+        @click="state = 3"
+      >
     </div>
-    <BtnBack
-      @click="emit('close')"
-    />
+    <BtnBack @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 { ref, computed, onMounted } from "vue"
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 
+
+const emit = defineEmits(['close'])
+
+// 三个背景图
+import hots3StateBg1 from '@/assets/images/hots-detail-bg-state1.png'
+import hots3StateBg2 from '@/assets/images/hots-detail-bg-state2.png'
+import hots3StateBg3 from '@/assets/images/hots-detail-bg-state3.png'
+
+// 三个按钮
+
+import hots3StateBtn1 from '@/assets/images/hots-detail-btn-state1.png'
+import hots3StateBtn2 from '@/assets/images/hots-detail-btn-state2.png'
+import hots3StateBtn3 from '@/assets/images/hots-detail-btn-state3.png'
+
+import hots3StateBtn1Ac from '@/assets/images/hots-detail-btn-state1-ac.png'
+import hots3StateBtn2Ac from '@/assets/images/hots-detail-btn-state2-ac.png'
+import hots3StateBtn3Ac from '@/assets/images/hots-detail-btn-state3-ac.png'
+
+// 三个阴影
+import hots3StateShadow1 from '@/assets/images/img_shadow_1.png'
+import hots3StateShadow2 from '@/assets/images/img_shadow_2.png'
+import hots3StateShadow3 from '@/assets/images/img_shadow_3.png'
+
+// 三个内容
+import hots3StateContent1 from '@/assets/images/hots-detail-content-state1.png'
+import hots3StateContent2 from '@/assets/images/hots-detail-content-state2.png'
+import hots3StateContent3 from '@/assets/images/hots-detail-content-state3.png'
+
+
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
 } = useSizeAdapt()
 
-const route = useRoute()
-const router = useRouter()
-const store = useStore()
 
-const $env = inject('$env')
+// 轴1  卷2 册3
+const state = ref(1)
 
-const emit = defineEmits(['close'])
+const homeBg = computed(() => {
+  return `url(${state.value == 1 ? hots3StateBg1 : state.value == 2 ? hots3StateBg2 : hots3StateBg3})`
+})
+
+const shadow = computed(() => {
+  return state.value == 1 ? hots3StateShadow1 : state.value == 2 ? hots3StateShadow2 : hots3StateShadow3
+})
+
+const content2Dom = ref(null)
+
+const goState2 = () => {
+  state.value = 2
+  setTimeout(() => {
+    if (content2Dom.value) {
+      const x = 310 / 780
+      const allWidth = document.getElementById('content2Img').getBoundingClientRect().width
+      console.log(allWidth * x)
+      content2Dom.value.scrollLeft = allWidth * x
+    }
+  }, 5)
+
+
+}
 
-const craftInfo = configText.craft
 
 </script>
 
 <style lang="less" scoped>
-.hotspot-detail-3{
+.hotspot-detail-3 {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
-  background-image: url(@/assets/images/home-painting-line-small.jpg);
+  background-image: v-bind(homeBg);
   background-size: cover;
   background-repeat: no-repeat;
-  background-position: center center;
+  background-position: top left;
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
-  >.bg-mask{
+  z-index: 3;
+
+  .shadow-box {
+    position: absolute;
+    bottom: calc(80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .content1 {
+    width: 90%;
+    max-height: 80vh;
     position: absolute;
-    left: 0;
-    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: calc(130 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+
+  .content2{
     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;
+    background-position: left top;
+    overflow: auto;
+    img{
+      // height: 50vh;
+      width: 990px;
+    }
   }
-  >.row{
+
+  .btns-box {
+    width: 55%;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
     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%;
-      }
+    justify-content: space-evenly;
+    bottom: calc(35 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+    >img {
+      width: calc(35 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: calc(35 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
   }
-  >.row-2{
-    flex-direction: row-reverse
-  }
 }
 </style>

src/views/MoreContent.vue

@@ -387,7 +387,7 @@
         </div>
         <div
           class="cencel-btn"
-          @click="isShowToastFromGame =false"
+          @click="isShowToastFromGame = false"
         >
           取消
         </div>
@@ -481,18 +481,41 @@ const saveTitle = () => {
   var iframe = document.getElementById('gameIframe')
   var iframeWindow = iframe.contentWindow || window.frames['yourIframeId']
   if (iframeWindow) {
-    iframeWindow.saveTitle(input1.value.length >= 7 ? input1.value + '\n' + input2.value : input1.value )
+    iframeWindow.saveTitle(input1.value.length >= 7 ? input1.value + '\n' + input2.value : input1.value)
     isShowToastFromGame.value = false
   }
 }
 
+const resizeTimer = ref(null)
+
 onMounted(() => {
+
+  window.addEventListener('resize', () => {
+    window.setTimeout(() => {
+      // 根元素
+      const dom = document.querySelector("#app")
+      if (dom && document.documentElement.clientWidth < 1000) {
+        dom.style.height = document.documentElement.clientHeight + "px"
+        dom.style.width = document.documentElement.clientWidth + "px"
+        windowWidth.value = document.documentElement.clientWidth
+        windowHeight.value = document.documentElement.clientHeight
+      }
+    }, 100)
+  })
+
+  setTimeout(() => {
+    window.dispatchEvent(new Event('resize'))
+  }, 200)
   window.closeGame = () => {
     isShowGamePage.value = false
   }
 
-  window.isShowToastFromGame = () =>{
+
+
+  window.isShowToastFromGame = () => {
     isShowToastFromGame.value = true
+    input1.value = ''
+    input2.value = ''
   }
 
 })