NanjingMuseumWuJinZang/src/views/PaintingList.vue

<template>
  <div
    class="painting-list"
  >
    <!-- 背景序列帧 -->
    <SerialFrames
      class="bg-serial-frames-top"
      :image-src="require(`@/assets/images/serial-frame-painting-list-top.png`)"
      :total-width="13194"
      :height="865"
      :frame-number="33"
      :frame-duration="55"
    />
    <SerialFrames
      class="bg-serial-frames-bottom"
      :image-src="require(`@/assets/images/serial-frame-painting-list-bottom.png`)"
      :total-width="13194"
      :height="865"
      :frame-number="33"
      :frame-duration="55"
    />

    <ul
      ref="menuEl"
    >
      <div
        v-for="(paintingGroup, ageName) in menuInfo"
        :id="`menu-item-${ageName}`"
        :key="ageName"
        class="menu-item"
      >
        <div
          class="cover"
          :style="{
            backgroundImage: `url(${ageRenderInfo[ageName].coverBg})`,
          }"
          @click="onClickAge(ageName)"
        >
          <img
            class="age"
            :src="ageRenderInfo[ageName].artFontImg"
            alt=""
            draggable="false"
          >
          <div class="age-en">
            {{ `${ageRenderInfo[ageName].En} dynasty` }}
          </div>
          <div class="author-list">
            {{ getAuthorList(paintingGroup).join('\\') }}
          </div>
        </div>
        <div
          v-if="ageName !== '清' && !expandedAgeNameList.has(ageName)"
          class="splitter"
        />
        <div
          class="hidden-content"
          :style="{
            width: expandedAgeNameList.has(ageName) ? getHiddenContentWidth(paintingGroup, ageName) : '0',
          }"
        >
          <div class="shadow" />
          <div
            v-if="ageName === '宋'"
            class="special-desc"
          >
            <img
              class="title"
              src="@/assets/images/painting-menu-special-content-title.png"
              alt=""
              draggable="false"
            >
            <p class="desc">
              {{ specialDesc }}
            </p>
            <button
              class="see-more"
              @click="isShowPaintingStyleDesc = true"
            />
          </div>
          <div
            v-for="item in paintingGroup"
            :key="item['标题']"
            class="painting-item"
            @click="router.push({
              name: 'PaintingDetailList',
              query: {
                idx: Number(item['序号']) - 1,
              }
            })"
          >
            <div class="top-wrap">
              <div
                class="author"
                :class="{
                  long: item['作者'].length >= 6,
                }"
              >
                <img
                  class="bg"
                  src="@/assets/images/decoration-sun.png"
                  alt=""
                  draggable="false"
                >
                <div
                  v-if="item['音']"
                  class="yin-name"
                >
                  <div
                    v-for="(itemm,index) in item['音']"
                    :key="index"
                  >
                    {{ itemm }}
                  </div>
                </div>
                <div
                  v-else
                  class="name"
                >
                  {{ item['作者'] }}
                </div>
              </div>
              <div class="title">
                {{ item['标题（展示）'].split('\n').join('') }}
              </div>
              <div class="type">
                {{ item['装裱\/材质\/笔类型'] }}
              </div>
            </div>
            <div class="img-wrap">
              <img
                class="thumb"
                :src="`${$env.BASE_URL}configMultiMedia/paintings-thumb/${item['标题']}.jpg`"
                alt=""
                draggable="false"
              >
              <img
                class="border"
                src="@/assets/images/painting-thumb-border.png"
                alt=""
                draggable="false"
              >
            </div>
            <div class="size">
              {{ getPaintingSizeStringForShow(getPaintingSize(item['尺寸'])) }}
            </div>
            <div class="position">
              {{ item['馆藏'] }}
            </div>
          </div>
        </div>
      </div>
    </ul>
    <BtnBack
      class="button-back"
      @click="router.push({
        name: 'MoreContent',
        query: {
          anchorIdx: 1,
        }
      })"
    />
    <OperationTip
      class="operation-tip"
      direction="h"
      :is-show="isShowOperationTip"
    />

    <Transition name="fade-in-out">
      <PaintingStyleDesc
        v-if="isShowPaintingStyleDesc"
        @close="isShowPaintingStyleDesc = false"
      />
    </Transition>
  </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"
