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

<template>
  <div
    class="camera-content-1-1"
  >
    <button
      class="return"
      @click="emit('close')"
    />
    <div class="content-wrap">
      <h1>{{ title }}</h1>
      <div class="switch-wrap">
        <button
          class="switch-design"
          :class="{
            active: currentSwitchIdx === 0
          }"
          @click.stop="currentSwitchIdx = 0"
        >
          设计
        </button>
        <button
          class="switch-layout"
          :class="{
            active: currentSwitchIdx === 1
          }"
          @click.stop="currentSwitchIdx = 1"
        >
          布局
        </button>
      </div>
      <div
        v-if="currentSwitchIdx === 0"
        class="design-wrap"
      >
        <h2 class="character-name">
          <span>刘秉忠</span><span>太保兼领中书省事</span>
        </h2>
        <div class="zhuanchang">
          专长
        </div>
        <div class="zhuanchang-tag one">
          建筑设计
        </div>
        <div class="zhuanchang-tag two">
          城市规划
        </div>
        <!-- <div class="character-wrap">
          <img
            class="character"
            src="@/assets/images/character-luibingzhong.png"
            alt=""
            draggable="false"
          >
        </div> -->
        <div
          class="character-frames-wrapper"
        >
          <img
            v-show="animationType === 1"
            class="frames frames-2"
            :class="{
              animating: isCharacterSpecialMoving1,
              state1: isCharacterSpecialMoving1 === 0,
              state2: isCharacterSpecialMoving1 === 1,
            }"
            src="@/assets/images/character-luibingzhong-2.png"
            alt=""
            draggable="false"
          >
          <img
            v-show="animationType === 2"
            class="frames frames-3"
            :class="{
              animating: isCharacterSpecialMoving2,
              state1: isCharacterSpecialMoving2 === 0,
              state2: isCharacterSpecialMoving2 === 1,
            }"
            src="@/assets/images/character-luibingzhong-1.png"
            alt=""
            draggable="false"
          >
        </div>
        <h2 class="design">
          大都设计
        </h2>
        <div class="design-detail">
          <p class="text-indent">
            大都城的平面设计，以《周礼·考工纪》关于都城建设为指导思想，按照“南朝北市，左祖右社”的原则，进行规划建造。
          </p>
          <p class="text-indent">
            平地新建的元大都有着统一的规划布局，采取外城、皇城、宫城三重城垣环环相套的形制，皇城位于外城南半部，宫城位于皇城中央偏东。整座都城规模浩大，外城南北约7595米，东西约6705米，面积约50.9平方公里。城墙东、西、南三面均设三门，北面设两门。东面三门由北至南为光熙门、崇仁门、齐化门；南面三门由东至西为文明门、丽正门、顺城门；西面三门由南至北为平则门、和义门、肃清门；北门二门由西至东为健德门、安贞门。城内主要街道包括南北向街道九条、东西向大街六条。都城有着明确的中轴线，城内以大街为主干，辅以东西向平行的胡同。
          </p>
          <p class="text-indent">
            城内还建设了专供宫廷用水的金水河水系与由高粱河、积水潭、通惠河组成的漕运水系，特别是后者将大都与大运河联系在一起，大运河成为了大都物资供给的重要“动脉”。
          </p>
        </div>
        <img
          class="city"
          src="@/assets/images/camera-content-1-1-1-design-city.png"
          alt=""
          draggable="false"
        >
      </div>
      <div
        v-if="currentSwitchIdx === 1"
        class="map-wrap"
      >
        <button
          class="hotspot"
          :class="{
            active: displayingHotspotIdx === 0
          }"
          @mouseenter="displayingHotspotIdx = 0"
          @mouseleave="displayingHotspotIdx = -1"
        >
          <!-- <div class="label">
            中轴线
          </div> -->
          <img
            class="deco"
            src="@/assets/images/camera-content-1-1-1-hotspot-1-line.png"
            alt=""
            draggable="false"
          >
        </button>
        <button
          class="hotspot"
          :class="{
            active: displayingHotspotIdx === 1
          }"
          @mouseenter="displayingHotspotIdx = 1"
          @mouseleave="displayingHotspotIdx = -1"
        >
          <!-- <div class="label">
            水系
          </div> -->
          <img
            class="deco"
            src="@/assets/images/camera-content-1-1-1-hotspot-2-river.png"
            alt=""
            draggable="false"
          >
        </button>
        <button
          class="hotspot"
          :class="{
            active: displayingHotspotIdx === 2
          }"
          @mouseenter="displayingHotspotIdx = 2"
          @mouseleave="displayingHotspotIdx = -1"
        >
          <!-- <div class="label">
            外城
          </div> -->
          <img
            class="deco"
            src="@/assets/images/camera-content-1-1-1-hotspot-3-area.png"
            alt=""
            draggable="false"
            style="z-index: 5;"
          >
        </button>
        <button
          class="hotspot"
          :class="{
            active: displayingHotspotIdx === 3
          }"
          @mouseenter="displayingHotspotIdx = 3"
          @mouseleave="displayingHotspotIdx = -1"
        >
          <!-- <div class="label">
            皇城和宫城
          </div> -->
          <img
            class="deco"
            src="@/assets/images/camera-content-1-1-1-hotspot-4-area.png"
            alt=""
            draggable="false"
          >
        </button>
        <div
          class="desc"
        >
          <h3 v-if="layoutDataList[displayingHotspotIdx+1].title">
            {{ layoutDataList[displayingHotspotIdx+1].title }}
          </h3>
          <div class="hotspot-detail text-indent">
            <p
              v-for="(item, idx) in layoutDataList[displayingHotspotIdx+1].detail.split('\n')"
              :key="idx"
            >
              {{ item }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt(1920, 968)

const route = useRoute()
const router = useRouter()
const store = useStore()

const emit = defineEmits(['close'])

const currentSwitchIdx = ref(0)

const title = computed(() => {
  if (currentSwitchIdx.value === 0) {
    return '刘秉忠亲述自己对大都的设计'
  } else if (currentSwitchIdx.value === 1) {
    return '大都城街道布局及建筑面积规划'
  } else {
    return ''
  }
})

const layoutDataList = [
  {
    title: '',
    detail: '在元大都通往11座城门的大街之间东西平行分布的胡同，大多相距78米，即元代的50步。元大都的衙署和民居就分布在这样的街道系统中。按照元代的规定，普通民居的面积不能超过八亩，重要衙署和寺院的面积要远远超过普通民居，打破胡同的界限。',
  },
  {
    title: '中轴线',
    detail: '大都城有着明确的中轴线，城内以大街为主干，辅以东西向平行的胡同，构成了开放式街巷制的街道规划。'
  },
  {
    title: '水系规划',
    detail: '水系在大都城的规划中占有重要地位，皇城和宫城围绕着太液池而规划，和太液池相连的金水河水系与沟通通惠河的漕运水系贯穿整个城市。\n漕运水系将大运河的终点通州与积水潭连接起来，漕船可以经由通惠河直达大都城内的积水潭，由此积水潭中出现了舳舻蔽水的盛况。\n积水潭的东岸、北岸也成为大都城内繁华的商业区。粮食和物资通过运河汇聚到元大都，为大都的繁荣奠定了基础。'
  },
  {
    title: '外城',
    detail: '外城南北约7.6公里，东西约6.7公里，面积约50平方公里。外城共设城门11座，东西南三面各有三座城门，北面有两座城门。'
  },
  {
    title: '皇城和宫城',
    detail: '皇城和宫城是全城的核心，居于外城南部中央，宫城偏于皇城东部，正南门为崇天门，正是在这里，元朝皇帝向天下发出号令。'
  },
]

const displayingHotspotIdx = ref(-1)

const isCharacterSpecialMoving1 = ref(0)
const isCharacterSpecialMoving2 = ref(0)
const animationType = ref(1)

setTimeout(() => {
  isCharacterSpecialMoving1.value = 1
  setTimeout(() => {
    animationType.value = 2
  }, 3000)
}, 0)

setInterval(() => {
  isCharacterSpecialMoving2.value = 1
  setTimeout(() => {
    isCharacterSpecialMoving2.value = 0
  }, 3000)
}, 3300)
</script>

<style lang="less" scoped>
@page-height-design-px: 970;

@frame-width: 256px;
@frame-height: 512px;
@duration-2: 3s;
@frame-num-2: 72;
@duration-3: 3s;
@frame-num-3: 72;
.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: 10;
  }
  h1{
    position: absolute;
    left: 0;
    top: calc(-60 / @page-height-design-px * 100vh);
    width: 100%;
    height: calc(120 / @page-height-design-px * 100vh);
    background-image: url(@/assets/images/camera-content-1-1-1-title-bg.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center center;
    font-size: calc(32 / @page-height-design-px * 100vh);
    font-family: "Source Han Serif CN Heavy";
    color: #FFFFFF;
    line-height: calc(38 / @page-height-design-px * 100vh);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
  }
  >.content-wrap{
    position: absolute;
    left: 50%;
    top: 54%;
    width: calc(1920 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    height: calc(723 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    transform: translate(-50%, -50%);
    >.switch-wrap{
      position: absolute;
      right: calc(65 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      bottom: calc(83 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      z-index: 10;
      >button{
        width: calc(118 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(118 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        background-image: url(@/assets/images/camera-content-1-1-1-swtich-btn-bg.png);
        background-size: 60%;
        background-repeat: no-repeat;
        background-position: center center;
        font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        letter-spacing: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      >button:last-of-type{
        margin-left: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      >button.active{
        background-image: url(@/assets/images/camera-content-1-1-1-swtich-btn-bg-active.png);
        background-size: 100%;
      }
    }
    >.design-wrap{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-image: url(@/assets/images/camera-content-1-1-1-design-bg.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center center;
      >h2.character-name{
        position: absolute;
        width: calc(62 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(379 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        left: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        top: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        background-image: url(@/assets/images/camera-content-1-1-1-design-name-bg.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        >span:first-of-type{
          display: block;
          writing-mode: vertical-lr;
          font-size: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          font-family: "SourceHanSerifCN-SemiBold";
          color: #FFF7D9;
          line-height: calc(27 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          letter-spacing: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        }
        >span:last-of-type{
          margin-top: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          display: block;
          writing-mode: vertical-lr;
          font-size: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          font-family: "Source Han Sans SC Regular";
          color: #43310E;
          line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          letter-spacing: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        }
      }
      >.zhuanchang{
        position: absolute;
        top: calc(80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        left: calc(120 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        width: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(47 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        background: #796545;
        border-radius: calc(8 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-size: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: "SourceHanSerifCN-SemiBold";
        color: #FFFFFF;
        line-height: calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        letter-spacing: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        display: flex;
        justify-content: center;
        align-items: center;
        writing-mode: vertical-lr;
        padding-right: calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      >.zhuanchang-tag{
        position: absolute;
        top: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        width: calc(27 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(148 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        background-image: url(@/assets/images/camera-content-1-1-1-design-zhuanchang-tag-bg.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        writing-mode: vertical-lr;
        font-size: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: "SourceHanSerifCN-SemiBold";
        color: #43310E;
        line-height: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        letter-spacing: calc(8 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        padding-top: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      >.zhuanchang-tag.one{
        left: calc(160 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      >.zhuanchang-tag.two{
        left: calc(220 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      // >.character-wrap{
      //   position: absolute;
      //   left: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      //   top: calc(-60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      //   width: calc(585 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      //   height: calc(796 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      //   >img.character{
      //     position: absolute;
      //     left: 0;
      //     top: 0;
      //     width: 100%;
      //     height: 100%;
      //   }
      // }

      >.character-frames-wrapper {
        position: absolute;
        left: calc(200 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        bottom: calc(-30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(@frame-height * 1.5);
        width: calc(@frame-width * 1.5);
        overflow: hidden;
        >.frames {
          position: absolute;
          height: 100%;
          transition-property: none;
          &.animating{
            transition-property: left;
          }
          &.state1 {
            left: 0;
          }
        }
        >.frames-2{
          transition-duration: @duration-2;
          transition-timing-function: steps(@frame-num-2 - 1, jump-end);
          &.state2 {
            left: calc(-100% * (@frame-num-2 - 1));
          }
        }
        >.frames-3{
          transition-duration: @duration-3;
          transition-timing-function: steps(@frame-num-3 - 1, jump-end);
          &.state2 {
            left: calc(-100% * (@frame-num-3 - 1));
          }
        }
      }
      >h2.design{
        position: absolute;
        width: calc(76 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(241 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        left: calc(650 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        top: calc(160 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        background-image: url(@/assets/images/camera-content-1-1-1-design-h2-design-bg.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        display: flex;
        justify-content: center;
        align-items: center;
        writing-mode: vertical-lr;
        padding-right: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        padding-bottom: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
        font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: "Source Han Serif CN Heavy";
        color: #43310E;
        line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        letter-spacing: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      >.design-detail{
        position: absolute;
        left: calc(740 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        top: calc(175 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        width: calc(568 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(305 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        overflow: auto;
        padding-right: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        >p{
          font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          color: #000000;
        }
      }
      >img.city{
        position: absolute;
        left: calc(1350 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        top: calc(170 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        width: calc(436 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(307 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        border-radius: calc(9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        opacity: 1;
        border: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) solid #C9AD83;
        padding: calc(8 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        background-color: #F4F2E9;
      }
    }
    >.map-wrap{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-image: url(@/assets/images/camera-content-1-1-1-layout-bg.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center center;

      >button.hotspot{
        position: absolute;
        width: calc(73 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(73 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        background-image: url(@/assets/images/camera-content-1-1-1-hotspot.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        top: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        left: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        >.label{
          position: absolute;
          left: calc(50% + 7 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          bottom: calc(-20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          transform: translate(-50%, 0);
          width: calc(123 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          height: calc(404 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          background-image: url(@/assets/images/camera-content-1-1-1-hotspot-label.png);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
          display: none;
          justify-content: center;
          align-items: center;
          writing-mode: vertical-lr;
          font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          font-family: "SourceHanSansSC-Normal";
          font-weight: bold;
          color: #F4D085;
          line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          letter-spacing: 0.5em;
          padding-right: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          z-index: 6;
        }
        >.deco{
          display: none;
        }
      }
      >button.hotspot.active{
        >.label{
          display: flex;
          pointer-events: none;
        }
        >.deco{
          display: initial;
          pointer-events: none;
        }
      }
      >button.hotspot:nth-of-type(1){
        left: calc(488 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        top: calc(136 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        >img.deco{
          position: absolute;
          width: calc(42 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          height: calc(615.5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          left: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          top: calc(-72 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        }
      }
      >button.hotspot:nth-of-type(2){
        left: calc(329 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        top: calc(228 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        >img.deco{
          position: absolute;
          width: calc(1125 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          height: calc(851 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          left: calc(-368 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          top: calc(-229 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        }
      }
      >button.hotspot:nth-of-type(3){
        left: calc(847 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        top: calc(181 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        >img.deco{
          position: absolute;
          width: calc(1470 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          height: calc(621 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          left: calc(-1051 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          top: calc(-125 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        }
      }
      >button.hotspot:nth-of-type(4){
        left: calc(504 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        top: calc(453 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        >img.deco{
          position: absolute;
          width: calc(509 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          height: calc(211 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          left: calc(-305 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          top: calc(-85 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          z-index: 1;
        }
      }
      >.desc{
        position: absolute;
        left: calc(1180 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        top: calc(110 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        width: calc(686 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(461 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        background-image: url(@/assets/images/camera-content-1-1-1-desc-bg.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: calc(80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        padding-bottom: calc(80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        padding-left: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        padding-right: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        >h3{
          position: absolute;
          left: calc(-24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          top: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          width: calc(76 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          height: calc(241 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          background-image: url(@/assets/images/camera-content-1-1-1-desc-title-bg.png);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
          display: flex;
          justify-content: center;
          align-items: center;
          writing-mode: vertical-lr;
          font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          font-family: "SourceHanSerifCN-SemiBold";
          color: #43310E;
          line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          letter-spacing: calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          padding-right: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        }
        >div.hotspot-detail{
          max-height: 100%;
          overflow: auto;
          padding-right: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          >p{
            // margin-bottom: 1em;
            font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-weight: 300;
            color: #000000;
            line-height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            // letter-spacing: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          }
        }
      }
    }
  }
}
@media only screen and (max-width: 1560px) {
  .character-frames-wrapper {
    left: calc(250 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) !important;
    bottom: calc(0 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) !important;
    height: calc(@frame-height * 1) !important;
    width: calc(@frame-width * 1) !important;
  }
}
@media only screen and (max-width: 1100px) {
  .character-frames-wrapper {
    left: calc(230 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) !important;
    bottom: calc(0 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) !important;
    height: 350px !important;
    width: 175px !important;
  }
}
</style>