第三个场景内容页更新

src/App.vue

@@ -52,6 +52,14 @@ const store = useStore()
   font-family: 'SourceHanSerifCN-Heavy';
   src: url('@/assets/style/SourceHanSerifCN-Heavy.otf');
 }
+@font-face {
+  font-family: 'SourceHanSansSC-Bold';
+  src: url('@/assets/style/SourceHanSansSC-Bold-2.otf');
+}
+@font-face {
+  font-family: 'SourceHanSansSC-Normal';
+  src: url('@/assets/style/SourceHanSansSC-Normal-2.otf');
+}
 // i {
 //   font-style: italic;
 // }

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

@@ -0,0 +1,265 @@
+
+<template>
+  <div class="camera-content-1-1">
+    <button
+      class="return"
+      @click="emit('close')"
+    />
+    <h1>{{ title }}</h1>
+    <div class="content-wrap">
+      <div
+        class="design-wrap"
+      >
+        <div class="design-wrap-left">
+          <div class="left-title">
+            雅集现场的百工精巧
+          </div>
+          <div class="left-text">
+            <strong>（1）元代漆器</strong><br>
+            从文献记载和出土实物看，元代内府也使用漆器，这类漆器可能是在武昌、嘉兴、杭州等地的官府作坊中生产的。元代漆器的生产，主要集中在南方地区，尤以嘉兴最为知名，元初就曾在此设置漆作局，著名的元代漆工彭君宝、张成、杨茂也都是此地人。元代漆器品类不少，其中螺钿、雕漆都取得了很高成就，最常见的则属色髹器。<br>
+            <strong>（2）元代服饰</strong><br>
+            元朝是中国纺织业发展的重要阶段。一方面，棉纺织业已经相当发达，普遍改变了传统以麻布为衣着原料的习惯；另一方面，适应蒙古贵族审美需要得以发展的织金等纺织技术，将元朝高级的纺织品装饰得别具特色、富丽堂皇。可以说在元代织物中，织金锦也就是“纳石失”这样一种以金线织花的丝绸最得青睐，也最具影响。<br>
+            <strong>（3）元代玉器 </strong><br>
+            <strong>（4）元代砚台</strong><br>
+            <strong>（5）元代笔架</strong><br>
+            <strong>（6）元代金银器</strong><br>
+            元代使用黄金的风气之盛，旷古未有。统治集团的帐幕、宫室、衣饰、器用无不用金，甚至以金做大酒瓮、以银为马槽。来到中国游历的马可·波罗惊叹于忽必烈金银酒具之众多与奢华，说“非亲见者未能信也”。以此为效，风气不胫而走，民间的金银器也极其风靡。<br>
+          </div>
+        </div>
+        <div class="design-wrap-right">
+          <!-- 左右按钮 -->
+          <img
+            class="btn-left"
+            src="@/assets/images/CameraContent-3-1-3-left.png"
+            alt=""
+            :style="{opacity: currentSwitchIdx == 0 ? '0.4':'1'}"
+            @click="previous()"
+          >
+          <img
+            class="btn-right"
+            src="@/assets/images/CameraContent-3-1-3-right.png"
+            alt=""
+            :style="{opacity: currentSwitchIdx == imgLists.length - 1 ? '0.4':'1'}"
+
+            @click="next()"
+          >
+          <img
+            class="detail-img"
+            :src="require(`@/assets/images/CameraContent-3-1-3-img-${currentSwitchIdx + 1}.png`)"
+            alt=""
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue"
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(1920, 968)
+
+
+const emit = defineEmits(['close'])
+
+const currentSwitchIdx = ref(0)
+
+const title = '百工精巧'
+
+const imgLists = [
+  '@/assets/images/CameraContent-3-1-3-img-1.png',
+  '@/assets/images/CameraContent-3-1-3-img-2.png',
+  '@/assets/images/CameraContent-3-1-3-img-3.png',
+  '@/assets/images/CameraContent-3-1-3-img-4.png',
+  '@/assets/images/CameraContent-3-1-3-img-5.png',
+]
+
+const previous = () => {
+  console.log('上一页', currentSwitchIdx.value)
+  if (currentSwitchIdx.value > 0 ) {
+    console.log('上一页2')
+    currentSwitchIdx.value -= 1
+  } else {
+    return
+  }
+}
+
+const next = () => {
+  console.log('下一页')
+  if (currentSwitchIdx.value < imgLists.length - 1) {
+    currentSwitchIdx.value += 1
+  } else {
+    return
+  }
+}
+
+
+
+</script>
+
+<style lang="less" scoped>
+@page-height-design-px: 970;
+
+.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;
+    z-index: 10;
+  }
+
+  >h1 {
+    position: absolute;
+    left: 0;
+    top: calc(93 / @page-height-design-px * 100vh);
+    width: 100%;
+    height: calc(120 / @page-height-design-px * 100vh);
+    background-image: url(@/assets/images/camera-content-3-1-3-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, Source Han Serif CN;
+    font-weight: 800;
+    color: #FFEEC0;
+    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: 100%;
+    // width: calc(1920 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(723 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, -50%);
+
+    >.switch-wrap {
+      position: absolute;
+      right: calc(65 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      bottom: calc(83 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      z-index: 10;
+
+      >button {
+        width: calc(118 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(118 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        background-image: url(@/assets/images/camera-content-1-1-1-swtich-btn-bg.png);
+        background-size: 60%;
+        background-repeat: no-repeat;
+        background-position: center center;
+        font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: Source Han Sans SC, Source Han Sans SC;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        letter-spacing: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+
+      >button:last-of-type {
+        margin-left: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+
+      >button.active {
+        background-image: url(@/assets/images/camera-content-1-1-1-swtich-btn-bg-active.png);
+        background-size: 100%;
+      }
+    }
+
+    >.design-wrap {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background-image: url(@/assets/images/camera-content-3-1-3-design-bg.png);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      display: flex;
+      justify-content: space-evenly;
+      align-items: center;
+      >.design-wrap-left {
+        width: calc(700 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        >.left-title {
+          width: calc(579 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          height: calc(44 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          color: #6A3906 ;
+          font-family: 'SourceHanSansSC-Bold';
+          font-size: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          background: url(@/assets/images/camera-content-3-1-3-tab-1-img.png);
+          background-size: cover;
+          line-height: calc(44 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          padding-left: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          padding-top: calc(7 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+        >.left-text {
+          font-family: 'SourceHanSansSC-Normal';
+          margin-top: 25px;
+          height: calc(300 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          overflow: auto;
+          font-family: 'SourceHanSansSC-Normal';
+          letter-spacing: 3px;
+          line-height: 25px;
+          >strong {
+            color: #000000;
+            font-family: 'SourceHanSansSC-Bold';
+            margin-bottom: 10px;
+          }
+        }
+      }
+      >.design-wrap-right {
+        width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        background: rgba(145,129,117,0.25);
+        border: 1px solid #FFE88B;
+        padding: 15px 10px;
+        position: relative;
+        >.btn-left {
+          width: 50px;
+          height: 50px;
+          position: absolute;
+          left: -25px;
+          top: 50%;
+          transform: translateY(-50%);
+          z-index: 2;
+          cursor: pointer;
+        }
+        >.btn-right {
+          width: 50px;
+          height: 50px;
+          position: absolute;
+          right: -25px;
+          top: 50%;
+          transform: translateY(-50%);
+          z-index: 2;
+          cursor: pointer;
+        }
+        >.detail-img {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,258 @@
+
+<template>
+  <div class="camera-content-1-1">
+    <button
+      class="return"
+      @click="emit('close')"
+    />
+    <h1>{{ title }}</h1>
+    <div class="content-wrap">
+      <div
+        class="design-wrap"
+      >
+        <div class="design-wrap-left">
+          <div class="left-title">
+            元代时期元曲文学大家及其代表作品
+          </div>
+          <div class="left-text">
+            <strong>（1）关汉卿《窦娥冤》</strong><br>
+            在大都的剧作家中，关汉卿占有特殊重要的地位。他一生创作的杂剧在六十种以上，但大多已经散失，传世的仅有十余种。他的作品反映底层人民生活的困苦，塑造了众多令人难忘的人物形象。其代表作《窦娥冤》，是对当时社会的血泪控诉，在我国文学史上占有重要地位。<br>
+            <strong>（3）马致远《天净沙·秋思》</strong><br>
+            <strong>（4）白朴《墙头马上》</strong><br>
+            <strong>（5）王实甫《西厢记》</strong><br>
+            大都剧作家王实甫，也有很高的成就，《西厢记》，天下夺魁，几百年来深受人民的赞赏。<br>
+          </div>
+        </div>
+        <div class="design-wrap-right">
+          <!-- 左右按钮 -->
+          <img
+            class="btn-left"
+            src="@/assets/images/CameraContent-3-1-3-left.png"
+            alt=""
+            :style="{opacity: currentSwitchIdx == 0 ? '0.4':'1'}"
+            @click="previous()"
+          >
+          <img
+            class="btn-right"
+            src="@/assets/images/CameraContent-3-1-3-right.png"
+            alt=""
+            :style="{opacity: currentSwitchIdx == imgLists.length - 1 ? '0.4':'1'}"
+
+            @click="next()"
+          >
+          <img
+            class="detail-img"
+            :src="require(`@/assets/images/CameraContent-3-2-2-img-${currentSwitchIdx + 1}.png`)"
+            alt=""
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue"
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(1920, 968)
+
+
+const emit = defineEmits(['close'])
+
+const currentSwitchIdx = ref(0)
+
+const title = '著名元曲作家与作品'
+
+const imgLists = [
+  '@/assets/images/CameraContent-3-2-2-img-1.png',
+]
+
+const previous = () => {
+  console.log('上一页', currentSwitchIdx.value)
+  if (currentSwitchIdx.value > 0 ) {
+    console.log('上一页2')
+    currentSwitchIdx.value -= 1
+  } else {
+    return
+  }
+}
+
+const next = () => {
+  console.log('下一页')
+  if (currentSwitchIdx.value < imgLists.length - 1) {
+    currentSwitchIdx.value += 1
+  } else {
+    return
+  }
+}
+
+
+
+</script>
+
+<style lang="less" scoped>
+@page-height-design-px: 970;
+
+.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;
+    z-index: 10;
+  }
+
+  >h1 {
+    position: absolute;
+    left: 0;
+    top: calc(93 / @page-height-design-px * 100vh);
+    width: 100%;
+    height: calc(120 / @page-height-design-px * 100vh);
+    background-image: url(@/assets/images/camera-content-3-1-3-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, Source Han Serif CN;
+    font-weight: 800;
+    color: #FFEEC0;
+    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: 100%;
+    // width: calc(1920 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(723 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, -50%);
+
+    >.switch-wrap {
+      position: absolute;
+      right: calc(65 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      bottom: calc(83 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      z-index: 10;
+
+      >button {
+        width: calc(118 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(118 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        background-image: url(@/assets/images/camera-content-1-1-1-swtich-btn-bg.png);
+        background-size: 60%;
+        background-repeat: no-repeat;
+        background-position: center center;
+        font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: Source Han Sans SC, Source Han Sans SC;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        letter-spacing: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+
+      >button:last-of-type {
+        margin-left: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+
+      >button.active {
+        background-image: url(@/assets/images/camera-content-1-1-1-swtich-btn-bg-active.png);
+        background-size: 100%;
+      }
+    }
+
+    >.design-wrap {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background-image: url(@/assets/images/camera-content-3-1-3-design-bg.png);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      display: flex;
+      justify-content: space-evenly;
+      align-items: center;
+      >.design-wrap-left {
+        width: calc(700 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        >.left-title {
+          width: calc(579 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          height: calc(44 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          color: #6A3906 ;
+          font-family: 'SourceHanSansSC-Bold';
+          font-size: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          background: url(@/assets/images/camera-content-3-1-3-tab-1-img.png);
+          background-size: cover;
+          line-height: calc(44 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          padding-left: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          padding-top: calc(7 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+        >.left-text {
+          font-family: 'SourceHanSansSC-Normal';
+          margin-top: 25px;
+          height: calc(300 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          overflow: auto;
+          font-family: 'SourceHanSansSC-Normal';
+          letter-spacing: 3px;
+          line-height: 25px;
+          >strong {
+            color: #000000;
+            font-family: 'SourceHanSansSC-Bold';
+            margin-bottom: 10px;
+          }
+        }
+      }
+      >.design-wrap-right {
+        width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        background: rgba(145,129,117,0.25);
+        border: 1px solid #FFE88B;
+        padding: 15px 10px;
+        position: relative;
+        >.btn-left {
+          width: 50px;
+          height: 50px;
+          position: absolute;
+          left: -25px;
+          top: 50%;
+          transform: translateY(-50%);
+          z-index: 2;
+          cursor: pointer;
+        }
+        >.btn-right {
+          width: 50px;
+          height: 50px;
+          position: absolute;
+          right: -25px;
+          top: 50%;
+          transform: translateY(-50%);
+          z-index: 2;
+          cursor: pointer;
+        }
+        >.detail-img {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+</style>