Browse Source

fix:1-2-排版

gemercheung 1 year ago
parent
commit
09bacc5098

BIN
src/assets/images/camera-content-2-1-3-bg-0.png


BIN
src/assets/images/camera-content-2-3-3-img.png


+ 30 - 0
src/components/CameraContent-2-3-2.vue

@@ -94,6 +94,12 @@
             src="@/assets/images/camera-content-2-3-2-tab-2-img.png"
             alt=""
           >
+          <p
+            class="remark"
+            style="margin-top: -40px;"
+          >
+            青白釉串珠纹玉壶春瓶
+          </p>
         </div>
       </div>
       <div
@@ -108,6 +114,12 @@
             src="@/assets/images/camera-content-2-3-2-tab-3-img.png"
             alt=""
           >
+          <p
+            class="remark"
+            style="margin-top: 10px;"
+          >
+            青釉海水云龙纹瓶
+          </p>
         </div>
       </div>
       <div
@@ -122,6 +134,9 @@
             src="@/assets/images/camera-content-2-3-2-tab-4-img.png"
             alt=""
           >
+          <p class="remark">
+            白地黑花龙凤纹罐
+          </p>
         </div>
       </div>
       <div
@@ -136,6 +151,12 @@
             src="@/assets/images/camera-content-2-3-2-tab-5-img.png"
             alt=""
           >
+          <p
+            class="remark"
+            style="margin-top: 20px;"
+          >
+            釉里红花卉纹玉壶春瓶
+          </p>
         </div>
       </div>
     </div>
@@ -190,6 +211,9 @@ const activeTabIdx = ref(1)
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
+    &:has(.tab-1-content){
+      background-image: url(@/assets/images/camera-content-2-1-3-bg-0.png);
+    }
 
     >h1 {
       position: absolute;
@@ -250,6 +274,7 @@ const activeTabIdx = ref(1)
       display: flex;
       justify-content: center;
       align-items: center;
+
     }
 
     >.tab-1-content {
@@ -294,6 +319,7 @@ const activeTabIdx = ref(1)
             background: rgba(145,129,117,0.25);
             border: 1px solid #FFE88B;
             display: flex;
+            flex-direction: column;
             justify-content: center;
             align-items: center;
             >img {
@@ -421,5 +447,9 @@ const activeTabIdx = ref(1)
       }
     }
   }
+  .remark{
+    padding-top: 5px;
+    text-align: center;
+  }
 }
 </style>

+ 6 - 3
src/components/HotspotDialog-1.vue

@@ -380,7 +380,8 @@
         "
       >
         <div
-          class="hotspot-dialog-1__label label">
+          class="hotspot-dialog-1__label label"
+        >
           大明殿
         </div>
       </div>
@@ -440,7 +441,8 @@
         "
       >
         <div
-          class="hotspot-dialog-1__label label">
+          class="hotspot-dialog-1__label label"
+        >
           和义门
         </div>
       </div>
@@ -484,7 +486,8 @@
         "
       >
         <div
-          class="hotspot-dialog-1__label label">
+          class="hotspot-dialog-1__label label"
+        >
           和义门
         </div>
       </div>