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

style:修改首页，产品详情，新品，nasr首页样式

Browse Source 
refactor：重构了产品详情的图片预览功能，coyp了一个页面
add：新增了large.js这个是产品详情图片预览相关的
This commit is contained in:
迷和油
2025-05-10 17:33:35 +08:00
parent 1d8055ef55
commit 087c49e03a
21 changed files with 860 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
app/index/view/product/newpro.html
View File

@@ -4,48 +4,58 @@
{/block}
{block name="main"}
<div class="orico_Page_newproducts">
<!-- 新品-->
<!-- 主打产品banner轮播 -->
<div class="opdBanner">
{volist name="focus_image" id="fo"}
<a {notempty name="fo.link"}href="{$fo.link}"{/notempty}><img src="{$fo.image}" class="opdbannerImg" /></a>
{/volist}
</div>
<!-- 新品-->
<!-- 主打产品banner轮播 -->
<div class="opdBanner">
{volist name="focus_image" id="fo"}
<a {notempty name="fo.link" }href="{$fo.link}" {/notempty}><img src="{$fo.image}" class="opdbannerImg" /></a>
{/volist}
</div>
<div class="oricoNewPrMain">
{volist name="newpros" id="vo"}
<div class="oricoNewPrMain">
<h1 class="ori-pd-title">{$vo.category.name}</h1>
<div class="ori-pd-list">
{volist name="vo.products" id="pro"}
<a class="oripditem" href="{:url('product/detail', ['id' => $pro.id])}">
<!-- <div class="oNpicoNEW">New</div> -->
<img src="{$pro.cover_image}" class="prdimg prdimg-show" />
<div class="prdName">{$pro.name}</div>
<div class="prddec">{$pro.spu}</div>
</a>
{/volist}
</div>
<div class="cat">
<h1 class="ori-pd-title">
<div class="catname">{$vo.category.name}</div>
<a class="catmore">
<span class="tmore">View all</span>
<img src="/static/index/images/more.png" class="catmoreImg" />
</a>
</h1>
<div class="ori-pd-list">
{volist name="vo.products" id="pro"}
<a class="oripditem" href="{:url('product/detail', ['id' => $pro.id])}">
<!-- <div class="oNpicoNEW">New</div> -->
<img src="{$pro.cover_image}" class="prdimg prdimg-show" />
<div class="prdName">{$pro.name}</div>
<div class="prddec">{$pro.spu}</div>
<div class="newcp">New</div>
</a>
{/volist}
</div>
</div>
{/volist}
</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);
});
$(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);
});
</script>
{/block}