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
  isShowOperationTip2.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 isShowOperationTip2 = ref(false)

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

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

<template>
  <div
    class="home"
  >
    <div class="title">
      <div
        :style="{ color: curIndex == 1 ? 'rgba(71, 71, 71, 0.15)' : '' }"
        @click="curIndex = 0"
      >
        双钩
      </div>
      <div
        :style="{ color: curIndex == 0 ? 'rgba(71, 71, 71, 0.15)' : '' }"
        @click="curIndex = 1"
      >
        设色
      </div>
      <img
        src="@/assets/images/icon_video_active.png"
        class="icon-video"
        @click="openVideoBox"
      >
      <span
        class="video-text"
        @click="openVideoBox"
      >观看视频</span>
      <!-- 两个提示 -->
      <div
        v-show="curIndex == 1"
        class="operation-video-tip"
        style="top: -10vh; right: -30%"
      >
        <div>点击查看</div>
        <img
          class=""
          :src="require(`@/assets/images/icon-click-tip-green.png`)"
          alt=""
          draggable="false"
        >
      </div>
      <div
        v-show="curIndex == 0"
        class="operation-video-tip"
        style="top:38%; right: -52%"
      >
        <img
          class=""
          :src="require(`@/assets/images/icon-click-tip-green.png`)"
          alt=""
          draggable="false"
        >
        <div>点击查看</div>
      </div>
    </div>

    <div class="shuanggou-yezi">
      <img
        src="@/assets/images/shuanggou-top-left.png"
        alt=""
      >
      <HotspotComp
        v-show="true"
        class="hotspot-1"
        @click="goPaintingDetail"
      />
    </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 ? '20vh' : '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>

  <!-- 视频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=""
    >
    <!-- <OperationTip
      class="operation-h-video"
      text="向左划动"
      direction="h"
      :is-show="isShowOperationTip2"
    /> -->
    <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>
</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 !important;
    font-family: "KingHwa_OldSong";
    position: absolute;
    right: 13%;
    top: 26%;
    letter-spacing: 10px;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    .icon-video {
      width: calc(
        36 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      height: calc(
        36 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      margin-top: 10px;
    }
    .video-text{
      color: #7b916b;
      font-family: KaiTi;
      writing-mode: horizontal-tb;
      font-size: calc(
        14 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      letter-spacing: 0px;
    }
    .operation-video-tip {
      position: absolute;
      right: 0;
      display: flex;
      align-items: center;
      pointer-events: none;
      letter-spacing: 1px;
      & > img {
        width: 40px;
      }
      & > div {
        margin-top: 4px;
        // position: relative;
        // line-height: 20px;
        // left: 9px;
        font-weight: 400;
        font-family: KaiTi;
        color: #7b916b;
        text-align: center;
        font-size: 18px;
        writing-mode: vertical-rl;
      }
    }
    .video-btn{
      width: calc(
        36 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      height: calc(
        36 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      display: flex;
      flex-direction: column;
      font-size: calc(
        14 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      font-family: KaiTi;
      color: #7b916b;
    }
  }

  .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;
    }
  }

  .text {
    display: flex;
    position: absolute;
    right: 32%;
    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: 30vh;
    width: 50%;
    text-indent: 2em;
    @media screen and (min-width: 600px) {
      bottom: 9vh !important;
    }
  }

  .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;
    }
  }
}
.video-box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  .operation-h-video {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: -34vh;
    z-index: 21;
  }
  .video-box-close {
    position: absolute;
    left: calc(
      30 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
    bottom: calc(
      35 / v-bind("windowSizeWhenDesignForRef") *
        v-bind("windowSizeInCssForRef")
    );
  }
  > .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%);
  }
}
</style>