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

Compare commits

base: jsasg:ce5d0244c080977e4a3dd7c8bd16a3015ef7a632
Branches Tags
jsasg:master jsasg:dev jsasg:font jsasg:ozq-dev jsasg:cssupdate jsasg:qiniu jsasg:receive_sync jsasg:dev-bak
jsasg:v1.2.0 jsasg:三级分类 jsasg:v1.0.0
...
compare: jsasg:1e0565cdb6ec3a025f3bd78ba7654f2007135970
Branches Tags
jsasg:dev jsasg:master jsasg:font jsasg:ozq-dev jsasg:cssupdate jsasg:qiniu jsasg:receive_sync jsasg:dev-bak
jsasg:v1.2.0 jsasg:三级分类 jsasg:v1.0.0

6 Commits
ce5d0244c0 ... 1e0565cdb6

Author SHA1 Message Date
杨丹华
1e0565cdb6 Merge branch 'cssupdate' into dev 2025-05-16 16:44:54 +08:00
杨丹华
0a0a20ebf9 Merge branch 'dev' of https://gitea.f2b211.com/jsasg/orico-official-website into dev 2025-05-16 16:44:28 +08:00
杨丹华
b83a5c665c 产品详情页添加关联产品轮播；点击图册显示大图的问题，还有点击大图可以弹框观看 2025-05-16 16:42:30 +08:00
杨丹华
306109422f Merge branch 'dev' into cssupdate 2025-05-16 10:03:33 +08:00
杨丹华
cd465f0024 stlye:样式修改 2025-05-16 10:01:53 +08:00
jsasg
6bdd6c02a9 refactor: 产品分类 2025-05-16 09:58:33 +08:00
10 changed files with 283 additions and 112 deletions
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();
// 监听视频的加载事件

71
app/index/view/product/category.bak.html Normal file
View File

@@ -0,0 +1,71 @@
{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" href="__CSS__/category.css" type="text/css" />
{/block}
{block name="main"}
<div class="orico_Page_products">
{notempty name="focus_image"}
<div class="focus_image">
{volist name="focus_image" id="fimg"}
<a {notempty name="fimg.link"}href="{$fimg.link}"{/notempty}><img src="{$fimg.image}" alt="" /></a>
{/volist}
</div>
{/notempty}
<!-- 首页主题内容 -->
<div class="pageMain">
{notempty name="categorys_data"}
{volist name="categorys_data" id="vo"}
<div class="ori-pd-title">
<span>{$vo.name}</span>
{eq name="vo.level" value="2"}
<a href="{:url('product/category', ['id' => $vo.id])}">查看更多</a>
{/eq}
</div>
{notempty name="vo.products"}
<div class="ori-pd-list">
{volist name="vo.products" id="vp"}
<a class="oripditem" href="{:url('product/detail', ['id' => $vp.id])}">
<div>
{volist name="vp.sku" id="vs" key="vs_idx"}
<img src="{$vs.main_image}" id="sku_image_{$vs.id}" class="prdimg {eq name='vs_idx' value='1'}prdimg-show{/eq}" />
{/volist}
</div>
<div class="prdName">{$vp.name}</div>
<div class="prddec">{$vp.spu}</div>
{notempty name="vp.colors"}
<div class="prd-colors">
{volist name="vp.colors" id="vc" key="vc_idx"}
<div class="prdolorit {eq name='vc_idx' value='1'}on{/eq}" data-sku_id="{$vc.sku_id}">
{assign name="color_type" value=":rgb_or_image($vc.attr_value)" /}
{eq name="color_type" value="IMAGE"}
<img src="{$vc.attr_value}" />
{elseif condition="$color_type == 'RGB'" /}
<span class="rgb_hex" {:style(['background-color'=>$vc.attr_value])}></span>
{/eq}
</div>
{/volist}
</div>
{/notempty}
</a>
{/volist}
</div>
{/notempty}
{/volist}
{/notempty}
</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
$(function () {
$('.prd-colors .prdolorit').click(function(event) {
event.stopPropagation();
event.preventDefault();
var sku_id = $(this).data('sku_id');
$('#sku_image_' + sku_id).addClass('prdimg-show').siblings().removeClass('prdimg-show');
$(this).addClass('on').siblings().removeClass('on');
});
})
</script>
{/block}

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}

