改改改

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

@@ -72,6 +72,9 @@
           alt=""
           draggable="false"
         >
+        <div class="img-title">
+          建设中的元大都
+        </div>
       </div>
     </div>
   </div>
@@ -274,6 +277,11 @@ const tab1ContentPageNumber = ref(1)
         background-color: rgba(145,129,117,0.25);
         object-fit: cover;
       }
+      >.img-title{
+        margin-top: -2.5em;
+        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: "Source Han Sans SC light";
+      }
     }
   }
 }

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

@@ -27,6 +27,9 @@
           alt=""
           draggable="false"
         >
+        <div class="img-title">
+          修复后的菏泽沉船
+        </div>
       </div>
     </div>
   </div>
@@ -122,16 +125,23 @@ const emit = defineEmits(['close'])
       position: relative;
       width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
       >img{
-        position: absolute;
-        left: 0;
-        top: 0;
+        flex: 0 0 auto;
         width: 100%;
-        height: 100%;
         // background: rgba(145,129,117,0.25);
         // border: 1px solid #FFE88B;
         // padding: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }
+      >.img-title{
+        flex: 0 0 auto;
+        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        margin-top: 0.5em;
+        font-family: "Source Han Sans SC light";
+      }
     }
   }
 }

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

@@ -26,6 +26,9 @@
             :src="require(`@/assets/images/CameraContent-3-2-2-img-${currentSwitchIdx + 1}.jpg`)"
             alt=""
           >
+          <div class="img-title">
+            关汉卿画像
+          </div>
         </div>
       </div>
     </div>
@@ -198,25 +201,18 @@ const next = () => {
       }
       >.design-wrap-right {
         position: relative;
-        >.btn-left {
-          width: 50px;
-          height: 50px;
-          position: absolute;
-          left: -25px;
-          top: 50%;
-          transform: translateY(-50%);
-          z-index: 2;
-          cursor: pointer;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        >.detail-img{
+          height: 70%;
         }
-        >.btn-right {
-          width: 50px;
-          height: 50px;
-          position: absolute;
-          right: -25px;
-          top: 50%;
-          transform: translateY(-50%);
-          z-index: 2;
-          cursor: pointer;
+        >.img-title{
+          margin-top: 0.5em;
+          font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          font-family: "Source Han Sans SC light";
         }
       }
     }

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

@@ -6,13 +6,16 @@
       @click="emit('close')"
     />
     <h1>{{ title }}</h1>
-    <div class="content-wrap">
-      <div class="design-wrap">
-        <img
-          class="content-wrap__left"
-          src="@/assets/images/CameraContent-3-2-3-left-bg.png"
-        >
-
+    <div class="wrap-1">
+      <div class="wrap-2">
+        <div class="content-wrap__left">
+          <img
+            src="@/assets/images/CameraContent-3-2-3-left-bg.png"
+          >
+          <div class="img-title">
+            元墓戏曲壁画
+          </div>
+        </div>
         <div class="content-wrap__right text-indent">
           <div>
             <p>
@@ -85,41 +88,55 @@ const title = '表演元曲的著名演员'
     z-index: 1;
   }
 
-  .content-wrap {
+  .wrap-1 {
     position: absolute;
     left: 50%;
     top: 54%;
     width: 100%;
     height: calc(723 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     transform: translate(-50%, -50%);
-
-    &__right {
+    >.wrap-2 {
+      position: absolute;
+      left: 0;
+      top: 0;
       display: flex;
       align-items: center;
-      justify-content: center;
-      width: 956px;
-      height: 475px;
-      background: url('@/assets/images/CameraContent-3-2-3-right-bg.png') no-repeat center / contain;
+      justify-content: space-between;
+      padding: 0 97px 0 195px;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      background: url(@/assets/images/camera-content-3-1-3-design-bg.png) no-repeat center / cover;
+      >.content-wrap__left{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        >img{
+          flex: 0 0 auto;
+          height: 75%;
+        }
+        >.img-title{
+          margin-top: 0.5em;
+          font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          font-family: "Source Han Sans SC light";
+        }
+      }
+      >.content-wrap__right {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 956px;
+        height: 475px;
+        background: url('@/assets/images/CameraContent-3-2-3-right-bg.png') no-repeat center / contain;
 
-      > div {
-        width: 716px;
-        font-size: 20px;
+        > div {
+          width: 716px;
+          font-size: 20px;
+        }
       }
     }
   }
-
-  .design-wrap {
-    position: absolute;
-    left: 0;
-    top: 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 97px 0 195px;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    background: url(@/assets/images/camera-content-3-1-3-design-bg.png) no-repeat center / cover;
-  }
 }
 </style>