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-10 17:34:08 +08:00
parent 21415856b3 612cdfd8e2
commit 457f7e48d3
21 changed files with 860 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/index/view/product/category.html
View File

@@ -15,12 +15,12 @@
<div class="pageMain">
{notempty name="categorys_data"}
{volist name="categorys_data" id="vo"}
<h1 class="ori-pd-title">
<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}
</h1>
</div>
{notempty name="vo.products"}
<div class="ori-pd-list">
{volist name="vo.products" id="vp"}

308
app/index/view/product/detail copy.html Normal file
View File

@@ -0,0 +1,308 @@
{extend name="public/base" /}
{block name="title"}
{notempty name="product.seo_title"}<title>{$product.seo_title}</title>{else /}{__BLOCK__}{/notempty}
{/block}
{block name="seo"}
{notempty name="product.seo_keywords"}
<meta name="keywords" content="{$product.seo_keywords}" />
<meta name="description" content="{$product.seo_desc}" />
{else/}
{__BLOCK__}
{/notempty}
{/block}
{block name="style"}
<link rel="stylesheet" type="text/css" href="__CSS__/product_detail.css" />
{/block}
{block name="main"}
<div class="orico_Page_prdetail">
<!--产品详情内容 -->
<div class="oriprdetail">
<!--产品路径-->
<div class="product_address">
<a class="pathname" href="/">首页</a>
{volist name="product_categorys" id="ca"}
<div class="arrow"></div>
<a class="pathname" href="{:url('product/category', ['id' => $ca.id])}">{$ca.name}</a>
{/volist}
</div>
<!-- 产品主图切换和参数详情-->
<div class="cp">
<!--左边图片 -->
<div class="cpfl">
<div class="preview">
<div class="smallImg">
<div class="scrollbutton smallImgUp disabled"></div>
<div id="imageMenu">
<ul id="image_list">
<li id="onlickImg" class="on">
<img src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35-C3-2.jpg">
</li>
<li class=""> <img
src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35-C3-PNG.png">
</li>
<li class=""> <img
src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35-C3-SIZE.jpg">
</li>
<li class=""> <img
src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35u3&amp;c3-800-1.jpg">
</li>
<li class=""> <img
src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35u3&amp;c3-800-2.jpg">
</li>
<li class=""> <img
src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35u3&amp;c3-800-3.jpg">
</li>
<li class=""> <img
src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35u3&amp;c3-800-5.jpg">
</li>
<li class=""> <img
src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35u3&amp;c3-800-6.jpg">
</li>
<li class=""> <img
src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35u3&amp;c3-800-4.png">
</li>
</ul>
</div>
<div class="scrollbutton smallImgDown"></div>
</div><!--smallImg end-->
<div id="vertical" class="bigImg">
<img src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35-C3-SIZE.jpg"
id="midimg">
</div><!--bigImg end-->
</div>
</div>
<!-- 右边产品详情 -->
<div class="cprh">
<div class="cpcon">
<p class="ctit1">{$product.name|default=''}</p>
<p>{$product.desc|default=''}</p>
<div class="proTfg">
<ul class="swt-Table">
{volist name="product_params" id="pp"}
<li class="Table-Row">
<div class="ms3 Table-Cell">{$pp.name}</div>
<div class="ms2 Table-Cell"></div>
<div class="ms4 Table-Cell">{$pp.value}</div>
</li>
{/volist}
</ul>
</div>
<!-- 颜色-->
{volist name="product_sku_attrs" id="ps"}
<div class="prcolors">
<div class="dt">{$ps.attr_name}</div>
<ul class="dowebok">
{volist name="ps.attr_values" id="pv" key="k"}
{assign name="attr_value_type" value=":rgb_or_image($pv.attr_value)" /}
<a {eq name='k' value='1' }class="on" {/eq} data-sku_id="{$pv.sku_id}">
{eq name="attr_value_type" value="IMAGE"}
<span class="itemcolor"><img src="{$pv.attr_value}" /></span>
{elseif condition="$attr_value_type == 'RGB'" /}
<span class="itemcolor" {:style(['background-color'=>$pv.attr_value])}></span>
{else /}
<span>{$pv.attr_value}</span>
{/eq}
</a>
{/volist}
</ul>
</div>
{/volist}
</div>
<!-- 按钮-->
<div class="buy">
{volist name="product_purchase_links" id="ppp"}
<a class="thebt bttype1" href="{$ppp.link}">{$ppp.platform_name}</a>
{/volist}
<a class="thebt bttype3" id="open_form_modal">{:lang('product_detail.display_form')}</a>
</div>
</div>
</div>
<!-- 产品介绍详情-->
<div class="oriprInfo">
<div class="titleprinfo">
<a href="#detail">{:lang('product_detail.detail_section_title')}</a>
<span>|</span>
<a href="#related">{:lang('product_detail.related_products')}</a>
</div>
<!-- 富文本渲染-->
<div class="products_des" id="detail">
{$product.detail|default=''|raw}
</div>
</div>
<!-- 相关产品 -->
{notempty name="product_related"}
<div id="related">
<p>{:lang('product_detail.related_products')}</p>
<div>
<ul>
{volist name="product_related" id="related"}
<li>
<a href="{:url('product/detail', ['id' => $related.id])}">
<img src="{$related.cover_img}" alt="{$related.name}" />
<p>{$related.name}</p>
<p>{$related.spu}</p>
</a>
</li>
{/volist}
</ul>
</div>
</div>
{/notempty}
<!-- 弹框-->
<div id="form_modal" class="XJmodal">
<div class="XJmodal-content">
<span class="close">&times;</span>
<h2>{:lang('product_detail.display_form')}</h2>
<form action="" method="post" autocomplete="off">
<div class="tkitem">
<div class="form-group">
<label for="firstName">
<strong style="color: red; margin-right: 0.3125rem;"> * </strong>
{:lang('product_detail.form_name')}</label>
<div>
<input type="text" name="first_name" id="firstName"
placeholder="{:lang('product_detail.form_first_name_placeholder')}" class="detail-w">
<input type="text" name="last_name" id="lastName"
placeholder="{:lang('product_detail.form_last_name_placeholder')}" class="detail-w">
</div>
</div>
<div class="form-group">
<label for="corp">
<strong style="color: red; margin-right: 0.3125rem;"> * </strong>
{:lang('product_detail.form_corp')}
</label>
<input type="text" name="corp_name" id="corp" class="detail-w01">
</div>
</div>
<div class="tkitem">
<div class="form-group">
<label for="email">
<strong style="color: red; margin-right: 0.3125rem;"> * </strong> Email
{:lang('product_detail.form_email')}
</label>
<input type="text" name="email" id="email" class="detail-w01">
</div>
<div class="form-group">
<label for="phone">
<strong style="color: red; margin-right: 0.3125rem;"> * </strong> Phone
{:lang('product_detail.form_phone')}
</label>
<input type="text" name="phone" id="phone" class="detail-w01">
</div>
</div>
<div class="tkitem">
<div class="form-group">
<label for="country">
<strong style="color: red; margin-right: 0.3125rem;"> * </strong>
{:lang('product_detail.form_country')}
</label>
<select name="country_name" id="country">
<option value="">{:lang('product_detail.form_country_placeholder')}</option>
{volist name="country_list" id="country"}
<option value="{$country}">{$country}</option>
{/volist}
</select>
</div>
<div class="form-group">
<label for="industry">
<strong style="color: red; margin-right: 0.3125rem;"> * </strong>
{:lang('product_detail.form_industry')}
</label>
<input type="text" name="industry" id="industry" class="detail-w01">
</div>
</div>
<div class="tkitem">
<div class="form-group" style="width: 100%;margin-right: 0px;">
<label for="message">
<strong style="color: red; margin-right: 0.3125rem;"> * </strong>
{:lang('product_detail.form_inquiry')}
</label>
<textarea name="message" id="message"></textarea>
</div>
</div>
<button type="button" id="send" class="submit-btn">{:lang('product_detail.form_submit')}</button>
</form>
</div>
</div>
</div>
<!-- 点击主图放大图片观看 -->
<div class="enlarge-img">
<div class="scrollbutton_01 smallImgUp"></div>
<img />
<div class="scrollbutton_01 smallImgDown"></div>
<div class="close"><span>x</span></div>
</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
$(document).ready(function () {
// 切换图册
$('.prcolors .dowebok a').click(function () {
// 移除所有 .on 类
$(this).addClass('on').siblings('a').removeClass('on');
// 获取当前点击的元素的 data-sku_id 值
var skuId = $(this).data('sku_id');
// 根据 skuId 显示对应的预览
$('#preview' + skuId).show().siblings('.preview').hide();
})
// 获取模态框和打开按钮以及关闭按钮
var modal = $("#form_modal");
var openBtn = $("#open_form_modal");
var closeBtn = $(".close");
// 打开模态框
openBtn.click(function () {
modal.show();
});
// 关闭模态框
closeBtn.click(function () {
modal.hide();
});
// 当用户点击模态框外部时，关闭模态框
$(window).click(function (event) {
if (event.target === modal[0]) {
modal.hide();
}
});
// 处理表单提交
modal.find("form").submit(function (e) {
e.preventDefault();
var formData = $(this).serialize();
// 这里可以添加代码将formData发送到服务器
// 例如通过AJAX
console.log("提交的数据: " + formData);
// 提交成功后可以选择关闭模态框
modal.hide();
});
// 提交询盘
$('#send').click(function () {
var form = $(this).parents('form');
$.ajax({
url: "{:url('product/inquiry')}",
type: 'POST',
data: form.serialize(),
success: function (r) {
if (r.code == 0) {
form[0].reset(); // 重置表单
modal.hide();
}
alert(r.msg);
},
error: function (e) {
console.error(e);
}
})
});
/*图片放大效果*/
$(".bigImg").click(function () {
$(".enlarge-img").show();
});
$(".enlarge-img .close").click(function () {
$(".enlarge-img").hide();
});
});
</script>
{/block}

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}

