feat(home): 右侧固定关注我们、宣传资料横向滚动与列表优化

Made-with: Cursor

web/src/views/Home.vue

@@ -66,7 +66,7 @@
     </section>
 
     <div class="portal-shell">
-      <div class="portal-inner">
+      <div class="portal-inner portal-inner--main">
         <main class="portal-main">
           <!-- 参考政务门户：左主栏首行 = 轮播 + 右侧列表 -->
           <div class="portal-row-split portal-card">
@@ -101,16 +101,45 @@
             </div>
             <div class="portal-news-panel">
               <h3 class="portal-block-title">宣传册 · 快速入口</h3>
-              <ul class="portal-news-list">
+              <div class="portal-news-scroll-wrap">
-                <li v-for="(b, idx) in brochureEntryLinks" :key="b.topic">
+                <ul class="portal-news-list">
-                  <router-link :to="'/brochure/' + b.topic">{{ b.label }}</router-link>
+                  <li v-for="(b, idx) in brochureEntryLinks" :key="b.topic">
-                  <span class="portal-news-date">{{ formatBrochureListDate(idx) }}</span>
+                    <router-link :to="'/brochure/' + b.topic">{{ b.label }}</router-link>
-                </li>
+                    <span class="portal-news-date">{{ formatBrochureListDate(idx) }}</span>
-              </ul>
+                  </li>
+                </ul>
+              </div>
               <router-link to="/brochure/company" class="portal-read-all">阅读完整宣传册 →</router-link>
             </div>
           </div>
 
+          <!-- 独立宣传资料栏：与宣传册目录式布局呼应，右侧超出可横向滑动 -->
+          <section class="promo-materials portal-card" id="promo-materials" aria-label="宣传资料">
+            <div class="promo-materials-head">
+              <h3 class="portal-block-title">宣传资料</h3>
+              <p class="promo-materials-sub">章节入口与线上海报册一致；卡片过多时可左右滑动</p>
+            </div>
+            <p class="promo-materials-hint" aria-hidden="true">← 横向滑动查看更多 →</p>
+            <div class="promo-materials-track-outer">
+              <div class="promo-materials-track">
+                <router-link
+                  v-for="(b, idx) in brochureEntryLinks"
+                  :key="'pm-' + b.topic"
+                  :to="'/brochure/' + b.topic"
+                  class="promo-material-card"
+                >
+                  <span class="promo-material-num">{{ promoIndexLabel(idx) }}</span>
+                  <span class="promo-material-title">{{ b.label }}</span>
+                  <span class="promo-material-arrow" aria-hidden="true">→</span>
+                </router-link>
+                <router-link to="/brochure/company" class="promo-material-card promo-material-card--all">
+                  <span class="promo-material-title">完整宣传册</span>
+                  <span class="promo-material-arrow" aria-hidden="true">→</span>
+                </router-link>
+              </div>
+            </div>
+          </section>
+
     <!-- 统计数据（与 promotion/index.html 一致） -->
     <section class="stats-section portal-card-lite">
       <div class="stats-container">
@@ -292,40 +321,41 @@
       </div>
     </section>
         </main>
-
-        <aside class="portal-aside" id="social-follow" aria-label="关注我们">
-          <div class="portal-aside-sticky">
-            <h3 class="portal-aside-title">关注我们</h3>
-            <p class="portal-aside-hint">扫码或点击查看各平台账号</p>
-            <div class="portal-aside-social">
-              <button
-                v-for="item in socialFollowItems"
-                :key="item.id"
-                type="button"
-                class="portal-social-tile"
-                @click="openSocialFollow(item)"
-              >
-                <span class="portal-social-tile-img">
-                  <img
-                    :src="socialListImgSrc(item)"
-                    :alt="item.label"
-                    width="72"
-                    height="72"
-                    loading="lazy"
-                    @error="onSocialFollowListImgError(item)"
-                  />
-                </span>
-                <span class="portal-social-tile-label">{{ item.label }}</span>
-              </button>
-            </div>
-            <a
-              href="#download"
-              class="portal-aside-download"
-              @click.prevent="scrollToSel('#download')"
-            >前往下载 →</a>
-          </div>
-        </aside>
       </div>
+
+      <!-- 视口右侧悬停：关注我们（与主栏网格解耦，固定靠最右） -->
+      <aside class="portal-aside portal-aside--fixed" id="social-follow" aria-label="关注我们">
+        <div class="portal-aside-inner">
+          <h3 class="portal-aside-title">关注我们</h3>
+          <p class="portal-aside-hint">扫码或点击查看各平台账号</p>
+          <div class="portal-aside-social">
+            <button
+              v-for="item in socialFollowItems"
+              :key="item.id"
+              type="button"
+              class="portal-social-tile"
+              @click="openSocialFollow(item)"
+            >
+              <span class="portal-social-tile-img">
+                <img
+                  :src="socialListImgSrc(item)"
+                  :alt="item.label"
+                  width="72"
+                  height="72"
+                  loading="lazy"
+                  @error="onSocialFollowListImgError(item)"
+                />
+              </span>
+              <span class="portal-social-tile-label">{{ item.label }}</span>
+            </button>
+          </div>
+          <a
+            href="#download"
+            class="portal-aside-download"
+            @click.prevent="scrollToSel('#download')"
+          >前往下载 →</a>
+        </div>
+      </aside>
     </div>
 
     <footer>
