NanjingMuseumWuJinZang/src/views/PaintingList.vue

<template>
  <div
    class="painting-list"
  >
    <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
            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"
                >
                {{ item['作者'] }}
              </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.go(-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) => {
    return item['作者']
  })
  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)
watch(menuElScrollLeft, (v) => {
  if (v > 0) {
    isShowOperationTip.value = false
  }
})

</script>

<style lang="less" scoped>
.painting-list{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #99ab8e;
  >ul{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    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;
        padding-bottom: calc(230 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        background-color: #f9f7f2;
        height: 100%;
        >.special-desc{
          flex: 0 0 auto;
          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;
          >.top-wrap{
            margin-bottom: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            >.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;
                left: 0;
                top: 50%;
                transform: translate(-34%, 9%);
                z-index: -1;
              }
            }
            >.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>