NanjingMuseumWuJinZang/src/views/BambooBookScene1.vue

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

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt()

const lastX = ref(0)

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

// 监听活动
const touchMove = (event) => {
  let currentX = event.changedTouches[0].pageX
  let tx = currentX - lastX.value
  if (tx < 0) {
    emit('slide')
  }
}

const emit = defineEmits(['slide', 'close'])

const x = window.innerHeight / 1018

const innerWidth = ref((15523 / 33) * x + 'px')
const innerHeight = ref(window.innerHeight + 'px')


</script>

<template>
  <div
    class="screen-box"
    @touchstart="handletouchstart($event)"
    @touchmove="touchMove($event)"
  >
    <!-- 竹叶序列帧 -->
    <div class="xuliezheng" />
    <div class="screen-box1">
      <div class="title-box">
        芥子园画谱
      </div>
      <div class="zhupu-box">
        竹谱
      </div>
      <OperationTip
        class="operation-h"
        text=""
        direction="h"
      />
      <img
        class="disc-img"
        src="@/assets/images/zhupu-disc.png"
        alt=""
      >
      <div class="system-btns">
        <BtnBack
          :color="`green`"
          @click="emit('close')"
        />
      </div>
    </div>
  </div>
</template>

<style lang='less' scoped>
.screen-box {
  width: 100%;
  height: 100%;
  position: relative;

  .xuliezheng {
    width: v-bind(innerWidth);
    height: v-bind(innerHeight);
    background-image: url(@/assets/images/zhupu-min.png);
    background-size: cover;
    position: absolute;
    bottom: 0;
    right: 0;
    background-position-x: 0;
    background-repeat: no-repeat;

    animation-name: xuliezhen-animation;
    animation-timing-function: steps(33);
    animation-duration: 4s;
    animation-iteration-count: infinite;
    transition-property: bottom;

    @keyframes xuliezhen-animation {
      0% {
        background-position-x: 0;
      }

      100% {
        background-position-x: calc(100% - v-bind(innerWidth));
      }
    }
  }

  .screen-box1 {
    width: 100%;
    height: 100%;
    background-image: url(@/assets/images/bg_zhupu.png);
    background-size: 100% 100%;
    writing-mode: vertical-rl;
    /* 垂直排列，从右向左 */
    direction: rtl;

    .title-box {
      color: #ffffff;
      font-size: calc(48 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
      line-height: calc(56 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
      position: absolute;
      font-family: 'KingHwa_OldSong';
      letter-spacing: .3em;
      top: calc(95 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      // right: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      right: 13%;
    }

    .zhupu-box {
      color: #ffffff;
      font-size: calc(24 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
      line-height: calc(28 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
      position: absolute;
      font-family: 'KingHwa_OldSong';
      letter-spacing: .3em;
      top: 50%;
      right: 20%;
      // right: calc(75 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    }

    >.operation-h {
      position: absolute;
      right: 14%;
      // right: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      bottom: 35%;
      width: calc(50 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
    }

    >.disc-img {
      width: calc(151 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
      height: calc(456 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
      position: absolute;
      left: calc(75 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
      top: calc(153 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
      // left: 12%;
      // margin-right: calc(170 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      // margin-bottom: calc(250 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    }

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

}
</style>