feat(journalism): 全面升级新闻资讯列表为标题、简介、缩略图专业图文排版模式并适配多端

addons/official/controller/web/OfficialJournalism.php

@@ -55,7 +55,7 @@ class OfficialJournalism extends OfficialBaseController
                 ->where('deletetime', null)
                 ->order('weigh', 'desc')
                 ->field(['id,title,image,subheading,createtime'])
-                ->paginate(15, $simple = $this->isMobile(), $config = [
+                ->paginate(8, $simple = $this->isMobile(), $config = [
                     'query' => ['pid' => $p_id, 'sid' => $son_id]
                 ]);
         }

addons/official/view/web/official_journalism/list.html

@@ -44,15 +44,39 @@
             </div>
         </div>
 
-        <!-- 文章列表：只显示标题即可 -->
+        <!-- 文章资讯列表：标题、简介、缩略图专业图文排版 -->
         {if count($data) > 0}
-        <div class="nhc-title-list">
+        <div class="nhc-news-list">
             {foreach $data as $index => $item}
-            <a href="{:addon_url('official/web.official_journalism/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$item['id']])}" class="nhc-title-item" title="{$item['title']}">
-                <div class="nhc-title-left">
-                    <span class="nhc-title-text">{$item['title']}</span>
+            <article class="nhc-news-row">
+                <a href="{:addon_url('official/web.official_journalism/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$item['id']])}" class="nhc-news-thumb" title="{$item['title']}">
+                    {if !empty($item['image'])}
+                    <img src="{$item['image']}" alt="{$item['title']}" loading="lazy">
+                    {else/}
+                    <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #94A3B8; font-size: 13px;">纳海川科技</div>
+                    {/if}
+                </a>
+                <div class="nhc-news-body">
+                    <div>
+                        <div class="nhc-news-meta">
+                            <span class="nhc-news-badge">{if !empty($son_data)}{:ze($son_data,'name')}{else/}{:ze($res,'name')}{/if}</span>
+                            <span class="nhc-news-date">{:date('Y-m-d', $item['createtime'])}</span>
+                        </div>
+                        <a href="{:addon_url('official/web.official_journalism/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$item['id']])}" style="text-decoration: none;">
+                            <h2 class="nhc-news-title">{$item['title']}</h2>
+                        </a>
+                        <p class="nhc-news-desc">
+                            {$item['subheading']}
+                        </p>
+                    </div>
+                    <div>
+                        <a href="{:addon_url('official/web.official_journalism/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$item['id']])}" class="nhc-news-more">
+                            <span>阅读全文</span>
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+                        </a>
+                    </div>
                 </div>
-            </a>
+            </article>
             {/foreach}
         </div>
 

addons/official/view/web/official_journalism/list_e.html

@@ -32,15 +32,37 @@
         {/foreach}
     </div>
 
-    <!-- 移动端文章列表：只显示标题即可 -->
+    <!-- 移动端文章资讯列表：标题、简介、缩略图专业图文排版 -->
     {if count($data) > 0}
-    <div class="nhc-title-list">
+    <div style="display: flex; flex-direction: column; gap: 16px;">
         {foreach $data as $index => $val}
-        <a href="{:addon_url('official/web.official_journalism/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$val['id']])}" class="nhc-title-item" style="padding: 14px 16px; border-bottom: 1px solid var(--border-color); display: block;">
-            <h2 style="font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--text-primary); line-height: 1.45; margin: 0;">
-                {$val['title']}
-            </h2>
-        </a>
+        <article class="nhc-news-row" style="padding: 16px; flex-direction: column; gap: 14px;">
+            <a href="{:addon_url('official/web.official_journalism/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$val['id']])}" class="nhc-news-thumb" style="width: 100%; height: 160px;">
+                {if !empty($val['image'])}
+                <img src="{$val['image']}" alt="{$val['title']}" loading="lazy">
+                {else/}
+                <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #94A3B8; font-size: 13px;">纳海川科技</div>
+                {/if}
+            </a>
+            <div class="nhc-news-body" style="padding-left: 0;">
+                <div class="nhc-news-meta">
+                    <span class="nhc-news-badge">{if !empty($son_data)}{:ze($son_data,'name')}{else/}{:ze($res,'name')}{/if}</span>
+                    <span class="nhc-news-date">{:date('Y-m-d', $val['createtime'])}</span>
+                </div>
+                <a href="{:addon_url('official/web.official_journalism/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$val['id']])}" style="text-decoration: none;">
+                    <h2 class="nhc-news-title" style="font-size: 16px;">{$val['title']}</h2>
+                </a>
+                <p class="nhc-news-desc" style="font-size: 13px; margin-bottom: 10px;">
+                    {$val['subheading']}
+                </p>
+                <div>
+                    <a href="{:addon_url('official/web.official_journalism/details',[':pid'=>(int)input('param.pid'),':sid'=>(int)input('param.sid'),':id'=>$val['id']])}" class="nhc-news-more" style="font-size: 12px;">
+                        <span>阅读全文</span>
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+                    </a>
+                </div>
+            </div>
+        </article>
         {/foreach}
     </div>