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

style:关联产品样式不从

Browse Source
This commit is contained in:
杨丹华
2025-05-28 11:45:09 +08:00
parent 0ba655692c
commit 5faabaa05f
3 changed files with 59 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
app/index/view/mobile/product/__CSS__/product_detail.css Normal file
View File

26
app/index/view/mobile/product/detail.html
View File

@@ -110,7 +110,16 @@
</ul> </ul>
</div> </div>
<!-- 产品图片--> <!-- 产品图片-->
<div class="goods_des img-responsives" id="goods_details_Content1">{$product.detail|raw}</div> <div class="goods_des img-responsives" id="description-tab">{$product.detail|raw}</div>
<!-- 关联产品-->
<div class="glcplist" id="related-tab" style="display: none;">
<div class="glcpitem" >
<img src="indeximg/i560-800-1.png" src="glcpimg" />
<span class="glt1" style="margin-top: 0.68rem;color: #333;font-size: 0.58rem;">98系列
多盘位DAS桌面阵列存储系统</span>
<span class="glt2">ORICO-9858RU3</span>
</div>
</div>
<!-- 弹窗--> <!-- 弹窗-->
<div class="marsk-container-detail"> <div class="marsk-container-detail">
<div class="popup-quick"> <div class="popup-quick">
@@ -196,7 +205,20 @@
$('.business-close').click(function() { $('.business-close').click(function() {
$('.marsk-container-detail').hide() $('.marsk-container-detail').hide()
}) })
// 产品描述和关联产品切换
$('.cpa li').on('click', function() {
$(this).siblings().removeClass('active');
$(this).addClass('active');
const targetTab = $(this).data('tab');
$('.tab-pane').hide();
if (targetTab === 'description') {
$('#description-tab').show();
$('#related-tab').hide();
} else if (targetTab === 'related') {
$('#related-tab').show();
$('#description-tab').hide();
}
});
// 根据颜色切换图册 // 根据颜色切换图册
$('.attr_type').find('.attr_value').click(function() { $('.attr_type').find('.attr_value').click(function() {
var index = $(this).data('index'); var index = $(this).data('index');

36
public/static/index/mobile/css/style.css
View File

@@ -1484,13 +1484,18 @@ video img {
margin-top: 0rem; margin-top: 0rem;
} }
.product_list_title .view_all { .product_list_title .view_all {
width: 38%; /* width: 38%; */
float: right; float: right;
text-align: right; text-align: right;
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: -3%;
} }
.product_list_title .icon-Double-Arrow { .product_list_title .icon-Double-Arrow {
margin-left: 0.15rem; margin-left: 0.15rem;
display: inline-block; display: inline-block;
mar
} }
/*产品列表*/ /*产品列表*/
@@ -1694,6 +1699,8 @@ video img {
} }
.goods_details .cpa { .goods_details .cpa {
text-align: center; text-align: center;
display: flex;
justify-content: center;
} }
.goods_details .cpa li { .goods_details .cpa li {
display: inline-block; display: inline-block;
@@ -1745,6 +1752,33 @@ video img {
z-index: 999; z-index: 999;
max-width: 750px; max-width: 750px;
} }
.glcplist{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
padding: 3%;
}
.glcplist .glcpitem{
width: 44.5%;
background: #fff;
padding: 2%;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;margin-bottom: 3%;
}
.glcplist .glcpitem .glt1{
margin-top: 0.68rem;
color: #333;
font-size: 0.58rem;
}
.glcplist .glcpitem .glt2{
font-size: 0.43rem;
margin-bottom: 0.84rem;
margin-top: 0.35rem;
color: #666;
}
/*关联产品*/ /*关联产品*/
.goods_Related { .goods_Related {
padding: 0.85rem 0 1.25rem; padding: 0.85rem 0 1.25rem;