修改导航

admin/src/views/portal/ExampleView.vue

@@ -34,9 +34,10 @@
 						<div class="tabs">
 							<div class="tab" v-for="(image,index) in list" v-if="image!=null&&image!=''" :key="index">
                 <el-image
+
                     :src="image"
                     fit="cover"
-                    :z-index="9999"
+                    :z-index="0"
                     :preview-src-list="srcList">
                 </el-image>
 							</div>
@@ -169,5 +170,17 @@ export default {
 </script>
 
 <style>
+.el-overlay {
+  z-index: 9999 !important; /* 确保高于导航栏 */
+}
+
+.el-image-viewer__wrapper {
+  z-index: 9999 !important; /* 预览图层级提高 */
+}
+
+.el-image-viewer__img {
+  max-width: 82vw !important; /* 限制图片最大宽度为 50% 视口宽度 */
+  max-height: 82vh !important; /* 限制图片最大高度为 50% 视口高度 */
+}
 
 </style>

admin/src/views/portal/IndexView.vue

@@ -5,7 +5,9 @@
 
       <el-carousel  :interval="4000" height="450px" arrow="never" >
         <el-carousel-item   v-for="item in slideshow" :key="item.imageUrl">
-          <el-image :src="item.imageUrl"  style="width: inherit;height: inherit" />
+          <el-image :src="item.imageUrl"  style="max-width: 100%;
+    height: auto;
+    display: block;" />
         </el-carousel-item>
       </el-carousel>
 

admin/src/views/portal/ProductDetailsView.vue

 <template>
 	<Layout>
 		<div class="gallery-box" v-if=" photos.length > 0">
-
-<!--			<div class="layout-container" style="width: 100%">
-				<div class="solution-page">
-					<div class="container">
-						<h2>{{title}}</h2>
-						<p>{{introduction}}</p>
-					</div>
-				</div>
-			</div>-->
-
 			<div class="gallery">
 				<div class="active-photo" :style="'background-image: url('+ photos[activePhoto]+');'">
 					<button type="button"
@@ -32,7 +22,9 @@
 						:src="photo"
 						@click="activePhoto = index"
 						:class="{'active': activePhoto === index}"
-						:style="'background-image: url('+photo+');width:90%;object-fit: cover;'">
+						:style="'background-image: url('+photo+');background-size: cover; /* 让背景填充整个区域 */\n'+
+'    background-position: center center; /* 保持居中 */\n'+
+'    background-repeat: no-repeat;'">
 					</div>
 				</div>
 			</div>
@@ -90,7 +82,6 @@ export default {
           });
     },
     findExample(){
-
       //根据案例类型进行查询分类
       this.$post("/example/interlist", {})
           .then((res) => {
@@ -107,33 +98,6 @@ export default {
           });
     },
 
-
-		getProductById(typeDetailsId){
-
-      //根据类型详细id获取详细信息  type/details
-      this.$get("/type/details/info", {
-        id: typeDetailsId,
-      }).then((res) => {
-        if (res.code == 1) {
-          const temp = res.data
-          this.title = temp.title
-          this.introduction = temp.introduction
-          console.log(temp)
-
-          const photos = [];
-          for (let i = 1; i < 6; i++) {
-            // 判断是否为空
-            if (temp['imageUrl'+ i] != null){
-              // 判断是否有重复
-              if (!photos.includes(temp['imageUrl'+ i])){
-                photos.push(temp['imageUrl'+ i])
-              }
-            }
-          }
-          this.photos = photos
-        }
-      });
-		},
 		nextPhoto () {
 			this.activePhoto = ( this.activePhoto+1 < this.photos.length ? this.activePhoto+1 : 0 )
 		},
@@ -156,8 +120,6 @@ export default {
 	flex-direction: column;
 	align-items: center;
 	overflow: auto;
-	/*background-color: #5c4084;*/
-	/*background-color: rgba(16 18 27 / 10%);*/
 	text-align: center;
 	width: 100%;
 }
@@ -235,6 +197,7 @@ export default {
 .thumbnails .active {
 	outline-color: #59bcdb;
 	opacity: 0.6;
+
  }
 
 </style>