import PaintingStyleDesc from "@/views/PaintingStyleDesc.vue"

const getPaintingSize = utils.getPaintingSize

const route = useRoute()
const router = useRouter()
const store = useStore()

const $env = inject('$env')

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt()

const menuEl = ref(null)
const menuElScrollLeft = ref(0)
onMounted(() => {
  menuEl.value.addEventListener('scroll', (e) => {
    menuElScrollLeft.value = menuEl.value.scrollLeft
  })
})

const menuInfo = {}
const temp = configExcel['画作'].map((item) => {
  return item['朝代']
})
const ageList = Array.from(new Set(temp))
for (const painting of configExcel['画作']) {
  if (!menuInfo[painting['朝代']]) {
    menuInfo[painting['朝代']] = []
  }
  menuInfo[painting['朝代']].push(painting)
}

const ageRenderInfo = {
  '宋': {
    En: 'Song',
    artFontImg: require(`@/assets/images/painting-menu-item-title-song.png`),
    coverBg: require(`@/assets/images/painting-menu-item-cover-bg-song.png`),
  },
  '元': {
    En: 'Yuan',
    artFontImg: require(`@/assets/images/painting-menu-item-title-yuan.png`),
    coverBg: require(`@/assets/images/painting-menu-item-cover-bg-yuan.png`),
  },
  '明': {
    En: 'Ming',
    artFontImg: require(`@/assets/images/painting-menu-item-title-ming.png`),
    coverBg: require(`@/assets/images/painting-menu-item-cover-bg-ming.png`),
  },
  '清': {
    En: 'Qing',
    artFontImg: require(`@/assets/images/painting-menu-item-title-qing.png`),
    coverBg: require(`@/assets/images/painting-menu-item-cover-bg-qing.png`),
  },
}

function getAuthorList(paintingGroup) {
  const temp = paintingGroup.map((item) => {
    let author = item['作者']
    // return author.split('（')[0]
    return author
  })
  return Array.from(new Set(temp))
}

function getPaintingSizeStringForShow({ width, height }) {
  return `${width}\u00D7${height} 厘米`
}

const paintingWidthWhenDesign = 240
const paintingMarginWhenDesin = 75
const specialDescWidthWhenDesin = 444
function getHiddenContentWidth(paintingGroup, ageName) {
  let temp = paintingGroup.length * (paintingWidthWhenDesign + paintingMarginWhenDesin) + paintingMarginWhenDesin
  if (ageName === '宋') {
    temp += specialDescWidthWhenDesin
  }
  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)) {
    expandedAgeNameList.value.delete(ageName)
  } else {
    expandedAgeNameList.value.add(ageName)
    const menuItemEl = document.getElementById(`menu-item-${ageName}`)
    setTimeout(() => {
      menuEl.value.scrollLeft = menuItemEl.offsetLeft
    }, 200)
  }
}

const specialDesc = configExcel['其他'][4]['修篁树石图'][1]['作品简介'].split('\n')[0]

const isShowPaintingStyleDesc = ref(false)

const isShowOperationTip = ref(true)
const unwatch = watch(menuElScrollLeft, (v) => {
  isShowOperationTip.value = false
  unwatch()
})

</script>

