NanjingMuseumWuJinZang/src/views/ShuangGouSheSeDetail.vue

<script setup>
import { onMounted, ref, computed, inject } from "vue"
import { useRouter } from "vue-router"
import useSizeAdapt from "@/useFunctions/useSizeAdapt"

import HotspotComp from "@/components/HotspotComp.vue"

const router = useRouter()

const $env = inject("$env")

const goBack = () => {
  router.replace({
    name: "MoreContent",
    query: {
      anchorIdx: 0,
    },
  })
}

const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()

const reverseArray = (array) => {
  return array.slice().reverse()
}

const goPaintingDetail = () => {
  router.replace(`/shuanggou-painting-detail?idx=0&&m=${curIndex.value}`)
}

const x = window.innerWidth / window.innerHeight

onMounted(() => {
  console.log("shuchubili", x)
})

const text = [
  [
    "双钩，中国画技法名。用线条钩描",
    "物象的轮廓,通称“勾勒”，因基本上",
    "是用左右或上下两笔钩描合拢，故亦",
    "称“双钩”。大部用于工笔花鸟画。又",
    "旧时摹搨法书。沿字的笔迹两边用细",
    "劲的墨线线钩出轮廓，也叫“双钩”；",
    "双钩后填墨的称为“双钩”",
  ],
  [
    "设色，国画中晕染彩色的意思，“廓",
    "填”。画面中只要出现彩色就可以说",
    "是设色作品。与设色相反的是“水墨”，",
    "指画面中不出现彩色，或者极少出现",
    "彩色的，以墨色为主绘制的作品。",
  ],
]

const text2 = [
  "双钩，中国画技法名。用线条钩描物象的轮廓，通称“勾勒”，因基本上是用左右或上下两笔钩描合拢，故亦称“双钩”。大部用于工笔花鸟画。又旧时摹搨法书。沿字的笔迹两边用细劲的墨线钩出轮廓，也叫“双钩”；双钩后填墨的称为“双钩廓填”。",
  "设色，国画中晕染彩色的意思，画面中只要出现彩色就可以说是设色作品。与设色相反的是“水墨”，指画面中不出现彩色，或者极少出现彩色的，以墨色为主绘制的作品。",
]

const curIndex = ref(0)

const lastX = ref(0)
const isShowOperationTip = ref(true)
// 开始滑动
const handletouchstart = (event) => {
  lastX.value = event.changedTouches[0].pageX
  isShowOperationTip.value = false
}

// 监听活动
const touchEnd = (event) => {
  let currentX = event.changedTouches[0].pageX
  let tx = currentX - lastX.value
  if (tx < 0) {
    if (curIndex.value == 0) {
      curIndex.value = 1
    }
  } else if (tx > 0) {
    if (curIndex.value == 1) {
      curIndex.value = 0
    }
  }
}

const isShowVideoBox = ref(false)

const goToSlide = (index) => {
  curIndex.value = index
}

const openVideoBox = () => {
  isShowVideoBox.value = true
  // 背景音乐打开
  const audioEl = document.getElementById('bg-music')
  audioEl.pause()
}
const closeVieoBox = () => {
  isShowVideoBox.value = false
  // 背景音乐打开
  const audioEl = document.getElementById('bg-music')
  audioEl.play()
}

const curPercentage = computed(() => {
  return curIndex.value
})
</script>

