From 07606e63b715f5714d1886afbd722dfe3a3fc86c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=BF=B7=E5=92=8C=E6=B2=B9?= <2249412933@qq.oom>
Date: Sat, 7 Jun 2025 14:32:56 +0800
Subject: [PATCH] =?UTF-8?q?style=EF=BC=9Abug=E6=A0=B7=E5=BC=8F=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/index/view/pc/article/detail.html         | 263 ++++++++++--------
 app/index/view/pc/article/index.html          |   3 +
 app/index/view/pc/attachment/video.html       |   4 +-
 app/index/view/pc/contact_us/bulkbuy.html     |   2 +-
 app/index/view/pc/topic_nas/index.html        |   2 +-
 .../static/index/pc/css/article_category.css  |   7 +-
 public/static/index/pc/css/article_detail.css |  67 ++++-
 public/static/index/pc/css/download.css       |  22 +-
 8 files changed, 236 insertions(+), 134 deletions(-)

diff --git a/app/index/view/pc/article/detail.html b/app/index/view/pc/article/detail.html
index 2dba0bff..c4e0b6a5 100644
--- a/app/index/view/pc/article/detail.html
+++ b/app/index/view/pc/article/detail.html
@@ -1,139 +1,170 @@
 {extend name="public/base" /}
 {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 name="seo"}
-    {notempty name="detail.seo_keywords"}
-    <meta name="keywords" content="{$detail.seo_keywords}" />
-    <meta name="description" content="{$detail.seo_desc}" />
-    {else /}
-    {__BLOCK__}
-    {/notempty}
+{notempty name="detail.seo_keywords"}
+<meta name="keywords" content="{$detail.seo_keywords}" />
+<meta name="description" content="{$detail.seo_desc}" />
+{else /}
+{__BLOCK__}
+{/notempty}
 {/block}
 {block name="style"}
 <link rel="stylesheet" href="__CSS__/article_detail.css">
 {/block}
 {block name="main"}
 <div class="orico_Page_articleDetail">
-    <!--内容 -->
-    <div class="articleDetailMain">
-        <div class="atmleft">
-            <div class="blog_title">
-                <h2>{$detail.title}</h2>
-                <p>{$detail.desc}</p>
-            </div>
-            <!-- 文本渲染-->
-            <div class="blog_content">{$detail.content|raw}</div>
+  <!--内容 -->
+  <div class="articleDetailMain">
+    <div class="atmleft">
+      <div class="ct">
+        <div class="blog_title">
+          <h2>{$detail.title}</h2>
+          <p>{$detail.desc}</p>
         </div>
-        <div class="atmright">
-            {notempty name="share_config"}
-            <div class="blog_share">
-                <h3>{:lang_i18n('分享')}</h3>
-                <div class="share_list">
-                    {volist name="share_config" id="sc"}
-                    <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}>
-                        <img src="{$sc.image.value}" />
-                        {eq name=":array_key_exists('triggered_qrcode', $sc)" value="true"}
-                        <div class="triggered_qrcode">
-                            <img src="{$sc.triggered_qrcode.value}" />
-                        </div>
-                        {/eq}
-                    </a>
-                    {/volist}
-                </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 class="blog_content">{$detail.content|raw}</div>
+      </div>
+      <!-- 评论只显示前面五条--->
+      <div class="plmain">
+        <div class="pl">
+          <span class="titlepp">评论</span>
+          <div class="plit">
+            <span class="name">张三:</span>
+            <p>12sdfksdljfksdljdksf是看大家分厘卡聖誕節分厘卡聖誕節付款了</p>
+          </div>
+          <div class="plit">
+            <span class="name">张三:</span>
+            <p>12sdfksdljfksdljdksf是看大家分厘卡聖誕節分厘卡聖誕節付款了</p>
+          </div>
+          <div class="plit">
+            <span class="name">张三:</span>
+            <p>12sdfksdljfksdljdksf是看大家分厘卡聖誕節分厘卡聖誕節付款了</p>
+          </div>
         </div>
+      </div>
+
     </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 class="atmright">
+      {notempty name="share_config"}
+      <div class="blog_share">
+        <h3>{:lang_i18n('分享')}</h3>
+        <div class="share_list">
+          {volist name="share_config" id="sc"}
+          <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}> <img src="{$sc.image.value}" />
+          {eq name=":array_key_exists('triggered_qrcode', $sc)" value="true"}
+          <div class="triggered_qrcode">
+            <img src="{$sc.triggered_qrcode.value}" />
+          </div>
+          {/eq}
+          </a>
+          {/volist}
         </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>