<style lang="less" scoped>
.painting-list{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(121, 143, 108, 1);
  >.bg-serial-frames-top{
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(0, 0) scale(0.8);
    transform-origin: top right;
  }
  >.bg-serial-frames-bottom{
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(-60%, 10%) scale(1);
    transform-origin: bottom left;
  }
  >ul{
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100%;
    display: flex;
    overflow: auto;
    scroll-behavior: smooth;
    >.menu-item{
      flex: 0 0 auto;
      height: 100%;
      display: flex;
      align-items: center;
      >.cover{
        flex: 0 0 auto;
        height: calc(534 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        padding-left: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        padding-right: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        writing-mode: vertical-lr;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        >.age{
          margin-top: calc(171 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          width: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          height: calc(44 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        }
        >.age-en{
          margin-top: calc(176 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          font-family: KingHwa_OldSong, KingHwa_OldSong;
          font-weight: 400;
          font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          color: #FFFFFF;
          line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        }
        >.author-list{
          margin-top: calc(176 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          font-family: KaiTi, KaiTi;
          font-weight: 400;
          font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          color: #FFFFFF;
          line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          letter-spacing: 0.2em;
          height: 20em;
          overflow: hidden;
          white-space: pre;
          text-overflow: ellipsis;
        }
      }
      >.splitter{
        height: calc(534 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        width: 1px;
        background-color: #fff;
      }
      >.hidden-content{
        transition: width 1s;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
        background-color: #f9f7f2;
        height: 100%;
        background-image: url(@/assets/images/bg-paper.jpg);
        background-size: auto 100%;
        background-repeat: repeat;
        position: relative;
        >.shadow{
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: calc(223 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          background: linear-gradient( 360deg, rgba(0, 0, 0, 0.2) 0%, rgba(0,0,0,0) 100%);
        }
        >.special-desc{
          flex: 0 0 auto;
          align-self: center;
          width: calc(v-bind('specialDescWidthWhenDesin') / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          display: flex;
          justify-content: center;
          align-items: center;
          >img.title{
            flex: 0 0 auto;
            width: calc(133 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            height: calc(133 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            margin-right: calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          }
          >p.desc{
            writing-mode: vertical-lr;
            font-family: KaiTi, KaiTi;
            font-weight: 400;
            font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            color: #476446;
            line-height: 2;
            text-align: justify;
            height: calc(552 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            letter-spacing: 0.15em;
          }
          >button.see-more{
            width: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            height: calc(94 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            background-image: url(@/assets/images/see-more-btn.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
            margin-left: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            transform: translateY(180%);

          }
        }
        >.painting-item:last-of-type {
          margin-right: calc(v-bind('paintingMarginWhenDesin') / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        }
        >.painting-item{
          flex: 0 0 auto;
          margin-left: calc(v-bind('paintingMarginWhenDesin') / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          width: calc(v-bind('paintingWidthWhenDesign') / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: calc(230 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          >.top-wrap{
            margin-bottom: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            height:20vh;
            >.author{
              writing-mode: vertical-lr;
              font-family: KingHwa_OldSong, KingHwa_OldSong;
              font-weight: 400;
              font-size: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
              color: #474747;
              // white-space: pre;
              // transform: translateY(-50%);
              margin-right: calc(11 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
              position: relative;
              letter-spacing: 0.3em;
              >img.bg{
                width: calc(27 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
                position: absolute;
                right: 0;
                top: 50%;
                transform: translate(-24%, -40%);
                z-index: 1;
              }
              >.name{
                writing-mode: vertical-lr;
                position: relative;
                z-index: 2;
              }
              >.yin-name{
                // writing-mode: horizontal-tb;
                display: flex;
                // flex-direction: column;
                position: relative;
                z-index: 2;
                >div{
                  writing-mode: horizontal-tb;
                }
                >div:nth-child(2){
                  color: rgba(71,71,71,0.7 );
                  letter-spacing: -1px;
                  font-size: 20px;
                  transform: translateX(-20px);
                }
              }
            }
            >.author.long{
              transform: translateY(0);
              letter-spacing: initial;
            }
            >.title{
              writing-mode: vertical-lr;
              font-family: KingHwa_OldSong, KingHwa_OldSong;
              font-weight: 400;
              font-size: calc(13 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
              color: #474747;
              white-space: pre;
              margin-right: calc(9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
              letter-spacing: 0.2em;
            }
            >.type{
              writing-mode: vertical-lr;
              font-family: KingHwa_OldSong, KingHwa_OldSong;
              font-weight: 400;
              font-size: calc(13 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
              color: #474747;
              white-space: pre;
              letter-spacing: 0.2em;
            }
          }
          >.img-wrap{
            width: calc(240 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            height: calc(240 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            border-radius: 50%;
            overflow: hidden;
            margin-bottom: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            position: relative;
            >img.thumb{
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
            >img.border{
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
            }
          }
          >.size{
            font-family: KingHwa_OldSong, KingHwa_OldSong;
            font-weight: 400;
            font-size: 13px;
            color: #474747;
            line-height: 15px;
            margin-bottom: 0.5em;
          }
          >.position{
            font-family: KingHwa_OldSong, KingHwa_OldSong;
            font-weight: 400;
            font-size: 13px;
            color: #474747;
            line-height: 15px;
          }
        }
      }
    }
  }
  >.operation-tip{
    position: absolute;
    right: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    transform: translateX(-50%);
    z-index: 10;
  }
}
</style>