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

src/views/BambooBookScene3.vue

@@ -35,6 +35,8 @@ const displayedPages = ref([])
 
 const currentIndex = ref(0)
 
+
+
 const slideChange = (item) => {
   swiperRealIndex.value = item.activeIndex
   // 这里只是一个简单的示例，根据实际需要调整逻辑
@@ -58,6 +60,12 @@ const slideChange = (item) => {
 
 }
 
+const curPercentage = computed(() => {
+  return currentIndex.value
+}, {
+  immediate: true,
+})
+
 
 // 跳转到指定幻灯片
 const goToSlide = (index) => {
@@ -110,14 +118,22 @@ onMounted(() => {
         </SwiperSlide>
       </Swiper>
       <!-- 自定义分页器 -->
-      <div class="custom-pagination">
+      <ProgressBar
+        class="progress-bar"
+        :totle-unit="displayedPages.length"
+        :cur-percentage="curPercentage"
+        type="1"
+        color-ac="#FFFFFF"
+        color="#FFFFFF60"
+      />
+      <!-- <div class="custom-pagination">
         <span
           v-for="(index, i) in displayedPages"
           :key="i"
           :class="{ 'pagination-bullet': true, 'swiper-pagination-bullet-active': index === currentIndex }"
           @click="goToSlide(index)"
         />
-      </div>
+      </div> -->
       <div class="system-btns">
         <BtnBack @click="emit('close')" />
       </div>
@@ -144,22 +160,36 @@ onMounted(() => {
     margin: 0 calc(5 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
   }
 
-  .custom-pagination {
-    width: 100%;
-    height: 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: fixed;
-    bottom: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-
-    span {
-      width: 10px;
-      height: 10px;
-      margin: 0 calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      border-radius: 50px;
-      border: 1px solid rgb(245, 243, 243);
-    }
+  // .custom-pagination {
+  //   width: 100%;
+  //   height: 10px;
+  //   display: flex;
+  //   justify-content: center;
+  //   align-items: center;
+  //   position: fixed;
+  //   bottom: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+  //   span {
+  //     width: 10px;
+  //     height: 10px;
+  //     margin: 0 calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  //     border-radius: 50px;
+  //     border: 1px solid rgb(245, 243, 243);
+  //   }
+  // }
+
+  .progress-bar{
+    position: absolute;
+    left: 0;
+    bottom: 15px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 90%;
+    height: 15px;
+    z-index: 3;
+    color: #e1edd95d;
+    transition: all 1s;
+    z-index: 12;
   }
 }
 
@@ -243,7 +273,7 @@ onMounted(() => {
       justify-content: space-between;
       position: absolute;
       bottom: calc(20 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
-      z-index: 2;
+      z-index: 20;
     }
   }
 

src/views/BambooHotView2/index.vue

@@ -3,15 +3,19 @@
     <div
       v-if="hotVisible"
       class="bamboo-hot2-hot"
+      :class="{
+        left: [13, 14].includes(checkedHotId)
+      }"
     >
       <div class="bamboo-hot2-hot__title">
         {{ ITEM_INFO_MAP[checkedHotId].label }}
       </div>
 
-      <div
+      <p
         class="bamboo-hot2-hot__inner"
-        v-html="ITEM_INFO_MAP[checkedHotId].info"
-      />
+      >
+        {{ ITEM_INFO_MAP[checkedHotId].info }}
+      </p>
     </div>
 
     <div
@@ -46,44 +50,23 @@
       <div
         class="bamboo-hot2-b2"
         :class="{
-          hide: hotVisible && checkedHotId !== 2
+          hide: hotVisible
         }"
       >
         <img
           src="./images/bamboo2.png"
-          @load="handleBambooOffset(2)"
         >
       </div>
-      <div
-        class="bamboo-hot2__hot b2"
-        :class="{
-          hide: hotVisible
-        }"
-        @click="handleHot(2)"
-      >
-        <p>紫竹</p>
-      </div>
 
       <div
         class="bamboo-hot2-b3"
         :class="{
-          hide: hotVisible && checkedHotId !== 3
+          hide: hotVisible
         }"
       >
         <img
           src="./images/bamboo3.png"
-          @load="handleBambooOffset(3)"
-        >
-
-        <div
-          class="bamboo-hot2__hot"
-          :class="{
-            hide: hotVisible
-          }"
-          @click="handleHot(3)"
         >
-          <p>梅鹿竹</p>
-        </div>
       </div>
 
       <div
@@ -129,10 +112,22 @@
       <div
         class="bamboo-hot2-b7"
         :class="{
+          hide: hotVisible && checkedHotId !== 7
+        }"
+      >
+        <img
+          src="./images/bamboo7.png"
+          @load="handleBambooOffset(7)"
+        >
+      </div>
+      <div
+        class="bamboo-hot2__hot b7"
+        :class="{
           hide: hotVisible
         }"
