feat:接入双钩设色画作页面

src/router/index.js

@@ -8,6 +8,7 @@ import GameView from '../views/GameView.vue'
 import BambooBookView from '../views/BambooBookView.vue'
 import BambooHotView from '../views/BambooHotView.vue'
 import ShuanggouDetail from '../views/ShuangGouSheSeDetail.vue'
+import ShuanggouPaintingDetail from '../views/ShuanggouPaintingDetail.vue'
 
 // import store from '@/store/index.js'
 
@@ -64,7 +65,13 @@ const routes = [
     path: '/shuanggouDetail',
     name: 'ShuanggouDetail',
     component: ShuanggouDetail
-  }
+  },
+  // 双沟设色-画作
+  {
+    path: '/shuanggou-painting-detail',
+    name: 'ShuanggouPaintingDetail',
+    component: ShuanggouPaintingDetail,
+  },
 ]
 
 const router = createRouter({

src/views/PaintingDetail.vue

@@ -125,6 +125,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  // subtitle: {
+  //   type: String,
+  //   required: true,
+  // },
   age: {
     type: String,
     required: true,
@@ -173,6 +177,7 @@ onMounted(() => {
   descTextEl.value.addEventListener('scroll', (e) => {
     descTextElScrollTop.value = descTextEl.value.scrollTop
   })
+
 })
 const unwatch = watch(descTextElScrollTop, (v) => {
   isShowOperationTip.value = false

src/views/ShuangGouSheSeDetail copy.vue

@@ -1,88 +0,0 @@
-<script setup lang='ts'>
-import useSizeAdapt from "@/useFunctions/useSizeAdapt"
-
-const goBack = () => {
-  window.history.back()
-}
-
-const {
-  windowSizeInCssForRef,
-  windowSizeWhenDesignForRef,
-} = useSizeAdapt()
-</script>
-
-<template>
-  <div class="home">
-    <div class="title">
-      双钩设色
-    </div>
-
-    <img
-      class="shuanggou-yezi"
-      src="@/assets/imagse/shuanggou-top-left.png"
-      alt=""
-    >
-
-    <img
-      class="text"
-      src="@/assets/images/shuanggou-text.png"
-      alt=""
-    >
-
-    <img
-      class="right-bottom"
-      src="@/assets/images/right-bottom.png"
-      alt=""
-    >
-
-    <div class="system-btns">
-      <BtnBack @click="goBack" />
-
-      <OperationTip
-        class="operation-h"
-        text=""
-        direction="h"
-      />
-    </div>
-  </div>
-</template>
-
-<style lang='less' scoped>
-.home{
-  width: 100%;
-  height: 100%;
-  position: relative;
-  background: #ffffff;
-
-  .title{
-    color: #474747;
-    font-size: calc(48 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    line-height: calc(48 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    writing-mode: vertical-rl;
-    font-family: 'KingHwa_OldSong';
-    position: absolute;
-    right: 10%;
-    top: 40%;
-  }
-
-  // .text{
-
-  // }
-  .system-btns {
-    width: 100%;
-    padding: 0 calc(20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
-    display: flex;
-    // flex-direction: column;
-    justify-content: flex-end;
-    position: absolute;
-    bottom: calc(60 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
-    z-index: 2;
-
-    .operation-h {
-      width: calc(36 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-      transition: opacity 0.5s ease-in-out;
-    }
-  }
-}
-
-</style>

src/views/ShuangGouSheSeDetail.vue

@@ -1,6 +1,9 @@
 <script setup>
+import { useRouter } from 'vue-router'
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 
+const router = useRouter()
+
 const goBack = () => {
   window.history.back()
 }
@@ -9,10 +12,29 @@ const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
 } = useSizeAdapt()
+
+const reverseArray = (array) => {
+  return array.slice().reverse()
+}
+
+const goPaintingDetail = () =>{
+  router.push('/shuanggou-painting-detail?idx=19')
+}
+
+const text = [
+  '设色，国画中晕染彩色的意思，',
+  '画面中只要出现彩色就可以说是设色作品。',
+  '双钩，用线条钩描物象的轮廓，通称',
+  '“勾勒”，因基本上是用左右或上下',
+  '两笔钩描合拢，沿字的笔迹两边用细',
+  '劲的墨线钩出轮廓，也叫“双钩”'
+]
 </script>
 
 <template>
-  <div class="home">
+  <div
+    class="home"
+  >
     <div class="title">
       双钩设色
     </div>
@@ -22,18 +44,26 @@ const {
         src="@/assets/images/shuanggou-top-left.png"
         alt=""
       >
-      <!-- <div class="cicle" /> -->
       <HotspotComp
         v-show="true"
         class="hotspot-1"
+        @click="goPaintingDetail"
       />
     </div>
 
-    <img
+    <!-- <img
       class="text"
       src="@/assets/images/shuanggou-text.png"
       alt=""
-    >
+    > -->
+    <div class="text">
+      <div
+        v-for="(item,index) in reverseArray(text)"
+        :key="index"
+      >
+        {{ item }}
+      </div>
+    </div>
 
     <img
       class="right-bottom"
@@ -79,6 +109,7 @@ const {
     width: 100%;
     animation: fade-in 5s forwards;
     position: relative;
+    z-index:2;
 
     @keyframes fade-in {
       0%{
@@ -94,17 +125,27 @@ const {
     }
     >.hotspot-1{
       position: absolute;
-      bottom: 32%;
-      right: 31%;
+      bottom: 28%;
+      left: 17%;
       pointer-events: initial;
+      z-index:3;
 
     }
   }
 
   .text{
+    display: flex;
     position: absolute;
     right: 30%;
     top: 40%;
+    color: #707F48;
+    font-size: calc(16 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    line-height: calc(30 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    font-family: 'KaiTi';
+    >div{
+      writing-mode: vertical-rl;
+      letter-spacing: 2px;
+    }
   }
 
   .right-bottom{

src/views/ShuanggouPaintingDetail.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="painting-detail-list">
+    <div class="bg-left" />
+    <Swiper
+      class="painting-list"
+      :initial-slide="Number(route.query.idx)"
+      :slides-per-view="1"
+      @swiper="onSwiper"
+      @slideChange="onSlideChange"
+    >
+      <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"
+          :size="getPaintingSize(item['尺寸'])"
+        >
+          {{ item }}
+        </PaintingDetail>
+      </SwiperSlide>
+    </Swiper>
+    <OperationTip
+      class="operation-tip"
+      direction="h"
+      :is-show="isShowOperationTip"
+    />
+    <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 getPaintingSize = utils.getPaintingSize
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const $env = inject('$env')
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+const paintingList = configExcel['画作']
+
+/**
+ * swiper
+ */
+let swiper = null
+const onSwiper = (swiperP) => {
+  swiper = swiperP
+}
+const onSlideChange = (e) => {
+  if (isShowOperationTip.value && e.activeIndex !== Number(route.query.idx)) {
+    isShowOperationTip.value = false
+  }
+}
+
+const isShowOperationTip = ref(true)
+</script>
+
+<style lang="less" scoped>
+.painting-detail-list{
+  position: absolute;
+  left: 0;
+  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;
+      }
+    }
+  }
+  >.operation-tip{
+    position: absolute;
+    right: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translateX(-50%);
+    z-index: 10;
+  }
+  >.btn-back{
+    z-index: 10;
+  }
+}
+</style>