NanjingMuseumWuJinZang/src/views/ShuangGouSheSeDetail.vue

<script setup>
import { onMounted } 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')
}

const x = window.innerWidth / window.innerHeight

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

const text = [
  '设色，国画中晕染彩色的意思，',
  '画面中只要出现彩色就可以说是设色作品。',
  '双钩，用线条钩描物象的轮廓，通称',
  '“勾勒”，因基本上是用左右或上下',
  '两笔钩描合拢，沿字的笔迹两边用细',
  '劲的墨线钩出轮廓，也叫“双钩”'
]
</script>

<template>
  <div
    class="home"
  >
    <div class="title">
      双钩设色
    </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 ? '7vh':''}"
    >
      <div
        v-for="(item,index) in reverseArray(text)"
        :key="index"
      >
        {{ item }}
      </div>
    </div>

    <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>
.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 5s 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: 45vh;
    // top: calc(50 /v-bind('windowSizeWhenDesignForRef')/v-bind('windowSizeInCssForRef'));
    color: #707F48;
    font-size: calc(16 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    line-height: calc(30 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    font-family: 'KaiTi';
    >div{
      writing-mode: vertical-rl;
      letter-spacing: 2px;
    }
  }

  .right-bottom{
    width: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .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>