产品详情页添加关联产品轮播；点击图册显示大图的问题，还有点击大图可以弹框观看

app/index/view/index/index.html

@@ -168,7 +168,7 @@
             <div class="swiper-pagination bs_pagination"></div>
             <hr>
             {volist name="brand_story" id="story" key="k"}
-            <span class="time{$k}">{$story.year}</span>
+            <span class="time">{$story.year}</span>
             {/volist}
           </div>
           <div class="swiper-container bs_bts">
@@ -318,6 +318,38 @@
         prevEl: ".swiper-button-prev",
       },
     });
+    // 计算品牌故事轮播个数样式调整
+    function calculateDisplayValue (n) {
+      return 8 - n;
+    }
+    // 动态调整分页点和年份位置
+    function adjustTimeline () {
+      const slideCount = brandStoryswiper.slides.length; // 获取轮播项个数
+      if (slideCount === 0) return;
+      // 计算分页点间距
+      const bulletMargin = ((100 / slideCount) - 2) + "%";
+      $(".orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .bs_pagination .swiper-pagination-bullet")
+        .css("margin-right", bulletMargin);
+      // 计算年份位置（固定间隔21%）
+      const timeSpans = $(".orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .time");
+      var tag = 0
+      var percent = 0
+      var basenum = calculateDisplayValue(slideCount)
+      timeSpans.each(function (index) {
+        if (index == 1) {
+          tag = ((100 / slideCount)) * index - (index > 0 ? basenum : 0)
+          percent = tag
+        }
+        if (index > 1) {
+          percent = tag * index
+        }
+        $(this).css("left", `${percent}%`);
+      });
+    }
+    // 初始化时调用
+    adjustTimeline();
+    // 窗口Resize时重新计算（可选）
+    $(window).on("resize", adjustTimeline);
     // 宣传banner
     var pubswiper = new Swiper(".pubswiper", {
       loop: true,
@@ -357,8 +389,6 @@
         $(this).children('div.fqa-question').find('h3').removeClass('text-hidden');
       }
     })
-
-
     // 首先隐藏视频元素和加载中的图片  要放开注释
     $("#hotvideo").hide();
     // 监听视频的加载事件

app/index/view/product/detail.html

@@ -144,6 +144,45 @@
             </div>
         </div>
         {/notempty}
+        <!-- 关联产品 -->
+				<div class="glcpmain" id="related">
+					<div class="glcptitle">关联产品</div>
+					<div class="swiper-container glcpswiper">
+						<div class="swiper-wrapper">
+							<div class="swiper-slide glcpit">
+								<img src="https://www.orico.com.cn/uploads/product/2539U3/2539U3-L1.jpg" class="glimg" />
+								<div class="glinfo">
+									<div class="t1">2.5英寸USB3.0三防硬盘盒</div>
+									<div class="t2"> ORICO-2539U3</div>
+								</div>
+							</div>
+							<div class="swiper-slide glcpit">
+								<img src="https://www.orico.com.cn/uploads/product/2539U3/2539U3-L1.jpg" class="glimg" />
+								<div class="glinfo">
+									<div class="t1">2.5英寸USB3.0三防硬盘盒</div>
+									<div class="t2"> ORICO-2539U3</div>
+								</div>
+							</div>
+							<div class="swiper-slide glcpit">
+								<img src="https://www.orico.com.cn/uploads/product/2539U3/2539U3-L1.jpg" class="glimg" />
+								<div class="glinfo">
+									<div class="t1">2.5英寸USB3.0三防硬盘盒</div>
+									<div class="t2"> ORICO-2539U3</div>
+								</div>
+							</div>
+							<div class="swiper-slide glcpit">
+								<img src="https://www.orico.com.cn/uploads/product/2539U3/2539U3-L1.jpg" class="glimg" />
+								<div class="glinfo">
+									<div class="t1">2.5英寸USB3.0三防硬盘盒</div>
+									<div class="t2"> ORICO-2539U3</div>
+								</div>
+							</div>
+						</div>
+						<!-- 如果需要导航按钮 -->
+						<div class="swiper-button-prev"></div>
+						<div class="swiper-button-next"></div>
+					</div>
+				</div>
         <!-- 弹框-->
         <div id="form_modal" class="XJmodal">
             <div class="XJmodal-content">
@@ -218,6 +257,13 @@
             </div>
         </div>
     </div>
+    <!-- 点击主图放大图片观看 -->
+    <div class="enlarge-img">
+      <div class="scrollbutton_01 smallImgUp"></div>
+      <img src=""/>
+      <div class="scrollbutton_01 smallImgDown"></div>
+      <div class="close"><span>X</span></div>
+    </div>
 </div>
 {/block}
 {block name="script"}
@@ -293,6 +339,26 @@
                 }, 500);
             }
         });
+         /*图片放大效果*/
+        $(".bigImg").click(function () {
+          $(".enlarge-img").show();
+        });
+        $(".enlarge-img .close").click(function () {
+          $(".enlarge-img").hide();
+        });
+        //相关产品
+        var mySwiper = new Swiper('.glcpswiper', {
+          // 配置选项
+          slidesPerView: 3,
+          spaceBetween: 30,
+          slidesPerGroup: 3,
+          loop: true,
+          loopFillGroupWithBlank: true,
+          navigation: {
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev',
+          },
+        });
     });
 </script>
 {/block}

public/static/index/css/index.css

@@ -739,24 +739,12 @@
 .orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer span {
   font-weight: bold;
 }
