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"
import { useWindowSize } from "@vueuse/core"

const router = useRouter()

const curState = ref("ye")

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["杆"]
  }
  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 windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏
const { width: windowWidth, height: windowHeight } = useWindowSize()

const isShowBigView = ref(false)

const isShowOperationTip = ref(true)

const handleWheel = (val) => {
  event.preventDefault()
  isShowOperationTip.value = false
  if (isShowBigView.value) {
    return
  }
  const scrollAmount = 50
  // 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("看看", bigViewList.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">
      <!-- 滑动提示 -->
      <OperationTip
        class="operation-tip"
        color="green"
        text="向下滑动"
        :is-show="isShowOperationTip"
      />
      <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))"
      >
        <!-- <OperationTip
          v-show="isShowClickTip"
          class="operation-tip-click"
          :text="'点击查看'"
          color="green"
          type="click"
          @click="() => (isShowClickTip = false)"
        /> -->
        <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"
          >
            <!-- <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>
        </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;

  > .operation-tip {
    position: absolute;
    right: calc(30px / v-bind("windowHeightDesign") * v-bind("windowHeight"));
    transform: translateX(-50%);
    top: 50%;
    transform: translateY(-50%);
  }

  .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: 15vh;
      .title-box {
        // font-size: 2.8em;
        font-size: calc(
          48px * v-bind("windowHeight") / v-bind("windowHeightDesign")
        );
        line-height: calc(
          56.25px * v-bind("windowHeight") / v-bind("windowHeightDesign")
        );
        // line-height: 56px;
        letter-spacing: 0.3em;
      }
      .zhupu-box {
        // margin-top: 10%;
        margin-top: calc(
          20px * v-bind("windowHeight") / v-bind("windowHeightDesign")
        );
        // font-size: 1.8em;
        font-size: calc(
          24px * v-bind("windowHeight") / v-bind("windowHeightDesign")
        );
        line-height: calc(
          29px * v-bind("windowHeight") / v-bind("windowHeightDesign")
        );
        // 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: calc(
        28px * v-bind("windowHeight") / v-bind("windowHeightDesign")
      );
      line-height: calc(
        38px * v-bind("windowHeight") / v-bind("windowHeightDesign")
      );
      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;

    .operation-tip{
      position: absolute;
      right: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
      top: 50%;
      transform: translateY(-50%);
    }

    .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 * v-bind("windowHeight") / v-bind("windowHeightDesign")
        );
        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: calc(
            60px * v-bind("windowHeight") / v-bind("windowHeightDesign")
          );
          height: calc(
            60px * v-bind("windowHeight") / v-bind("windowHeightDesign")
          );
          // font-size: 38px;
          font-size: calc(
            38px * v-bind("windowHeight") / v-bind("windowHeightDesign")
          );
          line-height: calc(
            52px * v-bind("windowHeight") / v-bind("windowHeightDesign")
          );
          flood-color: #474747;
          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;
      position: relative;
      scrollbar-width: none;

      .operation-tip-click {
        position: absolute;
        top: 45%;
        left: 10%;
      }
      &::-webkit-scrollbar {
        display: none !important;
      }
      .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;
          letter-spacing: calc(
            12px * v-bind("windowHeight") / v-bind("windowHeightDesign")
          );
          color: #476446;
          background: url(@/assets/images/name-bg.png);
          background-size: 100% 100%;
          font-family: "KingHwa_OldSong";
          // font-size: 20px;
          font-size: calc(
            20px * v-bind("windowHeight") / v-bind("windowHeightDesign")
          );
          // line-height: 48px;
          padding: calc(
            10px * v-bind("windowHeight") / v-bind("windowHeightDesign")
          );
          margin: 0
            calc(30px * v-bind("windowHeight") / v-bind("windowHeightDesign")) 0
            calc(60px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
          // height: 70%;
        }
        .category-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 0
            calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign")) 0
            calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
          .small-img {
            width: calc(
              200px * v-bind("windowHeight") / v-bind("windowHeightDesign")
            );
            height: calc(
              150px * v-bind("windowHeight") / v-bind("windowHeightDesign")
            );
          }
          > div {
            margin-top: calc(
              10px * v-bind("windowHeight") / v-bind("windowHeightDesign")
            );
            color: #7b916b;
            font-size: calc(
              20px * v-bind("windowHeight") / v-bind("windowHeightDesign")
            );
            line-height: calc(
              24px * v-bind("windowHeight") / v-bind("windowHeightDesign")
            );
            font-family: "KingHwa_OldSong";
          }
        }
      }
    }
  }
}
</style>