-    {/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>
 {/block}
 {block name="script"}
 <script type="text/javascript">
-    $(document).ready(function() {
-        $('.comment_btn').click(function() {
-            var form = $(this).parents('form');
-            var form_data = form.serialize();
-            $.ajax({
-                url: form.attr('action'),
-                type: 'POST',
-                data: form_data,
-                dataType: 'json',
-                success: function(data) {
-                    alert(data.msg);
-                    if (data.code == 0) {
-                        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'); // 恢复固定定位
+  $(document).ready(function () {
+    $('.comment_btn').click(function () {
+      var form = $(this).parents('form');
+      var form_data = form.serialize();
+      $.ajax({
+        url: form.attr('action'),
+        type: 'POST',
+        data: form_data,
+        dataType: 'json',
+        success: function (data) {
+          alert(data.msg);
+          if (data.code == 0) {
+            window.location.reload();
           }
-      });
-    })
-    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>
 {/block}
\ No newline at end of file
diff --git a/app/index/view/pc/article/index.html b/app/index/view/pc/article/index.html
index 60e5639e..8ce9d440 100644
--- a/app/index/view/pc/article/index.html
+++ b/app/index/view/pc/article/index.html
@@ -36,6 +36,9 @@
                         <img src="{$ar.image}" />
                         <h3>{$ar.title}</h3>
                         <p>{$ar.desc}</p>
+
+                        <!--时间 -->
+                        <p>2025-04-16 18:10:25</p>
                     </a>
                 </div>
                 {/volist}
diff --git a/app/index/view/pc/attachment/video.html b/app/index/view/pc/attachment/video.html
index e03a15e3..7280e907 100644
--- a/app/index/view/pc/attachment/video.html
+++ b/app/index/view/pc/attachment/video.html
@@ -29,7 +29,9 @@
                 </a>
                 {/volist}
                 {/notempty}
-                <div class="tabit on">{:lang_i18n('视频')}</div>
+                <a>
+                  <div class="tabit on">{:lang_i18n('视频')}</div>
+                </a>
             </div>
             <!-- VIDEO 切换 -->
             <div class="vidotabs">
diff --git a/app/index/view/pc/contact_us/bulkbuy.html b/app/index/view/pc/contact_us/bulkbuy.html
index 2cfc09f7..5d7578da 100644
--- a/app/index/view/pc/contact_us/bulkbuy.html
+++ b/app/index/view/pc/contact_us/bulkbuy.html
@@ -50,7 +50,7 @@
                     </div>
                     <div class="theit">
                         <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="sfbcheckboxlist">
                                     {notempty name="interested"}
diff --git a/app/index/view/pc/topic_nas/index.html b/app/index/view/pc/topic_nas/index.html
index c680049a..ca7045bc 100644
--- a/app/index/view/pc/topic_nas/index.html
+++ b/app/index/view/pc/topic_nas/index.html
@@ -56,7 +56,7 @@
         {notempty name="nas_video"}
         <div class="narsVideo" style="height:auto">
             <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}">
                 </video>
             </div>
diff --git a/public/static/index/pc/css/article_category.css b/public/static/index/pc/css/article_category.css
index 9c5e7c27..20b54570 100755
--- a/public/static/index/pc/css/article_category.css
+++ b/public/static/index/pc/css/article_category.css
@@ -75,11 +75,10 @@
   padding: 2% 1.5rem;
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
 }
 .orico_Page_category .categoryMain .tabConten .tbmain .Contenitem {
   float: left;
-  width: 30.1%;
+  width: 29.9%;
   height: auto;
   margin: 0 0 1.4% 0;
   background: #f5f5f5;
@@ -87,6 +86,10 @@
   position: relative;
   /* min-height: 32rem; */
   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 {
   color: #000;
diff --git a/public/static/index/pc/css/article_detail.css b/public/static/index/pc/css/article_detail.css
index f94abeda..5ac4ba10 100755
--- a/public/static/index/pc/css/article_detail.css
+++ b/public/static/index/pc/css/article_detail.css
@@ -15,7 +15,11 @@
   margin-top: 2.6rem;
 }
 .orico_Page_articleDetail .articleDetailMain .atmleft {
+  display: flex;
+  flex-direction: column;
   width: calc(100% - 1.5rem - 25rem);
+}
+.orico_Page_articleDetail .articleDetailMain .atmleft .ct {
   min-height: 650px;
   background: #ffffff;
   border: 1px solid #e8e8e8;
@@ -85,22 +89,41 @@
   padding: 1.875rem;
   display: flex;
 }
-.orico_Page_articleDetail .articleDetailMain .atmright .blog_share .share_list .atdit {
+.orico_Page_articleDetail
+  .articleDetailMain
+  .atmright
+  .blog_share
+  .share_list
+  .atdit {
   float: left;
   margin-right: 3.125rem;
   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;
   display: block;
 }
-.orico_Page_articleDetail .articleDetailMain .atmright .atdit .triggered_qrcode {
+.orico_Page_articleDetail
+  .articleDetailMain
+  .atmright
+  .atdit
+  .triggered_qrcode {
   display: none;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
 }
-.orico_Page_articleDetail .articleDetailMain .atmright .atdit:hover .triggered_qrcode {
+.orico_Page_articleDetail
+  .articleDetailMain
+  .atmright
+  .atdit:hover
+  .triggered_qrcode {
   display: block;
 }
 .orico_Page_articleDetail .articleDetailMain .atmright .repply {
@@ -220,3 +243,39 @@
   -webkit-transition: all 0.2s linear;
   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;
+}
diff --git a/public/static/index/pc/css/download.css b/public/static/index/pc/css/download.css
index aa96fff0..2165fc18 100755
--- a/public/static/index/pc/css/download.css
+++ b/public/static/index/pc/css/download.css
@@ -76,6 +76,7 @@
   margin-top: 4rem;
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
 }
 .orico_Page_download .downloadMain .contact_c .tab a{
   width:32%
@@ -201,6 +202,7 @@
   justify-content: flex-start;
   padding-left: 40px;
   padding-right: 40px;
+  flex-wrap: wrap;
 }
 .orico_Page_download .downloadMain .contact_c .vidotabs .hd ul li {
   margin-right: 80px;
@@ -224,27 +226,29 @@
   height: auto;
 }
 .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;
+  align-items: inherit;
+  flex-wrap: wrap;
+  width: 100%;
   justify-content: space-between;
   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 {
-  margin-right: 24px;
-  width: 671px;
-  margin-bottom: 34px;
   background-color: #fff;
   border-radius: 24px;
   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 {
   width: 100%;
   display: block;
+  max-height:390px;
 }
 .orico_Page_download .downloadMain .contact_c .vidotabs .bdconten .video_hotul dd .htit {
   padding-left: 56px;