style:bug样式修改

This commit is contained in:
迷和油
2025-06-07 14:32:56 +08:00
parent c40b4ea632
commit 79d4c4976b
8 changed files with 236 additions and 134 deletions

View File

@@ -1,139 +1,170 @@
{extend name="public/base" /} {extend name="public/base" /}
{block name="title"} {block name="title"}
{notempty name="detail.seo_title"}<title>{$detail.seo_title}</title>{else /}{__BLOCK__}{/notempty} {notempty name="detail.seo_title"}<title>{$detail.seo_title}</title>{else /}{__BLOCK__}{/notempty}
{/block} {/block}
{block name="seo"} {block name="seo"}
{notempty name="detail.seo_keywords"} {notempty name="detail.seo_keywords"}
<meta name="keywords" content="{$detail.seo_keywords}" /> <meta name="keywords" content="{$detail.seo_keywords}" />
<meta name="description" content="{$detail.seo_desc}" /> <meta name="description" content="{$detail.seo_desc}" />
{else /} {else /}
{__BLOCK__} {__BLOCK__}
{/notempty} {/notempty}
{/block} {/block}
{block name="style"} {block name="style"}
<link rel="stylesheet" href="__CSS__/article_detail.css"> <link rel="stylesheet" href="__CSS__/article_detail.css">
{/block} {/block}
{block name="main"} {block name="main"}
<div class="orico_Page_articleDetail"> <div class="orico_Page_articleDetail">
<!--内容 --> <!--内容 -->
<div class="articleDetailMain"> <div class="articleDetailMain">
<div class="atmleft"> <div class="atmleft">
<div class="blog_title"> <div class="ct">
<h2>{$detail.title}</h2> <div class="blog_title">
<p>{$detail.desc}</p> <h2>{$detail.title}</h2>
</div> <p>{$detail.desc}</p>
<!-- 文本渲染-->
<div class="blog_content">{$detail.content|raw}</div>
</div> </div>
<div class="atmright"> <!-- 文本渲染-->
{notempty name="share_config"} <div class="blog_content">{$detail.content|raw}</div>
<div class="blog_share"> </div>
<h3>{:lang_i18n('分享')}</h3> <!-- 评论只显示前面五条--->
<div class="share_list"> <div class="plmain">
{volist name="share_config" id="sc"} <div class="pl">
<a class="atdit" {if condition="!empty($sc.is_blank) && $sc.is_blank.value == 1"}target="_blank"{/if} {notempty name="sc.url.value"}href="{$sc.url.value}"{/notempty}> <span class="titlepp">评论</span>
<img src="{$sc.image.value}" /> <div class="plit">
{eq name=":array_key_exists('triggered_qrcode', $sc)" value="true"} <span class="name">张三:</span>
<div class="triggered_qrcode"> <p>12sdfksdljfksdljdksf是看大家分厘卡聖誕節分厘卡聖誕節付款了</p>
<img src="{$sc.triggered_qrcode.value}" /> </div>
</div> <div class="plit">
{/eq} <span class="name">张三:</span>
</a> <p>12sdfksdljfksdljdksf是看大家分厘卡聖誕節分厘卡聖誕節付款了</p>
{/volist} </div>
</div> <div class="plit">
</div> <span class="name">张三:</span>
{/notempty} <p>12sdfksdljfksdljdksf是看大家分厘卡聖誕節分厘卡聖誕節付款了</p>
<div class="repply"> </div>
<h3>{:lang_i18n('留言')}</h3>
<form action="{:url('article/comment', ['id' => $detail.id])}" method="POST" autocomplete="off">
<span>{:lang_i18n('名称')}</span>
<input class="form-control itinp new_name" type="text" name="name" style="text-indent: 10px;">
<span>{:lang_i18n('电子邮箱')}</span>
<input class="form-control itinp new_email" type="email" name="email" style="text-indent: 10px; margin-bottom:0;">
<p style="color: #C6C7C9; font-size: 0.75rem; margin-bottom: 0.625rem;">{:lang_i18n('您的电子邮件地址不会被公开')}</p>
<span>{:lang_i18n('留言内容')}</span>
<textarea class="form-control itinp new_comment" name="content" rows="3" style="text-indent: 10px;width: 98%; margin-top: 0.625rem;margin-bottom: 0.625rem;border: 1px solid #DBDBDB;"></textarea>
<div class="comment_btn" style="color:#ffffff;">{:lang_i18n('提交留言')}</div>
</form>
</div>
</div> </div>
</div>
</div> </div>
{notempty name="$recommends"} <div class="atmright">
<div class="xq"> {notempty name="share_config"}
<!-- 猜您喜欢 --> <div class="blog_share">
<div class="love"> <h3>{:lang_i18n('分享')}</h3>
<div class="love1"> <div class="share_list">
<p class="tt">{:lang_i18n('你可能还喜欢')}</p> {volist name="share_config" id="sc"}
<p><img src="__IMAGES__/1line.png" height="7"></p> <a class="atdit" {if condition="!empty($sc.is_blank) && $sc.is_blank.value == 1" }target="_blank" {/if}
</div> {notempty name="sc.url.value" }href="{$sc.url.value}" {/notempty}> <img src="{$sc.image.value}" />
<ul class="love2"> {eq name=":array_key_exists('triggered_qrcode', $sc)" value="true"}
{volist name="recommends" id="vo"} <div class="triggered_qrcode">
<li> <img src="{$sc.triggered_qrcode.value}" />
<a href="{:url('article/detail', ['id' => $vo.id])}"> </div>
<div class="lvimg"><img src="{$vo.image}"></div> {/eq}
<p class="lvtit">{$vo.title}</p> </a>
</a> {/volist}
</li>
{/volist}
<div class="clear"></div>
</ul>
</div> </div>
</div>
{/notempty}
<div class="repply">
<h3>{:lang_i18n('留言')}</h3>
<form action="{:url('article/comment', ['id' => $detail.id])}" method="POST" autocomplete="off">
<span>{:lang_i18n('名称')}</span>
<input class="form-control itinp new_name" type="text" name="name" style="text-indent: 10px;">
<span>{:lang_i18n('电子邮箱')}</span>
<input class="form-control itinp new_email" type="email" name="email"
style="text-indent: 10px; margin-bottom:0;">
<p style="color: #C6C7C9; font-size: 0.75rem; margin-bottom: 0.625rem;">{:lang_i18n('您的电子邮件地址不会被公开')}</p>
<span>{:lang_i18n('留言内容')}</span>
<textarea class="form-control itinp new_comment" name="content" rows="3"
style="text-indent: 10px;width: 98%; margin-top: 0.625rem;margin-bottom: 0.625rem;border: 1px solid #DBDBDB;"></textarea>
<div class="comment_btn" style="color:#ffffff;">{:lang_i18n('提交留言')}</div>
</form>
</div>
</div> </div>
{/notempty} </div>
{notempty name="$recommends"}
<div class="xq">
<!-- 猜您喜欢 -->
<div class="love">
<div class="love1">
<p class="tt">{:lang_i18n('你可能还喜欢')}</p>
<p><img src="__IMAGES__/1line.png" height="7"></p>
</div>
<ul class="love2">
{volist name="recommends" id="vo"}
<li>
<a href="{:url('article/detail', ['id' => $vo.id])}">
<div class="lvimg"><img src="{$vo.image}"></div>
<p class="lvtit">{$vo.title}</p>
</a>
</li>
{/volist}
<div class="clear"></div>
</ul>
</div>
</div>
{/notempty}
</div> </div>
{/block} {/block}
{block name="script"} {block name="script"}
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function () {
$('.comment_btn').click(function() { $('.comment_btn').click(function () {
var form = $(this).parents('form'); var form = $(this).parents('form');
var form_data = form.serialize(); var form_data = form.serialize();
$.ajax({ $.ajax({
url: form.attr('action'), url: form.attr('action'),
type: 'POST', type: 'POST',
data: form_data, data: form_data,
dataType: 'json', dataType: 'json',
success: function(data) { success: function (data) {
alert(data.msg); alert(data.msg);
if (data.code == 0) { if (data.code == 0) {
window.location.reload(); window.location.reload();
}
}
})
})
// 滚动到猜你喜欢部分,右边提交信息不固定
$(window).scroll(function() {
// 获取元素引用
const blogContent = $('.blog_content');
const rightSidebar = $('.orico_Page_articleDetail .articleDetailMain .atmright');
// 计算 blog_content 底部位置
const contentBottom = blogContent.offset().top + blogContent.outerHeight();
// 计算视口底部位置
const windowBottom = $(window).scrollTop() + $(window).height();
// 当视口底部超过 blog_content 底部时
if (windowBottom >= contentBottom) {
rightSidebar.css('position', 'static'); // 移除固定定位
} else {
rightSidebar.css('position', 'fixed'); // 恢复固定定位
} }
});
})
function shareCustomers(){
// 复制到粘贴板
const input = document.createElement('input')
input.setAttribute('readonly', 'readonly')
let url=window.location.href
input.setAttribute('value', url)
document.body.appendChild(input)
input.select()
if (document.execCommand('copy')) {
document.execCommand('copy')
alert("{:lang_i18n('链接复制成功')}")
} }
document.body.removeChild(input) })
} })
// 滚动到猜你喜欢部分,右边提交信息不固定
// 获取视口高度
// 保存原始样式
const originalAlign = $(".orico_Page_articleDetail .articleDetailMain").css("align-items");
$(document).on("scroll", function () {
const viewportHeight = $(this).height();
// 获取当前滚动距离
const scrollTop = $(this).scrollTop();
$(".xq").each(function () {
const $el = $(this);
const elTop = $el.offset().top;
const elHeight = $el.outerHeight();
// 元素底部距离视口顶部还有 50px 时触发动画
const triggerPosition = scrollTop + viewportHeight;
if (scrollTop > $('.orico_Page_articleDetail').height()-350-900) {
$(".atmright").css("position", "static");
$(".orico_Page_articleDetail .articleDetailMain").css("align-items","flex-end");
} else {
// 还原原始样式
$(".atmright").removeAttr("style"); // 清除自定义样式
$(".orico_Page_articleDetail .articleDetailMain").css("align-items",
originalAlign);
}
});
});
})
function shareCustomers() {
// 复制到粘贴板
const input = document.createElement('input')
input.setAttribute('readonly', 'readonly')
let url = window.location.href
input.setAttribute('value', url)
document.body.appendChild(input)
input.select()
if (document.execCommand('copy')) {
document.execCommand('copy')
alert("{:lang_i18n('链接复制成功')}")
}
document.body.removeChild(input)
}
</script> </script>
{/block} {/block}

