jsasg/orico-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

Merge branch 'cssupdate' into dev

Browse Source
This commit is contained in:
杨丹华
2025-05-16 16:44:54 +08:00
parent c6450874c3 602456add9
commit 1d7c1609ec
8 changed files with 178 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
app/index/view/index/index.html
View File

@@ -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();
// 监听视频的加载事件

66
app/index/view/product/detail.html
View File

@@ -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}

1
public/static/index/css/brand.css
View File

@@ -67,6 +67,7 @@
.orico_Page_brand .brandMain .our_brand_con .our_brand_bg .vtext .right img {
margin: 0 auto;
margin-left: 10%;
width:100%;
}
.orico_Page_brand .brandMain .dis_bril_bg {
background: #f2f2f2;

17
public/static/index/css/index.css
View File

@@ -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
@@ -1115,7 +1103,6 @@
}
.orico_Page_index .pageMain .oricofixd-info .oficlose .close-btn {
font-size: 1.875rem;
margin-right: 3.125rem;
color: white;
cursor: pointer;
float: right;

68
public/static/index/css/product_detail.css
View File

@@ -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;
}

1
public/static/index/css/topic_nas_download.css
View File

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

4
public/static/index/css/topic_nas_header.css
View File

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

10
public/static/index/js/large.js
View File

@@ -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);
}
});