NanjingMuseumWuJinZang/src/views/BambooBookScene2.vue

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


// 竹子的三个部分图片
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(1)

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


// 叶子图片适应

const x = window.innerWidth / window.innerHeight

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


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

<template>
  <div class="screen-box">
    <transition name="fade-in-out">
      <div class="screen-box2">
        <div class="title-disc">
          当前展示内容
        </div>
        <img
          class="detail-img"
          :style="{width: x > 0.5 ? '100%' :''}"
          :src="curPart == 1 ? ganImg : curPart == 2 ? zhiImg : yeImg"
          alt=""
        >
        <!-- 竹子部分选择 -->
        <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
          class="index3-income"
          @click="emit('next',curPart)"
        >
          查看画法
        </div>
        <div class="system-btns">
          <BtnBack
            :color="`green`"
            @click="emit('close')"
          />
        </div>
      </div>
    </transition>
  </div>
</template>

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

  .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%;
    // background: linear-gradient(180deg, #233E16 -100%, rgba(156, 171, 148, 0.5) 100%);
    // backdrop-filter: blur(15px);
    // padding-top: calc(71 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));

    .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';
      // 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;
      // @media screen and (max-width: 350px) {
      //   width: 100%;
      // }
    }

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

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

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