View File

@@ -36,6 +36,9 @@
<img src="{$ar.image}" /> <img src="{$ar.image}" />
<h3>{$ar.title}</h3> <h3>{$ar.title}</h3>
<p>{$ar.desc}</p> <p>{$ar.desc}</p>
<!--时间 -->
<p>2025-04-16 18:10:25</p>
</a> </a>
</div> </div>
{/volist} {/volist}

View File

@@ -29,7 +29,9 @@
</a> </a>
{/volist} {/volist}
{/notempty} {/notempty}
<div class="tabit on">{:lang_i18n('视频')}</div> <a>
<div class="tabit on">{:lang_i18n('视频')}</div>
</a>
</div> </div>
<!-- VIDEO 切换 --> <!-- VIDEO 切换 -->
<div class="vidotabs"> <div class="vidotabs">

View File

@@ -50,7 +50,7 @@
</div> </div>
<div class="theit"> <div class="theit">
<div class="bditem bditem1"> <div class="bditem bditem1">
<label class="itlable">{:lang_i18n('您对哪个产品品类感兴趣?')}</label> <label class="itlable">{:lang_i18n('您对哪个产品品类感兴趣?')}<span class="redtag">*</span></label>
<div class="sfbchecks"> <div class="sfbchecks">
<div class="sfbcheckboxlist"> <div class="sfbcheckboxlist">
{notempty name="interested"} {notempty name="interested"}

