upup

src/components/PaintingInfoBox.vue

@@ -34,10 +34,18 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  paintingInfo: {
+    type: String,
+    default: "",
+  },
   authorDesc: {
     type: String,
     default: "",
   },
+  authorInfo: {
+    type: String,
+    default: "",
+  },
   canClose: {
     type: Boolean,
     default: true,
@@ -70,6 +78,10 @@ const FormatAuthorDesc = computed(() => {
   return props.authorDesc.replace(/\n/g, "<br>").split('<br>').map((line) => `<p>${line}</p>`).join('')
 })
 
+const FormatAuthorInfo = computed(() => {
+  return props.authorInfo.replace(/\n/g, "<br>").split('<br>').map((line) => `<p>${line}</p>`).join('')
+})
+
 onMounted(() => {
   // if (route.query.state) {
   //   curState.value = route.query.state
@@ -77,7 +89,7 @@ onMounted(() => {
   if (props.state) {
     curState.value = props.state
   }
-  // console.log('组件里面', e)
+  console.log('组件里面', props.authorInfo)
 })
 
 const exChangeFu = () => {
@@ -105,7 +117,10 @@ const exChangeFu = () => {
       <div class="top">
         <div class="title">
           <div>{{ curState == 1 ? newTitle[0] : "作者简介" }}</div>
-          <div style="font-size: 20px;margin-top: 5px">
+          <div
+            v-show="curState == 1"
+            style="font-size: 20px;margin-top: 5px"
+          >
             {{ newTitle.length>1 ? newTitle[1] : "" }}
           </div>
         </div>
@@ -136,10 +151,15 @@ const exChangeFu = () => {
       </div>
       <div
         v-else-if="curState == 2"
-        class="bottom"
+        class="bottom author-desc"
         style="text-indent: 2em;"
       >
-        <p v-html="FormatPaintingDesc.length > 0 ? FormatPaintingDesc :'暂无信息'" />
+        <div
+          style="text-indent: 0em;"
+          v-html="FormatAuthorInfo"
+        />
+        <br>
+        <p v-html="FormatAuthorDesc.length > 0 ? FormatAuthorDesc :'暂无信息'" />
       </div>
     </div>
   </div>
@@ -208,6 +228,7 @@ const exChangeFu = () => {
       padding: 10px 40px 20px 0 ;
       color: #E1EDD9;
       font-family: 'KaiTi';
+
       p{
         white-space: pre-wrap;
       }

src/views/BambooBookView.vue

@@ -7,51 +7,79 @@ const router = useRouter()
 
 const curState = ref("ye")
 
-const $env = inject('$env')
+const $env = inject("$env")
 
 const { handleScroll } = useRollFu()
 
 
-
+const bigViewList = computed(()=>{
+  let resZhu = null
+  if (curState.value == "ye") {
+    resZhu = configZhuPu["叶"]
+  } else if (curState.value == "zhi") {
+    resZhu = configZhuPu["枝"]
+  } else if (curState.value == "zhu") {
+    resZhu = configZhuPu["杆"]
+  }
+  const newList = resZhu.map((item) => {
+    return `${$env.BASE_URL}configMultiMedia/zhupuImages/${
+      item['图片名称'] ? item['图片名称'] : item['名称']
+    }.png`
+  })
+  return newList
+})
 // 画法数据处理
 const paintingData = computed(() => {
   let resZhu = null
-  if (curState.value == 'ye') {
-    resZhu = configZhuPu['叶']
-  } else if (curState.value == 'zhi') {
-    resZhu = configZhuPu['枝']
-  } else if (curState.value == 'zhu') {
-    resZhu = configZhuPu['杆']
+  if (curState.value == "ye") {
+    resZhu = configZhuPu["叶"]
+  } else if (curState.value == "zhi") {
+    resZhu = configZhuPu["枝"]
+  } else if (curState.value == "zhu") {
+    resZhu = configZhuPu["杆"]
   }
-  const resValue = Object.entries(resZhu.reduce((groups, item) => {
-    const category = item['画法']
-    if (!groups[category]) {
-      groups[category] = []
-    }
-    groups[category].push(item)
-    return groups
-  }, {})).map(([key, value]) => ({
+  const resValue = Object.entries(
+    resZhu.reduce((groups, item) => {
+      const category = item["画法"]
+      if (!groups[category]) {
+        groups[category] = []
+      }
+      groups[category].push(item)
+      return groups
+    }, {})
+  ).map(([key, value]) => ({
     category: key,
-    items: value
+    items: value,
   }))
+
   return resValue
 })
 
 const rowScroller = ref(null)
 
+const isShowClickTip = ref(true)
+const isShowBigView = ref(false)
 const handleWheel = (val) => {
+  if (isShowBigView.value) {
+    return
+  }
   const scrollAmount = 50
-  if (val == -1 ) {
+  isShowClickTip.value = false
+  if (val == -1) {
     rowScroller.value.scrollLeft -= scrollAmount
   } else {
     rowScroller.value.scrollLeft += scrollAmount
   }
 }
 
+const handleClose = () => {
+  setTimeout(() =>{isShowBigView.value = false}, 200)
+}
+
 onMounted(() => {
-  console.log('paintingData', paintingData.value)
+  console.log("paintingData", paintingData.value)
+  console.log('看看', bigViewList.value)
 })
-
 </script>
 
 <template>
@@ -101,21 +129,33 @@ onMounted(() => {
           <div
             class="btn"
             :class="{ btnAc: curState == 'zhu' }"
-            @click="() =>{curState = 'zhu',rowScroller.scrollLeft = 0}"
+            @click="
+              () => {
+                (curState = 'zhu'), (rowScroller.scrollLeft = 0);
+              }
+            "
           >
             杆
           </div>
           <div
             class="btn"
             :class="{ btnAc: curState == 'zhi' }"
-            @click="() =>{curState = 'zhi',rowScroller.scrollLeft = 0}"
+            @click="
+              () => {
+                (curState = 'zhi'), (rowScroller.scrollLeft = 0);
+              }
+            "
           >
             枝
           </div>
           <div
             class="btn"
             :class="{ btnAc: curState == 'ye' }"
-            @click="() =>{curState = 'ye',rowScroller.scrollLeft = 0}"
+            @click="
+              () => {
+                (curState = 'ye'), (rowScroller.scrollLeft = 0);
+              }
+            "
           >
             叶
           </div>
@@ -126,27 +166,52 @@ onMounted(() => {
         class="painting-detail-box"
         @wheel="($event) => handleScroll($event, (val) => handleWheel(val))"
       >
+        <OperationTip
+          v-show="isShowClickTip"
+          class="operation-tip-click"
+          :text="'点击查看'"
+          color="green"
+          type="click"
+          @click="() => (isShowClickTip = false)"
+        />
         <div
-          v-for="(category,index1) in paintingData"
+          v-for="(category, index1) in paintingData"
           :key="index1"
           class="category-box"
         >
           <div
             class="category-title"
-            :style="{margin:index1 == 0 ? '0 10px 0 10px':''}"
+            :style="{ margin: index1 == 0 ? '0 10px 0 10px' : '' }"
           >
             {{ category.category }}
           </div>
           <div
-            v-for="(item,index2) in category.items"
+            v-for="(item, index2) in category.items"
             :key="index2"
             class="category-item"
+            @click="isShowClickTip = false, isShowBigView = true"
           >
-            <img
+            <el-image
+              class="small-img"
+              :src="`${$env.BASE_URL}configMultiMedia/zhupuImages/${
+                item['图片名称'] ? item['图片名称'] : item['名称']
+              }.png`"
+              :max-scale="7"
+              :min-scale="0.2"
+              :preview-src-list="[`${$env.BASE_URL}configMultiMedia/zhupuImages/${
+                item['图片名称'] ? item['图片名称'] : item['名称']
+              }.png`]"
+              fit="contain"
+              z-index="100"
+              :hide-on-click-modal="true"
+              @close="handleClose"
+            />
+
+            <!-- <img
               :src="`${$env.BASE_URL}configMultiMedia/zhupuImages/${item['图片名称'] ? item['图片名称'] : item['名称']}.png`"
               alt=""
-            >
-            <div>{{ item['名称'] }}</div>
+            > -->
+            <div>{{ item["名称"] }}</div>
           </div>
         </div>
       </div>
@@ -275,52 +340,63 @@ onMounted(() => {
       }
     }
 
-    .painting-detail-box{
+    .painting-detail-box {
       width: 95%;
       height: 25%;
       // background: red;
       overflow-x: auto;
       overflow-y: hidden;
       display: flex;
+      position: relative;
+
+      .operation-tip-click{
+        position: absolute;
+        top: 45%;
+        left: 10%;
+      }
       &::-webkit-scrollbar {
         width: 0px;
         height: 0;
       }
-      .category-box{
+      .category-box {
         // display: inline;
         // white-space: nowrap;
         display: flex;
         align-items: flex-start;
-        img{
+        img {
           width: 20vh;
           height: 20vh;
           object-fit: contain;
         }
-        >div{
+        > div {
           // float: left;
         }
-        .category-title{
+        .category-title {
           display: inline-flex;
           writing-mode: vertical-lr;
           letter-spacing: 12px;
           color: #476446;
           background: url(@/assets/images/name-bg.png);
           background-size: 100% 100%;
-          font-family: 'KingHwa_OldSong';
+          font-family: "KingHwa_OldSong";
           font-size: 20px;
           // line-height: 48px;
           padding: 10px;
           margin: 0 30px 0 60px;
           // height: 70%;
         }
-        .category-item{
+        .category-item {
           display: flex;
           flex-direction: column;
           align-items: center;
           margin: 0 20px 0 20px;
-          >div{
+          .small-img {
+            width: 200px;
+            height: 150px;
+          }
+          > div {
             margin-top: 10px;
-            color: #7B916B;
+            color: #7b916b;
             font-size: 20px;
             line-height: 29px;
             font-family: "KingHwa_OldSong";

src/views/PaintingDetail.vue

@@ -63,12 +63,17 @@ onMounted(() => {
   // } else if (usageState.value == 'component') {
   //   paintingInfo = props.idx == 'home' ? configExcel['首页画作'][0] : configExcel['画作'][props.idx]
   // }
-  console.log('看看检索', props.state == '2', realState.value)
+  console.log('看看检索', props.state == '2', realState.value, paintingInfo['作者简介'])
 })
 </script>
 
 <template>
   <div class="home">
+    <img
+      class="img-bg"
+      src="@/assets/images/painting-detail-bg.jpg"
+      alt=""
+    >
     <!-- 左侧图片交互区 -->
     <PaintingDetailBox
       :idx="route.query.idx"
@@ -84,6 +89,7 @@ onMounted(() => {
       :subtitle="paintingInfo['装裱\/材质\/笔类型']"
       :location="paintingInfo['馆藏']"
       :painting-desc="paintingInfo['简介']"
+      :author-info="paintingInfo['作者信息']"
       :author-desc="paintingInfo['作者简介']"
       :size="paintingInfo['尺寸'] ? getPaintingSize(paintingInfo['尺寸']) : ''"
       :state="realState"
@@ -97,8 +103,16 @@ onMounted(() => {
   width: 100%;
   height: 100%;
   // background: linear-gradient( 180deg, #AFCEA5 0%, #34492E 100%);
-  background: url(@/assets/images/painting-detail-bg.jpg);
-  background-size: 100% 100%;
+  // background: url(@/assets/images/painting-detail-bg.jpg);
+  // background-size: 100% 100%;
   display:flex;
+  .img-bg{
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    position: absolute;
+    top: 0;
+    left: 0
+  }
 }
 </style>