完成第一个场景第一个镜头第三个内容页

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

@@ -80,7 +80,7 @@ import { useStore } from "vuex"
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
-} = useSizeAdapt()
+} = useSizeAdapt(1920, 970)
 
 const route = useRoute()
 const router = useRouter()

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

@@ -5,6 +5,30 @@
       class="return"
       @click="emit('close')"
     />
+    <div class="content-wrap">
+      <div class="left">
+        <h2 class="one">
+          《马可波罗行纪》中对大都城的描述
+        </h2>
+        <p class="one">
+          应知大汗居其名曰【汗八里】之契丹都城。全城中划地为方形，划线整齐，建筑房舍。每方足以建筑大屋，连同庭院园囿而有余。以方地赐各部落首领，每首领各有其赐地。方地周围皆是美丽道路，行人由斯往来。全城地面规划有如棋盘，其美善之极，未可言宣。
+        </p>
+        <h2 class="two">
+          《元史》中对大都城的描述
+        </h2>
+        <p class="two">
+          元大都“京城右拥太行，左挹沧海，枕居庸，奠朔方，城周六十里，十一门”。
+        </p>
+      </div>
+      <div class="right">
+        <img
+          class=""
+          src="@/assets/images/camera-content-1-1-3-img.png"
+          alt=""
+          draggable="false"
+        >
+      </div>
+    </div>
   </div>
 </template>
 
@@ -13,6 +37,11 @@ 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()
@@ -41,5 +70,72 @@ const emit = defineEmits(['close'])
     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.jpg);
+    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'));
+      >h2{
+        width: calc(616 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(62 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-size: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: Source Han Serif SC, Source Han Serif SC;
+        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'));
+        background-image: url(@/assets/images/camera-content-1-1-3-title-bg.png);
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-top: calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        padding-left: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        margin-bottom: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+      >p{
+        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'));
+      }
+      >p.one{
+        margin-bottom: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+    >.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'));
+      >img{
+        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>