YangZhouDaYunHeDaDu/src/components/MobileCameraContent/CameraContent-1-3-3.vue

<template>
  <div class="camera-content-1-1">
    <button
      class="return"
      @click="emit('close')"
    />
    <div class="content-wrap">
      <img
        draggable="false"
        src="@/assets/images/mobile/bg_1-min.jpg"
      >
      <div class="content-wrap-c">
        <div class="design-wrap-left">
          <p class="card-title left">
            重要建筑构件瓦当与滴水
          </p>
          <p class="text-indent">
            瓦当与滴水是用在古代建筑檐口的瓦件，分别与筒瓦、板瓦相连，既具有保护木构的作用，也有装饰和等级意味。元代高等级建筑使用的龙纹瓦当、滴水，在元大都、元中都、元上都都有不少发现，其中以黄绿琉璃最为常见。元人尚白，考古也曾发现白色瓷瓦或琉璃瓦。发现数量更多的是灰陶瓦件，元大都出土的灰陶瓦当、滴水，以花草纹、凤鸟纹、兽面纹为大宗。
          </p>
        </div>
        <div class="design-wrap-right">
          <img
            class="detail-img"
            draggable="false"
            :src="require(`@/assets/images/1331.png`)"
            alt=""
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt(1920, 970)

const emit = defineEmits(['close'])
</script>

<style lang="less" scoped>
.camera-content-1-1{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(60px);
  >button.return{
    position: absolute;
    width: 58px;
    height: 58px;
    left: 42px;
    top: 68px;
    background-image: url(@/assets/images/btn-return.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 1;
  }
  .content-wrap{
    position: absolute;
    left: 50%;
    top: 54%;
    width: 100%;
    transform: translate(-50%, -50%);

    > img {
      width: 100%
    }
    &-c {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .card-title {
      margin-bottom: 20px;
    }
    .text-indent {
      font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    }
  }
  .design-wrap-left {
    position: relative;
    top: calc(0px - 30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    width: 690px;
  }
  .design-wrap-right {
    margin-left: calc(150 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    display: flex;
    align-items: center;
    justify-content: center;
    width: 709px;
    >.btn-left {
      width: 60px;
      height: 60px;
      position: absolute;
      left: -30px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      cursor: pointer;
    }
    >.btn-right {
      width: 60px;
      height: 60px;
      position: absolute;
      right: -30px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      cursor: pointer;
    }
    .btn-left,
    .btn-right {
      transition: all linear .2s;

      &:hover {
        transform: translateY(-50%) scale(1.2);
      }
    }
    .detail-img {
      width: 100%;
    }
  }
}

@media screen and (max-height: 480px) {
  .camera-content-1-1 .content-wrap {
    top: 50%;

    .design-wrap-right {
      margin-left: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      width: 900px;
    }
  }
}
</style>