修改导航

admin/src/views/portal/ProductDetailsView.vue

@@ -3,7 +3,7 @@
 		<div class="gallery-box" v-if=" photos.length > 0">
 			<div class="gallery">
 				<div class="active-photo" :style="'background-image: url('+ photos[activePhoto]+');'">
-					<button type="button"
+<!--					<button type="button"
 						aria-label="Previous Photo"
 						class="previous"
 						@click="previousPhoto()">
@@ -14,19 +14,26 @@
 						class="next"
 						@click="nextPhoto()">
 						▶
-					</button>
+					</button>-->
 				</div>
-				<div class="thumbnails">
+			<div class="thumbnails" >
 					<div v-for="(photo, index) in photos"
 						:key="index"
 						:src="photo"
 						@click="activePhoto = index"
 						:class="{'active': activePhoto === index}"
-						:style="'background-image: url('+photo+');background-size: cover; /* 让背景填充整个区域 */\n'+
-'    background-position: center center; /* 保持居中 */\n'+
-'    background-repeat: no-repeat;'">
+						:style="'background-image: url('+photo+');'">
 					</div>
-				</div>
+
+<!--
+
+        <div class="image-container">
+          <img v-for="(photo, index) in photos"  :src="photo" />
+          <div/>
+-->
+
+        </div>
+
 			</div>
 		</div>
 
@@ -136,12 +143,12 @@ export default {
 .gallery-box .gallery .active-photo {
 	width: 100%;
 	margin-bottom: 5px;
-	padding-bottom: 65%;
-	background-size: cover;
+	padding-bottom: 60%;
 	background-position: center;
 	background-repeat: no-repeat;
+  background-size: contain;
 	border: 2px solid #fff;
-	position: relative;
+
 }
 
 .gallery-box .gallery .active-photo button {
@@ -180,6 +187,7 @@ export default {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
 	grid-gap: 4px;
+
 }
 .thumbnails div {
 	border: 2px solid #fff;
@@ -190,6 +198,7 @@ export default {
 	background-position: center;
 	background-repeat: no-repeat;
 	opacity: 1;
+  place-items: center;
 }
 .thumbnails:hover {
 	/*opacity: 0.6;*/
@@ -200,4 +209,16 @@ export default {
 
  }
 
+.image-container {
+  width: 300px; /* 设定固定宽度 */
+  height: 200px; /* 设定固定高度 */
+  overflow: hidden; /* 防止溢出 */
+}
+
+.image-container img {
+  width: 100%;
+  height: auto;
+  clip-path: inset(10% 10% 10% 10%);
+}
+
 </style>