NanjingMuseumWuJinZang/src/views/BambooBookScene1.vue

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

const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()

const isShowOperationTip = ref(true)

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

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

// const onSwipeLeft = () => {
//   emit('slide-right')
// }

// const onSwipeRight = () => {
//   emit('slide-left')
// }

const emit = defineEmits(["slide-right", "slide-left", "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)"
    @touchend="touchEnd($event)"
  >
    <!-- 竹叶序列帧 -->
    <div class="xuliezheng-box">
      <div class="xuliezheng" />
    </div>
    <div class="screen-box1">
      <div class="title-box">
        芥子园画谱
      </div>
      <div class="zhupu-box">
        竹谱
      </div>
      <OperationTip
        class="operation-h"
        text=""
        direction="h"
        :is-show="isShowOperationTip"
      />
      <!-- <img
        class="disc-img"
        src="@/assets/images/zhupu-disc.png"
        alt=""
      > -->
      <div class="text">
        《芥子园画传》又称《芥子园画谱》是清代绘画技法图谱，它较系统地介绍了中国画的基本技法。清代文学家李渔曾在南京营造“芥子园”，并支持其婿沈心友及王氏三兄弟（王概、王著、王臬）编绘画谱，故成书出版之时便以此园命名。
      </div>
      <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: absolute;
  top: 0;
  left: 0;
  .xuliezheng-box {
    width: 300px;
    height: v-bind(innerHeight);
    overflow: hidden;
    position: absolute;
    bottom: 0;
    right: 0;

    .xuliezheng {
      width: calc(v-bind(innerWidth));
      // max-width: 30px;
      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: 0.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: 0.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'));
    }
    > .text {
      width: calc(
        170 / 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")
      );
      font-size: calc(
        20 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      line-height: calc(
        30 / v-bind("windowSizeWhenDesignForRef") *
          v-bind("windowSizeInCssForRef")
      );
      text-indent: 2em;
      color: #7b916b;
      font-family: "KaiTi";
      writing-mode: initial;
      direction: ltr;
    }

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