-.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .time1 {
+.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .time {
   position: absolute;
   top: 3.4375rem;
-  left: 0.2%;
-  height: 2px;
-}
-.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .time2 {
-  position: absolute;
-  top: 3.4375rem;
-  left: 25.3%;
-  height: 2px;
-}
-.orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .time3 {
-  position: absolute;
-  top: 3.4375rem;
-  left: 51%;
   height: 2px;
 }
+
 .orico_Page_index
   .pageMain
   .brandStory

public/static/index/css/product_detail.css

@@ -587,3 +587,71 @@
   right: 0px;
   margin-top: -24.5px;
 }
+.orico_Page_prdetail .glcpmain {
+	width: 100%;
+	background: #fff;
+	border-top: 1px solid rgba(0, 0, 0, 0.1);
+	padding: 53px 0;
+	position: relative;
+}
+.orico_Page_prdetail .glcpmain .glcpswiper {
+	width: 65%;
+	margin:  0 auto;
+	overflow: hidden;
+	position: relative;
+	padding: 0 50px;
+}
+.orico_Page_prdetail .glcpmain  .swiper-button-next, .orico_Page_prdetail .glcpmain  .swiper-button-prev{
+	color: #D0CECD !important;
+}
+.orico_Page_prdetail .glcpmain .glcptitle {
+	padding-bottom: 1em;
+	font-weight: 600;
+	font-size: 1.5em;
+	color: #333;
+	text-align: center;
+	margin-bottom: 1.6vw;
+}
+
+.orico_Page_prdetail .glcpmain  .glcpit {
+	display: flex;
+	flex-direction: row;
+}
+
+.orico_Page_prdetail .glcpmain  .glcpit .glimg {
+	float: left;
+	width: 26%;
+	margin-left: 4%;
+	margin-right: 4%;
+}
+
+.orico_Page_prdetail .glcpmain  .glcpit .glinfo {
+	display: flex;
+	flex-direction: column;
+}
+
+.orico_Page_prdetail .glcpmain  .glcpit .glinfo .t1 {
+	font-size: 14px;
+	color: #333;
+	text-align: left;
+	margin-top: 0.5vw;
+	line-height: 1.2em;
+}
+
+.orico_Page_prdetail .glcpmain  .glcpit .glinfo .t2 {
+	font-size: 12px;
+	color: #666;
+	text-align: left;
+	margin-top: 5px;
+}
+.orico_Page_prdetail .glcpmain .glcpswiper .swiper-slide{
+	width: 30%;
+}
+.orico_Page_prdetail  .swiper-button-next:after, .orico_Page_prdetail  .swiper-rtl .swiper-button-prev:after{
+	font-size: 34px;
+	font-weight: 400;
+}
+.orico_Page_prdetail  .swiper-button-prev:after, .orico_Page_prdetail  .swiper-rtl .swiper-button-next:after{
+	font-size: 34px;
+	font-weight: 400;
+}

public/static/index/css/topic_nas_download.css

@@ -93,7 +93,6 @@
 .narswljshow {
   display: none;
 }
-
 .narssben-us .nDtopIt2 .nDitImg {
   width: 291px !important;
   display: flex;

public/static/index/css/topic_nas_header.css

@@ -54,6 +54,6 @@
 }
 
 .narsPage-head .headcenter .logico {
-    width: 12.375rem;
+    width: 13.375rem;
-    height: 3.875rem;
+    height: 2.875rem;
 }

public/static/index/js/large.js

@@ -16,7 +16,7 @@ $(document).ready(function () {
       "marginTop": -curIndex * interval + "px"
     }, 600);
     //获取当前指定的图片属性
-    var midImg = $("#imageMenu li").eq(curIndex).find('img').attr('src');
+    var midImg = $("#imageMenu li").eq(curIndex).find('img').attr('data-url');
     //切换图片
     $("#midimg").attr('src', midImg);
     $(".enlarge-img").find("img").attr('src', midImg);
@@ -36,7 +36,7 @@ $(document).ready(function () {
       "marginTop": -curIndex * interval + "px"
     }, 600);
     //获取当前指定的图片属性
-    var midImg = $("#imageMenu li").eq(curIndex).find('img').attr('src');
+    var midImg = $("#imageMenu li").eq(curIndex).find('img').attr('data-url');
     //切换图片
     $("#midimg").attr('src', midImg);
     $(".enlarge-img").find("img").attr('src', midImg);
@@ -88,21 +88,21 @@ $(document).ready(function () {
   var midChangeHandler = null;
   $("#imageMenu li img").bind("click", function () {
     if ($(this).attr("id") != "onlickImg") {
-      midChange($(this).attr("src"));
+      midChange($(this).attr("data-url"));
       $("#imageMenu li").removeAttr("id");
       //$(this).parent().attr("id", "onlickImg");
     }
   }).bind("mouseover", function () {
     if ($(this).attr("id") != "onlickImg") {
       window.clearTimeout(midChangeHandler);
-      midChange($(this).attr("src"));
+      midChange($(this).attr("data-url"));
       // $(this).css({ "border": "1px solid #990000" });
     }
   }).bind("mouseout", function () {
     if ($(this).attr("id") != "onlickImg") {
       $(this).removeAttr("style");
       midChangeHandler = window.setTimeout(function () {
-        midChange($("#onlickImg img").attr("src"));
+        midChange($("#onlickImg img").attr("data-url"));
       }, 1000);
     }
   });