@@ -337,6 +367,7 @@
           <a href="#features" @click.prevent="scrollToSel('#features')">功能特性</a>
           <a href="#scenarios" @click.prevent="scrollToSel('#scenarios')">应用场景</a>
           <router-link to="/brochure/company">宣传册</router-link>
+          <a href="#promo-materials" @click.prevent="scrollToSel('#promo-materials')">宣传资料</a>
           <a href="#faq" @click.prevent="scrollToSel('#faq')">常见问题</a>
           <a href="#contact" @click.prevent="scrollToSel('#contact')">联系我们</a>
           <a href="#videos" @click.prevent="scrollToSel('#videos')">产品视频</a>
@@ -447,8 +478,9 @@ const defaultData = () => ({
   nav_links: [
     { label: '功能特性', url: '#features' },
     { label: '应用场景', url: '#scenarios' },
-    { label: '产品视频', url: '#videos' },
+        { label: '产品视频', url: '#videos' },
     { label: '宣传册', url: '/brochure/company' },
+    { label: '宣传资料', url: '#promo-materials' },
     { label: '关注我们', url: '#social-follow' },
     { label: '联系我们', url: '#contact' }
   ],
@@ -549,6 +581,11 @@ function formatBrochureListDate(idx) {
   return mm + '-' + dd
 }
 
+/** 宣传资料卡片序号（与宣传册侧栏目录 01–10 一致） */
+function promoIndexLabel(i) {
+  return String(i + 1).padStart(2, '0')
+}
+
 const scenarioCards = [
   { title: '企业办公', desc: '文档管理、数据报表、会议纪要、任务追踪', icon: 'M20 6h-4V4c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-6 0h-4v2h4v2h-4v2h4v2H8V6h6v2h4V6z', to: '/brochure/scenarios' },
   { title: '数据分析', desc: '销售分析、用户统计、财务对账、批量处理', icon: 'M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z', to: '/brochure/scenarios' },
@@ -975,14 +1012,17 @@ onUnmounted(() => {
   background: linear-gradient(180deg, rgba(10, 12, 22, 0.4) 0%, rgba(18, 22, 38, 0.92) 8%, rgba(20, 24, 40, 0.98) 100%);
   padding: 36px 0 8px;
 }
-.portal-inner {
+/* 主内容区单独一列；大屏为右侧 fixed 侧栏预留空间，避免正文被遮挡 */
+.portal-inner--main {
   max-width: 1320px;
   margin: 0 auto;
   padding: 0 20px 32px;
-  display: grid;
+  box-sizing: border-box;
-  grid-template-columns: minmax(0, 1fr) 280px;
+}
-  gap: 28px;
+@media (min-width: 1025px) {
-  align-items: start;
+  .portal-inner--main {
+    padding-right: 300px;
+  }
 }
 .portal-main { min-width: 0; }
 .portal-block-title {
@@ -1085,7 +1125,11 @@ onUnmounted(() => {
   line-height: 1;
   cursor: pointer;
   z-index: 2;
-  transition: background 0.2s, border-color 0.2s;
+  opacity: 0.38;
+  transition: background 0.2s, border-color 0.2s, opacity 0.25s;
+}
+.portal-carousel:hover .portal-carousel-nav {
+  opacity: 1;
 }
 .portal-carousel-nav:hover {
   background: rgba(0, 212, 255, 0.25);
@@ -1118,11 +1162,27 @@ onUnmounted(() => {
   transform: scale(1.15);
 }
 .portal-news-panel { min-width: 0; display: flex; flex-direction: column; }
+.portal-news-scroll-wrap {
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  margin: 0 -4px;
+  padding: 0 4px 4px;
+  scrollbar-width: thin;
+}
+.portal-news-scroll-wrap::-webkit-scrollbar {
+  height: 6px;
+}
+.portal-news-scroll-wrap::-webkit-scrollbar-thumb {
+  background: rgba(0, 212, 255, 0.35);
+  border-radius: 4px;
+}
 .portal-news-list {
   list-style: none;
   margin: 0;
   padding: 0;
   flex: 1;
+  min-width: min(100%, 300px);
 }
 .portal-news-list li {
   display: flex;
@@ -1135,13 +1195,31 @@ onUnmounted(() => {
 }
 .portal-news-list li:last-child { border-bottom: none; }
 .portal-news-list a {
+  position: relative;
   color: rgba(255, 255, 255, 0.88);
   text-decoration: none;
   flex: 1;
   min-width: 0;
   line-height: 1.5;
+  transition: color 0.2s;
+}
+.portal-news-list a::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -3px;
+  height: 2px;
+  width: 0;
+  border-radius: 1px;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.85), var(--plasma-cyan));
+  transition: width 0.28s ease;
+}
+.portal-news-list a:hover {
+  color: var(--plasma-cyan);
+}
+.portal-news-list a:hover::after {
+  width: 100%;
 }
-.portal-news-list a:hover { color: var(--plasma-cyan); }
 .portal-news-date {
   flex-shrink: 0;
   font-size: 12px;
@@ -1157,14 +1235,125 @@ onUnmounted(() => {
 }
 .portal-read-all:hover { text-decoration: underline; }
 
+/* 宣传资料：横向轨道（与宣传册页目录编号风格一致） */
+.promo-materials { margin-bottom: 28px; }
+.promo-materials-head { margin-bottom: 8px; }
+.promo-materials-sub {
+  margin: 0 0 6px;
+  padding-left: 13px;
+  font-size: 12px;
+  line-height: 1.55;
+  color: rgba(255, 255, 255, 0.48);
+}
+.promo-materials-hint {
+  margin: 0 0 10px;
+  font-size: 11px;
+  letter-spacing: 1px;
+  color: rgba(255, 255, 255, 0.35);
+  text-align: right;
+}
+.promo-materials-track-outer {
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  padding-bottom: 6px;
+  margin: 0 -6px;
+  padding-left: 6px;
+  padding-right: 6px;
+  scrollbar-width: thin;
+}
+.promo-materials-track-outer::-webkit-scrollbar {
+  height: 8px;
+}
+.promo-materials-track-outer::-webkit-scrollbar-thumb {
+  background: rgba(0, 212, 255, 0.4);
+  border-radius: 4px;
+}
+.promo-materials-track {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 14px;
+  width: max-content;
+  min-width: 100%;
+  padding: 6px 2px 10px;
+  scroll-snap-type: x proximity;
+}
+.promo-material-card {
+  flex: 0 0 auto;
+  width: 168px;
+  scroll-snap-align: start;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 16px 14px;
+  border-radius: 12px;
+  text-decoration: none;
+  color: rgba(255, 255, 255, 0.92);
+  background: linear-gradient(165deg, rgba(30, 58, 95, 0.45), rgba(10, 12, 22, 0.92));
+  border: 1px solid rgba(0, 212, 255, 0.2);
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
+  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
+}
+.promo-material-card:hover {
+  border-color: rgba(0, 212, 255, 0.55);
+  transform: translateY(-3px);
+  box-shadow: 0 10px 28px rgba(0, 212, 255, 0.12);
+}
+.promo-material-num {
+  font-family: 'Exo 2', monospace;
+  font-size: 11px;
+  letter-spacing: 2px;
+  color: var(--plasma-cyan);
+  opacity: 0.95;
+}
+.promo-material-title {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+.promo-material-arrow {
+  margin-top: auto;
+  font-size: 13px;
+  color: var(--plasma-cyan);
+}
+.promo-material-card--all {
+  width: auto;
+  min-width: 148px;
+  background: linear-gradient(135deg, rgba(0, 212, 255, 0.18), rgba(255, 45, 149, 0.12));
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+.promo-material-card--all .promo-material-title {
+  font-family: 'Exo 2', sans-serif;
+  font-size: 13px;
+  letter-spacing: 1px;
+}
+
 .portal-aside { min-width: 0; }
-.portal-aside-sticky {
+/* 右侧悬停：固定于视口最右侧，滚动时保持可见 */
-  position: sticky;
+.portal-aside--fixed {
+  position: fixed;
+  right: 0;
   top: 88px;
-  padding: 20px 16px;
+  z-index: 85;
-  border-radius: 16px;
+  width: 276px;
-  background: rgba(255, 255, 255, 0.04);
+  max-height: calc(100vh - 104px);
-  border: 1px solid rgba(0, 212, 255, 0.12);
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 10px 16px 8px;
+  pointer-events: auto;
+  box-sizing: border-box;
+}
+.portal-aside-inner {
+  padding: 18px 14px 20px;
+  border-radius: 16px 0 0 16px;
+  background: rgba(12, 16, 28, 0.92);
+  border: 1px solid rgba(0, 212, 255, 0.18);
+  border-right: none;
+  box-shadow: -8px 8px 32px rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(12px);
 }
 .portal-aside-title {
   font-family: 'Exo 2', 'Noto Sans SC', sans-serif;
@@ -1504,9 +1693,24 @@ onUnmounted(() => {
 .landing footer .beian a:hover { text-decoration: underline; }
 
 @media (max-width: 1024px) {
-  .portal-inner { grid-template-columns: 1fr; }
+  .portal-inner--main {
+    padding-right: 20px;
+  }
+  .portal-aside--fixed {
+    position: static;
+    width: 100%;
+    max-height: none;
+    overflow: visible;
+    padding: 0 16px 20px;
+    margin: 0 auto;
+  }
+  .portal-aside-inner {
+    border-radius: 16px;
+    border: 1px solid rgba(0, 212, 255, 0.15);
+    border-right: 1px solid rgba(0, 212, 255, 0.15);
+    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
+  }
   .portal-row-split { grid-template-columns: 1fr; }
-  .portal-aside-sticky { position: static; }
   .video-container { grid-template-columns: 1fr; }
   .highlight-grid { grid-template-columns: 1fr; }
   .stats-container { grid-template-columns: repeat(2, 1fr); }