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

<template>
  <div class="camera-content-1-1">
    <button
      class="return"
      @click="emit('close')"
    />
    <div class="content-wrap">
      <img
        src="@/assets/images/camera-content-3-1-1-bg.png"
        draggable="false"
      >

      <div class="content-wrap-c">
        <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"
        >
          <h3>元代书法绘画等文化艺术的发展及其文化收藏机构</h3>
          <p class="text-indent">
            1276 年，元军围攻杭州，宋主不战而降，南宋内府的经籍图书、礼器符印一并北上送抵大都。在此基础上，元代在大都建立了内府收藏。元代内府收藏最频繁的是元文宗阶段，文宗本人是喜好风雅、提倡艺术的皇帝。这一时期建立了以柯九思为鉴书博士的奎章阁，成为元代内府收藏的高峰。 受到唐宋以来的影响，元代的宫殿、寺院中还流行绘制大幅的壁画，元仁宗延祐年间（1314—1320）皇帝召集集贤院等处的画家为嘉禧殿创作壁画与屏风的事迹，至今为人们所津津乐道。
          </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"
        >
          <h3>
            赵孟頫及众多当时声名显赫的艺术家汇集于元大都
          </h3>
          <p class="text-indent">
            元大都不仅是元代政治、经济的中心，也是元代文化的中心，文人和艺术家聚集于此，创造出又一个文化的高峰。元大都汇聚了不少文人雅士，更萃集了历代的书画与珍宝。元代初年世祖忽必烈招揽赵孟頫从江南至大都，有元一代，包括赵孟頫在内的不少艺术家荟集于此。在艺术上，赵孟頫是开一代风气的枢轴式人物，与钱选、高克恭、李衎等相互切磋或共同创作，唐棣、柯九思、黄公望、王蒙等也都曾接受他的熏陶或指点，间接受到他影响的人就更多了。因此可以说，赵孟頫是元代艺术上的一代宗师，对元代艺术产生了巨大的影响。延祐元（1314）春天，皇帝召集集贤院等处的画家给隆福宫嘉禧殿创作壁画和屏风，商琦、李衎、唐棣等人纷纷泼墨挥毫。商琦的与李衎的传世画作《春山图》《修篁树石图》，成为我们遥想当年大都宫殿景象的窗口。
          </p>
        </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)
</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%;
    height: calc(819 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    transform: translate(-50%, -50%);
    >img {
      height: 100%;
    }
    &-c {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
    }
    h1{
      position: absolute;
      left: calc(163 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      top: calc(190 / 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.23em;
    }
    .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;
        background: #AC997F;
        font-size: 19px;
        color: #FFF3C3;
        letter-spacing: 1px;
        font-family: "SourceHanSerifCN-SemiBold";
        box-shadow: 3px 4px 9px 0px rgba(0,0,0,0.25);
        cursor: pointer;
      }
      >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'));
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      margin-top: 5%;
      >h3{
          width: calc(862 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          height: calc(71 / 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: "SourceHanSerifCN-SemiBold";
          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'));
        }
    }
    .tab-1-content{
      >p{
        width: 95%;
        max-height: 80%;
        overflow: auto;
        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        color: #000000;
        margin-right: -20px;
        padding-right: 20px;
      }
      >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: flex-start;
      align-items: center;
      >p{
        width: 95%;
        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        color: #000000;
        margin-right: -20px;
        padding-right: 20px;
        overflow-y: auto;
        max-height: calc(460 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        // 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;
      }
    }
  }
}

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

    h1 {
      top: calc(230 / 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;
      }
    }
    .tab-content {
      left: calc(550 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      width: calc(1085 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

      h3 {
        width: calc(960 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(79 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-size: calc(32 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
    }
  }
}
</style>