更新首页

2026-04-29 10:28:56 +08:00
parent dccb358d4f
commit 9e24153eac
5 changed files with 195 additions and 96 deletions
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -4,39 +4,44 @@

    <main class="container page-main">
      <section class="headline-grid">
-        <div class="headline-left">
-          <NuxtLink to="/article/1" class="headline-image-card">
-            <img src="/images/video-poster.jpg" alt="中心赴南宁宁宁区调研" />
-            <div class="headline-image-title">“经桂通”平台推广应用培训会在南宁召开</div>
-            <div class="headline-image-date">2026-03-09</div>
-          </NuxtLink>
-        </div>
+        <NuxtLink to="/article/2" class="headline-main-title">
+          自治区信息中心赴南宁邕宁区（县）调研县域数字经济发展情况
+        </NuxtLink>

-        <div class="headline-center">
-          <NuxtLink to="/article/2" class="feature-title">
-            中心赴南宁市邕宁区（县）调研县域数字经济发展情况
-          </NuxtLink>
-          <NuxtLink to="/article/2" class="feature-image-wrap">
-            <img src="/images/video-poster.jpg" alt="调研现场" />
-          </NuxtLink>
-        </div>
-
-        <div class="headline-right">
-          <div class="subnav-strip" :style="{ backgroundImage: `url(${subnavStripImage})` }">
-            <span>党中央国务院信息</span>
-            <span>自治区党委政府</span>
-            <span>其他厅（厅委）信息</span>
+        <div class="headline-content">
+          <div class="headline-left">
+            <NuxtLink to="/article/1" class="headline-image-card">
+              <img src="/images/video-poster.jpg" alt="中心赴南宁宁宁区调研" />
+              <div class="headline-image-title">“经桂通”平台推广应用培训会在南宁召开</div>
+              <div class="headline-image-date">2026-03-09</div>
+            </NuxtLink>
          </div>
-          <div class="news-links">
-            <NuxtLink v-for="item in heroNews" :key="item.id" :to="getArticleLink(item.id)">{{ item.title }}</NuxtLink>
+
+          <div class="headline-right">
+            <div class="subnav-strip" :style="{ backgroundImage: `url(${subnavStripImage})` }">
+              <span>党中央国务院信息</span>
+              <span>自治区党委政府信息</span>
+              <span>其他（厅委办）</span>
+              <span class="subnav-strip-more">更多</span>
+            </div>
+            <div class="news-links">
+              <NuxtLink
+                v-for="item in heroNews"
+                :key="item.id"
+                :to="getArticleLink(item.id)"
+                class="news-link-card"
+              >
+                <h3>{{ item.title }}</h3>
+                <p>{{ item.summary }}</p>
+              </NuxtLink>
+            </div>
          </div>
        </div>
      </section>

-      <section class="ad-banner scenic" />
-
      <section class="section-block">
        <div class="section-heading image-heading">
+          <img :src="adImage" alt="广告位" />
          <img :src="promoBannerImage" alt="决策咨询" />
        </div>

@@ -126,7 +131,7 @@
      </section>

      <section class="ad-banner image-banner">
-        <img :src="promoBannerImage" alt="单位企业广告" />
+        <img :src="ad1Image" alt="单位企业广告" />
      </section>

      <section class="section-block">
@@ -197,7 +202,9 @@ usePageSeo({
  description: '广西决策咨询网首页'
 })

-const promoBannerImage = '/images/%E6%88%AA%E5%B1%8F2026-04-28%2021.38.43.png'
+const adImage = '/images/ad.png'
+const ad1Image = '/images/ad1.png'
+const promoBannerImage = '/images/jczx.png'
 const subnavStripImage = '/images/%E5%9B%BE%E5%B1%82%2050.png'
 const expertSectionTitleImage = '/images/zjzx.png'
 const expertSectionBgImage = '/images/zjzxBg.png'
@@ -217,11 +224,33 @@ type Group = {
  type?: 'logos'
 }

