更新画作一些东西

src/components/PaintingDetailBox.vue

@@ -55,40 +55,54 @@ const mousemoveFu = (e, flag) => {
 }
 
 onMounted(() => {
-  // 判断画轴有没有超过屏幕
-  const pageHeightWindow = window.innerHeight
-  pageHeight.value = pageHeightWindow
+  const element = document.querySelector('#myElement')
 
+  const resizeObserver = new ResizeObserver(entries => {
+    for (let entry of entries) {
+      console.log(`Width changed to ${entry.contentRect.width}`)
+      // 在这里执行你的逻辑
+      // 判断画轴有没有超过屏幕
+      const pageHeightWindow = window.innerHeight
+      pageHeight.value = pageHeightWindow
 
-  setTimeout(() => {
-    if (isRow.value === "竖") {
-      const dom = document.querySelector(".imgBox")
-      if (dom.offsetHeight > pageHeightWindow) {
-        isMove.value = true
-        imgWidth.value = dom.offsetWidth
-        imgHeight.value = dom.offsetHeight
-      }
-    } else {
-      const leftBoxWidthDom = document.querySelector(".leftBxo")
-      const leftBoxWidthDomWidth = leftBoxWidthDom.offsetWidth
-      leftBoxWidth.value = leftBoxWidthDomWidth
-      const dom = document.querySelector(".imgBoxHH")
-      if (dom.offsetWidth > leftBoxWidthDomWidth) {
-        isMove.value = true
-        imgWidth.value = dom.offsetWidth
-        imgHeight.value = dom.offsetHeight
-      }
+
+      setTimeout(() => {
+        if (isRow.value === "竖") {
+          const dom = document.querySelector(".imgBox")
+          if (dom.offsetHeight > pageHeightWindow) {
+            isMove.value = true
+            imgWidth.value = dom.offsetWidth
+            imgHeight.value = dom.offsetHeight
+          }
+        } else {
+          const leftBoxWidthDom = document.querySelector(".leftBxo")
+          const leftBoxWidthDomWidth = leftBoxWidthDom.offsetWidth
+          leftBoxWidth.value = leftBoxWidthDomWidth
+          const dom = document.querySelector(".imgBoxHH")
+          if (dom.offsetWidth > leftBoxWidthDomWidth) {
+            isMove.value = true
+            imgWidth.value = dom.offsetWidth
+            imgHeight.value = dom.offsetHeight
+          }
+        }
+      }, 200)
+      tiemrr.value = setInterval(() => {
+        if (zhouMove.value >= 99) clearInterval(tiemrr.value)
+        zhouMove.value = zhouMove.value + 1
+      }, 30)
     }
-  }, 200)
-  tiemrr.value = setInterval(() => {
-    if (zhouMove.value >= 99) clearInterval(tiemrr.value)
-    zhouMove.value = zhouMove.value + 1
-  }, 30)
+  })
+
+  resizeObserver.observe(element)
+
 })
 </script>
 
 <template>
-  <div class="box">
+  <div
+    id="myElement"
+    class="box"
+  >
     <div
       :class="`leftBxo ${isMove ? '' : isRow === '横' ? '' : 'leftBxoCenter'}`"
     >
@@ -221,8 +235,8 @@ onMounted(() => {
   justify-content: center;
 }
 .box {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
   .leftBxo {
     // background-color: aquamarine;

src/components/PaintingInfoBox.vue

@@ -1,8 +1,12 @@
 <script setup>
-import { ref } from "vue"
+import { ref, computed } from "vue"
 
 // 1-作品简介  2-作者简介
-const curState = ref(1)
+const curState = computed(() => {
+  return props.state
+})
+
+const isCloseInfo = ref(false)
 
 const props = defineProps({
   title: {
@@ -37,6 +41,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  state: {
+    type: Number,
+    default: 1,
+  },
   size: {
     type: Object,
     default: () => {
@@ -47,19 +55,30 @@ const props = defineProps({
     },
   },
 })
+
+const newTitle = computed(() => {
+  return props.title.split('\n')
+})
 </script>
 
 <template>
-  <div class="info-box">
+  <div
+    class="info-box"
+    :class="{ 'info-box-close': isCloseInfo }"
+  >
     <img
       class="close-btn"
-      src="@/assets/images/painting-box-back.png"
+      :src="require(`@/assets/images/painting-box-${isCloseInfo ? 'open':'close'}.png`)"
       alt=""
+      @click="isCloseInfo = !isCloseInfo"
     >
     <div class="detail-box">
       <div class="top">
         <div class="title">
-          {{ curState == 1 ? props.title : "作者简介" }}
+          <div>{{ curState == 1 ? newTitle[0] : "作者简介" }}</div>
+          <div style="font-size: 20px;margin-top: 5px">
+            {{ newTitle.length>1 ? newTitle[1] : "" }}
+          </div>
         </div>
         <div
           class="exchange"
@@ -101,12 +120,14 @@ const props = defineProps({
   background: url(@/assets/images/painting-box-bg.png);
   background-size: 100% 100%;
   position: relative;
+  transition: width 1.5s ease;
   .close-btn {
     position: absolute;
     top: 50%;
     left: 1.5%;
     transform: translateY(-50%);
     cursor: pointer;
+    z-index: 10;
   }
   .detail-box {
     width: 95%;
@@ -115,6 +136,9 @@ const props = defineProps({
     // background: rgba(153, 205, 50, 0.39);
     right: 0;
     padding: 7% 7% 0;
+    opacity: 1;
+    transition: opacity 1.5s ease;
+    white-space: nowrap;
     .top {
       width: 100%;
       height: 65px;
@@ -171,4 +195,13 @@ const props = defineProps({
     }
   }
 }
+.info-box-close{
+  width: 2%;
+  background-size: cover;
+  >.detail-box {
+    // opacity: 0;
+    width: 0;
+    display: none;
+  }
+}
 </style>

src/views/HomeView.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { ref, inject, computed } from "vue"
-import { useRoute, useRouter } from "vue-router"
+import { ref, computed } from "vue"
+import { useRouter } from "vue-router"
 import { useStore } from "vuex"
 import Startup from "@/views/StartupView.vue"
 import useRollFu from "../rollFu.js"
@@ -9,7 +9,7 @@ import HotspotDetail3 from "@/views/HotspotDetail3.vue"
 import HotspotDetail1 from "@/views/HotspotDetail1.vue"
 
 const store = useStore()
-
+const router = useRouter()
 
 const { handleScroll } = useRollFu()
 
@@ -103,7 +103,7 @@ const scrollFu = (val) => {
     >
       <div
         class="page2-box"
-        @click="isShowPaintingDesc = true"
+        @click="() => {router.push('/painting-detail?idx=home')}"
       >
         <img
           src="@/assets/images/icon_home_detail-min.png"
@@ -114,7 +114,7 @@ const scrollFu = (val) => {
       <div
         class="page2-box"
         style="margin-top: 10px"
-        @click="isShowAuthorDesc = true"
+        @click="() => {router.push('/painting-detail?idx=home&state=2')}"
       >
         <img
           src="@/assets/images/icon_home_author-min.png"
@@ -274,12 +274,6 @@ const scrollFu = (val) => {
     // background: rgba(60, 89, 71, 0.65);
     background: url(@/assets/images/bg-mask.png);
     background-size: 100% 100%;
-    // backdrop-filter: blur(
-    //   calc(
-    //     22 / v-bind("windowSizeWhenDesignForRef") *
-    //       v-bind("windowSizeInCssForRef")
-    //   )
-    // );
   }
 
   > .startup {

src/views/PaintingDetail.vue

@@ -47,10 +47,10 @@ onMounted(() => {
       :painting-desc="paintingInfo['简介']"
       :author-desc="paintingInfo['作者简介']"
       :size="paintingInfo['尺寸'] ? getPaintingSize(paintingInfo['尺寸']) : ''"
+      :state="route.query.state ? Number(route.query.state) : 1"
     />
+    <BtnBack @click="router.back()" />
   </div>
-
-  <BtnBack @click="router.back()" />
 </template>
 
 <style lang='less' scoped>