119
app/index/view/product/subcategory.html
View File

@@ -1,86 +1,35 @@
{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" href="__CSS__/product_subcategory.css" type="text/css" />
{/block}
{block name="main"}
<div class="orico_Page_subcategory">
{notempty name="focus_image"}
<div class="opdBanner">
{volist name="focus_image" id="fi"}
<a {notempty name="fi.link"}href="{$fi.link}"{/notempty}>
<img src="{$fi.image}" alt="" class="opdbannerImg" />
</a>
{/volist}
</div>
{/notempty}
<!-- 首页主题内容 -->
<div class="pageMain">
{notempty name="categorys_data"}
{volist name="categorys_data" id="vo"}
<div class="ori-pd-title">
<span>{$vo.name}</span>
</div>
{notempty name="vo.products"}
<div class="ori-pd-list">
{volist name="vo.products" id="vp"}
<a class="oripditem" href="{:url('product/detail', ['id' => $vp.id])}">
<div>
{volist name="vp.sku" id="vs" key="vs_idx"}
<img src="{$vs.main_image}" id="sku_image_{$vs.id}" class="prdimg {eq name='vs_idx' value='1'}prdimg-show{/eq}" />
{/volist}
</div>
<div class="prdName">{$vp.name}</div>
<div class="prddec">{$vp.spu}</div>
{notempty name="vp.colors"}
<div class="prd-colors">
{volist name="vp.colors" id="vc" key="vc_idx"}
<div class="prdolorit {eq name='vc_idx' value='1'}on{/eq}" data-sku_id="{$vc.sku_id}">
{assign name="color_type" value=":rgb_or_image($vc.attr_value)" /}
{eq name="color_type" value="IMAGE"}
<img src="{$vc.attr_value}" />
{elseif condition="$color_type == 'RGB'" /}
<span class="rgb_hex" {:style(['background-color'=>$vc.attr_value])}></span>
{/eq}
</div>
{/volist}
</div>
{/notempty}
</a>
{/volist}
</div>
{/notempty}
{/volist}
{/notempty}
</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
$(function () {
// 显示第一张图片
$('.opdbannerImg').eq(0).show();
let currentIndex = 0;
const imgCount = $('.opdbannerImg').length;
setInterval(() => {
// 淡出当前图片
$('.opdbannerImg').eq(currentIndex).fadeTo(10, 0, () => {
// 隐藏当前图片
$('.opdbannerImg').eq(currentIndex).hide();
// 计算下一张图片的索引
currentIndex = (currentIndex + 1) % imgCount;
// 显示并淡入下一张图片
$('.opdbannerImg').eq(currentIndex).show().fadeTo(10, 1);
});
}, 10000);
$('.prd-colors .prdolorit').click(function(event) {
event.stopPropagation();
event.preventDefault();
var sku_id = $(this).data('sku_id');
$('#sku_image_' + sku_id).addClass('prdimg-show').siblings().removeClass('prdimg-show');
$(this).addClass('on').siblings().removeClass('on');
});
})
</script>
{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" href="__CSS__/product_subcategory.css" type="text/css" />
{/block}
{block name="main"}
<div class="orico_Page_subcategory">
<!--公共头部-->
<iframe align="center" width="100%" height="60" src="head.html" frameborder="no" border="0" marginwidth="0"
marginheight="0" scrolling="no"></iframe>
<!-- 这个图片可能有可能没有-->
<img src="/static/index/images/SSD-1920x900-CN.jpg" class="sbbanner">
<!--首页主题内容 -->
<div class="pageMain">
<h1 class="ori-pd-title">Power Strip</h1>
<div class="ori-pd-list">
<a class="oripditem">
<div>
<img src="/static/index/images/prtest.jpg" class="prdimg prdimg-show" />
<img src="/static/index/images/prtest1.jpg" class="prdimg" />
</div>
<div class="prdName">ORICO 5 in 1 Travel Power Strip</div>
<div class="prddec">ORICO-AP3-2A3U</div>
<div class="prd-colors">
<div class="prdolorit on">
<img src="/static/index/images/WH.jpg">
</div>
<div class="prdolorit">
<img src="/static/index/images/BK.jpg">
</div>
</div>
</a>
</div>
</div>
</div>
{/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;
}

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

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