<template>
  <div
    class="home"
    @touchstart="handletouchstart($event)"
    @touchend="touchEnd($event)"
  >
    <div class="title">
      <span :style="{ color: curIndex == 1 ? 'rgba(71, 71, 71, 0.50)' : '' }">双钩</span>
      <span :style="{ color: curIndex == 0 ? 'rgba(71, 71, 71, 0.50)' : '' }">设色</span>
      <img
        src="@/assets/images/icon_video.png"
        class="icon-video"
        @click="openVideoBox"
      >
    </div>

    <div class="shuanggou-yezi">
      <img
        src="@/assets/images/shuanggou-top-left.png"
        alt=""
      >
      <HotspotComp
        v-show="true"
        class="hotspot-1"
        @click="goPaintingDetail"
      />
    </div>

    <!-- 视频box -->
    <div
      v-if="isShowVideoBox"
      class="video-box"
    >
      <img
        v-show="curIndex == 1"
        class="bg-img"
        src="@/assets/images/img_shese.jpg"
        alt=""
      >
      <img
        v-show="curIndex == 0"
        class="bg-img"
        src="@/assets/images/img_shuanggou.jpg"
        alt=""
      >
      <video
        playsinline
        webkit-playsinline="true"
        x5-video-player-type="h5"
        :poster="`${$env.BASE_URL}configMultiMedia/video/${curIndex == 0 ? 'shuanggou' : 'shese'}.png`"
        :src="`${$env.BASE_URL}configMultiMedia/video/${
          curIndex == 0 ? 'shuanggou' : 'shese'
        }.mp4`"
        controls
      />
      <div>{{ curIndex == 0 ? "双钩" : "设色" }}</div>
      <BtnBack
        class="video-box-close"
        @click="closeVieoBox"
      />
    </div>

    <!-- <img
      class="text"
      src="@/assets/images/shuanggou-text.png"
      alt=""
    > -->
    <!-- <div
      class="text"
      :style="{ top: x > 0.5 ? 'auto' : '', bottom: x > 0.5 ? '15vh' : 'auto' }"
    >
      <div
        v-for="(item, index) in reverseArray(text[curIndex])"
        :key="index"
      >
        {{ item }}
      </div>
    </div> -->
    <div
      class="text"
      :style="{ top: x > 0.5 ? 'auto' : '', bottom: x > 0.5 ? '15vh' : 'auto' }"
    >
      {{ text2[curIndex] }}
    </div>

    <ProgressBar
      class="progress-bar"
      :totle-unit="2"
      :cur-percentage="curPercentage"
      color-ac="#7B916B"
      color="#7B916B60"
      :type="1"
      @go-to-slide="goToSlide"
    />

    <img
      class="right-bottom"
      src="@/assets/images/right-bottom.png"
      alt=""
    >

    <div class="system-btns">
      <BtnBack
        color="green"
        @click="goBack"
      />

      <OperationTip
        id="operationH"
        class="operation-h"
        text=""
        direction="h"
        :is-show="isShowOperationTip"
      />

      <!-- <OperationTip
        class="operation-h"
        color="green"
        text=""
        direction="h"
      /> -->
    </div>
  </div>
</template>

<style lang="less" scoped>
* {
  transition: all 1s ease;
}
.home {
  width: 100%;
  height: 100%;
  position: relative;
  background: #ffffff;

  .title {
    color: #474747;
    font-size: calc(
      48 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    line-height: calc(
      48 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    writing-mode: vertical-rl;
    font-family: "KingHwa_OldSong";
    position: absolute;
    right: 13%;
    top: 26%;
    letter-spacing: 10px;
    z-index: 10;
    .icon-video {
      width: calc(
        48 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      height: calc(
        48 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
    }
  }

  .shuanggou-yezi {
    width: 100%;
    animation: fade-in 2s forwards;
    position: relative;
    z-index: 2;

    @keyframes fade-in {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    > img {
      width: 100%;
      margin-top: -3%;
    }

    > .hotspot-1 {
      position: absolute;
      bottom: 28%;
      left: 17%;
      pointer-events: initial;
      z-index: 3;
    }
  }

  .video-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    .video-box-close {
      position: absolute;
      bottom: calc(
        15 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef)
      );
      left: 25px;
    }
    > .bg-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
    }
    > video {
      width: 100%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    > div {
      color: #ffffff;
      position: absolute;
      bottom: 10%;
      font-size: calc(
        24 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      line-height: calc(
        29 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      font-family: "KingHwa_OldSong";
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .text {
    display: flex;
    position: absolute;
    right: 30%;
    top: 40vh;
    // top: calc(50 /v-bind('windowSizeWhenDesignForRef')/v-bind('windowSizeInCssForRef'));
    color: #707f48;
    font-size: calc(
      18 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    line-height: calc(
      26 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    font-family: "KaiTi";
    writing-mode: vertical-rl;
    letter-spacing: 2px;
    text-align: justify;
    height: 40vh;
  }

  .right-bottom {
    width: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
  }

  .progress-bar {
    position: absolute;
    left: 0;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 15px;
    z-index: 3;
    color: #e1edd95d;
    transition: all 1s;
    z-index: 1;
  }

  .system-btns {
    width: 100%;
    padding: 0
      calc(
        20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef)
      );
    display: flex;
    // flex-direction: column;
    justify-content: flex-end;
    position: absolute;
    bottom: calc(
      60 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef)
    );
    z-index: 2;

    .operation-h {
      width: calc(
        36 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      transition: opacity 0.5s ease-in-out;
    }
  }
}
</style>
import { transform } from 'lodash';import { transform } from 'lodash';