4
app/index/view/product/search.html
View File

@@ -13,7 +13,9 @@
<ul class="seul">
<a>
<li class="seitme">
<img src="static/index/images/ORCIO-HSQ-02H-800-220.jpg" class="search-pr-img" />
<div class="imgb">
<img src="static/index/images/ORCIO-HSQ-02H-800-220.jpg" class="search-pr-img" />
</div>
<div class="prInfp">
<div class="txt1"><strong class="redpoint">电脑</strong>显示器支架</div>
<div class="txt2"> ORICO-HSQ-02Q </div>

1
app/index/view/public/base.html
View File

@@ -17,6 +17,7 @@
<script type="text/javascript" src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script type="text/javascript" src="https://unpkg.com/swiper@9.4.1/swiper-bundle.min.js"></script>
<script type="text/javascript" src="/static/index/js/before-after.min.js"></script>
<script type="text/javascript" src="/static/index/js/large.js"></script>
</head>
<body>
{block name="header"}

4
app/index/view/public/header.html
View File

@@ -150,9 +150,9 @@
// 封装一个函数用于处理鼠标悬停显示和隐藏内容
function handleHover ($element, $content) {
$element.mouseenter(function () {
$content.stop(true, true).slideDown(600);
$content.stop(true, true).slideDown(60);
}).mouseleave(function () {
$content.stop(true, true).slideUp(600);
$content.stop(true, true).slideUp(60);
});
}
// 处理第一个导航项

