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

<template>
  <div class="camera-content-1-1">
    <button
      class="return"
      @click="emit('close')"
    />
    <div class="content-wrap">
      <h1>营都人员与机构</h1>
      <div class="tabbar">
        <span
          :class="{
            active: activeTabIdx === 1
          }"
          @click="activeTabIdx = 1"
        >
          能工巧匠
        </span>
        <div class="splitter" />
        <span
          :class="{
            active: activeTabIdx === 2
          }"
          @click="activeTabIdx = 2"
        >
          专门机构
        </span>
      </div>
      <div
        v-if="activeTabIdx === 1"
        class="tab-content tab-1-content"
      >
        <p
          v-if="tab1ContentPageNumber === 1"
          class="text-indent"
        >
          今天为我们所知的宫城营建者，有元初重要的汉军世家保定张氏。元世祖至元三年（1266）十二月丁亥，“诏安肃公张柔、行工部尚书段天祐等同行工部事，修筑宫城”，张柔之子张弘略，也担任了“修筑宫城总管”。正是他们把理想的都城从蓝图变为现实，又在岁月更替中修缮、维护着元大都城。雄伟的元大都宫阙因此被人称颂，堪称杰作的通惠河因此被世人铭记。
        </p>
        <div
          v-if="tab1ContentPageNumber === 2"
          class="table"
        >
          <h3>大都城主要设计者和建设者</h3>
          <img
            class="table-img"
            src="@/assets/images/camera-content-1-1-2-tab-1-table.png"
            alt=""
            draggable="false"
          >
        </div>
        <button
          v-if="tab1ContentPageNumber === 1"
          class="change-page next-page"
          @click="tab1ContentPageNumber = 2"
        />
        <button
          v-if="tab1ContentPageNumber === 2"
          class="change-page previous-page"
          @click="tab1ContentPageNumber = 1"
        />
      </div>
      <div
        v-if="activeTabIdx === 2"
        class="tab-content tab-2-content"
      >
        <p class="text-indent">
          元大都的营建过程中，设立了不少专门机构，以供建设工程的需要。例如曾设立大都等处采石提举司，还专门拨采石之夫两千余户，常任工役，供应大都营建需要的石材。此外还设立过蔚州采木提举司。蔚州因为盛产木材，地理位置又距大都较近，因此成为木料的理想来源地。至元四年（1267），为了营建大都城门，就有三千人在蔚州采木，可以想见营建工程规模的宏大。
        </p>
        <img
          class=""
          src="@/assets/images/camera-content-1-1-2-tab-2-img.jpg"
          alt=""
          draggable="false"
        >
        <div class="img-title img-legend">
          建设中的元大都
        </div>
      </div>
    </div>
  </div>
</template>

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

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

const emit = defineEmits(['close'])

const activeTabIdx = ref(1)
const tab1ContentPageNumber = ref(1)

</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;
  }
  >.content-wrap{
    position: absolute;
    left: 50%;
    top: 54%;
    width: calc(1585 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    height: calc(819 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    transform: translate(-50%, -50%);
    background-image: url(@/assets/images/camera-content-1-1-2-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    >h1{
      position: absolute;
      left: calc(163 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      top: calc(217 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      font-size: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      font-family: "SourceHanSerifCN-SemiBold";
      color: #FBF7DC;
      line-height: calc(47 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      writing-mode: vertical-lr;
      letter-spacing: 0.3em;
    }
    >.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: 46px;
        height: 168px;
        writing-mode: vertical-lr;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #FFF3C3;
        background: #AC997F;
        font-size: 18px;
        letter-spacing: 8px;
        font-family: "SourceHanSerifCN-SemiBold";
        box-shadow: 3px 4px 9px 0px rgba(0,0,0,0.25);
        cursor: pointer;
      }
      >span.active{
        color: #43310E;
        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;
    }
    >.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;
      }
      >button.next-page{
        background-image: url(@/assets/images/camera-content-1-1-2-tab-1-next-page.png);
      }
      >button.previous-page{
        background-image: url(@/assets/images/camera-content-1-1-2-tab-1-previous-page.png);
      }
    }
    >.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{
        width: calc(809 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        max-height: calc(300 / 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: 1.5;
        // letter-spacing: calc(8 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      >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;
      }
    }
  }
}
</style>