NanjingMuseumWuJinZang/src/views/ShuangGouSheSeDetail.vue

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

const router = useRouter()

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

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt()

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

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

const x = window.innerWidth / window.innerHeight

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

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

const curIndex = ref(0)

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

// 监听活动
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 goToSlide = (index) => {
  curIndex.value = index
}

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>
    </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>
      <!-- <img
        v-show="curIndex == 0"
        src="@/assets/images/shuanggou-text.png"
        alt=""
      > -->
      <!-- <img
        v-show="curIndex == 1"
        src="@/assets/images/shese-text.png"
        alt=""
      > -->
    </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
        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;
  }

  .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: 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';

    >div {
      writing-mode: vertical-rl;
      letter-spacing: 2px;
      text-align: justify;
    }
  }

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