18
public/static/index/css/category.css
View File

@@ -7,6 +7,9 @@
overflow-x: hidden;
background: #f9f9f9;
}
.oricoCont{
background: #f9f9f9;
}
.orico_Page_products .focus_image {
padding-top: 3.75rem;
}
@@ -20,15 +23,17 @@
}
.orico_Page_products .pageMain {
width: 85%;
padding: 50px 0 2.5rem;
padding: 7.5rem 0 2.5rem;
margin: 0 auto;
display: flex;
flex-direction: column;
padding-top: 3.75rem;
}
.orico_Page_products .pageMain .ori-pd-title {
font-size: 1.5em;
color: #101010;
margin-bottom: 1.25rem;
font-weight: 400;
}
.orico_Page_products .pageMain .ori-pd-list {
display: flex;
@@ -62,12 +67,19 @@
}
.orico_Page_products .pageMain .ori-pd-list .oripditem .prdName {
color: #101010;
font-size: 1.125rem;
font-size: 0.875rem;
padding-bottom: 0.625rem;
width:80%;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.orico_Page_products .pageMain .ori-pd-list .oripditem .prddec {
font-size: 1.125rem;
font-size: 0.875rem;
color: #737373;
width:80%;
text-align: center;
}
.orico_Page_products .pageMain .ori-pd-list .oripditem .prd-colors {
width: 92%;

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

@@ -798,8 +798,6 @@
width: 100%;
}
.orico_Page_index .pageMain .oricoDataStatistics .odsmain {
max-width: 120rem;
min-width: 75rem;
justify-content: center;
align-items: center;
flex-direction: row;

3
public/static/index/css/orico_footer.css
View File

@@ -48,8 +48,7 @@
overflow-wrap: anywhere;
}
.orico_footer .fotter .footerMain .foottxtbottom {
padding-left: 10%;
padding-left: 14%;
padding-left: 5%;
display: grid;
padding-top: 8%;
}

11
public/static/index/css/orico_header.css
View File

@@ -160,7 +160,6 @@
align-items: center;
justify-content: center;
padding: 0.5rem 0;
z-index:9999;
}
.header-PC #header .nav2 .navItem .navItemConten1 li {
color: #fff;
@@ -275,7 +274,7 @@
border: 1px solid rgba(0, 0, 0, 0.2);
position: fixed;
right: 2%;
width: 45%;
width: 33%;
top: 5rem;
height: 80%;
overflow-y: auto;
@@ -318,6 +317,9 @@
margin-top: 10%;
margin-left: 1%;
}
.header-PC .searchmodalMian .searchmodalct .popProduct .popmain{
width: 100%;
}
.header-PC .searchmodalMian .searchmodalct .searchhistory .popmain,
.header-PC .searchmodalMian .searchmodalct .popProduct .popmain {
display: flex;
@@ -327,7 +329,7 @@
.header-PC .searchmodalMian .searchmodalct .searchhistory .popmain .popitem,
.header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem {
text-align: center;
margin-top: 10%;
margin-top: 7%;
margin-left: 1%;
display: flex;
flex-direction: column;
@@ -354,11 +356,12 @@
}
.header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem .productName
{
width: 100px;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
font-size:14px
}
.header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem .produc-dec{
font-size: 10px;

2
public/static/index/css/product_category.css
View File

@@ -15,7 +15,7 @@
}
.orico_Page_category .pageMain {
width: 85%;
padding: 50px 0 10px;
padding: 7.5rem 0 10px;
margin: 0 auto;
display: flex;
flex-direction: column;

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

@@ -13,7 +13,7 @@
.orico_Page_prdetail a,
.orico_Page_prdetail div,
.orico_Page_prdetail span {
font-family: "Microsoft YaHei", "Arial", sans-serif;
font-family: 'Microsoft YaHei', 'Arial', sans-serif;
}
.orico_Page_prdetail .oriprdetail {
display: flex;
@@ -89,7 +89,15 @@
height: 5.4375rem;
overflow: hidden;
}
.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .smallImg #imageMenu li img {
.orico_Page_prdetail
.oriprdetail
.cp
.cpfl
.preview
.smallImg
#imageMenu
li
img {
width: 98%;
cursor: pointer;
}
@@ -107,7 +115,13 @@
overflow: hidden;
}
.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgUp,
.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgUp.disabled {
.orico_Page_prdetail
.oriprdetail
.cp
.cpfl
.preview
.bigImg
.smallImgUp.disabled {
background: url(/static/index/images/fl.png) no-repeat;
position: absolute;
z-index: 1;
@@ -117,11 +131,23 @@
left: -2%;
}
.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgUp:hover,
.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgUp.disabled:hover {
.orico_Page_prdetail
.oriprdetail
.cp
.cpfl
.preview
.bigImg
.smallImgUp.disabled:hover {
background: url(/static/index/images/fl1.png) no-repeat;
}
.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgDown,
.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgDown.disabled {
.orico_Page_prdetail
.oriprdetail
.cp
.cpfl
.preview
.bigImg
.smallImgDown.disabled {
background: url(/static/index/images/rh.png) no-repeat;
position: absolute;
z-index: 1;
@@ -129,8 +155,20 @@
top: 50%;
transform: translate(0%, -50%);
}
.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgDown:hover,
.orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg .smallImgDown.disabled:hover {
.orico_Page_prdetail
.oriprdetail
.cp
.cpfl
.preview
.bigImg
.smallImgDown:hover,
.orico_Page_prdetail
.oriprdetail
.cp
.cpfl
.preview
.bigImg
.smallImgDown.disabled:hover {
background: url(/static/index/images/rh1.png) no-repeat;
}
.orico_Page_prdetail .oriprdetail .cp .cprh {
@@ -158,7 +196,14 @@
display: table;
width: 100%;
}
.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .proTfg .swt-Table .Table-Row {
.orico_Page_prdetail
.oriprdetail
.cp
.cprh
.cpcon
.proTfg
.swt-Table
.Table-Row {
display: table-row;
width: 100%;
clear: both;
@@ -166,21 +211,53 @@
font-size: 0.875em;
color: #737373;
}
.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .proTfg .swt-Table .Table-Row .Table-Cell {
.orico_Page_prdetail
.oriprdetail
.cp
.cprh
.cpcon
.proTfg
.swt-Table
.Table-Row
.Table-Cell {
display: table-cell;
margin: 0;
padding: 4px 0;
line-height: 1.4em;
}
.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .proTfg .swt-Table .Table-Row .ms2 {
.orico_Page_prdetail
.oriprdetail
.cp
.cprh
.cpcon
.proTfg
.swt-Table
.Table-Row
.ms2 {
width: 5%;
}
.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .proTfg .swt-Table .Table-Row .ms3 {
.orico_Page_prdetail
.oriprdetail
.cp
.cprh
.cpcon
.proTfg
.swt-Table
.Table-Row
.ms3 {
width: 30%;
color: #333;
font-size: 14px;
}
.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .proTfg .swt-Table .Table-Row .ms4 {
.orico_Page_prdetail
.oriprdetail
.cp
.cprh
.cpcon
.proTfg
.swt-Table
.Table-Row
.ms4 {
width: 65%;
font-size: 14px;
}
@@ -208,7 +285,14 @@
flex-direction: row;
align-items: center;
}
.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .prcolors .dowebok .itemcolor {
.orico_Page_prdetail
.oriprdetail
.cp
.cprh
.cpcon
.prcolors
.dowebok
.itemcolor {
width: 20px;
height: 20px;
float: left;
@@ -218,12 +302,27 @@
border: 1px solid #d4d4d4;
border-radius: 10px;
}
.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .prcolors .dowebok .itemcolor img {
.orico_Page_prdetail
.oriprdetail
.cp
.cprh
.cpcon
.prcolors
.dowebok
.itemcolor
img {
width: 20px;
height: 20px;
border-radius: 10px;
}
.orico_Page_prdetail .oriprdetail .cp .cprh .cpcon .prcolors .dowebok .itemcolor.on {
.orico_Page_prdetail
.oriprdetail
.cp
.cprh
.cpcon
.prcolors
.dowebok
.itemcolor.on {
width: 20px;
height: 20px;
border-radius: 12px;
@@ -276,15 +375,21 @@
display: inline-block;
margin: 0 auto;
font-size: 1rem;
font-weight: bold;
padding-bottom: 1rem;
cursor: pointer;
}
.orico_Page_prdetail .oriprdetail .oriprInfo .titleprinfo a:first-child{
color:#009FDF;
}
.orico_Page_prdetail .oriprdetail .oriprInfo .products_des {
width: 75%;
margin-bottom: 50px;
margin: 0 auto;
}
.orico_Page_prdetail .oriprdetail .oriprInfo .products_des img {
text-align: center;
display: block;
margin: 0 auto;
}
.orico_Page_prdetail .XJmodal {
display: none;
@@ -345,8 +450,8 @@
.orico_Page_prdetail .XJmodal-content .tkitem .form-group .detail-w01 {
width: 90%;
}
.orico_Page_prdetail .XJmodal-content .tkitem .form-group input[type=text],
.orico_Page_prdetail .XJmodal-content .tkitem .form-group input[type=email],
.orico_Page_prdetail .XJmodal-content .tkitem .form-group input[type='text'],
.orico_Page_prdetail .XJmodal-content .tkitem .form-group input[type='email'],
.orico_Page_prdetail .XJmodal-content .tkitem .form-group select,
.orico_Page_prdetail .XJmodal-content .tkitem .form-group textarea {
border: 1px solid #ccc;
@@ -379,7 +484,7 @@
margin-right: 0;
}
.orico_Page_prdetail .XJmodal-content .submit-btn {
background-color: #004CFA;
background-color: #004cfa;
color: white;
padding: 10px 100px;
border: none;
@@ -389,5 +494,96 @@
display: block;
}
.orico_Page_prdetail .XJmodal-content .submit-btn:hover {
background-color: #004CFA;
background-color: #004cfa;
}
.enlarge-img {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 99999;
top: 0;
left: 0;
text-align: center;
display: none;
}
.enlarge-img img {
height: 100vh;
max-width: 100%;
margin: 0 auto;
}
.enlarge-img .close {
position: absolute;
width: 100%;
height: 28px;
z-index: 9;
top: 0px;
color: #fff;
font-size: 0.875em;
cursor: pointer;
text-align: right;
}
.enlarge-img .close span {
display: inline-block;
margin-right: 2%;
font-size: 24px;
height: 40px;
width: 40px;
border: 1px solid #fff;
text-align: center;
line-height: 40px;
border-radius: 20px;
cursor: pointer;
}
.scrollbutton,
.scrollbutton_01 {
width: 53px;
height: 72px;
overflow: hidden;
}
.smallImgUp,
.smallImgUp .disabled,
.smallImgUp:hover,
.smallImgUp .disabled:hover,
.smallImgDown,
.smallImgDown .disabled,
.smallImgDown:hover,
.smallImgDown.disabled:hover {
position: absolute;
z-index: 8;
top: 50%;
cursor: pointer;
transform: translate(0%, -50%);
background-repeat: no-repeat;
}
.scrollbutton_01.smallImgUp,
.scrollbutton_01.smallImgUp.disabled {
background: url(/static/index/images/fl.png);
left: 0px;
}
.scrollbutton_01.smallImgDown,
.scrollbutton_01.smallImgDown.disabled {
background: url(/static/index/images/rh.png);
right: 0px;
}
.scrollbutton.smallImgUp,
.scrollbutton.smallImgUp.disabled {
background: url(/static/index/images/fl.png);
left: 90px;
margin-top: -24.5px;
}
.scrollbutton.smallImgDown,
.scrollbutton.smallImgDown.disabled {
background: url(/static/index/images/rh.png);
right: 0px;
margin-top: -24.5px;
}

57
public/static/index/css/product_newpro.css
View File

@@ -7,11 +7,14 @@
overflow-x: hidden;
background: #f9f9f9;
}
.oricoCont{
background: #f9f9f9;
}
.orico_Page_newproducts p,
.orico_Page_newproducts a,
.orico_Page_newproducts div,
.orico_Page_newproducts span {
font-family: "Microsoft YaHei", "Arial", sans-serif;
font-family: 'Microsoft YaHei', 'Arial', sans-serif;
}
.orico_Page_newproducts .opdBanner {
width: 100%;
@@ -25,21 +28,49 @@
object-fit: cover;
transition: opacity 1s ease-in-out;
}
.orico_Page_newproducts .opdbanner>a:first-child {
.orico_Page_newproducts .opdbanner > a:first-child {
display: block;
}
.orico_Page_newproducts .oricoNewPrMain {
width: 85%;
padding: 50px 0 10px;
padding: 7.5rem 0 10px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.orico_Page_newproducts .oricoNewPrMain .cat {
margin-bottom: 3.75rem;
}
.orico_Page_newproducts .oricoNewPrMain .ori-pd-title {
font-size: 1.5em;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.orico_Page_newproducts .oricoNewPrMain .ori-pd-title .catname {
font-size: 1.5rem;
color: #101010;
margin-bottom: 1.25rem;
}
.orico_Page_newproducts .oricoNewPrMain .ori-pd-title .catmore {
display: flex;
flex-direction: row;
align-items: center;
margin-right: 1%;
}
.orico_Page_newproducts .oricoNewPrMain .ori-pd-title .catmore .tmore {
font-size: 1rem;
color: #444;
font-weight: 500;
}
.orico_Page_newproducts .oricoNewPrMain .ori-pd-title .catmore .catmoreImg {
width: 1.75rem;
height: 1.75rem;
margin-left: 0.5rem;
}
.orico_Page_newproducts .oricoNewPrMain .ori-pd-list {
display: flex;
flex-wrap: wrap; /* 自动换行 */
@@ -87,16 +118,32 @@
color: #444;
font-size: 0.875rem;
padding-bottom: 0.625rem;
width: 100%;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.orico_Page_newproducts .oricoNewPrMain .ori-pd-list .oripditem .prddec {
font-size: 0.875rem;
color: #737373;
}
.orico_Page_newproducts .oricoNewPrMain .ori-pd-list .oripditem .newcp {
width: 72px;
height: 30px;
background: #df2c39;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 30px;
position: absolute;
top: 0px;
left: 50%;
transform: translate(-50%, 0%);
}
.orico_Page_newproducts .oricoNewPrMain .ori-pd-list .oripditem:hover {
box-shadow: 0px 5px 35px rgba(227, 227, 227, 0.75);
transform: translate3d(0, -2px, 0);

15
public/static/index/css/product_search.css
View File

@@ -56,13 +56,19 @@
display: flex;
flex-direction: row;
}
.orico_Page_search .searchMain .seul .seitme .search-pr-img {
float: left;
.orico_Page_search .searchMain .seul .seitme .imgb {
padding: 9px 10px;
border: 1px solid #e7e7e7;
overflow: hidden;
float: left;
width: 140px;
}
.orico_Page_search .searchMain .seul .seitme .imgb .search-pr-img {
width: 100%;
opacity: 1;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.orico_Page_search .searchMain .seul .seitme .prInfp {
display: flex;
flex-direction: column;
@@ -72,6 +78,7 @@
.orico_Page_search .searchMain .seul .seitme .prInfp .txt1 {
font-size: 1.125rem;
color: #333;
padding-bottom: 0.5rem;
}
.orico_Page_search .searchMain .seul .seitme .prInfp .txt2 {
font-size: 0.875rem;
@@ -89,6 +96,10 @@
font-weight: bold;
color: rgb(255, 0, 0);
}
.orico_Page_search .searchMain .seul .seitme:hover .search-pr-img {
-webkit-transform: scale3d(1.2, 1.2, 1);
transform: scale3d(1.2, 1.2, 1);
}
.orico_Page_search .searchMain ::placeholder {
color: #737373;
}

2
public/static/index/css/product_subcategory.css
View File

@@ -12,7 +12,7 @@
}
.orico_Page_subcategory .pageMain {
width: 85%;
padding: 50px 0 10px;
padding: 7.5rem 0 10px;
margin: 0 auto;
display: flex;
flex-direction: column;

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

@@ -60,7 +60,7 @@ button {
}
a {
color: #000;
color: #333;
cursor: pointer;
text-decoration: none;
transition: all 0.2s linear;

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

@@ -10,7 +10,7 @@
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 75rem;
max-width: 75rem;
margin: 0 auto;
}

10
public/static/index/css/topic_nas_index.css
View File

@@ -26,9 +26,11 @@
width: 100%;
position: relative;
overflow: hidden;
height: 56.4375rem;
max-height: 56.4375rem;
}
.narsIndex-banner img{
width: 100%;
}
.narsIndex-banner .mySwiper .swiper-slide {
position: relative;
}
@@ -128,7 +130,7 @@
flex-direction: row;
justify-content: space-between;
height: auto;
min-width: 1024px;
/* min-width: 1024px; */
overflow: hidden;
margin: 0 7.5rem;
}
@@ -436,7 +438,7 @@
}
.nars-wlj .wltitem {
margin: 0 7.5rem;
min-width: 1024px;
/* min-width: 1024px; */
background: #000;
display: flex;
flex-direction: row;

BIN
public/static/index/images/more.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

51
public/static/index/js/headfoot.js
View File

@@ -1,51 +0,0 @@
//加载公共头部和尾部
async function loadHTML(url, targetId) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const html = await response.text();
document.getElementById(targetId).innerHTML = html;
} catch (error) {
console.error('Error loading HTML:', error);
}
}
// 加载头部
loadHTML('head.html', 'header');
// 加载尾部
loadHTML('footer.html', 'footer');
$(document).ready(function() {
// 封装一个函数用于处理鼠标悬停显示和隐藏内容
function handleHover($element, $content) {
$element.mouseenter(function() {
$content.stop(true, true).slideDown(400);
}).mouseleave(function() {
$content.stop(true, true).slideUp(400);
});
}
// 处理第一个导航项
handleHover($('.navItem').eq(0), $('.navItem').eq(0).find('.navItemConten'));
// 鼠标移入navItem_cyleft里面的li标签添加类，移除其他li的类
$('.navItem_cyleft li').mouseenter(function() {
$(this).addClass('it_active').siblings().removeClass('it_active');
});
// 处理第5 - 8个导航项
for (let i = 4; i < 8; i++) {
handleHover($('.navItem').eq(i), $('.navItem').eq(i).find('.navItemConten1'));
}
// 点击搜索
$('#openModalBtn').click(function() {
$('#scmodal').toggle();
});
$('.close-btn').click(function() {
$('#scmodal').hide();
});
// 点击选择国家
$('#countrycheck').click(function() {
$('#top-country').toggle();
});
$('.closecountrybt').click(function() {
$('#top-country').hide();
});
});

184
public/static/index/js/large.js Normal file
View File

@@ -0,0 +1,184 @@
$(document).ready(function () {
// 图片上下滚动
var count = $("#imageMenu li").length; /* 显示 5 个 li标签内容 */
var interval = $("#imageMenu li:first").height();
var curIndex = 0;
if (curIndex > count) curIndex = 0;
//左右箭头切换图片
$('.scrollbutton').click(function () {
if ($(this).hasClass('disabled')) return false;
if ($(this).hasClass('smallImgUp')) --curIndex;
else ++curIndex;
$('.scrollbutton').removeClass('disabled');
if (curIndex == 0) $('.smallImgUp').addClass('disabled');
if (curIndex == count - 1) $('.smallImgDown').addClass('disabled');
$("#imageMenu ul").stop(false, true).animate({
"marginTop": -curIndex * interval + "px"
}, 600);
//获取当前指定的图片属性
var midImg = $("#imageMenu li").eq(curIndex).find('img').attr('src');
//切换图片
$("#midimg").attr('src', midImg);
$(".enlarge-img").find("img").attr('src', midImg);
//小图添加属性
$("#imageMenu li").eq(curIndex).addClass('on').siblings().removeClass("on");
});
//大图左右箭头切换图片
$('.scrollbutton_01').click(function () {
if ($(this).hasClass('disabled')) return false;
if ($(this).hasClass('smallImgUp')) --curIndex;
else ++curIndex;
$('.scrollbutton_01').removeClass('disabled');
if (curIndex == 0) $('.smallImgUp').addClass('disabled');
if (curIndex == count - 1) $('.smallImgDown').addClass('disabled');
//$("#imageMenu ul").stop(false, true).animate({"marginTop" : -curIndex*interval + "px"}, 600);
$("#imageMenu ul").stop(false, true).animate({
"marginTop": -curIndex * interval + "px"
}, 600);
//获取当前指定的图片属性
var midImg = $("#imageMenu li").eq(curIndex).find('img').attr('src');
//切换图片
$("#midimg").attr('src', midImg);
$(".enlarge-img").find("img").attr('src', midImg);
//小图添加属性
$("#imageMenu li").eq(curIndex).addClass('on').siblings().removeClass("on");
});
function isIE() {
return /MSIE|Trident/.test(navigator.userAgent);
}
// 解决 ie6 select框 问题
$.fn.decorateIframe = function (options) {
if (isIE()) {
var opts = $.extend({}, $.fn.decorateIframe.defaults, options);
$(this).each(function () {
var $myThis = $(this);
//创建一个IFRAME
var divIframe = $("<iframe />");
divIframe.attr("id", opts.iframeId);
divIframe.css("position", "absolute");
divIframe.css("display", "none");
divIframe.css("display", "block");
divIframe.css("z-index", opts.iframeZIndex);
divIframe.css("border");
divIframe.css("top", "0");
divIframe.css("left", "0");
if (opts.width == 0) {
divIframe.css("width", $myThis.width() + parseInt($myThis.css("padding")) * 2 +
"px");
}
if (opts.height == 0) {
divIframe.css("height", $myThis.height() + parseInt($myThis.css("padding")) *
2 + "px");
}
divIframe.css("filter", "mask(color=#fff)");
$myThis.append(divIframe);
});
}
}
$.fn.decorateIframe.defaults = {
iframeId: "decorateIframe1",
iframeZIndex: -1,
width: 0,
height: 0
}
//放大镜视窗
$("#bigView").decorateIframe();
//点击到中图
var midChangeHandler = null;
$("#imageMenu li img").bind("click", function () {
if ($(this).attr("id") != "onlickImg") {
midChange($(this).attr("src"));
$("#imageMenu li").removeAttr("id");
//$(this).parent().attr("id", "onlickImg");
}
}).bind("mouseover", function () {
if ($(this).attr("id") != "onlickImg") {
window.clearTimeout(midChangeHandler);
midChange($(this).attr("src"));
// $(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"));
}, 1000);
}
});
//点击中图，切换大图
$("#midimg").bind("click", function () {
$(".enlarge-img").find("img").attr("src", $(this).attr("src"));
});
function midChange(src) {
$("#midimg").attr("src", src).load(function () {
changeViewImg();
});
}
//大视窗看图
function mouseover(e) {
if ($("#winSelector").css("display") == "none") {
$("#winSelector,#bigView").show();
}
$("#winSelector").css(fixedPosition(e));
e.stopPropagation();
}
function mouseOut(e) {
if ($("#winSelector").css("display") != "none") {
$("#winSelector,#bigView").hide();
}
e.stopPropagation();
}
$("#midimg").mouseover(mouseover); //中图事件
$("#midimg,#winSelector").mousemove(mouseover).mouseout(mouseOut); //选择器事件
var $divWidth = $("#winSelector").width(); //选择器宽度
var $divHeight = $("#winSelector").height(); //选择器高度
var $imgWidth = $("#midimg").width(); //中图宽度
var $imgHeight = $("#midimg").height(); //中图高度
var $viewImgWidth = $viewImgHeight = $height = null; //IE加载后才能得到 大图宽度 大图高度 大图视窗高度
function changeViewImg() {
$("#bigView img").attr("src", $("#midimg").attr("src"));
}
changeViewImg();
$("#bigView").scrollLeft(0).scrollTop(0);
function fixedPosition(e) {
if (e == null) {
return;
}
var $imgLeft = $("#midimg").offset().left; //中图左边距
var $imgTop = $("#midimg").offset().top; //中图上边距
X = e.pageX - $imgLeft - $divWidth / 2; //selector顶点坐标 X
Y = e.pageY - $imgTop - $divHeight / 2; //selector顶点坐标 Y
X = X < 0 ? 0 : X;
Y = Y < 0 ? 0 : Y;
X = X + $divWidth > $imgWidth ? $imgWidth - $divWidth : X;
Y = Y + $divHeight > $imgHeight ? $imgHeight - $divHeight : Y;
if ($viewImgWidth == null) {
$viewImgWidth = $("#bigView img").outerWidth();
$viewImgHeight = $("#bigView img").height();
if ($viewImgWidth < 200 || $viewImgHeight < 200) {
$viewImgWidth = $viewImgHeight = 800;
}
$height = $divHeight * $viewImgHeight / $imgHeight;
$("#bigView").width($divWidth * $viewImgWidth / $imgWidth);
$("#bigView").height($height);
}
var scrollX = X * $viewImgWidth / $imgWidth;
var scrollY = Y * $viewImgHeight / $imgHeight;
$("#bigView img").css({
"left": scrollX * -1,
"top": scrollY * -1
});
$("#bigView").css({
"top": 0,
"left": $(".preview").offset().left + $(".preview").width() + 15
});
return {
left: X,
top: Y
};
}
});