NanjingMuseumWuJinZang-PC/src/views/BambooBookView.vue

<script setup>
import { ref, computed, onMounted, inject } from "vue"
import { useRouter } from "vue-router"
import useRollFu from "../rollFu.js"

const router = useRouter()

const curState = ref("ye")

const $env = inject('$env')

const { handleScroll } = useRollFu()



// 画法数据处理
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['杆']
  }
  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
  }))
  return resValue
})

const rowScroller = ref(null)

const handleWheel = (val) => {
  const scrollAmount = 50
  if (val == -1 ) {
    rowScroller.value.scrollLeft -= scrollAmount
  } else {
    rowScroller.value.scrollLeft += scrollAmount
  }
}

onMounted(() => {
  console.log('paintingData', paintingData.value)
})

</script>

<template>
  <div class="home">
    <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',rowScroller.scrollLeft = 0}"
          >
            杆
          </div>
          <div
            class="btn"
            :class="{ btnAc: curState == 'zhi' }"
            @click="() =>{curState = 'zhi',rowScroller.scrollLeft = 0}"
          >
            枝
          </div>
          <div
            class="btn"
            :class="{ btnAc: curState == 'ye' }"
            @click="() =>{curState = 'ye',rowScroller.scrollLeft = 0}"
          >
            叶
          </div>
        </div>
      </div>
      <div
        ref="rowScroller"
        class="painting-detail-box"
        @wheel="($event) => handleScroll($event, (val) => handleWheel(val))"
      >
        <div
          v-for="(category,index1) in paintingData"
          :key="index1"
          class="category-box"
        >
          <div
            class="category-title"
            :style="{margin:index1 == 0 ? '0 10px 0 10px':''}"
          >
            {{ category.category }}
          </div>
          <div
            v-for="(item,index2) in category.items"
            :key="index2"
            class="category-item"
          >
            <img
              :src="`${$env.BASE_URL}configMultiMedia/zhupuImages/${item['图片名称'] ? item['图片名称'] : item['名称']}.png`"
              alt=""
            >
            <div>{{ item['名称'] }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<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: 5vh;
      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;
        }
      }
    }

    .painting-detail-box{
      width: 95%;
      height: 25%;
      // background: red;
      overflow-x: auto;
      overflow-y: hidden;
      display: flex;
      &::-webkit-scrollbar {
        width: 0px;
        height: 0;
      }
      .category-box{
        // display: inline;
        // white-space: nowrap;
        display: flex;
        align-items: flex-start;
        img{
          width: 20vh;
          height: 20vh;
          object-fit: contain;
        }
        >div{
          // float: left;
        }
        .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-size: 20px;
          // line-height: 48px;
          padding: 10px;
          margin: 0 30px 0 60px;
          // height: 70%;
        }
        .category-item{
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 0 20px 0 20px;
          >div{
            margin-top: 10px;
            color: #7B916B;
            font-size: 20px;
            line-height: 29px;
            font-family: "KingHwa_OldSong";
          }
        }
      }
    }
  }
}
</style>