whm/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Made-with: Cursor
This commit is contained in:
whm
2026-03-23 11:18:56 +08:00
parent 52991d1e49
commit d37e9a3663
1 changed files with 260 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

316
web/src/views/Home.vue
View File

@@ -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">
<li v-for="(b, idx) in brochureEntryLinks" :key="b.topic">
<router-link :to="'/brochure/' + b.topic">{{ b.label }}</router-link>
<span class="portal-news-date">{{ formatBrochureListDate(idx) }}</span>
</li>
</ul>
<div class="portal-news-scroll-wrap">
<ul class="portal-news-list">
<li v-for="(b, idx) in brochureEntryLinks" :key="b.topic">
<router-link :to="'/brochure/' + b.topic">{{ b.label }}</router-link>
<span class="portal-news-date">{{ formatBrochureListDate(idx) }}</span>
</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;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 28px;
align-items: start;
box-sizing: border-box;
}
@media (min-width: 1025px) {
.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;
border-radius: 16px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(0, 212, 255, 0.12);
z-index: 85;
width: 276px;
max-height: calc(100vh - 104px);
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); }