+        @click="handleHot(7)"
       >
-        <img src="./images/bamboo7.png">
+        <p>湘妃竹</p>
       </div>
 
       <div
@@ -189,21 +184,48 @@
       >
         <img src="./images/bamboo12.png">
       </div>
+
       <div
         class="bamboo-hot2-b13"
         :class="{
+          hide: hotVisible && checkedHotId !== 13
+        }"
+      >
+        <img
+          src="./images/bamboo13.png"
+          @load="handleBambooOffset(13)"
+        >
+      </div>
+      <div
+        class="bamboo-hot2__hot b13"
+        :class="{
           hide: hotVisible
         }"
+        @click="handleHot(13)"
       >
-        <img src="./images/bamboo13.png">
+        <p>梅鹿竹</p>
       </div>
+
       <div
         class="bamboo-hot2-b14"
         :class="{
-          hide: hotVisible
+          hide: hotVisible && checkedHotId !== 14
         }"
       >
-        <img src="./images/bamboo14.png">
+        <img
+          src="./images/bamboo14.png"
+          @load="handleBambooOffset(14)"
+        >
+
+        <div
+          class="bamboo-hot2__hot"
+          :class="{
+            hide: hotVisible
+          }"
+          @click="handleHot(14)"
+        >
+          <p>紫竹</p>
+        </div>
       </div>
 
       <div
