NanjingMuseumWuJinZang/src/views/BambooBookScene1.vue

<script setup>
import { ref } 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'])
</script>

<template>
  <div
    class="screen-box"
    @touchstart="handletouchstart($event)"
    @touchmove="touchMove($event)"
  >
    <div class="screen-box1">
      <div class="title-box">
        芥子园画谱
      </div>
      <div class="zhupu-box">
        竹谱
      </div>
      <img
        class="operation-h"
        src="@/assets/images/icon_operation_h_white.png"
        alt=""
      >
      <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;

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

    .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: calc(75 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    }

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

    >.disc-img {
      margin-right: calc(170 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      margin-bottom: calc(230 /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>