绘画详情列表页

README.md

@@ -4,9 +4,9 @@
 访问url：https://culture.4dage.com/NanjingMuseumWuJinZang/index.html#/
 
 ## 任一存的todos
-绘画目录页 各种切图 排版
+绘画详情页开发 
 
-绘画详情页开发
+绘画详情页 长福画作居中显示
 
 内容扩展页开发
 

src/router/index.js

@@ -3,6 +3,7 @@ import HomeView from '../views/HomeView.vue'
 import MoreContent from '../views/MoreContent.vue'
 import PoemList from '../views/PoemList.vue'
 import PaintingList from '../views/PaintingList.vue'
+import PaintingDetailList from '../views/PaintingDetailList.vue'
 import GameView from '../views/GameView.vue'
 
 // import store from '@/store/index.js'
@@ -33,6 +34,11 @@ const routes = [
     component: PaintingList,
   },
   {
+    path: '/painting-detail-list',
+    name: 'PaintingDetailList',
+    component: PaintingDetailList,
+  },
+  {
     path: '/game',
     name: 'Game',
     component: GameView,

src/views/HomeView.vue

@@ -224,7 +224,7 @@
         :painting-desc="homepagePaintingDesc.join('\n\n')"
         :author-desc="homepageAuthorDesc.join('\n\n')"
         :big-painting="require(`@/assets/images/home-painting-big.jpg`)"
-        class="hotspot-detail"
+        class="hotspot-detail painting-detail"
         @close="isShowPaintingDetail = false"
       />
     </Transition>
@@ -638,5 +638,8 @@ const isShowHotspotDetail3 = ref(false)
   >.hotspot-detail{
     z-index: 10;
   }
+  >.hotspot-detail.painting-detail{
+    backdrop-filter: blur(calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
+  }
 }
 </style>

src/views/HotspotDetail1.vue

@@ -13,7 +13,7 @@
       <div class="image">
         <img
           class=""
-          :src="`${$env.VUE_APP_DEPLOY_ORIGIN}/configMultiMedia/${craftInfo[3].title}.png`"
+          :src="`${$env.BASE_URL}configMultiMedia/${craftInfo[3].title}.png`"
           alt=""
           draggable="false"
         >
@@ -31,7 +31,7 @@
       <div class="image">
         <img
           class=""
-          :src="`${$env.VUE_APP_DEPLOY_ORIGIN}/configMultiMedia/${craftInfo[4].title}.png`"
+          :src="`${$env.BASE_URL}configMultiMedia/${craftInfo[4].title}.png`"
           alt=""
           draggable="false"
         >
@@ -49,7 +49,7 @@
       <div class="image">
         <img
           class=""
-          :src="`${$env.VUE_APP_DEPLOY_ORIGIN}/configMultiMedia/${craftInfo[5].title}.png`"
+          :src="`${$env.BASE_URL}configMultiMedia/${craftInfo[5].title}.png`"
           alt=""
           draggable="false"
         >

src/views/HotspotDetail3.vue

@@ -13,7 +13,7 @@
       <div class="image">
         <img
           class=""
-          :src="`${$env.VUE_APP_DEPLOY_ORIGIN}/configMultiMedia/${craftInfo[0].title}.png`"
+          :src="`${$env.BASE_URL}configMultiMedia/${craftInfo[0].title}.png`"
           alt=""
           draggable="false"
         >
@@ -31,7 +31,7 @@
       <div class="image">
         <img
           class=""
-          :src="`${$env.VUE_APP_DEPLOY_ORIGIN}/configMultiMedia/${craftInfo[1].title}.png`"
+          :src="`${$env.BASE_URL}configMultiMedia/${craftInfo[1].title}.png`"
           alt=""
           draggable="false"
         >
@@ -49,7 +49,7 @@
       <div class="image">
         <img
           class=""
-          :src="`${$env.VUE_APP_DEPLOY_ORIGIN}/configMultiMedia/${craftInfo[2].title}.png`"
+          :src="`${$env.BASE_URL}configMultiMedia/${craftInfo[2].title}.png`"
           alt=""
           draggable="false"
         >

src/views/PaintingDetail.vue

@@ -12,13 +12,15 @@
         alt=""
         draggable="false"
       >
-      <img
-        class="painting"
-        :src="props.thumb"
-        alt=""
-        draggable="false"
-        @click="showBigPainting"
-      >
+      <div class="painting-wrap-2">
+        <img
+          class="painting"
+          :src="props.thumb"
+          alt=""
+          draggable="false"
+          @click="showBigPainting"
+        >
+      </div>
       <Transition name="fade-out">
         <img
           v-show="isAnimating"
@@ -60,6 +62,7 @@
     </div>
 
     <BtnBack
+      v-if="canClose"
       @click="emit('close')"
     />
   </div>
@@ -72,7 +75,6 @@ import { useStore } from "vuex"
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 import TWEEN from '@tweenjs/tween.js'
 import { api as viewerApi } from 'v-viewer'
-import bigPainting from '@/assets/images/home-painting-big.jpg'
 
 const route = useRoute()
 const router = useRouter()
@@ -119,6 +121,10 @@ const props = defineProps({
   authorDesc: {
     type: String,
     required: true,
+  },
+  canClose: {
+    type: Boolean,
+    default: true,
   }
 })
 
@@ -169,7 +175,7 @@ function showBigPainting() {
   top: 0;
   width: 100%;
   height: 100%;
-  backdrop-filter: blur(calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
+  ::-webkit-scrollbar { width: 0; height: 0; }
   >.painting-wrap{
     position: absolute;
     left: 50%;
@@ -185,12 +191,21 @@ function showBigPainting() {
       width: 100%;
       height: 100%;
     }
-    >img.painting{
+    >.painting-wrap-2{
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
-      width: 90%;
+      width: calc(329 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(561 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      overflow: auto;
+      >img.painting{
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 100%;
+      }
     }
     >img.bottom-border-for-animation{
       position: absolute;

src/views/PaintingDetailList.vue

@@ -1,17 +1,59 @@
 <template>
-  <div class="painting-detail-list" />
+  <div class="painting-detail-list">
+    <div class="bg-left" />
+    <Swiper
+      class="painting-list"
+      :slides-per-view="1"
+    >
+      <SwiperSlide
+        v-for="item in paintingList"
+        :key="item['标题']"
+        class="swiper-slider"
+      >
+        <PaintingDetail
+          class="painting-item"
+          :thumb="`${$env.BASE_URL}configMultiMedia/paintings-small/${item['标题']}.jpg`"
+          :title="item['标题']"
+          :author="item['作者']"
+          :age="item['朝代']"
+          :subtitle="item['装裱\/材质\/笔类型']"
+          :location="item['馆藏']"
+          :painting-desc="item['简介']"
+          :author-desc="item['作者简介']"
+          :big-painting="`${$env.BASE_URL}configMultiMedia/paintings/${item['标题']}.jpg`"
+          :can-close="false"
+        >
+          {{ item }}
+        </PaintingDetail>
+      </SwiperSlide>
+    </Swiper>
+    <BtnBack
+      class="btn-back"
+      @click="router.go(-1)"
+    />
+  </div>
 </template>
 
 <script setup>
 import { ref, computed, watch, onMounted, inject } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
+import PaintingDetail from '@/views/PaintingDetail.vue'
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 
 const route = useRoute()
 const router = useRouter()
 const store = useStore()
 
 const $env = inject('$env')
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+const paintingList = configExcel['画作']
+
 </script>
 
 <style lang="less" scoped>
@@ -21,5 +63,31 @@ const $env = inject('$env')
   top: 0;
   width: 100%;
   height: 100%;
+  >.bg-left{
+    background: linear-gradient(90deg, #7b916b 0%, #94a586 100%);
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: calc(57 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    background: -1;
+  }
+  >.painting-list{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    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%);
+    .swiper-slide{
+      >.painting-item{
+        position: relative !important;
+      }
+    }
+  }
+  >.btn-back{
+    z-index: 10;
+  }
 }
 </style>

src/views/PaintingList.vue

@@ -88,7 +88,7 @@
             <div class="img-wrap">
               <img
                 class=""
-                :src="`${$env.VUE_APP_DEPLOY_ORIGIN}/configMultiMedia/paintings-thumb/${item['标题']}.jpg`"
+                :src="`${$env.BASE_URL}configMultiMedia/paintings-thumb/${item['标题']}.jpg`"
                 alt=""
                 draggable="false"
               >