场景1内容页，还剩第三个镜头第二个按钮

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

@@ -35,6 +35,13 @@
           隆福宫与兴圣宫
         </button>
       </div>
+      <img
+        v-if="activeTabIdx === 0"
+        class="tab-content default-content"
+        src="@/assets/images/camera-content-1-2-2-default-content.png"
+        alt=""
+        draggable="false"
+      >
       <div
         v-if="activeTabIdx === 1"
         class="tab-content tab-1-content"
@@ -79,8 +86,7 @@ const store = useStore()
 
 const emit = defineEmits(['close'])
 
-const activeTabIdx = ref(1)
-const tab1ContentPageNumber = ref(1)
+const activeTabIdx = ref(0)
 
 </script>
 
@@ -167,6 +173,9 @@ const tab1ContentPageNumber = ref(1)
       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'));

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

@@ -1,6 +1,30 @@
 
 <template>
-  <div class="asdf" />
+  <div class="camera-content-1-1">
+    <button
+      class="return"
+      @click="emit('close')"
+    />
+    <div class="content-wrap">
+      <div class="left">
+        <img
+          class="content"
+          src="@/assets/images/camera-content-1-2-3-content.png"
+          alt=""
+          draggable="false"
+        >
+      </div>
+      <div class="right">
+        <video
+          src="@/assets/videos/start-up-video.mp4"
+          controls
+          playsinline
+          webkit-playsinline="true"
+          x5-video-player-type="h5"
+        />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -8,13 +32,77 @@ 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'])
+
 </script>
 
 <style lang="less" scoped>
-.asdf{
-
+.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(1920 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(723 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, -50%);
+    background-image: url(@/assets/images/camera-content-1-1-3-bg.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    >.left{
+      flex: 0 0 auto;
+      width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      >img.content{
+        width: 100%;
+      }
+    }
+    >.right{
+      flex: 0 0 auto;
+      position: relative;
+      width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      >video{
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(145,129,117,0.25);
+        border: 1px solid #FFE88B;
+        padding: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+  }
 }
 </style>

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

@@ -1,6 +1,55 @@
 
 <template>
-  <div class="asdf" />
+  <div class="camera-content-1-2-2">
+    <button
+      class="return"
+      @click="emit('close')"
+    />
+    <div class="content-wrap">
+      <h1>大都城内的寺庙建筑</h1>
+      <div class="tabbar">
+        <button
+          :class="{
+            active: activeTabIdx === 1
+          }"
+          @click="activeTabIdx = 1"
+        >
+          大圣寿万安寺
+        </button>
+        <div class="splitter" />
+        <button
+          :class="{
+            active: activeTabIdx === 2
+          }"
+          @click="activeTabIdx = 2"
+        >
+          大庆寿寺
+        </button>
+      </div>
+      <div
+        v-if="activeTabIdx === 1"
+        class="tab-content tab-1-content"
+      >
+        <img
+          class=""
+          src="@/assets/images/camera-content-1-3-1-tab-1-content.png"
+          alt=""
+          draggable="false"
+        >
+      </div>
+      <div
+        v-if="activeTabIdx === 2"
+        class="tab-content tab-2-content"
+      >
+        <img
+          class=""
+          src="@/assets/images/camera-content-1-3-1-tab-2-content.png"
+          alt=""
+          draggable="false"
+        >
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -8,13 +57,166 @@ 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)
+
 </script>
 
 <style lang="less" scoped>
-.asdf{
-
+.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%;
+    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(180 / 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;
+    }
+    >.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'));
+      >button {
+        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;
+        box-shadow: 3px 4px 9px 0px rgba(0,0,0,0.25);
+      }
+      >button.active{
+        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{
+      >img{
+        width: 95%;
+      }
+      >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;
+      >img{
+        object-fit: contain;
+      }
+    }
+  }
 }
 </style>

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

@@ -1,6 +1,19 @@
 
 <template>
-  <div class="asdf" />
+  <div class="camera-content-1-1">
+    <button
+      class="return"
+      @click="emit('close')"
+    />
+    <div class="content-wrap">
+      <img
+        class="content"
+        src="@/assets/images/camera-content-1-3-3-content.png"
+        alt=""
+        draggable="false"
+      >
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -8,13 +21,56 @@ 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'])
+
 </script>
 
 <style lang="less" scoped>
-.asdf{
-
+.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(1920 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(723 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, -50%);
+    background-image: url(@/assets/images/camera-content-1-1-3-bg.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    >img.content{
+      width: 90%;
+    }
+  }
 }
 </style>

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

@@ -1,6 +1,19 @@
 
 <template>
-  <div class="asdf" />
+  <div class="camera-content-1-1">
+    <button
+      class="return"
+      @click="emit('close')"
+    />
+    <div class="content-wrap">
+      <img
+        class="content"
+        src="@/assets/images/camera-content-1-3-3-content.png"
+        alt=""
+        draggable="false"
+      >
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -8,13 +21,56 @@ 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'])
+
 </script>
 
 <style lang="less" scoped>
-.asdf{
-
+.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(1920 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(723 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, -50%);
+    background-image: url(@/assets/images/camera-content-1-1-3-bg.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    >img.content{
+      width: 90%;
+    }
+  }
 }
 </style>