-const heroNews = [
-  { id: 3, title: '数字广西建设“十五五”规划编制工作座谈会在南宁召开' },
-  { id: 4, title: '广西发布县域数字经济试点“成绩单”，桂北七城重点突破' },
-  { id: 5, title: '中国一东盟人工智能创新合作加快构建' },
-  { id: 6, title: '“桂链”平台入选国家数据局数据基础设施试点典型案例' }
+type HeroNewsItem = {
+  id: number
+  title: string
+  summary: string
+}
+
+const heroNews: HeroNewsItem[] = [
+  {
+    id: 3,
+    title: '数字广西发展“十五五”规划编制工作座谈会在南宁召开',
+    summary: '会议认为，“十五五”时期是广西数字化发展全面深化、跨越提升的关键阶段，科学编制规划是贯彻落实数字广西建设的重要抓手。'
+  },
+  {
+    id: 4,
+    title: '广西发布县域数字经济“成绩单”，超七成县市区实现突破',
+    summary: '产业发展指数同比提升 9.6%，共有 64 个县（市、区）实现指数增长，县域数字产业活力与支撑能力持续增强。'
+  },
+  {
+    id: 5,
+    title: '中国—东盟人工智能指数体系加快构建',
+    summary: '围绕人工智能产业高质量发展，持续完善面向区域合作的评价指标体系与应用场景，为开放合作提供数据支撑。'
+  },
+  {
+    id: 6,
+    title: '“桂链”平台入选国家数据局数据基础设施建设典型案例',
+    summary: '案例立足“桂链”平台总体架构，聚焦区块链与数据基础设施协同建设，形成了可复制、可推广的经验做法。'
+  }
 ]

 const createItems = (prefix: string, startId: number): TextItem[] => ([
@@ -320,15 +349,33 @@ const actionLinks = [
 }

 .headline-grid {
-  display: grid;
-  grid-template-columns: 220px 1.45fr 1fr;
-  gap: 16px;
-  align-items: start;
  margin-bottom: 28px;
 }

+.headline-content {
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
+  gap: 34px;
+  align-items: start;
+}
+
+.headline-main-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 132px;
+  margin-bottom: 36px;
+  padding: 18px 24px 26px;
+  border-bottom: 1px solid #ececec;
+  color: #2236c6;
+  font-size: clamp(28px, 3.2vw, 42px);
+  font-weight: 500;
+  line-height: 1.35;
+  letter-spacing: 1px;
+  text-align: center;
+}
+
 .headline-left,
-.headline-center,
 .headline-right,
 .article-panel,
 .experts-section {
@@ -341,80 +388,90 @@ const actionLinks = [
  background: #fff;
 }

-.headline-image-card img,
-.feature-image-wrap img {
+.headline-image-card img {
  width: 100%;
  display: block;
  object-fit: cover;
-}
-
-.headline-image-card img {
-  height: 254px;
+  height: 430px;
 }

 .headline-image-title {
-  margin-top: 12px;
+  margin-top: 20px;
  color: #2d2d2d;
-  font-size: 14px;
+  font-size: 18px;
  font-weight: 700;
-  line-height: 1.7;
-  padding: 0 10px;
+  line-height: 1.45;
+  padding: 0 6px;
 }

 .headline-image-date {
-  margin-top: 8px;
-  color: #999;
-  font-size: 12px;
-  padding: 0 10px 10px;
-}
-
-.headline-center {
-  padding: 14px;
-}
-
-.feature-title {
-  display: block;
-  margin-bottom: 12px;
-  color: #1b58a3;
-  font-size: 34px;
-  font-weight: 700;
-  line-height: 1.4;
-}
-
-.feature-image-wrap img {
-  height: 356px;
+  margin-top: 14px;
+  color: #8e8e8e;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 0 6px 10px;
 }

 .headline-right {
-  padding: 12px 14px;
+  padding-top: 2px;
 }

 .subnav-strip {
  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-bottom: 14px;
-  padding: 8px 10px;
+  align-items: center;
+  gap: 18px;
+  margin-bottom: 22px;
+  padding: 10px 22px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #fff;
-  font-size: 12px;
-  min-height: 35px;
+  font-size: 14px;
+  line-height: 1;
+  min-height: 50px;
+  white-space: nowrap;
+}
+
+.subnav-strip .active {
+  padding: 12px 18px;
+  background: rgba(255, 255, 255, 0.24);
+  clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%);
+  font-weight: 700;
+}
+
+.subnav-strip-more {
+  margin-left: auto;
+  font-weight: 600;
 }

 .news-links {
  display: flex;
  flex-direction: column;
-  gap: 14px;
+  gap: 0;
 }

-.news-links a {
-  color: #1f2d3d;
+.news-link-card {
+  padding: 18px 8px 20px;
+  border-bottom: 1px solid #e9e9e9;
+}
+
+.news-link-card h3 {
+  margin: 0 0 16px;
+  color: #3777c4;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1.45;
+}
+
+.news-link-card p {
+  margin: 0;
+  color: #454545;
  font-size: 14px;
-  line-height: 1.7;
-  border-bottom: 1px dashed #dfdfdf;
-  padding-bottom: 12px;
+  line-height: 1.95;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }

 .ad-banner {
@@ -473,6 +530,10 @@ const actionLinks = [

 .image-heading {
  margin-bottom: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
 }

 .section-heading-title {
@@ -788,14 +849,13 @@ const actionLinks = [
 }

@media (max-width: 1100px) {
-  .headline-grid,
+  .headline-content,
  .article-columns.two,
  .experts-grid,
  .action-grid {
    grid-template-columns: 1fr;
  }

-  .headline-center,
  .headline-right,
  .headline-left,
  .experts-section {
@@ -803,8 +863,25 @@ const actionLinks = [
    padding-right: 0;
  }

-  .feature-title {
-    font-size: 26px;
+  .headline-main-title {
+    min-height: 108px;
+    margin-bottom: 24px;
+    font-size: 30px;
+  }
+
+  .headline-image-card img {
+    height: 380px;
+  }
+
+  .headline-image-title,
+  .news-link-card h3 {
+    font-size: 18px;
+  }
+
+  .headline-image-date,
+  .news-link-card p,
+  .subnav-strip {
+    font-size: 14px;
  }

  .logo-list-wrap {
@@ -817,11 +894,10 @@ const actionLinks = [
    width: min(100%, calc(100% - 24px));
  }

-  .headline-grid {
-    gap: 12px;
+  .headline-content {
+    gap: 18px;
  }

-  .headline-center,
  .headline-right,
  .headline-left,
  .article-panel,
@@ -829,20 +905,43 @@ const actionLinks = [
    padding: 0;
  }

-  .headline-center {
-    padding: 12px;
+  .headline-main-title {
+    min-height: auto;
+    margin-bottom: 18px;
+    padding: 10px 6px 18px;
+    font-size: 24px;
+    line-height: 1.45;
  }

-  .headline-right {
-    padding: 12px;
+  .headline-image-card img {
+    height: 250px;
  }

-  .feature-title {
-    font-size: 22px;
+  .headline-image-title,
+  .news-link-card h3 {
+    font-size: 20px;
  }

-  .feature-image-wrap img {
-    height: 240px;
+  .headline-image-date,
+  .news-link-card p {
+    font-size: 14px;
+  }
+
+  .subnav-strip {
+    gap: 10px;
+    margin-bottom: 12px;
+    padding: 12px 14px;
+    font-size: 13px;
+    min-height: 52px;
+    overflow-x: auto;
+  }
+
+  .subnav-strip .active {
+    padding: 10px 12px;
+  }
+
+  .news-link-card {
+    padding: 14px 0 16px;
  }

  .section-heading {