diff --git a/app/index/view/index/index.html b/app/index/view/index/index.html index 62f1a212..a216f72d 100644 --- a/app/index/view/index/index.html +++ b/app/index/view/index/index.html @@ -168,7 +168,7 @@
{volist name="brand_story" id="story" key="k"} - {$story.year} + {$story.year} {/volist}
@@ -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(); // 监听视频的加载事件 diff --git a/app/index/view/product/detail.html b/app/index/view/product/detail.html index 40340301..1825295a 100644 --- a/app/index/view/product/detail.html +++ b/app/index/view/product/detail.html @@ -144,6 +144,45 @@
{/notempty} + +
@@ -218,6 +257,13 @@
+ +
+
+ +
+
X
+
{/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', + }, + }); }); {/block} \ No newline at end of file diff --git a/public/static/index/css/index.css b/public/static/index/css/index.css index d99bb12b..8ea70219 100755 --- a/public/static/index/css/index.css +++ b/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 diff --git a/public/static/index/css/product_detail.css b/public/static/index/css/product_detail.css index b84fb16c..ec95c734 100755 --- a/public/static/index/css/product_detail.css +++ b/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; +} \ No newline at end of file diff --git a/public/static/index/css/topic_nas_download.css b/public/static/index/css/topic_nas_download.css index 5cef18da..7e7bce86 100755 --- a/public/static/index/css/topic_nas_download.css +++ b/public/static/index/css/topic_nas_download.css @@ -93,7 +93,6 @@ .narswljshow { display: none; } - .narssben-us .nDtopIt2 .nDitImg { width: 291px !important; display: flex; @@ -101,7 +100,7 @@ } .narssben-us .nDtopIt2 .nDitImg img{ width:70px !important; - height:70px !important; + height:70px!important; } .narssben-us .nDtopIt2 .nDitImg .dwbt { padding: 6px 38px; diff --git a/public/static/index/css/topic_nas_header.css b/public/static/index/css/topic_nas_header.css index 417630d6..15de624b 100644 --- a/public/static/index/css/topic_nas_header.css +++ b/public/static/index/css/topic_nas_header.css @@ -54,6 +54,6 @@ } .narsPage-head .headcenter .logico { - width: 12.375rem; - height: 3.875rem; + width: 13.375rem; + height: 2.875rem; } \ No newline at end of file diff --git a/public/static/index/js/large.js b/public/static/index/js/large.js index d1b3c66e..5b1deeba 100644 --- a/public/static/index/js/large.js +++ b/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); } });