NanjingMuseumWuJinZang/src/views/BambooBookScene2.vue

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


// 竹子的三个部分图片
import moren from '@/assets/images/moren.png'
import ganImg from '@/assets/images/gan.png'
import zhiImg from '@/assets/images/zhi.png'
import yeImg from '@/assets/images/ye.png'


// 第二屏
// 杆-1 枝-2 叶-3
const curPart = ref(0)

const emit = defineEmits(['next', 'close', 'slide-left'])
const props = defineProps({
  ischange: {
    type: Boolean,
    default: false
  }
})


watch(
  () => props.ischange, // 第一个参数可以是一个getter函数，这里直接观察someProp的值
  (newVal, oldVal) => {
    if (newVal) {
      console.log('变了')
      setTimeout(() => {
        curPart.value = 1
      }, 300)
    }
  },
  { immediate: true }
)



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

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



// 叶子图片适应

const x = window.innerWidth / window.innerHeight

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt()
</script>

<template>
  <div
    v-touch:swipe.left="onSwipeLeft"
    v-touch:swipe.right="onSwipeRight"
    class="screen-box"
  >
    <!-- <transition name="fade-in-out" /> -->
    <div class="screen-box2">
      <div class="title-disc">
        当前展示内容
      </div>
      <Transition name="fade-out">
        <img
          v-show="curPart === 0"
          class="detail-img"
          :style="{ width: x > 0.5 ? '100%' : '' }"
          :src="moren"
          alt=""
        >
      </Transition>
      <Transition name="fade-in-out">
        <img
          v-show="curPart == 1"
          class="detail-img"
          :style="{ width: x > 0.5 ? '100%' : '' }"
          :src=" ganImg"
          alt=""
          @click="emit('next', curPart)"
        >
      </Transition>
      <Transition name="fade-in-out">
        <img
          v-show="curPart == 2"
          class="detail-img"
          :style="{ width: x > 0.5 ? '100%' : '' }"
          :src=" zhiImg"
          alt=""
          @click="emit('next', curPart)"
        >
      </Transition>
      <Transition name="fade-in-out">
        <img
          v-show="curPart == 3"
          class="detail-img"
          :style="{ width: x > 0.5 ? '100%' : '' }"
          :src=" yeImg"
          alt=""
          @click="emit('next', curPart)"
        >
      </Transition>
      <!-- 竹子部分选择 -->
      <div class="options-box">
        <div
          :class="{ 'active': curPart == 1 }"
          @click="() => { curPart = 1 }"
        >
          杆
        </div>
        <div
          :class="{ 'active': curPart == 2 }"
          @click="() => { curPart = 2 }"
        >
          枝
        </div>
        <div
          :class="{ 'active': curPart == 3 }"
          @click="() => { curPart = 3 }"
        >
          叶
        </div>
      </div>
      <div
        :style="{ opacity: curPart == 0 ? '0' : '1' }"
        class="index3-income"
        @click="emit('next', curPart)"
      >
        查看画法
      </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;
  left: 0;
  top: 0;

  .screen-box2 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url(@/assets/images/screen-box2.png);
    background-size: 100% 100%;
    position: relative;

    .title-disc {
      width: 100%;
      color: #ffffffa6;
      text-align: center;
      // position: absolute;
      font-size: calc(20 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
      line-height: calc(23 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
      font-family: 'KaiTi';
      position: absolute;
      top: calc(50 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
    }

    .detail-img {
      width: calc(428 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: calc(506 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      object-fit: cover;
      object-position: left;
      position: absolute;
      top: 5%;
    }

    .options-box {
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      color: #474747;
      font-size: calc(28 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
      line-height: calc(32 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
      font-family: 'KingHwa_OldSong';
      margin: calc(58 / v-bind(windowSizeWhenDesignForRef)*v-bind(windowSizeInCssForRef)) auto;
      position: absolute;
      bottom: 14%;

      >.active {
        width: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        background-image: url(@/assets/images/btn_active.png);
        // padding: calc(8 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
        background-size: 100% 100%;
        transform: scale(1.2);
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        text-shadow: 2px 4px 4px rgba(71, 100, 70, 0.5);
        font-size: calc(36 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeWhenDesignForRef));
        font-family: calc(42 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeWhenDesignForRef));
      }
    }

    .index3-income {
      width: calc(132 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
      height: calc(48 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: calc(20 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
      line-height: calc(23 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
      color: #476446;
      background-image: url(@/assets/images/btn_more.png);
      background-size: 100% 100%;
      font-family: 'KaiTi';
      position: absolute;
      bottom: 8%;
    }

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