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

<template>
  <div class="camera-content-1-2-2">
    <button
      class="return"
      @click="emit('close')"
    />
    <div class="content-wrap">
      <img
        draggable="false"
        src="@/assets/images/camera-content-1-1-2-bg.png"
      >
      <div class="content-wrap-c">
        <h1>皇城内的建筑布局</h1>
        <div class="tabbar">
          <span
            :class="{
              active: activeTabIdx === 0
            }"
            @click="activeTabIdx = 0"
          >
            建筑区位
          </span>
          <div class="splitter" />
          <span
            :class="{
              active: activeTabIdx === 1
            }"
            @click="activeTabIdx = 1"
          >
            御苑
          </span>
          <div class="splitter" />
          <span
            :class="{
              active: activeTabIdx === 2
            }"
            @click="activeTabIdx = 2"
          >
            太液池
          </span>
          <div class="splitter" />
          <span
            :class="{
              active: activeTabIdx === 3
            }"
            @click="activeTabIdx = 3"
          >
            隆福宫与兴圣宫
          </span>
        </div>
        <div
          v-if="activeTabIdx === 0"
          class="df-card"
        >
          <p class="df-card__title card-title both">
            元大都皇城、宫城、太液池之间的位置相互关系
          </p>
          <div class="df-card__inner">
            <p class="text-indent">
              元大都的皇城和宫城是全城的核心，皇城位于全城南部的中央地区，宫城偏在皇城的东部。宫城与皇城围绕太液池规划，宫城位于太液池的东南。宫城里的建筑分南、北两组，南面是以大明殿为主体的前朝，北面是以延春阁为主体的后廷。宫城以北是御苑，以西即是太液池。太液池以西分布着两组建筑，北面为兴圣宫，南面为隆福宫。这几组建筑用萧墙（也称阑马墙）围绕起来，构成了元大都的皇城。皇城的北墙与宫城之间的宫苑区极富草原气。
            </p>
            <div class="img-wrap">
              <img
                src="@/assets/images/camera-content-1-2-2-default-content.jpg"
                alt=""
                draggable="false"
                style="cursor: pointer;"
                @click="handleFull"
              >
              <div class="img-title">
                元大都宫殿位置图
              </div>
            </div>
          </div>
        </div>
        <div
          v-if="activeTabIdx === 1"
          class="tab-content tab-1-content"
        >
          <p class="text-indent">
            宫城以北是御苑，主要种植供统治者观赏之用的花草树木，“内有水碾，引水自玄武池灌溉花木”。在花丛中有华丽精致的小殿。此外，还有“熟地八顷”，元朝统治者为了表示自己重视农业，有时要举行仪式，拿着农具做做样子，这些“熟地”就是为此设置的。御苑是禁地，百姓如果闯入御苑的禁墙（即皇城阑马墙），就要以“大不敬”论罪。
          </p>
        </div>
        <div
          v-if="activeTabIdx === 2"
          class="tab-content tab-2-content"
        >
          <p class="text-indent">
            宫城以西是太液池，包括现在北海和中海（南海当时尚未开凿）。太液池中满载芙蓉。元朝皇帝专门造了龙船，在太液池内往来游戏。池中有两个小岛，南面的小岛，称为瀛洲，就是今天团城所在地，上有仪天殿（一名圆殿，后改称承光殿）；北面的小岛面积较大，就是著名的琼华岛，至元八年（1271）改称万寿山（又称万岁山）。万寿山高数十丈，都是用玲珑石堆砌而成。山顶就是著名的广寒殿，殿中有十二根柱子，刻有云龙，涂以黄金。全殿的左、右、后三面全用香木造成彩云状，上涂黄金。这座坐落于大都城地势最高处的宫殿，光辉灿烂，别具风格。在广寒殿上四望空阔，既可以远眺西山云气，也可以下瞰大都的街衢市井。广寒殿周围，都是杨柳树。万寿山和太液池，山水相映，更增添了光彩。在万寿山和瀛洲之间，有长达二百余尺的白玉石桥，将两者连接起来。瀛洲东西两侧都有长桥，东边是木桥，西边是木吊桥，与陆地相通。太液池的东边有一处灵圃，为皇家动物园，“奇兽珍禽在焉”。
          </p>
          <img
            class=""
            src="@/assets/images/camera-content-1-2-2-tab-2-img.jpg"
            alt=""
            draggable="false"
          >
          <div class="img-title">
            《广寒宫图》轴
          </div>
        </div>
        <div
          v-if="activeTabIdx === 3"
          class="tab-content tab-3-content"
        >
          <p class="text-indent">
            在太液池以西，有两大建筑群，靠南的是隆福宫，靠北的是兴圣宫。隆福宫的主要建筑是光天殿，后有寝殿，用廊柱相连，寝殿两端各有小殿，外有一百余间周庑围绕。其结构与宫城中的大明殿、延春阁大体一致。在光天殿周庑之外，还有东、西鹿顶殿、香殿等建筑。整个隆福宫围有砖墙，呈长方形。隆福宫原为皇太子住所，称东宫或皇太子宫。著名的王著杀阿合马事件就发生在宫前。后来成为皇太后的居所，始改名为隆福宫。
          </p>
          <p class="text-indent">
            兴圣宫是在元朝中期元武宗当政（1308-1311）时建造的，主要建筑是兴圣殿，也有廊柱和寝殿相连，有砖垣二重，内垣相当于周庑。兴圣殿后有延华阁，还有东、西鹿顶殿、畏吾儿殿及其他附属建筑。专门收藏文物图书的奎章阁，就在兴圣宫内。
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

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

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

