Merge branch 'cssupdate' into dev
This commit is contained in:
@@ -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
308
app/index/view/product/detail copy.html
Normal 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&c3-800-1.jpg">
|
||||
</li>
|
||||
<li class=""> <img
|
||||
src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35u3&c3-800-2.jpg">
|
||||
</li>
|
||||
<li class=""> <img
|
||||
src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35u3&c3-800-3.jpg">
|
||||
</li>
|
||||
<li class=""> <img
|
||||
src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35u3&c3-800-5.jpg">
|
||||
</li>
|
||||
<li class=""> <img
|
||||
src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35u3&c3-800-6.jpg">
|
||||
</li>
|
||||
<li class=""> <img
|
||||
src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35u3&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">×</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}
|
||||
@@ -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}
|
||||
@@ -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>
|
||||
|
||||
@@ -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"}
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
}
|
||||
// 处理第一个导航项
|
||||
|
||||
Reference in New Issue
Block a user