YangZhouDaYunHeDaDu/src/components/CameraContent-3-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"
      >
        <h3>元代上流社会的雅集盛会</h3>
        <p class="text-indent">
          雅集是古代文人的派对形式之一，举办聚会的理由是各式各样的，规模亦可大可小。在雅集的活动里，主人与宾客除了享用精致美味的佳肴，也会有吟诗、鼓琴、对弈、观画、品茗等助兴活动，更不用说宴会上即席挥毫、题咏等具有纪念性质的副产品产出。宴集上文人之间相互激荡与较劲，因此雅集亦可说是文化的孕育摇篮。 元文宗奎章阁中汇集的历代收藏和公主祥哥剌吉天庆寺的清赏雅集，更是元大都文化与艺术发展的见证。经由此雅集盛会的举办，宋元时期的书画名作将得到更多展示鉴赏的机会，艺术作品所汇聚的美感能量跨越时空与身份，进而延续或创造新的艺术文化成果。
        </p>
        <!-- <img
          class=""
          src="@/assets/images/camera-content-3-1-2-tab-1-img.png"
          alt=""
          draggable="false"
        > -->
        <!-- <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>
        <div class="content-box">
          <div class="left-list">
            <div class="left-list-item">
              <div class="item-title">
                （1）名家收藏
              </div>
              <div class="item-span">
                欣赏文人雅士收藏的宋元时期书画作品。
              </div>
            </div>
            <div class="left-list-item">
              <div class="item-title">
                （2）士人题跋
              </div>
              <div class="item-span">
                对喜爱的书画作品题跋留念。
              </div>
            </div>
            <div class="left-list-item">
              <div class="item-title">
                （3）多元艺术
              </div>
              <div class="item-span">
                呈现蒙元时代文化艺术成果。
              </div>
            </div>
            <div class="left-list-item">
              <div class="item-title">
                （4）交流互鉴
              </div>
              <div class="item-span">
                现场挥毫泼墨，品鉴、交流。
              </div>
            </div>
          </div>
          <div class="right-img">
            <img src="@/assets/images/camera-content-3-1-2-tab-2-img.png">
            <div class="title">
              玉山雅集图
            </div>
          </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, 970)

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

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-3-1-1-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(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: calc(46 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(168 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        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'));
      height: calc(750 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      margin-top: 5%;
      >h3{
          width: calc(892 / 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: "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{
      >img {
        width: calc(809 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
      >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: flex-start;
      align-items: center;
      >.content-box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        >.left-list {
          width: calc(440 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          >.left-list-item{
            .item-title,
            .item-span{
              font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
              font-family: "Source Han Sans SC light";
              line-height: 34px;
            }
            &:not(:last-child) {
              margin-bottom: 10px;
            }
          }
          >img {
            width: 50%;
          }
        }
        > .right-img{
          position: relative;
          height: calc(464 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          >img {
            height: 100%;
          }
          >.title{
            position: absolute;
            left: 50%;
            top: 100%;
            transform: translate(-50%, 100%);
            font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            font-family: "Source Han Sans SC light";
          }
        }
      }
    }
  }
}
</style>