const emit = defineEmits(['close'])

const activeTabIdx = ref(0)

const instance = getCurrentInstance()
const handleFull = () => {
  instance.appContext.config.globalProperties.$viewerApi({
    options: {},
    images: [
      require("@/assets/images/camera-content-1-2-2-default-content.jpg")
    ]
  })
}
</script>

<style lang="less" scoped>
.df-card {
  position: absolute;
  left: calc(500 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  top: calc(86 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  width: calc(850 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  height: calc(680 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

  &__title {
    margin-bottom: calc(45 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    white-space: nowrap;
    font-size: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) !important;
  }
  &__inner {
    display: flex;
    align-items: flex-start;

    img {
      width: calc(430 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    }
    p {
      padding-right: 23px;
      height: calc(580 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      overflow-y: auto;
    }
    >.img-wrap {
      flex: 0 0 407px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      >.img-title{
        margin-top: 0.5em;
      }
    }
  }
}
.camera-content-1-2-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;
  }
  >.content-wrap{
    position: absolute;
    left: 50%;
    top: 54%;
    height: calc(819 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    transform: translate(-50%, -50%);
    >img {
      height: 100%;
    }
    h1{
      position: absolute;
      left: calc(163 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      top: calc(200 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      font-size: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      font-family: Source Han Serif CN;
      color: #FBF7DC;
      line-height: calc(47 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      writing-mode: vertical-lr;
      letter-spacing: 0.3em;
      font-family: "SourceHanSerifCN-SemiBold";
    }
    .tabbar{
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      left: calc(373 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      top: calc(42 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      >span {
        width: calc(46 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        padding-top: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        padding-bottom: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        writing-mode: vertical-lr;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #AC997F;
        color: #FFF3C3;
        letter-spacing: 8px;
        font-size: 19px;
        font-family: "SourceHanSerifCN-SemiBold";
        box-shadow: 3px 4px 9px 0px rgba(0,0,0,0.25);
      }
      >span.active{
        color: #6A3906;
        background: linear-gradient(322deg, #C69D49 0%, #F8E6A9 68%);
      }
      >.splitter{
        // position: absolute;
        // left: 50%;
        // top: 50%;
        // transform: translate(-50%, -50%);
        width: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: 1px;
        background-color: #FFF3C3;
      }
    }
    .tab-content{
      position: absolute;
      left: calc(450 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      top: calc(42 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      width: calc(950 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: calc(750 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .default-content{
      padding: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'))
    }
    .tab-1-content{
      >p{
        width: calc(809 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        max-height: 80%;
        overflow: auto;
        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'));
        padding-right: 0.5em;
      }
      >div.table{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        >h3{
          width: calc(528 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          height: calc(64 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          display: flex;
          justify-content: center;
          align-items: center;
          background-image: url(@/assets/images/camera-content-1-1-2-tab-1-table-title.png);
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center center;
          font-size: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          font-family: Source Han Serif CN;
          font-weight: 600;
          color: #6A3906;
          line-height: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          letter-spacing: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          margin-bottom: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        }
        >img.table-img{
          width: calc(931 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          height: calc(528 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        }
      }
      >button.change-page{
        position: absolute;
        width: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        right: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        bottom: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
      }
    }
    .tab-2-content{
      padding-top: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      padding-bottom: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      >p{
        padding-right: 20px;
        width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        max-height: calc(250 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        overflow: auto;
        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        color: #000000;
        line-height: 30px;
        box-sizing: border-box;
      }
      >img{
        width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(216 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        // border: 1px solid #FFE88B;
        // padding: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        background-color: rgba(145,129,117,0.25);
        object-fit: cover;
      }
    }
    .tab-3-content{
      padding-top: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      padding-bottom: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      display: flex;
      flex-direction: column;
      // justify-content: space-evenly;
      align-items: center;
      >p{
        width: calc(809 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        overflow: auto;
        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 300;
        color: #000000;
        line-height: 30px;
        // letter-spacing: calc(8 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
    }
  }
}

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

    h1 {
      top: calc(240 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      left: calc(198 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      font-size: calc(46 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    }
    .tabbar {
      top: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      left: calc(440 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

      span {
        width: 60px;
        font-size: 24px;
      }
    }
    .df-card {
      top: calc(150 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      left: calc(550 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      width: calc(1100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

      &__title {
        font-size: 32px !important;
      }
    }
    .tab-content {
      top: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      left: calc(520 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      right: calc(200 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      bottom: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      width: unset;
      height: unset;

      p {
        padding: 0 40px;
        width: 100%;
        box-sizing: border-box;
      }
    }
    .tab-2-content > p {
      max-height: calc(450 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    }
  }
}
</style>