NanjingMuseumWuJinZang-PC/src/views/ShuangGou.vue

<template>
  <div class="shuang-gou-page">
    <img
      class="bg"
      src="@/assets/images/shuang-gou-bg.jpg"
      alt=""
      draggable="false"
    >

    <BtnBack
      :text-shadow="true"
      @click="router.go(-1)"
    />
    <HotspotComp
      class="hotspot-1"
      :style="{
        left: hotspot1X + 'px',
        top: hotspot1Y + 'px',
      }"
      @click="onClickHotspot(1)"
    />
    <HotspotComp
      class="hotspot-2"
      :style="{
        left: hotspot2X + 'px',
        top: hotspot2Y + 'px',
      }"
      @click="onClickHotspot(2)"
    />
    <div class="title">
      <h1>双钩设色</h1>
    </div>
    <div class="text">
      <p><span>双钩</span>，中国画技法名。用线条钩描物象的轮廓，通称“勾勒”，因基本上是用左右或上下两笔钩描合拢，故亦称“双钩”。大部用于工笔花鸟画。又旧时摹搨法书。沿字的笔迹两边用细劲的墨线钩出轮廓，也叫“双钩”；双钩后填墨的称为“双钩廓填”。</p>
      <p><span>设色</span>，国画中晕染彩色的意思，画面中只要出现彩色就可以说是设色作品。与设色相反的是“水墨”，指画面中不出现彩色，或者极少出现彩色的，以墨色为主绘制的作品。</p>
    </div>
    <button
      class="play-video"
      @click="isShowVideos = true"
    >
      <img
        class="icon-normal"
        src="@/assets/images/btn-play-video.png"
        alt=""
        draggable="false"
      >
      <img
        class="icon-active"
        src="@/assets/images/btn-play-video-active.png"
        alt=""
        draggable="false"
      >
      <span>观看视频</span>
    </button>

    <div
      v-if="isShowVideos"
      class="videos"
    >
      <BtnBack @click="isShowVideos=false" />
      <video
        v-if="activeVideoIdx === 0"
        src="@/assets/videos/shuang-gou.mp4"
        controls
        autoplay
        playsinline
        webkit-playsinline="true"
        x5-video-player-type="h5"
      />
      <video
        v-if="activeVideoIdx === 1"
        src="@/assets/videos/she-se.mp4"
        controls
        autoplay
        playsinline
        webkit-playsinline="true"
        x5-video-player-type="h5"
      />
      <menu>
        <button
          :class="{
            active: activeVideoIdx === 0
          }"
          @click="activeVideoIdx = 0"
        >
          双钩
        </button>
        <button
          :class="{
            active: activeVideoIdx === 1
          }"
          @click="activeVideoIdx = 1"
        >
          设色
        </button>
      </menu>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
import useSizeAdapt from '@/useFunctions/useSizeAdapt.js'
import { useWindowSize } from "@vueuse/core"

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

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt()

const $env = inject('$env')

const { width: windowWidth, height: windowHeight } = useWindowSize()
const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏

const hotspot1X = ref(-100)
const hotspot1Y = ref(-100)
const hotspot2X = ref(-100)
const hotspot2Y = ref(-100)
function setHotspotPos() {
  const { x: x1, y: y1 } = utils.mapPosFromDraftToWindow({ x: 484, y: 420 }, 'cover', 1920, 972)
  hotspot1X.value = x1
  hotspot1Y.value = y1
  const { x: x2, y: y2 } = utils.mapPosFromDraftToWindow({ x: 214, y: 700 }, 'cover', 1920, 972)
  hotspot2X.value = x2
  hotspot2Y.value = y2
}
setHotspotPos()
onMounted(() => {
  window.addEventListener('resize', setHotspotPos)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', setHotspotPos)
})

const isShowVideos = ref(false)

function onClickHotspot(idx) {
  if (idx === 1) {
    router.push({
      name: 'PaintingDetailForZhuQin',
    })
  } else if (idx === 2) {
    router.push({
      name: 'PaintingDetailForTaoZhu',
    })
  }
}

const activeVideoIdx = ref(0)

</script>

<style lang="less" scoped>
.shuang-gou-page{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  >img.bg{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  >.hotspot-1, .hotspot-2{
    position: absolute;
  }
  @media (max-aspect-ratio: 855/835) {
    .hotspot-1{
      left: 2vw !important;
    }
  }
  @media (max-aspect-ratio: 1310/835) {
    .hotspot-2{
      left: 2vw !important;
    }
  }
  >.title{
    position: absolute;
    top: 8.13vh;
    left: calc(47vw + 17.9vh + 7.61vh + 28.40vh + 14.51vh);
    position: absolute;
    >h1{
      flex: 0 0 auto;
      writing-mode: vertical-lr;
      font-family: KingHwa_OldSong, KingHwa_OldSong;
      font-weight: 400;
      font-size: calc(60px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
      color: #474747;
      letter-spacing: 0.2em;
    }
    @media (max-aspect-ratio: 1250/835) {
      left: initial;
      right: 3vw;
    }
  }
  >.text{
    position: absolute;
    left: 47vw;
    top: 50%;
    transform: translateY(-50%);
    width: 61.86vh;
    @media (max-aspect-ratio: 1250/835) {
      left: initial;
      right: 11vw;
    }
    >p{
      font-size: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
      line-height: calc(36px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
      text-indent: 2em;
      font-family: KaiTi, KaiTi;
      font-weight: 400;
      color: #707F48;
      >span{
        font-family: KaiTi, KaiTi;
        font-weight: 400;
        color: #707F48;
        font-size: calc(42px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
        line-height: calc(50px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
      }
    }
    >p:nth-of-type(2) {
      margin-top: 10vh;
    }
  }

  >button.play-video{
    position: absolute;
    bottom: calc(37px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
    right: calc(33px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
    display: flex;
    flex-direction: column;
    align-items: center;
    >img{
      width: calc(48px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
      height: calc(48px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
      margin-bottom: calc(14px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
    }
    >img.icon-normal{
      display: block;
    }
    >img.icon-active{
      display: none;
    }
    >span{
      font-family: KaiTi, KaiTi;
      font-weight: 400;
      font-size: calc(20px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
      color: #7B916B;
      line-height: calc(23px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
    }
  }
  >button.play-video:hover{
    >img.icon-normal{
      display: none;
    }
    >img.icon-active{
      display: block;
    }
  }

  >.videos{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(52,73,46,0.7);
    backdrop-filter: blur(10px);
    >video{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: calc(1255 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: calc(735 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      object-fit: contain;
      background: black;
    }
    >menu{
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      width: calc(334 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      >button{
        width: calc(240 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: KingHwa_OldSong, KingHwa_OldSong;
        font-weight: 400;
        font-size: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        color: #FFFFFF;
        line-height: calc(35 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      >button.active{
        font-family: KingHwa_OldSong, KingHwa_OldSong;
        font-weight: 400;
        font-size: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        color: #72806D;
        line-height: calc(47 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        background-image: url(@/assets/images/btn_bg-yellow.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
      }
    }
  }
}
</style>