阶段性更新

src/components/PaintingDetailBox.vue

@@ -9,6 +9,10 @@ const props = defineProps({
   url: {
     type: String,
     default: "",
+  },
+  bigUrl: {
+    type: String,
+    default: "",
   }
 })
 
@@ -115,7 +119,7 @@ onMounted(() => {
           :src="require('@/assets/images/painting-box-img/big-view.png')"
           :max-scale="7"
           :min-scale="0.2"
-          :preview-src-list="[props.url]"
+          :preview-src-list="[props.bigUrl ? props.bigUrl : props.url]"
           fit="cover"
         />
         <!-- <img

src/views/BambooBookView.vue

@@ -1,20 +1,205 @@
 <script setup>
-import { useRouter } from 'vue-router'
+import { ref } from "vue"
+import { useRouter } from "vue-router"
 const router = useRouter()
+
+const curState = ref("ye")
 </script>
 
 <template>
   <div class="home">
-    <BtnBack @click="router.back()" />
+    <BtnBack
+      style="z-index: 2"
+      @click="router.back()"
+    />
+    <div class="left-box">
+      <div class="title-box-all">
+        <div class="title-box">
+          芥子园画谱
+        </div>
+        <div class="zhupu-box">
+          竹谱
+        </div>
+      </div>
+      <div class="text">
+        《芥子园画传》又称《芥子园画谱》是清代绘画技法图谱，它较系统地介绍了中国画的基本技法。清代文学家李渔曾在南京营造“芥子园”，并支持其婿沈心友及王氏三兄弟（王概、王著、王臬）编绘画谱，故成书出版之时便以此园命名。
+      </div>
+      <img
+        class="zhupu-img"
+        src="@/assets/images/img_zhupu.png"
+        alt=""
+      >
+    </div>
+    <div class="right-box">
+      <div class="totle-painting-box">
+        <div class="top">
+          <img
+            :style="{ opacity: curState == 'ye' ? 1 : 0 }"
+            src="@/assets/images/img_ye.png"
+            alt=""
+          >
+          <img
+            :style="{ opacity: curState == 'zhi' ? 1 : 0 }"
+            src="@/assets/images/img_zhi.png"
+            alt=""
+          >
+          <img
+            :style="{ opacity: curState == 'zhu' ? 1 : 0 }"
+            src="@/assets/images/img_zhu.png"
+            alt=""
+          >
+        </div>
+        <div class="bottom-btns">
+          <div
+            class="btn"
+            :class="{ btnAc: curState == 'zhu' }"
+            @click="curState = 'zhu'"
+          >
+            杆
+          </div>
+          <div
+            class="btn"
+            :class="{ btnAc: curState == 'zhi' }"
+            @click="curState = 'zhi'"
+          >
+            枝
+          </div>
+          <div
+            class="btn"
+            :class="{ btnAc: curState == 'ye' }"
+            @click="curState = 'ye'"
+          >
+            叶
+          </div>
+        </div>
+      </div>
+      <div class="painting-detail-box">
+        画法
+      </div>
+    </div>
   </div>
 </template>
 
-<style lang='less' scoped>
-.home{
+<style lang="less" scoped>
+.home {
   width: 100%;
   height: 100%;
   background: url(@/assets/images/zhupu-bg.png);
   background-size: 100% 100%;
   // background-position: top left;
+  position: relative;
+
+  .left-box {
+    width: 27.3%;
+    height: 100%;
+    // background: rgba(255, 0, 0, 0.377);
+    position: absolute;
+    left: 0;
+    top: 0;
+    .title-box-all {
+      position: absolute;
+      font-family: "KingHwa_OldSong";
+      color: #ffffff;
+      writing-mode: vertical-lr;
+      display: flex;
+      // flex-direction: column;
+      align-items: center;
+      left: 3vw;
+      top: 12vh;
+      .title-box {
+        font-size: 2.8em;
+        // line-height: 56px;
+        letter-spacing: 0.3em;
+      }
+      .zhupu-box {
+        // margin-top: 10%;
+        margin-top: 20px;
+        font-size: 1.8em;
+
+        line-height: 28.13px;
+        letter-spacing: 0.2em;
+      }
+    }
+    .text {
+      width: 50%;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 12%;
+      color: #7b916b;
+      // opacity: 0.3;
+      font-size: 28px;
+      line-height: 36px;
+      font-family: "KaiTi";
+      text-transform: none;
+      text-align: justified;
+      text-indent: 2em;
+    }
+    .zhupu-img {
+      width: 55%;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+    }
+  }
+  .right-box {
+    width: calc(100% - 27.3%);
+    height: 100%;
+    // background: rgba(255, 0, 0, 0.281);
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .totle-painting-box {
+      width: 50%;
+      height: 60%;
+      margin-bottom: 10px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      .top {
+        width: 100%;
+        height: calc(100% - 60px);
+        position: relative;
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+          position: absolute;
+          left: 0;
+          top: 0;
+          transition: opacity 1s ease-in-out;
+        }
+      }
+
+      .bottom-btns {
+        width: 90%;
+        display: flex;
+        justify-content: space-evenly;
+        .btn {
+          width: 60px;
+          height: 60px;
+          font-size: 38px;
+          flood-color: #474747;
+          line-height: 52px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-family: "KingHwa_OldSong";
+          cursor: pointer;
+        }
+        .btnAc {
+          background: url(@/assets/images/zhupu_active.png);
+          background-size: 100% 100%;
+          color: #ffffff;
+        }
+      }
+    }
+  }
 }
-</style>
+</style>

src/views/PaintingDetail.vue

@@ -72,6 +72,7 @@ onMounted(() => {
     <!-- 左侧图片交互区 -->
     <PaintingDetailBox
       :direction="paintingInfo['方向'] ? '横':'竖'"
+      :big-url="`${$env.BASE_URL}configMultiMedia/paintings/${paintingInfo['标题']=='修篁树石图' ? 'home-painting2':paintingInfo['标题']}.jpg`"
       :url="`${$env.BASE_URL}configMultiMedia/paintings/${paintingInfo['标题']}.jpg`"
     />
     <!-- 右侧信息展示区 -->