@@ -249,52 +271,36 @@ import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 
 let itemScrollMap = {
   1: 0,
-  2: 166,
-  3: 201,
   4: 450,
-  8: 1048
+  7: 0,
+  8: 1048,
+  13: 0,
+  14: 0
 }
 const ITEM_INFO_MAP = {
   1: {
     label: '水竹',
-    info: `
-      <p>竿可高6米许，粗达3厘米；篷耳小，形状为卵形或长椭圆形。</p>
-      <p>锋舌边缘生有短白纤毛。筝片直立，呈三角形至狭长三角形。</p>
-      <p>叶片为线状披针形或披针形，下表面基部有些许毛。</p>
-    `
+    info: '篷耳小，形状为卵形或长椭圆形。锋舌边缘生有短白纤毛。筝片直立，呈三角形至狭长三角形。'
   },
-  2: {
+  14: {
     label: '紫竹',
-    info: `
-      <p>紫竹幼竿绿色，覆盖细柔毛和白粉，幕环有毛，</p>
-      <p>籍鞘背面红褐色或绿色加深。斑点微小或无，</p>
-      <p>锌鞘上端常密集，带微量白粉和淡褐色刺毛。叶片小而薄，窄披针形，先端尖长。</p>
-    `
+    info: '紫竹幼竿绿色，覆盖细柔毛和白粉，幕环有毛，籍鞘背面红褐色或绿色加深。叶片小而薄，窄披针形。'
   },
-  3: {
+  13: {
     label: '梅鹿竹',
-    info: `
-      <p>梅鹿竹斑纹相连，圆形，</p>
-      <p>外轮廓深色，斑心发白。</p>
-      <p>有些竹地呈青灰色，上有兽斑状斑痕，酷似梅花鹿的花纹。</p>
-    `
+    info: '梅鹿竹斑纹相连，圆形，外轮廓深色，斑心发白。竹地上有兽斑状斑痕，酷似梅花鹿的花纹。'
   },
   4: {
     label: '楠竹',
-    info: `
-      <p>单轴散生型常绿乔木状竹类植物，株高约20米，</p>
-      <p>径可达12-30厘米，呈直立状，</p>
-      <p>基部节间长1-6厘米，中部节间长达40厘米，</p>
-      <p>秆上具细柔毛后脱落。</p>
-    `
+    info: '单轴散生型常绿乔木状竹类植物，呈直立状，竹叶深绿，呈披针形'
+  },
+  7: {
+    label: '湘妃竹',
+    info: '中小型竹，竿环及箨（tuò）环隆起，竿箨黄褐色，有黑褐色斑点，箨叶三角形或带形'
   },
   8: {
     label: '单竹',
-    info: `
-      <p>民间俗称“苦慈”，竹质细腻，</p>
-      <p>纤维韧性极强，可制成薄如蝉翼、细如发丝的竹篾丝，</p>
-      <p>编织成绸似、绢似的精美竹编工艺品。</p>
-    `
+    info: '竹质细腻，纤维韧性极强，可制成薄如蝉翼的竹篾丝，编织成绸似、绢似的精美竹编工艺品。'
   },
 }
 
@@ -324,9 +330,20 @@ const handleHot = (id) => {
 }
 
 const handleBambooOffset = (target) => {
+  let temp = 0
+
+  if ([13, 14].includes(target)) {
+    if (target === 13) {
+      temp = window.innerWidth * 0.2
+    }
+
+    itemScrollMap[target] = bambooWrapBg.value.scrollWidth - window.innerWidth - temp
+    return
+  }
+
   const offset = window.innerWidth / 6
   const left = document.getElementsByClassName(`bamboo-hot2-b${target}`)?.[0].getBoundingClientRect().left
-  let temp = 0
+
   switch (target) {
   case 3:
     temp = window.innerWidth / 3
@@ -334,8 +351,11 @@ const handleBambooOffset = (target) => {
   case 4:
     temp = -(window.innerWidth * 0.25)
     break
+  case 7:
+    temp = (window.innerWidth * 0.2)
+    break
   case 8:
-    temp = -(window.innerWidth * 0.7)
+    temp = -(window.innerWidth * 0.6)
     break
   }
   itemScrollMap[target] = left - offset + temp
@@ -488,6 +508,16 @@ img {
   white-space: nowrap;
   z-index: 999;
 
+  &.left {
+    right: unset;
+    left: calc(70 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+    writing-mode: vertical-lr;
+
+    .bamboo-hot2-hot__title::before {
+      right: unset;
+      left: calc(-5 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+    }
+  }
   &__title {
     position: relative;
     margin-bottom: calc(90 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
@@ -508,9 +538,11 @@ img {
     }
   }
   &__inner {
-    letter-spacing: 3px;
+    letter-spacing: 2px;
+    white-space: pre-wrap;
     line-height: calc(40 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     font-size: calc(20 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+    height: calc(400 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
   }
 }
 
@@ -560,20 +592,9 @@ img {
     transform: translateZ(calc(10 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef')));
     z-index: 2;
   }
-  .bamboo-hot2__hot.b2 {
-    top: calc(200 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-    left: calc(305 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-    transform: translateZ(calc(10 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef')));
-    z-index: 4;
-  }
   &-b3 {
     left: calc(140 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     transform: translateZ(calc(20 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'))) scale(0.8);
-
-    .bamboo-hot2__hot {
-      top: calc(300 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-      right: calc(110 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-    }
   }
   &-b4 {
     left: calc(600 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
@@ -597,6 +618,12 @@ img {
     transform: translateZ(calc(10 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef')));
     z-index: 2;
   }
+  .bamboo-hot2__hot.b7 {
+    top: calc(160 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+    left: calc(1330 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+    transform: translateZ(calc(10 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef')));
+    z-index: 4;
+  }
   &-b8 {
     left: calc(1180 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     transform: translateZ(calc(25 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'))) scale(0.8);
@@ -629,9 +656,20 @@ img {
     transform: translateZ(calc(15 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef')));
     z-index: 2;
   }
+  .bamboo-hot2__hot.b13 {
+    top: calc(360 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+    left: calc(2280 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+    transform: translateZ(calc(15 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef')));
+    z-index: 4;
+  }
   &-b14 {
     left: calc(2220 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     transform: translateZ(calc(30 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'))) scale(0.7);
+
+    .bamboo-hot2__hot {
+      top: calc(200 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+      right: calc(110 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+    }
   }
   &.wrap-hide {
     &::before,

src/views/MoreContent.vue

@@ -326,11 +326,21 @@
       </div>
     </div>
 
-    <PaginationComp
+    <ProgressBar
+      :style="{ opacity: curStep != 0 ? 1: 0}"
+      class="pagination"
+      :totle-unit="4"
+      type="1"
+      :cur-percentage="curPercentage"
+      color-ac="#7B916B"
+      color="#7B916B60"
+    />
+
+    <!-- <PaginationComp
       class="pagination"
       :total="4"
       :idx="currentAnchorIdx"
-    />
+    /> -->
     <BtnBack
       @click="
         router.push({
@@ -589,6 +599,8 @@ const {
   initialAnchorIdx: Number(route.query.anchorIdx) || 0,
 })
 
+
+
 const bgInitialLeft = -30
 const bgLeft = ref(bgInitialLeft)
 const bgSpeedFactor = 0.8 * 0.8 * 0.8 * 0.8
@@ -602,6 +614,11 @@ watch(
   }
 )
 
+
+const curPercentage = computed(() => {
+  return currentAnchorIdx.value
+}, { immediate: true })
+
 const layer4SpeedFactor = 0.8 * 0.8 * 0.8
 const layer4InitialLeft = 0
 const layer4Left = ref(layer4InitialLeft)

src/views/ShuangGouSheSeDetail.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted } from 'vue'
+import { onMounted, ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 
@@ -23,8 +23,8 @@ const reverseArray = (array) => {
   return array.slice().reverse()
 }
 
-const goPaintingDetail = () =>{
-  router.push('/shuanggou-painting-detail?idx=0')
+const goPaintingDetail = () => {
+  router.push(`/shuanggou-painting-detail?idx=0&&m=${curIndex.value}`)
 }
 
 const x = window.innerWidth / window.innerHeight
@@ -34,24 +34,63 @@ onMounted(() => {
 })
 
 const text = [
-  '设色，国画中晕染彩色的意思，',
-  '画面中只要出现彩色就可以说是设色作品。',
-  '与设色相反的是“水墨”，指画面中不出现彩色，',
-  '或者极少出现彩色的，以墨色为主绘制的作品。',
-  '双钩，中国画技法名。用线条钩描物象的轮廓，',
-  '通称“勾勒”，因基本上是用左右或上下两笔钩描合拢，',
-  '故亦称“双钩”。大部用于工笔花鸟画。',
-  '又旧时摹搨法书。沿字的笔迹两边用细劲的墨线钩出轮廓，',
-  '也叫“双钩”；双钩后填墨的称为“双钩廓填”。'
+  ['双钩，中国画技法名。用线条钩描',
+    '物象的轮廓,通称“勾勒”，因基本上',
+    '是用左右或上下两笔钩描合拢，故亦',
+    '称“双钩”。大部用于工笔花鸟画。又',
+    '旧时摹搨法书。沿字的笔迹两边用细',
+    '劲的墨线线钩出轮廓，也叫“双钩”；',
+    '双钩后填墨的称为“双钩”'],
+  ['设色，国画中晕染彩色的意思，“廓',
+    '填”。画面中只要出现彩色就可以说',
+    '是设色作品。与设色相反的是“水墨”，',
+    '指画面中不出现彩色，或者极少出现',
+    '彩色的，以墨色为主绘制的作品。', ]
 ]
+
+const curIndex = ref(0)
+
+const lastX = ref(0)
+// 开始滑动
+const handletouchstart = (event) => {
+  lastX.value = event.changedTouches[0].pageX
+}
+
+// 监听活动
+const touchEnd = (event) => {
+  let currentX = event.changedTouches[0].pageX
+  let tx = currentX - lastX.value
+  if (tx < 0) {
+    if (curIndex.value == 0) {
+      curIndex.value = 1
+    }
+  } else if (tx > 0) {
+    if (curIndex.value == 1) {
+      curIndex.value = 0
+    }
+  }
+}
+
+const goToSlide = (index) => {
+  curIndex.value = index
+}
+
+const curPercentage = computed(() => {
+  return curIndex.value
+}
+)
+
 </script>
 
 <template>
   <div
     class="home"
+    @touchstart="handletouchstart($event)"
+    @touchend="touchEnd($event)"
   >
     <div class="title">
-      双钩设色
+      <span :style="{ color: curIndex == 1 ? 'rgba(71, 71, 71, 0.50)' : '' }">双钩</span>
+      <span :style="{ color: curIndex == 0 ? 'rgba(71, 71, 71, 0.50)' : '' }">设色</span>
     </div>
 
     <div class="shuanggou-yezi">
@@ -73,16 +112,36 @@ const text = [
     > -->
     <div
       class="text"
-      :style="{top: x> 0.5 ?'auto':'',bottom: x > 0.5 ? '0vh':''}"
+      :style="{ top: x > 0.5 ? 'auto' : '', bottom: x > 0.5 ? '15vh' : 'auto' }"
     >
       <div
-        v-for="(item,index) in reverseArray(text)"
+        v-for="(item, index) in reverseArray(text[curIndex])"
         :key="index"
       >
         {{ item }}
       </div>
+      <!-- <img
+        v-show="curIndex == 0"
+        src="@/assets/images/shuanggou-text.png"
+        alt=""
+      > -->
+      <!-- <img
+        v-show="curIndex == 1"
+        src="@/assets/images/shese-text.png"
+        alt=""
+      > -->
     </div>
 
+    <ProgressBar
+      class="progress-bar"
+      :totle-unit="2"
+      :cur-percentage="curPercentage"
+      color-ac="#7B916B"
+      color="#7B916B60"
+      type="1"
+      @go-to-slide="goToSlide"
+    />
+
     <img
       class="right-bottom"
       src="@/assets/images/right-bottom.png"
@@ -106,13 +165,16 @@ const text = [
 </template>
 
 <style lang='less' scoped>
-.home{
+*{
+  transition: all 1s ease;
+}
+.home {
   width: 100%;
   height: 100%;
   position: relative;
   background: #ffffff;
 
-  .title{
+  .title {
     color: #474747;
     font-size: calc(48 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     line-height: calc(48 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -123,57 +185,77 @@ const text = [
     top: 26%;
     letter-spacing: 10px;
   }
-  .shuanggou-yezi{
+
+  .shuanggou-yezi {
     width: 100%;
     animation: fade-in 2s forwards;
     position: relative;
-    z-index:2;
+    z-index: 2;
 
     @keyframes fade-in {
-      0%{
+      0% {
         opacity: 0;
       }
-      100%{
+
+      100% {
         opacity: 1;
       }
     }
 
-    >img{
+    >img {
       width: 100%;
       margin-top: -3%;
     }
-    >.hotspot-1{
+
+    >.hotspot-1 {
       position: absolute;
       bottom: 28%;
       left: 17%;
       pointer-events: initial;
-      z-index:3;
+      z-index: 3;
 
     }
   }
 
-  .text{
+  .text {
     display: flex;
     position: absolute;
-    left: 15vw;
-    top: 60vh;
+    right: 30%;
+    top: 40vh;
     // top: calc(50 /v-bind('windowSizeWhenDesignForRef')/v-bind('windowSizeInCssForRef'));
     color: #707F48;
-    font-size: calc(16 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    font-size: calc(18 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     line-height: calc(26 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     font-family: 'KaiTi';
-    >div{
+
+    >div {
       writing-mode: vertical-rl;
       letter-spacing: 2px;
+      text-align: justify;
     }
   }
 
-  .right-bottom{
+  .right-bottom {
     width: 100%;
     position: absolute;
     bottom: 0;
     right: 0;
   }
+
+  .progress-bar{
+    position: absolute;
+    left: 0;
+    bottom: 15px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 90%;
+    height: 15px;
+    z-index: 3;
+    color: #e1edd95d;
+    transition: all 1s;
+    z-index: 1;
+  }
+
   .system-btns {
     width: 100%;
     padding: 0 calc(20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));

src/views/ShuanggouPaintingDetail.vue

@@ -1,6 +1,19 @@
 <template>
   <div class="painting-detail-list">
     <!-- <div class="bg-left" /> -->
+
+    <img
+      v-show="route.query.m == 1"
+      class="bg-img"
+      src="@/assets/images/img_shese.jpg"
+      alt=""
+    >
+    <img
+      v-show="!route.query.m || route.query.m == 0 "
+      class="bg-img"
+      src="@/assets/images/img_shuanggou.jpg"
+      alt=""
+    >
     <Swiper
       class="painting-list"
       :initial-slide="Number(route.query.idx)"
@@ -94,6 +107,11 @@ const isShowOperationTip = ref(true)
   top: 0;
   width: 100%;
   height: 100%;
+  >.bg-img{
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
   >.bg-left{
     background: linear-gradient(90deg, #7b916b 0%, #94a586 100%);
     position: absolute;
@@ -111,8 +129,8 @@ const isShowOperationTip = ref(true)
     height: 100%;
     // backdrop-filter: blur(calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
     // background: linear-gradient(rgba(123,145,107,0.62) 0%, rgba(0,0,0,0.3) 100%);
-    background-image:url(@/assets/images/shuanggou-detail.jpg);
-    background-size: 100% 100%;
+    // background-image:url(@/assets/images/shuanggou-detail.jpg);
+    // background-size: 100% 100%;
     .swiper-slide{
       >.painting-item{
         position: relative !important;