refactor: 专题 - 电力品线

app/index/view/mobile/topic_power_prodline/index.html

@@ -300,8 +300,10 @@
         <a class="product-left" href="{$cts_lf.link}">
             <img src="{$cts_lf.image}" alt="{$cts_lf.title}" class="product-img">
             <!-- 公共类+定位类：尺寸统一，定位不同 -->
-            <div class="product-img-hover product-img-1">
-                <img src="{$cts_lf.extra_image}" alt="{$cts_lf.title}">
+            <!--style="display:flex;justify-content: center;"-->
+            <div class="product-img-hover product-img-1" >
+                <!--style="width:70%"-->
+                <img src="{$cts_lf.extra_image}" alt="{$cts_lf.title}" >
             </div>
         </a>
         {/notempty}
@@ -463,8 +465,9 @@
      	productRights.forEach((rightContainer) => {
       		const img = rightContainer.querySelector('.right-img');
       		const video = rightContainer.querySelector('.right-video');
+      		const videoSrc = video.src.trim()
       		if (!img || !video) return;
-
+            if(!videoSrc) return;
       		const rect = rightContainer.getBoundingClientRect();
       		// 视口判断：容器进入视口50%以上视为活跃
       		const isInView =

app/index/view/pc/topic_power_prodline/index.html

@@ -194,7 +194,7 @@
         <a class="product-left" href="{$tc_first_section_lf.link}">
             <img src="{$dc_first_section_lf.image}" alt="{$dc_first_section_lf.short_title}" class="product-img">
             <!-- 公共类+定位类：尺寸和第一个完全一致，仅定位不同 -->
-            <div class="product-img-hover product-img-2">
+            <div class="product-img-hover product-img-2" >
                 <img src="{$dc_first_section_lf.extra_image}" alt="{$dc_first_section_lf.short_title}">
             </div>
         </a>
@@ -300,7 +300,9 @@
         <a class="product-left" href="{$cts_lf.link}">
             <img src="{$cts_lf.image}" alt="{$cts_lf.title}" class="product-img">
             <!-- 公共类+定位类：尺寸统一，定位不同  -->
-            <div class="product-img-hover product-img-1">
+            <!--style="display:flex;justify-content: center;"-->
+            <div class="product-img-hover product-img-1" >
+                <!-- style="width:70%"-->
                 <img src="{$cts_lf.extra_image}" alt="{$cts_lf.title}">
             </div>
         </a>
@@ -417,7 +419,7 @@
                 showMask(contentHtml);
             } 
          });
-});
+    });
     // 关闭按钮事件
     closeBtn.addEventListener('click', hideMask);
     // 点击蒙版背景关闭（可选）
@@ -463,8 +465,9 @@
      	productRights.forEach((rightContainer) => {
       		const img = rightContainer.querySelector('.right-img');
       		const video = rightContainer.querySelector('.right-video');
+      		const videoSrc = video.src.trim()
       		if (!img || !video) return;
-
+            if(!videoSrc) return;
       		const rect = rightContainer.getBoundingClientRect();
       		// 视口判断：容器进入视口50%以上视为活跃
       		const isInView =

public/static/index/mobile/css/topic_power_prodline/advantage.css

@@ -189,6 +189,8 @@
 		-webkit-line-clamp: 2;
 		/* 移动端同步添加最小高度 */
 		min-height: calc(clamp(0.5rem, 0.8vw, 0.8rem) * 2 * 1.5);
+		display: flex;
+        align-items: flex-start;
 	}
 
 	/* 移动端箭头和文字尺寸缩小 */

public/static/index/mobile/css/topic_power_prodline/product_list.css

@@ -45,49 +45,59 @@
 		transition: transform 0.3s ease;
 	}
 
-	/* 图片容器：移动端固定占比 */
+    /* 图片容器：用视口单位固定高度，彻底不受图片影响 */
     .product-card-img {
         display: flex;
         justify-content: center;
         align-items: center;
         width: 100%;
-		flex: 0 0 72%;
-		/* 移动端图片区占比 */
+        /* 关键：用vw固定高度，基于屏幕宽度计算，和图片本身尺寸无关 */
+        height: clamp(8rem, 28vw, 12rem); /* 移动端适配：小屏8rem，大屏12rem，中间按28vw缩放 */
         margin-bottom: clamp(0.4rem, 0.6vw, 0.5rem);
         overflow: hidden;
         border-radius: clamp(0.2rem, 0.4vw, 0.25rem);
     }
-
-	/* 产品图片：移动端特有 */
+    /* 产品图片：强制填充容器，消除尺寸差异 */
     .product-card img {
         width: 100%;
         height: 100%;
-		object-fit: contain;
+        object-fit: contain; /* 保留完整图片（如果需要裁剪用cover） */
         object-position: center;
+        /* 强制图片适应容器，不管原图尺寸 */
+        min-width: 80%; /* 防止图片过窄（可选，根据需求调整） */
+        max-width: 100%;
     }
 
 	/* 文字容器：移动端固定占比 */
-	.product-card-text {
-		flex: 0 0 20%;
+	/*.product-card-text {*/
+	/*	flex: 0 0 20%;*/
 		/* 移动端文字区占比 */
+	/*	display: flex;*/
+	/*	flex-direction: column;*/
+	/*	justify-content: center;*/
+	/*	padding-left: clamp(0.8rem, 2vw, 1.5rem);*/
+	/*	padding-right: clamp(0.8rem, 2vw, 1.5rem);*/
+	/*}*/
+    .product-card-text {
+        width: 100%;
+        /* 用vw固定文字区域高度，和图片容器高度解耦 */
+        height: clamp(3rem, 10vw, 4.5rem); /* 小屏3rem，大屏4.5rem，中间按10vw缩放 */
         display: flex;
         flex-direction: column;
-		justify-content: center;
+        justify-content: flex-start;
+        overflow: hidden; /* 防止文字溢出 */
         padding-left: clamp(0.8rem, 2vw, 1.5rem);
 		padding-right: clamp(0.8rem, 2vw, 1.5rem);
     }
-
 	/* 标题样式：移动端特有 */
 	.product-card-title {
-		font-size: clamp(0.8rem, 1.3vw, 1.2rem);
-		font-weight: 600;
+    	font-size: clamp(0.75rem, 1.2vw, 0.875rem);
         color: #333;
-		white-space: nowrap;
+        margin-bottom: clamp(0.2rem, 0.3vw, 0.25rem);
+        /* 最多2行，溢出省略（避免文字过多挤压） */
         overflow: hidden;
         text-overflow: ellipsis;
-		height: 35%;
-		/* 移动端标题固定高度 */
-		line-height: 1.2;
+        white-space: nowrap;
 	}
 
 	/* 描述样式：移动端固定2行高度 */

public/static/index/pc/css/topic_power_prodline/index.css

@@ -57,7 +57,7 @@ a {
 
 .line {
   width: 100%;
-	height: clamp(1.5rem, 3vw, 3rem);
+  height: clamp(2.5rem, 5vw, 15rem);
 }
 .header {
 	width: 100%;

public/static/index/pc/css/topic_power_prodline/product.css

@@ -55,12 +55,16 @@
 
 .product-img-hover img {
 	width: 100%;
+	/*max-width: 340px;*/
 	/* 图片尺寸100%，无区别 */
 	height: auto;
     /* max-height: 70%; */
 	border-radius: 10px;
 }
 
+
+
+
 /* 第一个产品：悬浮图居中上移（仅定位差异） */
 .product-img-1 {
 	top: -10%;