View File

@@ -56,7 +56,7 @@
{notempty name="nas_video"} {notempty name="nas_video"}
<div class="narsVideo" style="height:auto"> <div class="narsVideo" style="height:auto">
<div class="videoview"> <div class="videoview">
<video class="video" poster="{$nas_video.image}" controls="" autoplay="" loop="" muted=""> <video class="video" poster="{$nas_video.image}" controls="" autoplay="" loop="" muted="" style="max-height:50rem;z-index:9999;width: 100%;object-fit: cover;">
<source type="video/mp4" src="{$nas_video.video}"> <source type="video/mp4" src="{$nas_video.video}">
</video> </video>
</div> </div>

View File

@@ -75,11 +75,10 @@
padding: 2% 1.5rem; padding: 2% 1.5rem;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between;
} }
.orico_Page_category .categoryMain .tabConten .tbmain .Contenitem { .orico_Page_category .categoryMain .tabConten .tbmain .Contenitem {
float: left; float: left;
width: 30.1%; width: 29.9%;
height: auto; height: auto;
margin: 0 0 1.4% 0; margin: 0 0 1.4% 0;
background: #f5f5f5; background: #f5f5f5;
@@ -87,6 +86,10 @@
position: relative; position: relative;
/* min-height: 32rem; */ /* min-height: 32rem; */
overflow: hidden; overflow: hidden;
margin-right: 1.5%;
}
.orico_Page_category .categoryMain .tabConten .tbmain .Contenitem:nth-child(3n){
margin-right: 0
} }
.orico_Page_category .categoryMain .tabConten .tbmain .Contenitem a { .orico_Page_category .categoryMain .tabConten .tbmain .Contenitem a {
color: #000; color: #000;

View File

@@ -15,7 +15,11 @@
margin-top: 2.6rem; margin-top: 2.6rem;
} }
.orico_Page_articleDetail .articleDetailMain .atmleft { .orico_Page_articleDetail .articleDetailMain .atmleft {
display: flex;
flex-direction: column;
width: calc(100% - 1.5rem - 25rem); width: calc(100% - 1.5rem - 25rem);
}
.orico_Page_articleDetail .articleDetailMain .atmleft .ct {
min-height: 650px; min-height: 650px;
background: #ffffff; background: #ffffff;
border: 1px solid #e8e8e8; border: 1px solid #e8e8e8;
@@ -85,22 +89,41 @@
padding: 1.875rem; padding: 1.875rem;
display: flex; display: flex;
} }
.orico_Page_articleDetail .articleDetailMain .atmright .blog_share .share_list .atdit { .orico_Page_articleDetail
.articleDetailMain
.atmright
.blog_share
.share_list
.atdit {
float: left; float: left;
margin-right: 3.125rem; margin-right: 3.125rem;
position: relative; position: relative;
} }
.orico_Page_articleDetail .articleDetailMain .atmright .blog_share .share_list .atdit img { .orico_Page_articleDetail
.articleDetailMain
.atmright
.blog_share
.share_list
.atdit
img {
margin: 0 auto; margin: 0 auto;
display: block; display: block;
} }
.orico_Page_articleDetail .articleDetailMain .atmright .atdit .triggered_qrcode { .orico_Page_articleDetail
.articleDetailMain
.atmright
.atdit
.triggered_qrcode {
display: none; display: none;
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
.orico_Page_articleDetail .articleDetailMain .atmright .atdit:hover .triggered_qrcode { .orico_Page_articleDetail
.articleDetailMain
.atmright
.atdit:hover
.triggered_qrcode {
display: block; display: block;
} }
.orico_Page_articleDetail .articleDetailMain .atmright .repply { .orico_Page_articleDetail .articleDetailMain .atmright .repply {
@@ -220,3 +243,39 @@
-webkit-transition: all 0.2s linear; -webkit-transition: all 0.2s linear;
transform: scale3d(1.2, 1.2, 1); transform: scale3d(1.2, 1.2, 1);
} }
.orico_Page_articleDetail .pl {
background: #fff;
padding: 2%;
}
.orico_Page_articleDetail .plmain {
margin-right: 1.25rem;
margin-top: 2%;
}
.orico_Page_articleDetail .plmain .titlepp {
font-size: 1.4em;
color: #101010;
font-weight: bold;
margin-bottom: 0.9375rem;
display: flex;
}
.orico_Page_articleDetail .plit {
margin: 10px 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
border-bottom: 1px solid #e8e8e8;
padding: 8px;
margin-bottom: 0.3125rem;
}
.orico_Page_articleDetail .plit:last-child {
border: none;
}
.orico_Page_articleDetail .plit .name {
color: #004bfa;
padding-right: 0.625rem;
}

View File

@@ -76,6 +76,7 @@
margin-top: 4rem; margin-top: 4rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap;
} }
.orico_Page_download .downloadMain .contact_c .tab a{ .orico_Page_download .downloadMain .contact_c .tab a{
width:32% width:32%
@@ -201,6 +202,7 @@
justify-content: flex-start; justify-content: flex-start;
padding-left: 40px; padding-left: 40px;
padding-right: 40px; padding-right: 40px;
flex-wrap: wrap;
} }
.orico_Page_download .downloadMain .contact_c .vidotabs .hd ul li { .orico_Page_download .downloadMain .contact_c .vidotabs .hd ul li {
margin-right: 80px; margin-right: 80px;
@@ -224,27 +226,29 @@
height: auto; height: auto;
} }
.orico_Page_download .downloadMain .contact_c .vidotabs .bdconten ul { .orico_Page_download .downloadMain .contact_c .vidotabs .bdconten ul {
margin: 0;
padding: 0;
display: flex;
justify-content: flex-start;
}
.orico_Page_download .downloadMain .contact_c .vidotabs .bdconten .video_hotul {
display: flex; display: flex;
align-items: inherit;
flex-wrap: wrap;
width: 100%;
justify-content: space-between; justify-content: space-between;
flex-direction: row; flex-direction: row;
margin-bottom: 1.5%;
}
.orico_Page_download .downloadMain .contact_c .vidotabs .bdconten .video_hotul {
width:49.2%
} }
.orico_Page_download .downloadMain .contact_c .vidotabs .bdconten .video_hotul dd { .orico_Page_download .downloadMain .contact_c .vidotabs .bdconten .video_hotul dd {
margin-right: 24px;
width: 671px;
margin-bottom: 34px;
background-color: #fff; background-color: #fff;
border-radius: 24px; border-radius: 24px;
overflow: hidden; overflow: hidden;
} }
.orico_Page_download .downloadMain .contact_c .vidotabs .bdconten .video_hotul:last-child dd{
margin-right: 0;
}
.orico_Page_download .downloadMain .contact_c .vidotabs .bdconten .video_hotul dd video { .orico_Page_download .downloadMain .contact_c .vidotabs .bdconten .video_hotul dd video {
width: 100%; width: 100%;
display: block; display: block;
max-height:390px;
} }
.orico_Page_download .downloadMain .contact_c .vidotabs .bdconten .video_hotul dd .htit { .orico_Page_download .downloadMain .contact_c .vidotabs .bdconten .video_hotul dd .htit {
padding-left: 56px; padding-left: 56px;