画派介绍页

src/views/PaintingList.vue

@@ -53,7 +53,10 @@
             <p class="desc">
               {{ specialDesc }}
             </p>
-            <button class="see-more" />
+            <button
+              class="see-more"
+              @click="isShowPaintingStyleDesc = true"
+            />
           </div>
           <div
             v-for="item in paintingGroup"
@@ -109,6 +112,13 @@
       direction="h"
       :is-show="isShowOperationTip"
     />
+
+    <Transition name="fade-in-out">
+      <PaintingStyleDesc
+        v-if="isShowPaintingStyleDesc"
+        @close="isShowPaintingStyleDesc = false"
+      />
+    </Transition>
   </div>
 </template>
 
@@ -117,6 +127,7 @@ import { ref, computed, watch, onMounted, inject } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+import PaintingStyleDesc from "@/views/PaintingStyleDesc.vue"
 
 const route = useRoute()
 const router = useRouter()
@@ -137,9 +148,6 @@ onMounted(() => {
   })
 })
 
-/**
- * 目录
- */
 const menuInfo = {}
 const temp = configExcel['画作'].map((item) => {
   return item['朝代']
@@ -151,6 +159,7 @@ for (const painting of configExcel['画作']) {
   }
   menuInfo[painting['朝代']].push(painting)
 }
+
 const ageRenderInfo = {
   '宋': {
     En: 'Song',
@@ -173,12 +182,14 @@ const ageRenderInfo = {
     coverBg: require(`@/assets/images/painting-menu-item-cover-bg-qing.png`),
   },
 }
+
 function getAuthorList(paintingGroup) {
   const temp = paintingGroup.map((item) => {
     return item['作者']
   })
   return Array.from(new Set(temp))
 }
+
 function getPaintingSizeString(raw) {
   const temp = raw.split('\n')
   let height = temp[0]
@@ -187,6 +198,7 @@ function getPaintingSizeString(raw) {
   width = width.substring(1, width.length - 2)
   return `${width}\u00D7${height} 厘米`
 }
+
 const paintingWidthWhenDesign = 240
 const paintingMarginWhenDesin = 75
 const specialDescWidthWhenDesin = 444
@@ -197,6 +209,7 @@ function getHiddenContentWidth(paintingGroup, ageName) {
   }
   return `${temp / windowSizeWhenDesignForRef.value * Number(windowSizeInCssForRef.value.substring(0, windowSizeInCssForRef.value.length - 2))}px`
 }
+
 const expandedAgeNameList = ref(new Set())
 function onClickAge(ageName) {
   if (expandedAgeNameList.value.has(ageName)) {
@@ -205,9 +218,11 @@ function onClickAge(ageName) {
     expandedAgeNameList.value.add(ageName)
   }
 }
-console.log(configExcel['其他'][4])
+
 const specialDesc = configExcel['其他'][4]['修篁树石图'][1]['作品简介'].split('\n')[0]
 
+const isShowPaintingStyleDesc = ref(false)
+
 const isShowOperationTip = ref(true)
 watch(menuElScrollLeft, (v) => {
   if (v > 0) {

src/views/PaintingStyleDesc.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="painting-style-desc">
+    <div class="bg-left" />
+    <img
+      class="title"
+      src="@/assets/images/painting-style-title.png"
+      alt=""
+      draggable="false"
+    >
+    <div class="text">
+      {{ specialDesc }}
+    </div>
+    <BtnBack
+      class="button-back"
+      @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 useSizeAdapt from "@/useFunctions/useSizeAdapt"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const $env = inject('$env')
+
+const emit = defineEmits('close')
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+const specialDesc = configExcel['其他'][4]['修篁树石图'][1]['作品简介']
+</script>
+
+<style lang="less" scoped>
+.painting-style-desc{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  >.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;
+  }
+  >img.title{
+    position: absolute;
+    top: calc(39 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    left: calc(1 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    width: calc(133 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(133 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  >.text{
+    position: absolute;
+    top: 24%;
+    right: 9.5%;
+    width: 67%;
+    height: 66%;
+    font-family: KaiTi, KaiTi;
+    font-weight: 400;
+    font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    color: #474747;
+    line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    white-space: pre-line;
+    overflow: auto;
+    padding-right: 0.5em;
+  }
+}
+</style>