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

<template>
  <div
    class="camera-content-1-3-2"
  >
    <button
      class="return"
      @click="emit('close')"
    />
    <h1>{{ title }}</h1>
    <div class="content-wrap">
      <div
        class="map-wrap"
      >
        <button
          v-for="(item, idx) in layoutDataList.slice(1)"
          :key="item.title"
          class="hotspot"
          :class="{
            active: hotspotIdx === (idx + 1)
          }"
          @mouseenter="displayingHotspotIdx = idx + 1"
          @mouseleave="displayingHotspotIdx = 0"
          @click="() => {
            if (idx + 1 === checkedHotspotIdx) {
              checkedHotspotIdx = 0
            } else {
              checkedHotspotIdx = idx + 1
            }
          }"
        >
          <div class="label">
            {{ item.title }}
          </div>
          <img
            class="area"
            src="@/assets/images/camera-content-1-3-2-hotspot-area.png"
            alt=""
            draggable="false"
          >
        </button>
        <div
          class="desc"
        >
          <h3>{{ layoutDataList[hotspotIdx].title }}</h3>
          <div class="hotspot-detail">
            <p
              v-for="(item, idx) in layoutDataList[hotspotIdx].detail.split('\n')"
              :key="idx"
              class="text-indent"
            >
              {{ item }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue"

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt(1920, 968)

const emit = defineEmits(['close'])

const title = computed(() => {
  return '大都城内的官署机构'
})

const layoutDataList = [
  {
    title: '官署机构',
    detail: '元朝的中央统治机构最重要的有三个，即负责一切行政事物的中书省，管理军政的枢密院和负责监察的御史台。元大都城内的官署并未集中布置在一起，中书省、枢密院和御史台就分散在城内各地。学者们通过研究还发现，元大都是按照官署等级来规划它们的占地面积的，上述三个级别最高的中央官署就是城内官署中占地面积最大的。元代中书省是“典领百官，会决庶务”的全国最高行政机构。',
  },
  {
    title: '中书省',
    detail: '中书省最初在皇城的丽正门内，千步廊之东，地址是刘秉忠选择的。阿合马当政时，一度迁到钟楼之西，后来又迁回原址，而新址则成了翰林国史院（北中书省）所在地。旧址位置在南，当时习惯称为南省（南中书省），新址则称为北省（北中书省）。'
  },
  {
    title: '枢密院',
    detail: '枢密院在皇城东侧。“中书帝前，六官禀焉。枢府帝旁，六师听焉。”这两个官署都紧靠宫廷，便于随时接受统治者的命令。'
  },
  {
    title: '御史台',
    detail: '负责监察的御史台，则在文明门内，皇城以东不远的地方。'
  },
  {
    title: '警巡院',
    detail: '负责大都城治安的警巡院，在全城的中央，中心阁以东，便于控制四方。'
  },
  {
    title: '大都路总管府',
    detail: '大都路总管府作为大都的管理机构，是大都路地方行政系统的最高衙署，原在中书省内，至大初年在元大都灵椿坊兴建大都路总管府署，后为明清顺天府署所沿用。'
  },
]

const displayingHotspotIdx = ref(0)
const checkedHotspotIdx = ref(0)

const hotspotIdx = computed(() => displayingHotspotIdx.value !== 0 ? displayingHotspotIdx.value : checkedHotspotIdx.value)
</script>

<style lang="less" scoped>
@page-height-design-px: 970;
.camera-content-1-3-2{
  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(100 / @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%);
    >.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(123 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        // top: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        // left: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        >.label{
          position: absolute;
          left: 50%;
          bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          transform: translate(-50%, 0);
          width: calc(73 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          min-height: calc(239 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          background-image: url(@/assets/images/camera-content-1-3-2-hotspot-label.png);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
          justify-content: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          writing-mode: vertical-lr;
          font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          font-family: "Source Han Serif CN Heavy";
          color: #F4D085;
          line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          letter-spacing: 0.5em;
          padding-right: calc(1 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          padding-bottom: calc(35 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          z-index: 5;
        }
        >.area{
          width: 100%;
        }
      }
      >button.hotspot.active{
        >.label{
          width: calc(77 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          height: calc(275 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          background-image: url(@/assets/images/camera-content-1-3-2-hotspot-label-active.png);
          transform: translate(-52.5%, 0);
          padding-right: calc(0 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          padding-left: calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          padding-bottom: initial;
          color: #724B26;
        }
      }
      >button.hotspot:nth-of-type(1){
        left: calc(531 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        top: calc(520 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      >button.hotspot:nth-of-type(2){
        left: calc(694 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        top: calc(396 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      >button.hotspot:nth-of-type(3){
        left: calc(828 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        top: calc(499 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      >button.hotspot:nth-of-type(4){
        left: calc(575 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        top: calc(176 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      >button.hotspot:nth-of-type(5){
        left: calc(621 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        top: calc(176 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      >.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: "Source Han Serif CN Heavy";
          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 screen and (max-height: 740px) {
  .camera-content-1-3-2 {
    > h1 {
      top: 0;
      font-size: 36px;
    }
    > .content-wrap {
      top: 50%;
      width: 100%;
      height: 100%;

      .map-wrap {
        button.hotspot {
          width: calc(163 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

          &.active {
            .label {
              width: calc(117 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
              height: calc(418 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            }
          }
          .label {
            font-size: 28px;
            width: calc(143 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            min-height: calc(353 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          }
          &:nth-of-type(1){
            left: calc(641 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            top: calc(690 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          }
          &:nth-of-type(2){
            left: calc(828 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            top: calc(510 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          }
          &:nth-of-type(3){
            left: calc(1000 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            top: calc(660 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          }
          &:nth-of-type(4){
            left: calc(605 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            top: calc(226 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          }
          &:nth-of-type(5){
            left: calc(721 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            top: calc(226 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

            .label {
              letter-spacing: 0.2em;
              padding-bottom: calc(80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            }
          }
        }
        .desc {
          top: calc(120 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          left: unset;
          right: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          width: calc(986 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          height: calc(761 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

          h3 {
            top: calc(150 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            left: calc(-34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            font-size: 28px;
            width: calc(106 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            height: calc(336 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          }
        }
      }
    }
  }
}
</style>