feat:完善其余页面
This commit is contained in:
@@ -0,0 +1,10 @@
|
||||
<script setup>
|
||||
const route = useRoute()
|
||||
const isInteriorPage = computed(() => route.path !== '/')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtPage />
|
||||
<InteriorPageTools v-if="isInteriorPage" />
|
||||
<ConsultationModal />
|
||||
</template>
|
||||
@@ -0,0 +1,409 @@
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
) {
|
||||
--interior-ink: #263c55;
|
||||
--interior-copy: #5d7087;
|
||||
--interior-muted: #8192a6;
|
||||
--interior-line: rgba(74, 134, 204, 0.14);
|
||||
--interior-blue: #207bf2;
|
||||
--interior-surface: rgba(255, 255, 255, 0.88);
|
||||
position: relative;
|
||||
min-height: 100dvh;
|
||||
overflow: clip;
|
||||
color: var(--interior-copy);
|
||||
background: #f8fbff;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)::after {
|
||||
position: fixed;
|
||||
z-index: 40;
|
||||
inset: 0;
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
|
||||
opacity: 0.018;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
.page-width {
|
||||
width: min(1240px, calc(100% - 64px));
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(h1, h2, h3, h4, strong) {
|
||||
color: var(--interior-ink);
|
||||
letter-spacing: 0 !important;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(h1, h2, h3) {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
p {
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
main
|
||||
> section {
|
||||
scroll-margin-top: 78px;
|
||||
box-shadow: inset 0 1px 0 rgba(92, 145, 207, 0.055);
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(.section-kicker, .page-eyebrow) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: var(--interior-blue);
|
||||
font-weight: 650;
|
||||
letter-spacing: 0 !important;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(.section-kicker, .page-eyebrow)::before {
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
flex: 0 0 auto;
|
||||
content: '';
|
||||
background: linear-gradient(90deg, #207bf2, #72cbef);
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(.center-heading, .model-heading, .process-heading)
|
||||
:is(.section-kicker, .page-eyebrow) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(.primary-button, .industry-plan-button, .service-action, .story-action) {
|
||||
border-radius: 5px !important;
|
||||
transition:
|
||||
color 0.22s ease,
|
||||
background 0.22s ease,
|
||||
border-color 0.22s ease,
|
||||
box-shadow 0.24s ease,
|
||||
transform 0.24s cubic-bezier(0.22, 1, 0.36, 1) !important;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(button, a):focus-visible {
|
||||
outline: 3px solid rgba(32, 123, 242, 0.3);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(table, .comparison-table, .result-table-wrap) {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
img {
|
||||
image-rendering: auto;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(
|
||||
.stats-row article,
|
||||
.method-flow article,
|
||||
.team-capabilities article,
|
||||
.intro-sequence article,
|
||||
.advantage-story-visual,
|
||||
.proof-stats article,
|
||||
.decision-factor-list article,
|
||||
.industry-visual,
|
||||
.more-industry-list button,
|
||||
.snapshot-grid article,
|
||||
.method-list article,
|
||||
.baseline-grid article,
|
||||
.question-grid article,
|
||||
.phase-list article,
|
||||
.distribution-map article,
|
||||
.outcome-grid article,
|
||||
.related-grid article,
|
||||
.article-grid article
|
||||
) {
|
||||
border: 1px solid rgba(83, 145, 215, 0.12) !important;
|
||||
border-radius: 8px !important;
|
||||
background-color: var(--interior-surface) !important;
|
||||
box-shadow:
|
||||
0 16px 42px rgba(58, 112, 174, 0.075),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(.comparison-table-wrap, .result-table-wrap, .comparison-table) {
|
||||
border: 1px solid rgba(83, 145, 215, 0.14) !important;
|
||||
border-radius: 8px !important;
|
||||
background: rgba(255, 255, 255, 0.9) !important;
|
||||
box-shadow: 0 20px 50px rgba(58, 112, 174, 0.08) !important;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(.featured-case, .featured-insight, .contact-details, .objective-box, .article-lead) {
|
||||
border: 1px solid rgba(83, 145, 215, 0.13) !important;
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 24px 56px rgba(48, 105, 171, 0.09) !important;
|
||||
}
|
||||
|
||||
.interior-reveal-ready .interior-reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
transition:
|
||||
opacity 0.72s ease,
|
||||
transform 0.82s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.interior-reveal-ready .interior-reveal.is-revealed {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(.primary-button, .industry-plan-button):hover {
|
||||
box-shadow: 0 14px 28px rgba(29, 119, 234, 0.23) !important;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(
|
||||
.stats-row article,
|
||||
.method-flow article,
|
||||
.team-capabilities article,
|
||||
.intro-sequence article,
|
||||
.proof-stats article,
|
||||
.decision-factor-list article,
|
||||
.more-industry-list button,
|
||||
.snapshot-grid article,
|
||||
.method-list article,
|
||||
.baseline-grid article,
|
||||
.question-grid article,
|
||||
.phase-list article,
|
||||
.distribution-map article,
|
||||
.outcome-grid article,
|
||||
.related-grid article,
|
||||
.article-grid article
|
||||
):hover {
|
||||
border-color: rgba(51, 132, 229, 0.24) !important;
|
||||
box-shadow:
|
||||
0 22px 50px rgba(48, 111, 184, 0.13),
|
||||
inset 0 1px 0 #fff !important;
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
.page-width {
|
||||
width: min(100% - 32px, 580px);
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
main
|
||||
> section {
|
||||
scroll-margin-top: 64px;
|
||||
}
|
||||
|
||||
.interior-reveal-ready .interior-reveal {
|
||||
transform: translateY(16px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.interior-reveal-ready .interior-reveal {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
+385
-370
@@ -41,91 +41,6 @@ a:focus-visible {
|
||||
width: min(1296px, calc(100% - 48px));
|
||||
margin: 0 auto;
|
||||
}
|
||||
.site-header {
|
||||
height: 57px;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
}
|
||||
.header-inner {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.brand {
|
||||
display: block;
|
||||
width: 190px;
|
||||
}
|
||||
.brand img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.desktop-nav {
|
||||
display: flex;
|
||||
gap: clamp(18px, 2.25vw, 43px);
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
.desktop-nav button {
|
||||
position: relative;
|
||||
background: transparent;
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.desktop-nav button::after {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -8px;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
content: '';
|
||||
background: #287cf9;
|
||||
transform: scaleX(0);
|
||||
transform-origin: center;
|
||||
transition: transform 0.24s ease;
|
||||
}
|
||||
.desktop-nav button.active,
|
||||
.desktop-nav button:hover {
|
||||
color: #287cf9;
|
||||
font-weight: 700;
|
||||
}
|
||||
.desktop-nav button.active::after,
|
||||
.desktop-nav button:hover::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
.nav-chevron {
|
||||
color: #646464;
|
||||
margin-left: 6px;
|
||||
font-size: 16px;
|
||||
vertical-align: 1px;
|
||||
}
|
||||
.mobile-menu-button,
|
||||
.mobile-navigation {
|
||||
display: none;
|
||||
}
|
||||
.login-button {
|
||||
height: 31px;
|
||||
min-width: 70px;
|
||||
padding: 0 15px;
|
||||
border-radius: 20px;
|
||||
background: #087dfb;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
box-shadow: 0 3px 8px rgba(30, 127, 255, 0.22);
|
||||
transition:
|
||||
transform 0.22s ease,
|
||||
box-shadow 0.22s ease,
|
||||
background 0.22s ease;
|
||||
}
|
||||
.login-button span {
|
||||
font-size: 8px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
position: relative;
|
||||
height: min(32.2vw, 617px);
|
||||
@@ -185,6 +100,7 @@ a:focus-visible {
|
||||
justify-content: center;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
transition:
|
||||
transform 0.2s,
|
||||
box-shadow 0.2s;
|
||||
@@ -199,8 +115,7 @@ a:focus-visible {
|
||||
box-shadow: 0 11px 20px rgba(25, 106, 255, 0.24);
|
||||
}
|
||||
.primary-button:active,
|
||||
.outline-button:active,
|
||||
.login-button:active {
|
||||
.outline-button:active {
|
||||
transform: translateY(1px) scale(0.98);
|
||||
}
|
||||
.primary-button b {
|
||||
@@ -819,123 +734,8 @@ a:focus-visible {
|
||||
color: #4d4d4d;
|
||||
font-size: 17px;
|
||||
}
|
||||
.site-footer {
|
||||
color: #d6dde4;
|
||||
background: #101d23;
|
||||
}
|
||||
.footer-main {
|
||||
min-height: 222px;
|
||||
display: grid;
|
||||
grid-template-columns: 340px 1fr 210px;
|
||||
align-items: center;
|
||||
gap: 42px;
|
||||
}
|
||||
.footer-main > img {
|
||||
width: 340px;
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.footer-links {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 23px 45px;
|
||||
}
|
||||
.footer-links div {
|
||||
min-width: 100px;
|
||||
}
|
||||
.footer-links b {
|
||||
display: block;
|
||||
color: #bbc6ce;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.footer-links span {
|
||||
display: block;
|
||||
margin-top: 28px;
|
||||
font-size: 12px;
|
||||
color: #89969d;
|
||||
}
|
||||
.qr {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 70px);
|
||||
gap: 11px;
|
||||
}
|
||||
.qr span {
|
||||
height: 70px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #111;
|
||||
background: #fff;
|
||||
font-size: 52px;
|
||||
}
|
||||
.qr small {
|
||||
grid-column: 1 / -1;
|
||||
font-size: 12px;
|
||||
color: #9ca6ac;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.footer-bottom {
|
||||
height: 59px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #879298;
|
||||
background: #252e33;
|
||||
font-size: 12px;
|
||||
}
|
||||
.dialog-mask {
|
||||
position: fixed;
|
||||
z-index: 40;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: rgba(10, 25, 41, 0.46);
|
||||
}
|
||||
.consult-dialog {
|
||||
position: relative;
|
||||
width: min(390px, calc(100% - 40px));
|
||||
padding: 32px;
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
box-shadow: 0 24px 60px rgba(7, 50, 100, 0.28);
|
||||
text-align: center;
|
||||
}
|
||||
.consult-dialog h2 {
|
||||
margin: 0;
|
||||
font-size: 23px;
|
||||
}
|
||||
.consult-dialog p {
|
||||
margin: 14px 0 24px;
|
||||
color: #777;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 12px;
|
||||
color: #999;
|
||||
background: transparent;
|
||||
font-size: 28px;
|
||||
}
|
||||
.toast {
|
||||
position: fixed;
|
||||
z-index: 50;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
margin: 0;
|
||||
transform: translateX(-50%);
|
||||
padding: 12px 20px;
|
||||
color: white;
|
||||
border-radius: 30px;
|
||||
background: rgba(20, 30, 43, 0.9);
|
||||
box-shadow: 0 7px 22px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.login-button:hover {
|
||||
background: #056ee2;
|
||||
box-shadow: 0 7px 16px rgba(30, 127, 255, 0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.stat-item:hover {
|
||||
background: #fff;
|
||||
box-shadow: 0 18px 34px rgba(59, 125, 233, 0.15);
|
||||
@@ -980,17 +780,6 @@ a:focus-visible {
|
||||
}
|
||||
|
||||
@media (min-width: 761px) {
|
||||
.site-header {
|
||||
transition:
|
||||
background 0.3s ease,
|
||||
box-shadow 0.3s ease,
|
||||
backdrop-filter 0.3s ease;
|
||||
}
|
||||
.site-header.scrolled {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 10px 30px rgba(68, 122, 196, 0.1);
|
||||
backdrop-filter: blur(18px) saturate(1.16);
|
||||
}
|
||||
.hero-copy {
|
||||
will-change: transform;
|
||||
}
|
||||
@@ -1057,28 +846,12 @@ a:focus-visible {
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
.desktop-nav {
|
||||
gap: 14px;
|
||||
}
|
||||
.desktop-nav button {
|
||||
font-size: 12px;
|
||||
}
|
||||
.hero-copy {
|
||||
margin-left: 3%;
|
||||
}
|
||||
.section-title h2 {
|
||||
font-size: 29px;
|
||||
}
|
||||
.footer-main {
|
||||
grid-template-columns: 250px 1fr;
|
||||
padding: 30px 0;
|
||||
}
|
||||
.footer-main > img {
|
||||
width: 250px;
|
||||
}
|
||||
.qr {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
html {
|
||||
@@ -1090,108 +863,8 @@ a:focus-visible {
|
||||
.page-width {
|
||||
width: min(100% - 32px, 560px);
|
||||
}
|
||||
.site-header {
|
||||
height: 55px;
|
||||
box-shadow: 0 1px 0 rgba(31, 92, 165, 0.08);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
.brand {
|
||||
width: 148px;
|
||||
}
|
||||
.desktop-nav {
|
||||
display: none;
|
||||
}
|
||||
.login-button {
|
||||
display: none;
|
||||
}
|
||||
.mobile-menu-button {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
gap: 5px;
|
||||
margin-left: auto;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
color: #267cf5;
|
||||
background: rgba(235, 245, 255, 0.88);
|
||||
}
|
||||
.mobile-menu-button .menu-glyph {
|
||||
display: block;
|
||||
font-size: 23px;
|
||||
line-height: 1;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.mobile-menu-button.open .menu-glyph {
|
||||
font-size: 28px;
|
||||
}
|
||||
.mobile-navigation {
|
||||
position: fixed;
|
||||
z-index: 19;
|
||||
top: 55px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
overflow-y: auto;
|
||||
background: rgba(247, 251, 255, 0.97);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
.mobile-navigation-inner {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
padding-top: 20px;
|
||||
padding-bottom: max(30px, env(safe-area-inset-bottom));
|
||||
}
|
||||
.mobile-navigation-inner > button {
|
||||
min-height: 58px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 4px;
|
||||
color: #46505e;
|
||||
border-bottom: 1px solid rgba(33, 106, 198, 0.1);
|
||||
background: transparent;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
.mobile-navigation-inner > button.active {
|
||||
color: #1478fb;
|
||||
font-weight: 700;
|
||||
}
|
||||
.mobile-navigation-inner > button b {
|
||||
color: #78aaf0;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.mobile-navigation-inner .mobile-consult-button {
|
||||
min-height: 50px;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 24px;
|
||||
padding: 0 20px;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
border-radius: 7px;
|
||||
background: linear-gradient(100deg, #453cff, #00adf6);
|
||||
box-shadow: 0 12px 24px rgba(25, 106, 255, 0.2);
|
||||
}
|
||||
.mobile-navigation-inner .mobile-consult-button b {
|
||||
color: inherit;
|
||||
}
|
||||
.mobile-nav-enter-active,
|
||||
.mobile-nav-leave-active {
|
||||
transition:
|
||||
opacity 0.25s ease,
|
||||
transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
.mobile-nav-enter-from,
|
||||
.mobile-nav-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-12px);
|
||||
}
|
||||
.hero-section {
|
||||
height: min(720px, calc(100svh - 55px));
|
||||
height: min(720px, calc(100svh - 58px));
|
||||
min-height: 570px;
|
||||
}
|
||||
.hero-art {
|
||||
@@ -1442,44 +1115,6 @@ a:focus-visible {
|
||||
.cta-content h2 br {
|
||||
display: none;
|
||||
}
|
||||
.footer-main {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 26px;
|
||||
padding: 38px 0 34px;
|
||||
}
|
||||
.footer-main > img {
|
||||
width: 240px;
|
||||
}
|
||||
.footer-links {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px 18px;
|
||||
}
|
||||
.footer-links span {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.footer-bottom {
|
||||
height: auto;
|
||||
min-height: 59px;
|
||||
padding: 14px 16px;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.consult-dialog {
|
||||
width: calc(100% - 28px);
|
||||
padding: 30px 22px 24px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.consult-dialog .primary-button {
|
||||
width: 100%;
|
||||
}
|
||||
.toast {
|
||||
right: 16px;
|
||||
bottom: calc(16px + env(safe-area-inset-bottom));
|
||||
left: 16px;
|
||||
transform: none;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 390px) {
|
||||
@@ -1506,7 +1141,387 @@ a:focus-visible {
|
||||
width: calc(100vw - 12px);
|
||||
margin-right: -12px;
|
||||
}
|
||||
.footer-main > img {
|
||||
width: min(240px, 100%);
|
||||
}
|
||||
|
||||
/* Inner-page readability and layout system. The homepage intentionally stays unchanged. */
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
) {
|
||||
--inner-ink: #2f4056;
|
||||
--inner-copy: #52657d;
|
||||
--inner-muted: #667a91;
|
||||
color: var(--inner-ink);
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
@media (min-width: 1180px) {
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
.page-width {
|
||||
width: min(1400px, calc(100% - 80px));
|
||||
}
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(.page-eyebrow, .section-kicker) {
|
||||
color: #286dae !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 700 !important;
|
||||
letter-spacing: 0.08em !important;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(.primary-button, .outline-button) {
|
||||
gap: 8px;
|
||||
min-height: 46px;
|
||||
font-size: 15px !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(.primary-button, .outline-button, button, a)
|
||||
.app-icon {
|
||||
width: 1.05em;
|
||||
height: 1.05em;
|
||||
}
|
||||
|
||||
/* Keep long-form section headings visually anchored instead of centering every block. */
|
||||
:is(.advantages-page, .case-detail-page) .center-heading,
|
||||
.solutions-page :is(.model-heading, .process-heading, .service-system-heading),
|
||||
.cases-page .cases-library-heading,
|
||||
.insights-page .library-heading {
|
||||
max-width: 860px !important;
|
||||
margin-right: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
/* About */
|
||||
.about-page
|
||||
:is(
|
||||
.story-content p,
|
||||
.change-step p,
|
||||
.change-question,
|
||||
.method-flow p,
|
||||
.timeline-list li,
|
||||
.team-capabilities p
|
||||
) {
|
||||
color: var(--inner-copy) !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.75 !important;
|
||||
}
|
||||
.about-page
|
||||
:is(
|
||||
.contact-details dt,
|
||||
.contact-qr small,
|
||||
.team-capabilities span,
|
||||
.method-marker,
|
||||
.change-principles span
|
||||
) {
|
||||
color: var(--inner-muted) !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
.about-page :is(.contact-details dd, .contact-qr strong, .stats-row p, .hero-status) {
|
||||
color: var(--inner-copy) !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
/* Advantages */
|
||||
.advantages-page :is(.hero-advantage-links button, .story-action, .proof-layout header > a) {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.advantages-page
|
||||
:is(
|
||||
.story-problem p,
|
||||
.story-capability p,
|
||||
.advantage-story-copy li,
|
||||
.advantage-story-copy blockquote,
|
||||
.comparison-table-wrap th,
|
||||
.comparison-table-wrap td,
|
||||
.value-added-copy > span,
|
||||
.proof-stats p
|
||||
) {
|
||||
color: var(--inner-copy) !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.7 !important;
|
||||
}
|
||||
.advantages-page
|
||||
:is(.story-problem strong, .story-capability strong, .story-actions-title, .story-index) {
|
||||
color: #476888 !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
.advantages-page :is(.value-added-copy > p, .value-added-copy li, .proof-stats span) {
|
||||
color: var(--inner-muted) !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
.advantages-page .comparison-table-wrap thead th {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
/* Services */
|
||||
.services-page
|
||||
:is(
|
||||
.model-explanation li,
|
||||
.pain-note p,
|
||||
.service-details strong,
|
||||
.service-details li,
|
||||
.process-timeline p,
|
||||
.industry-list p,
|
||||
.proof-summary li
|
||||
) {
|
||||
color: var(--inner-copy) !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.72 !important;
|
||||
}
|
||||
.services-page
|
||||
:is(
|
||||
.hero-badges,
|
||||
.journey-number,
|
||||
.service-index,
|
||||
.service-action,
|
||||
.industry-list strong,
|
||||
.proof-tag
|
||||
) {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.services-page
|
||||
:is(
|
||||
.model-explanation header span,
|
||||
.visual-topline,
|
||||
.step-marker span,
|
||||
.industry-list > article > span,
|
||||
.proof-data span
|
||||
) {
|
||||
color: var(--inner-muted) !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
/* Solutions */
|
||||
.solutions-page
|
||||
:is(.hero-industry-links button, .industry-sticky-nav button, .industry-plan-button) {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.solutions-page
|
||||
:is(.decision-factor-list p, .strategy-copy, .industry-strategy li, .compliance-note) {
|
||||
color: var(--inner-copy) !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.72 !important;
|
||||
}
|
||||
.solutions-page
|
||||
:is(
|
||||
.decision-factor-list > article > span,
|
||||
.strategy-label,
|
||||
.actions-title,
|
||||
.industry-visual-header
|
||||
) {
|
||||
color: var(--inner-muted) !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
.solutions-page .industry-tags span {
|
||||
color: #3f6286 !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
/* Case library */
|
||||
.cases-page :is(.case-filters button, .featured-case-copy > a, .snapshot-copy button) {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.cases-page
|
||||
:is(.featured-summary, .snapshot-copy > p, .case-empty > p:nth-of-type(2), .method-list p) {
|
||||
color: var(--inner-copy) !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.72 !important;
|
||||
}
|
||||
.cases-page :is(.featured-case-copy > p, .snapshot-heading > span, .method-list span) {
|
||||
color: var(--inner-muted) !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
.cases-page .case-filters {
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
|
||||
/* Case detail */
|
||||
.case-detail-page .breadcrumb {
|
||||
color: var(--inner-muted) !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
.case-detail-page
|
||||
:is(
|
||||
.objective-box > strong,
|
||||
.objective-box li,
|
||||
.baseline-grid p,
|
||||
.question-grid p,
|
||||
.question-grid strong,
|
||||
.phase-list p,
|
||||
.distribution-map article p,
|
||||
.result-table-wrap th,
|
||||
.result-table-wrap td,
|
||||
.outcome-grid p
|
||||
) {
|
||||
color: var(--inner-copy) !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.72 !important;
|
||||
}
|
||||
.case-detail-page
|
||||
:is(
|
||||
.case-meta span,
|
||||
.baseline-grid span,
|
||||
.baseline-conclusion span,
|
||||
.subsection-copy > p,
|
||||
.phase-list > article > span,
|
||||
.distribution-map article > span,
|
||||
.summary-quote > span,
|
||||
.related-grid span
|
||||
) {
|
||||
color: var(--inner-muted) !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
.case-detail-page .result-table-wrap thead th {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
/* Insight library */
|
||||
.insights-page
|
||||
:is(
|
||||
.hero-actions > button,
|
||||
.featured-footer a,
|
||||
.read-link,
|
||||
.insight-filters button,
|
||||
.load-more,
|
||||
.whitepaper-grid > button
|
||||
) {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.insights-page
|
||||
:is(
|
||||
.featured-copy > p,
|
||||
.article-copy > p,
|
||||
.insight-empty p,
|
||||
.whitepaper-copy p,
|
||||
.whitepaper-copy span
|
||||
) {
|
||||
color: var(--inner-copy) !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.72 !important;
|
||||
}
|
||||
.insights-page :is(.article-meta, .featured-footer > span) {
|
||||
color: var(--inner-muted) !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
.insights-page .insight-filters {
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
|
||||
/* Article detail */
|
||||
.article-page .breadcrumbs {
|
||||
color: var(--inner-muted) !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
.article-page
|
||||
:is(
|
||||
.article-heading > p,
|
||||
.article-byline,
|
||||
.article-aside > a,
|
||||
.article-aside button,
|
||||
.section-number,
|
||||
.article-pagination span,
|
||||
.related-section header p
|
||||
) {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
.article-page
|
||||
:is(.comparison-head, .comparison-row, .draft-note p, .inline-cta button, .article-aside strong) {
|
||||
color: var(--inner-copy) !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.65 !important;
|
||||
}
|
||||
.article-page .article-content {
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
) {
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
.page-width {
|
||||
width: calc(100vw - 32px);
|
||||
max-width: 620px;
|
||||
}
|
||||
|
||||
:is(
|
||||
.about-page,
|
||||
.advantages-page,
|
||||
.services-page,
|
||||
.solutions-page,
|
||||
.cases-page,
|
||||
.case-detail-page,
|
||||
.insights-page,
|
||||
.article-page
|
||||
)
|
||||
:is(.page-eyebrow, .section-kicker) {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
<script setup>
|
||||
import {
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
Bottom,
|
||||
Check,
|
||||
Close,
|
||||
Location,
|
||||
Menu,
|
||||
Message,
|
||||
Phone,
|
||||
Plus,
|
||||
Search
|
||||
} from '@element-plus/icons-vue'
|
||||
|
||||
const props = defineProps({
|
||||
name: {
|
||||
type: String,
|
||||
default: 'arrow-right'
|
||||
}
|
||||
})
|
||||
|
||||
const icons = {
|
||||
'arrow-left': ArrowLeft,
|
||||
'arrow-right': ArrowRight,
|
||||
bottom: Bottom,
|
||||
check: Check,
|
||||
close: Close,
|
||||
location: Location,
|
||||
menu: Menu,
|
||||
message: Message,
|
||||
phone: Phone,
|
||||
plus: Plus,
|
||||
search: Search
|
||||
}
|
||||
|
||||
const icon = computed(() => icons[props.name] || ArrowRight)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="icon" class="app-icon" aria-hidden="true" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.app-icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
flex: 0 0 auto;
|
||||
overflow: visible;
|
||||
vertical-align: -0.12em;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,485 @@
|
||||
<script setup>
|
||||
const route = useRoute()
|
||||
const { isOpen, context, form, closeConsultation } = useConsultation()
|
||||
const formElement = ref(null)
|
||||
const nameInput = ref(null)
|
||||
const errors = ref({})
|
||||
const status = ref('idle')
|
||||
const submitError = ref('')
|
||||
|
||||
const industries = ['企业服务', '教育培训', '本地生活', '医疗健康', '电商零售', '其他行业']
|
||||
const needs = ['品牌曝光', '精准获客转化', '全域营销', 'GEO 诊断', '内容与媒体分发']
|
||||
|
||||
function validate() {
|
||||
const nextErrors = {}
|
||||
if (!form.value.name.trim()) nextErrors.name = '请填写您的姓名'
|
||||
if (!form.value.company.trim()) nextErrors.company = '请填写公司名称'
|
||||
if (!form.value.contact.trim()) {
|
||||
nextErrors.contact = '请填写手机号或邮箱'
|
||||
} else if (
|
||||
!/^(1\d{10}|[\w.+-]+@[\w.-]+\.[A-Za-z]{2,}|[\d\s()+-]{6,})$/.test(form.value.contact.trim())
|
||||
) {
|
||||
nextErrors.contact = '联系方式格式不正确'
|
||||
}
|
||||
if (!form.value.consent) nextErrors.consent = '请确认允许工作人员与您联系'
|
||||
errors.value = nextErrors
|
||||
return Object.keys(nextErrors).length === 0
|
||||
}
|
||||
|
||||
async function submitForm() {
|
||||
submitError.value = ''
|
||||
if (!validate()) return
|
||||
|
||||
status.value = 'submitting'
|
||||
try {
|
||||
// 后续接入 CRM 或官网线索接口时，在此替换为真实请求。
|
||||
await new Promise((resolve) => setTimeout(resolve, 650))
|
||||
status.value = 'success'
|
||||
} catch {
|
||||
status.value = 'error'
|
||||
submitError.value = '暂时无法提交，请稍后重试或通过页脚联系方式咨询。'
|
||||
}
|
||||
}
|
||||
|
||||
function resetAndClose() {
|
||||
status.value = 'idle'
|
||||
errors.value = {}
|
||||
submitError.value = ''
|
||||
closeConsultation()
|
||||
}
|
||||
|
||||
function onKeydown(event) {
|
||||
if (event.key === 'Escape' && isOpen.value) resetAndClose()
|
||||
}
|
||||
|
||||
watch(isOpen, async (open) => {
|
||||
if (!import.meta.client) return
|
||||
document.body.style.overflow = open ? 'hidden' : ''
|
||||
if (open) {
|
||||
status.value = 'idle'
|
||||
errors.value = {}
|
||||
await nextTick()
|
||||
nameInput.value?.focus()
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => window.addEventListener('keydown', onKeydown))
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('keydown', onKeydown)
|
||||
document.body.style.overflow = ''
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="consultation">
|
||||
<div v-if="isOpen" class="consultation-mask" @mousedown.self="resetAndClose">
|
||||
<section
|
||||
class="consultation-panel"
|
||||
:class="{ 'is-interior': route.path !== '/' }"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
:aria-labelledby="
|
||||
status === 'success' ? 'consultation-success-title' : 'consultation-title'
|
||||
"
|
||||
>
|
||||
<button
|
||||
class="consultation-close"
|
||||
type="button"
|
||||
aria-label="关闭咨询弹窗"
|
||||
@click="resetAndClose"
|
||||
>
|
||||
<AppIcon name="close" />
|
||||
</button>
|
||||
|
||||
<div v-if="status === 'success'" class="consultation-success">
|
||||
<div class="success-mark" aria-hidden="true"><AppIcon name="check" /></div>
|
||||
<p class="modal-kicker">提交成功</p>
|
||||
<h2 id="consultation-success-title">需求已经记录</h2>
|
||||
<p>我们会根据您填写的行业与目标匹配顾问，请保持联系方式畅通。</p>
|
||||
<button class="modal-primary" type="button" @click="resetAndClose">完成</button>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<header class="consultation-heading">
|
||||
<p class="modal-kicker">1 对 1 增长沟通</p>
|
||||
<h2 id="consultation-title">{{ context.title }}</h2>
|
||||
<p>留下基本信息，我们会结合您的业务阶段提供针对性建议。</p>
|
||||
</header>
|
||||
|
||||
<form
|
||||
ref="formElement"
|
||||
class="consultation-form"
|
||||
novalidate
|
||||
@submit.prevent="submitForm"
|
||||
>
|
||||
<div class="form-grid">
|
||||
<label>
|
||||
<span>姓名 <b>*</b></span>
|
||||
<input
|
||||
ref="nameInput"
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
autocomplete="name"
|
||||
placeholder="怎么称呼您"
|
||||
/>
|
||||
<small v-if="errors.name">{{ errors.name }}</small>
|
||||
</label>
|
||||
<label>
|
||||
<span>公司名称 <b>*</b></span>
|
||||
<input
|
||||
v-model="form.company"
|
||||
type="text"
|
||||
autocomplete="organization"
|
||||
placeholder="请输入公司名称"
|
||||
/>
|
||||
<small v-if="errors.company">{{ errors.company }}</small>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label>
|
||||
<span>联系方式 <b>*</b></span>
|
||||
<input
|
||||
v-model="form.contact"
|
||||
type="text"
|
||||
autocomplete="tel"
|
||||
placeholder="手机号或工作邮箱"
|
||||
/>
|
||||
<small v-if="errors.contact">{{ errors.contact }}</small>
|
||||
</label>
|
||||
|
||||
<div class="form-grid">
|
||||
<label>
|
||||
<span>所属行业</span>
|
||||
<select v-model="form.industry">
|
||||
<option value="">请选择</option>
|
||||
<option v-for="industry in industries" :key="industry" :value="industry">
|
||||
{{ industry }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>核心需求</span>
|
||||
<select v-model="form.need">
|
||||
<option value="">请选择</option>
|
||||
<option v-for="need in needs" :key="need" :value="need">{{ need }}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label>
|
||||
<span>当前问题与目标</span>
|
||||
<textarea
|
||||
v-model="form.message"
|
||||
rows="3"
|
||||
placeholder="例如：希望提升品牌在主流 AI 平台的推荐率"
|
||||
></textarea>
|
||||
</label>
|
||||
|
||||
<label class="consent-row">
|
||||
<input v-model="form.consent" type="checkbox" />
|
||||
<span>我同意工作人员根据以上信息与我联系，并妥善使用本次咨询信息。</span>
|
||||
</label>
|
||||
<small v-if="errors.consent" class="consent-error">{{ errors.consent }}</small>
|
||||
|
||||
<p v-if="submitError" class="submit-error">{{ submitError }}</p>
|
||||
<p class="source-note">咨询来源：{{ context.source }}</p>
|
||||
|
||||
<button class="modal-primary" type="submit" :disabled="status === 'submitting'">
|
||||
<span v-if="status === 'submitting'" class="submit-dots" aria-hidden="true"
|
||||
><i></i><i></i><i></i
|
||||
></span>
|
||||
<template v-else>提交咨询 <AppIcon name="arrow-right" /></template>
|
||||
</button>
|
||||
</form>
|
||||
</template>
|
||||
</section>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.consultation-mask {
|
||||
position: fixed;
|
||||
z-index: 80;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
background: rgba(15, 35, 62, 0.48);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.consultation-panel {
|
||||
position: relative;
|
||||
width: min(620px, 100%);
|
||||
max-height: min(820px, calc(100dvh - 48px));
|
||||
overflow-y: auto;
|
||||
padding: 40px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.74);
|
||||
border-radius: 20px;
|
||||
background:
|
||||
radial-gradient(circle at 88% 8%, rgba(78, 158, 255, 0.16), transparent 31%),
|
||||
rgba(255, 255, 255, 0.98);
|
||||
box-shadow:
|
||||
0 30px 80px rgba(28, 83, 155, 0.24),
|
||||
inset 0 1px 0 #fff;
|
||||
}
|
||||
.consultation-panel.is-interior {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.consultation-close {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 18px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 6px;
|
||||
color: #4f647d;
|
||||
background: #edf5ff;
|
||||
}
|
||||
.is-interior .consultation-close {
|
||||
border: 1px solid rgba(72, 139, 219, 0.12);
|
||||
border-radius: 5px;
|
||||
}
|
||||
.consultation-close :deep(.app-icon) {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.consultation-heading {
|
||||
padding-right: 38px;
|
||||
}
|
||||
.modal-kicker {
|
||||
margin: 0 0 8px;
|
||||
color: #207bf2;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.16em;
|
||||
}
|
||||
.consultation-heading h2,
|
||||
.consultation-success h2 {
|
||||
margin: 0;
|
||||
color: #24364d;
|
||||
font-size: clamp(25px, 4vw, 34px);
|
||||
letter-spacing: -0.035em;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.consultation-heading > p:last-child,
|
||||
.consultation-success > p {
|
||||
max-width: 32em;
|
||||
margin: 12px 0 0;
|
||||
color: #758399;
|
||||
font-size: 14px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
.consultation-form {
|
||||
display: grid;
|
||||
gap: 17px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 14px;
|
||||
}
|
||||
.consultation-form label {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
}
|
||||
.consultation-form label > span {
|
||||
color: #41536a;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.consultation-form label > span b {
|
||||
color: #2a80ef;
|
||||
}
|
||||
.consultation-form input:not([type='checkbox']),
|
||||
.consultation-form select,
|
||||
.consultation-form textarea {
|
||||
width: 100%;
|
||||
border: 1px solid #dbe7f5;
|
||||
border-radius: 8px;
|
||||
outline: 0;
|
||||
background: rgba(247, 251, 255, 0.82);
|
||||
color: #2f4056;
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
transition:
|
||||
border-color 0.2s,
|
||||
box-shadow 0.2s,
|
||||
background 0.2s;
|
||||
}
|
||||
.consultation-form input:not([type='checkbox']),
|
||||
.consultation-form select {
|
||||
height: 46px;
|
||||
padding: 0 13px;
|
||||
}
|
||||
.consultation-form textarea {
|
||||
resize: vertical;
|
||||
min-height: 90px;
|
||||
padding: 12px 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.consultation-form input:focus,
|
||||
.consultation-form select:focus,
|
||||
.consultation-form textarea:focus {
|
||||
border-color: #66a8fa;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 4px rgba(43, 128, 239, 0.1);
|
||||
}
|
||||
.consultation-form small,
|
||||
.consent-error,
|
||||
.submit-error {
|
||||
color: #d54b55;
|
||||
font-size: 12px;
|
||||
}
|
||||
.consent-row {
|
||||
grid-template-columns: 18px 1fr;
|
||||
align-items: start;
|
||||
gap: 9px !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
.consent-row input {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 2px 0 0;
|
||||
accent-color: #247df0;
|
||||
}
|
||||
.consent-row span {
|
||||
color: #5f6e81 !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 400 !important;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.source-note {
|
||||
margin: -4px 0 0;
|
||||
color: #718095;
|
||||
font-size: 12px;
|
||||
}
|
||||
.modal-primary {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
border-radius: 7px;
|
||||
color: #fff;
|
||||
background: linear-gradient(100deg, #453cff, #00a7ef);
|
||||
box-shadow: 0 12px 24px rgba(35, 111, 231, 0.2);
|
||||
transition:
|
||||
transform 0.2s,
|
||||
box-shadow 0.2s,
|
||||
opacity 0.2s;
|
||||
}
|
||||
.modal-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 16px 30px rgba(35, 111, 231, 0.28);
|
||||
}
|
||||
.modal-primary:active {
|
||||
transform: translateY(1px) scale(0.99);
|
||||
}
|
||||
.modal-primary:disabled {
|
||||
cursor: wait;
|
||||
opacity: 0.72;
|
||||
}
|
||||
.submit-dots {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
.submit-dots i {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
animation: submit-dot 0.8s infinite alternate;
|
||||
}
|
||||
.submit-dots i:nth-child(2) {
|
||||
animation-delay: 0.15s;
|
||||
}
|
||||
.submit-dots i:nth-child(3) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
.consultation-success {
|
||||
min-height: 360px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
.consultation-success .modal-primary {
|
||||
max-width: 220px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
.success-mark {
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 22px;
|
||||
color: #fff;
|
||||
background: linear-gradient(145deg, #2a86f5, #65c7f4);
|
||||
box-shadow: 0 16px 30px rgba(45, 131, 239, 0.25);
|
||||
font-size: 30px;
|
||||
}
|
||||
.is-interior .success-mark {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.consultation-enter-active,
|
||||
.consultation-leave-active {
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
.consultation-enter-active .consultation-panel,
|
||||
.consultation-leave-active .consultation-panel {
|
||||
transition:
|
||||
transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
|
||||
opacity 0.22s;
|
||||
}
|
||||
.consultation-enter-from,
|
||||
.consultation-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
.consultation-enter-from .consultation-panel,
|
||||
.consultation-leave-to .consultation-panel {
|
||||
opacity: 0;
|
||||
transform: translateY(18px) scale(0.98);
|
||||
}
|
||||
@keyframes submit-dot {
|
||||
to {
|
||||
transform: translateY(-4px);
|
||||
opacity: 0.45;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.consultation-mask {
|
||||
align-items: end;
|
||||
padding: 0;
|
||||
}
|
||||
.consultation-panel {
|
||||
width: 100%;
|
||||
max-height: calc(100dvh - 24px);
|
||||
padding: 32px 20px 24px;
|
||||
border-radius: 22px 22px 0 0;
|
||||
}
|
||||
.consultation-panel.is-interior {
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.consultation-close {
|
||||
top: 13px;
|
||||
right: 13px;
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.submit-dots i {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,177 @@
|
||||
<script setup>
|
||||
const route = useRoute()
|
||||
const progress = ref(0)
|
||||
const showBackToTop = ref(false)
|
||||
let observer
|
||||
let frame
|
||||
|
||||
function updateScrollState() {
|
||||
const scrollTop = window.scrollY || document.documentElement.scrollTop
|
||||
const scrollable = Math.max(document.documentElement.scrollHeight - window.innerHeight, 1)
|
||||
progress.value = Math.min(100, Math.max(0, (scrollTop / scrollable) * 100))
|
||||
showBackToTop.value = scrollTop > Math.min(window.innerHeight * 0.72, 620)
|
||||
}
|
||||
|
||||
function onScroll() {
|
||||
if (frame) return
|
||||
frame = window.requestAnimationFrame(() => {
|
||||
frame = 0
|
||||
updateScrollState()
|
||||
})
|
||||
}
|
||||
|
||||
function prepareSectionReveals() {
|
||||
observer?.disconnect()
|
||||
const page = document.querySelector(
|
||||
'.about-page, .advantages-page, .services-page, .solutions-page, .cases-page, .case-detail-page, .insights-page, .article-page'
|
||||
)
|
||||
if (!page || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
|
||||
|
||||
page.classList.add('interior-reveal-ready')
|
||||
const sections = [
|
||||
...page.querySelectorAll('main > section, main > article > div, main > article > header')
|
||||
]
|
||||
sections.forEach((section, index) => {
|
||||
section.classList.add('interior-reveal')
|
||||
if (index === 0 || section.getBoundingClientRect().top < window.innerHeight * 0.92) {
|
||||
section.classList.add('is-revealed')
|
||||
}
|
||||
})
|
||||
|
||||
observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (!entry.isIntersecting) return
|
||||
entry.target.classList.add('is-revealed')
|
||||
observer?.unobserve(entry.target)
|
||||
})
|
||||
},
|
||||
{ rootMargin: '0px 0px -9% 0px', threshold: 0.08 }
|
||||
)
|
||||
|
||||
sections
|
||||
.filter((section) => !section.classList.contains('is-revealed'))
|
||||
.forEach((section) => observer.observe(section))
|
||||
}
|
||||
|
||||
function backToTop() {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
window.addEventListener('scroll', onScroll, { passive: true })
|
||||
window.addEventListener('resize', onScroll, { passive: true })
|
||||
await nextTick()
|
||||
updateScrollState()
|
||||
prepareSectionReveals()
|
||||
})
|
||||
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
async () => {
|
||||
await nextTick()
|
||||
updateScrollState()
|
||||
prepareSectionReveals()
|
||||
}
|
||||
)
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
observer?.disconnect()
|
||||
if (frame) window.cancelAnimationFrame(frame)
|
||||
window.removeEventListener('scroll', onScroll)
|
||||
window.removeEventListener('resize', onScroll)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="reading-progress" aria-hidden="true">
|
||||
<span :style="{ transform: `scaleX(${progress / 100})` }"></span>
|
||||
</div>
|
||||
<Transition name="back-top">
|
||||
<button
|
||||
v-if="showBackToTop"
|
||||
class="back-to-top"
|
||||
type="button"
|
||||
aria-label="回到页面顶部"
|
||||
title="回到顶部"
|
||||
@click="backToTop"
|
||||
>
|
||||
<AppIcon name="bottom" />
|
||||
</button>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.reading-progress {
|
||||
position: fixed;
|
||||
z-index: 45;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.reading-progress span {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
background: linear-gradient(90deg, #166ff3, #62c8f1);
|
||||
box-shadow: 0 1px 8px rgba(27, 124, 240, 0.34);
|
||||
transform-origin: left center;
|
||||
will-change: transform;
|
||||
}
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
z-index: 28;
|
||||
right: clamp(18px, 2.7vw, 42px);
|
||||
bottom: clamp(18px, 3vw, 40px);
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 1px solid rgba(91, 151, 224, 0.22);
|
||||
border-radius: 6px;
|
||||
color: #2379e8;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 14px 34px rgba(37, 94, 160, 0.16);
|
||||
backdrop-filter: blur(14px);
|
||||
transition:
|
||||
color 0.22s ease,
|
||||
background 0.22s ease,
|
||||
transform 0.22s ease,
|
||||
box-shadow 0.22s ease;
|
||||
}
|
||||
.back-to-top :deep(.app-icon) {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.back-to-top:hover {
|
||||
color: #fff;
|
||||
background: #207bf2;
|
||||
box-shadow: 0 17px 36px rgba(31, 121, 236, 0.25);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
.back-to-top:active {
|
||||
transform: translateY(1px) scale(0.97);
|
||||
}
|
||||
.back-top-enter-active,
|
||||
.back-top-leave-active {
|
||||
transition:
|
||||
opacity 0.2s ease,
|
||||
transform 0.24s ease;
|
||||
}
|
||||
.back-top-enter-from,
|
||||
.back-top-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(12px);
|
||||
}
|
||||
@media (max-width: 680px) {
|
||||
.back-to-top {
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,251 @@
|
||||
<script setup>
|
||||
const route = useRoute()
|
||||
const { openConsultation } = useConsultation()
|
||||
|
||||
const sourceLabel = computed(() => {
|
||||
const labels = {
|
||||
'/services': '营销增长服务',
|
||||
'/solutions': '行业解决方案',
|
||||
'/cases': '客户案例',
|
||||
'/advantages': '核心优势',
|
||||
'/insights': '增长洞察',
|
||||
'/about': '关于我们'
|
||||
}
|
||||
const base = Object.keys(labels).find(
|
||||
(path) => route.path === path || route.path.startsWith(`${path}/`)
|
||||
)
|
||||
return `${labels[base] || '全站'}页页脚`
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="subsite-footer" :class="{ 'is-interior': route.path !== '/' }">
|
||||
<div class="page-width footer-content">
|
||||
<div class="footer-company">
|
||||
<img src="/images/lanhu/slices/home-group114-image33@2x.png" alt="成都大马棒传媒有限公司" />
|
||||
<p>聚焦 AI 搜索增长，用可信内容、全域信源与转化承接帮助品牌建立长期数字资产。</p>
|
||||
<button type="button" @click="openConsultation({ source: sourceLabel })">
|
||||
<span>预约免费诊断</span>
|
||||
<AppIcon name="arrow-right" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav class="footer-navigation" aria-label="页脚导航">
|
||||
<div>
|
||||
<strong>快速导航</strong>
|
||||
<NuxtLink to="/">首页</NuxtLink>
|
||||
<NuxtLink to="/services">营销增长服务</NuxtLink>
|
||||
<NuxtLink to="/solutions">行业解决方案</NuxtLink>
|
||||
<NuxtLink to="/cases">客户案例</NuxtLink>
|
||||
<NuxtLink to="/advantages">核心优势</NuxtLink>
|
||||
<NuxtLink to="/insights">增长洞察</NuxtLink>
|
||||
<NuxtLink to="/about">关于我们</NuxtLink>
|
||||
</div>
|
||||
<div>
|
||||
<strong>业务方向</strong>
|
||||
<NuxtLink to="/services#brand-exposure">品牌曝光</NuxtLink>
|
||||
<NuxtLink to="/services#lead-conversion">精准获客转化</NuxtLink>
|
||||
<NuxtLink to="/services#omnichannel">全域营销</NuxtLink>
|
||||
</div>
|
||||
<div>
|
||||
<strong>联系我们</strong>
|
||||
<span class="contact-line"
|
||||
><AppIcon name="location" />成都市武侯区芯通科技大厦 B 座 9 楼</span
|
||||
>
|
||||
<span class="contact-line"><AppIcon name="phone" />联系电话：待补充</span>
|
||||
<span class="contact-line"><AppIcon name="message" />商务邮箱：待补充</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="footer-qr" aria-label="专属顾问二维码占位">
|
||||
<span class="qr-pattern" aria-hidden="true"></span>
|
||||
<strong>扫码添加专属顾问</strong>
|
||||
<small>获取 1 对 1 GEO 增长建议</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-legal">
|
||||
<div class="page-width">
|
||||
<span>© 2026 成都大马棒传媒有限公司</span><span>备案信息待补充 · 隐私说明</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.subsite-footer {
|
||||
color: #cbd6e1;
|
||||
background: #12202a;
|
||||
}
|
||||
.subsite-footer.is-interior {
|
||||
background:
|
||||
linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px) 0 0 / 38px 38px,
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px) 0 0 / 38px 38px,
|
||||
#12202a;
|
||||
}
|
||||
.footer-content {
|
||||
min-height: 285px;
|
||||
display: grid;
|
||||
grid-template-columns: 1.2fr 1.7fr 0.65fr;
|
||||
align-items: center;
|
||||
gap: 52px;
|
||||
padding-top: 42px;
|
||||
padding-bottom: 42px;
|
||||
}
|
||||
.footer-company img {
|
||||
display: block;
|
||||
width: 255px;
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
}
|
||||
.is-interior .footer-company img {
|
||||
border-radius: 5px;
|
||||
}
|
||||
.footer-company p {
|
||||
max-width: 390px;
|
||||
margin: 20px 0;
|
||||
color: #b6c2cc;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.footer-company button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0;
|
||||
color: #76b7ff;
|
||||
background: transparent;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.footer-company button:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.is-interior .footer-company button {
|
||||
transition:
|
||||
color 0.22s ease,
|
||||
transform 0.22s ease;
|
||||
}
|
||||
.is-interior .footer-company button:hover {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
.footer-navigation {
|
||||
display: grid;
|
||||
grid-template-columns: 0.8fr 0.9fr 1.45fr;
|
||||
gap: 32px;
|
||||
}
|
||||
.footer-navigation div {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 12px;
|
||||
}
|
||||
.footer-navigation strong {
|
||||
margin-bottom: 5px;
|
||||
color: #eff6fb;
|
||||
font-size: 14px;
|
||||
}
|
||||
.footer-navigation a,
|
||||
.footer-navigation span {
|
||||
color: #b1bdc7;
|
||||
font-size: 13px;
|
||||
line-height: 1.65;
|
||||
text-decoration: none;
|
||||
}
|
||||
.footer-navigation a:hover {
|
||||
color: #70b5ff;
|
||||
}
|
||||
.is-interior .footer-navigation a {
|
||||
transition:
|
||||
color 0.2s ease,
|
||||
transform 0.2s ease;
|
||||
}
|
||||
.is-interior .footer-navigation a:hover {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
.footer-navigation .contact-line {
|
||||
display: grid;
|
||||
grid-template-columns: 16px 1fr;
|
||||
align-items: start;
|
||||
gap: 8px;
|
||||
}
|
||||
.footer-navigation .contact-line :deep(.app-icon) {
|
||||
margin-top: 3px;
|
||||
color: #70b5ff;
|
||||
}
|
||||
.footer-qr {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.qr-pattern {
|
||||
width: 86px;
|
||||
height: 86px;
|
||||
display: block;
|
||||
border: 7px solid #fff;
|
||||
background:
|
||||
linear-gradient(90deg, #13212b 25%, transparent 25% 50%, #13212b 50% 75%, transparent 75%) 0 0 /
|
||||
16px 16px,
|
||||
linear-gradient(#13212b 25%, transparent 25% 50%, #13212b 50% 75%, transparent 75%) 8px 8px /
|
||||
16px 16px,
|
||||
#fff;
|
||||
}
|
||||
.footer-qr strong {
|
||||
margin-top: 13px;
|
||||
color: #e8f0f6;
|
||||
font-size: 13px;
|
||||
}
|
||||
.footer-qr small {
|
||||
margin-top: 6px;
|
||||
color: #aebac4;
|
||||
font-size: 12px;
|
||||
}
|
||||
.footer-legal {
|
||||
min-height: 54px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #aeb9c2;
|
||||
background: #263139;
|
||||
font-size: 12px;
|
||||
}
|
||||
.is-interior .footer-legal {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.055);
|
||||
background: rgba(38, 49, 57, 0.88);
|
||||
}
|
||||
.footer-legal .page-width {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
}
|
||||
@media (max-width: 960px) {
|
||||
.footer-content {
|
||||
grid-template-columns: 1fr 1.5fr;
|
||||
}
|
||||
.footer-qr {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 680px) {
|
||||
.footer-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 32px;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 36px;
|
||||
}
|
||||
.footer-company img {
|
||||
width: 230px;
|
||||
}
|
||||
.footer-navigation {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 28px 18px;
|
||||
}
|
||||
.footer-navigation div:last-child {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.footer-legal .page-width {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
padding: 14px 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,328 @@
|
||||
<script setup>
|
||||
const route = useRoute()
|
||||
const mobileOpen = ref(false)
|
||||
const { openConsultation } = useConsultation()
|
||||
|
||||
const navItems = [
|
||||
{ label: '首页', to: '/' },
|
||||
{ label: '营销增长服务', to: '/services' },
|
||||
{ label: '行业解决方案', to: '/solutions' },
|
||||
{ label: '客户案例', to: '/cases' },
|
||||
{ label: '核心优势', to: '/advantages' },
|
||||
{ label: '增长洞察', to: '/insights' },
|
||||
{ label: '关于我们', to: '/about' }
|
||||
]
|
||||
|
||||
function isActive(item) {
|
||||
if (item.to.includes('#')) return false
|
||||
if (item.to === '/') return route.path === '/'
|
||||
return route.path === item.to || route.path.startsWith(`${item.to}/`)
|
||||
}
|
||||
|
||||
function requestDiagnosis() {
|
||||
mobileOpen.value = false
|
||||
const current = navItems.find((item) => {
|
||||
if (item.to === '/') return route.path === '/'
|
||||
return route.path === item.to || route.path.startsWith(`${item.to}/`)
|
||||
})
|
||||
openConsultation({
|
||||
title: '预约免费 GEO 诊断',
|
||||
source: `${current?.label || '全站'}页顶部导航`
|
||||
})
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
() => {
|
||||
mobileOpen.value = false
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="subsite-header" :class="{ 'is-interior': route.path !== '/' }">
|
||||
<div class="page-width subsite-header-inner">
|
||||
<NuxtLink to="/" class="subsite-brand" aria-label="大马棒云途全域 GEO 首页">
|
||||
<img src="/images/lanhu/slices/home-group114-image33@2x.png" alt="成都大马棒传媒有限公司" />
|
||||
</NuxtLink>
|
||||
|
||||
<nav class="subsite-nav" aria-label="主导航">
|
||||
<NuxtLink
|
||||
v-for="item in navItems"
|
||||
:key="item.label"
|
||||
:to="item.to"
|
||||
:class="{ active: isActive(item) }"
|
||||
>
|
||||
{{ item.label }}
|
||||
</NuxtLink>
|
||||
</nav>
|
||||
|
||||
<button class="header-consult" type="button" @click="requestDiagnosis">
|
||||
<AppIcon name="message" />
|
||||
<span>免费诊断</span>
|
||||
</button>
|
||||
<button
|
||||
class="subsite-menu"
|
||||
type="button"
|
||||
:aria-expanded="mobileOpen"
|
||||
aria-controls="subsite-mobile-navigation"
|
||||
:aria-label="mobileOpen ? '关闭导航' : '打开导航'"
|
||||
@click="mobileOpen = !mobileOpen"
|
||||
>
|
||||
<AppIcon :name="mobileOpen ? 'close' : 'menu'" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Transition name="mobile-navigation">
|
||||
<nav
|
||||
v-if="mobileOpen"
|
||||
id="subsite-mobile-navigation"
|
||||
class="subsite-mobile-nav"
|
||||
aria-label="移动端导航"
|
||||
>
|
||||
<div class="page-width">
|
||||
<NuxtLink
|
||||
v-for="item in navItems"
|
||||
:key="`mobile-${item.label}`"
|
||||
:to="item.to"
|
||||
:class="{ active: isActive(item) }"
|
||||
>
|
||||
<span>{{ item.label }}</span>
|
||||
<AppIcon name="arrow-right" />
|
||||
</NuxtLink>
|
||||
<button type="button" @click="requestDiagnosis">
|
||||
<span>预约免费诊断</span>
|
||||
<AppIcon name="arrow-right" />
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</Transition>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.subsite-header {
|
||||
position: sticky;
|
||||
z-index: 30;
|
||||
top: 0;
|
||||
height: 64px;
|
||||
border-bottom: 1px solid rgba(84, 142, 216, 0.1);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 10px 30px rgba(61, 116, 185, 0.06);
|
||||
backdrop-filter: blur(18px) saturate(1.16);
|
||||
}
|
||||
.subsite-header.is-interior {
|
||||
border-bottom-color: rgba(84, 142, 216, 0.12);
|
||||
background: rgba(250, 253, 255, 0.88);
|
||||
box-shadow:
|
||||
0 12px 32px rgba(61, 116, 185, 0.07),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.88);
|
||||
backdrop-filter: blur(20px) saturate(1.12);
|
||||
}
|
||||
.subsite-header-inner {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 28px;
|
||||
}
|
||||
.subsite-brand {
|
||||
width: 190px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.is-interior .subsite-brand {
|
||||
padding: 6px 8px;
|
||||
border-radius: 5px;
|
||||
transition:
|
||||
background 0.22s ease,
|
||||
transform 0.22s ease;
|
||||
}
|
||||
.is-interior .subsite-brand:hover {
|
||||
background: rgba(228, 241, 255, 0.72);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.subsite-brand img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.subsite-nav {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: clamp(15px, 1.8vw, 34px);
|
||||
margin-left: auto;
|
||||
}
|
||||
.subsite-nav a {
|
||||
position: relative;
|
||||
display: grid;
|
||||
height: 100%;
|
||||
place-items: center;
|
||||
color: #44546a;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition: color 0.22s;
|
||||
}
|
||||
.subsite-nav a::after {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
content: '';
|
||||
background: #287cf9;
|
||||
transform: scaleX(0);
|
||||
transition: transform 0.24s ease;
|
||||
}
|
||||
.is-interior .subsite-nav a::after {
|
||||
right: 20%;
|
||||
left: 20%;
|
||||
border-radius: 2px 2px 0 0;
|
||||
background: linear-gradient(90deg, #287cf9, #61c4ee);
|
||||
}
|
||||
.subsite-nav a:hover,
|
||||
.subsite-nav a.active {
|
||||
color: #2078eb;
|
||||
font-weight: 600;
|
||||
}
|
||||
.subsite-nav a:hover::after,
|
||||
.subsite-nav a.active::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
.header-consult {
|
||||
height: 34px;
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 0 17px;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
background: #087dfb;
|
||||
box-shadow: 0 6px 15px rgba(30, 127, 255, 0.2);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
transition:
|
||||
transform 0.2s,
|
||||
box-shadow 0.2s,
|
||||
background 0.2s;
|
||||
}
|
||||
.is-interior .header-consult {
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
border-radius: 5px;
|
||||
background: linear-gradient(105deg, #1877ee, #2e9def);
|
||||
box-shadow: 0 8px 18px rgba(30, 127, 255, 0.2);
|
||||
}
|
||||
.header-consult:hover {
|
||||
background: #056ee2;
|
||||
box-shadow: 0 9px 20px rgba(30, 127, 255, 0.28);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.header-consult:active {
|
||||
transform: translateY(1px) scale(0.98);
|
||||
}
|
||||
.subsite-menu,
|
||||
.subsite-mobile-nav {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 1080px) {
|
||||
.subsite-nav {
|
||||
gap: 14px;
|
||||
}
|
||||
.subsite-nav a {
|
||||
font-size: 13px;
|
||||
}
|
||||
.subsite-brand {
|
||||
width: 165px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 820px) {
|
||||
.subsite-header {
|
||||
height: 58px;
|
||||
}
|
||||
.subsite-brand {
|
||||
width: 158px;
|
||||
}
|
||||
.subsite-nav,
|
||||
.header-consult {
|
||||
display: none;
|
||||
}
|
||||
.subsite-menu {
|
||||
position: relative;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 6px;
|
||||
color: #287cf9;
|
||||
background: #edf6ff;
|
||||
}
|
||||
.is-interior .subsite-menu {
|
||||
border: 1px solid rgba(61, 137, 225, 0.12);
|
||||
border-radius: 5px;
|
||||
}
|
||||
.subsite-menu :deep(.app-icon) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.subsite-mobile-nav {
|
||||
position: fixed;
|
||||
z-index: 29;
|
||||
top: 58px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
overflow-y: auto;
|
||||
background: rgba(247, 251, 255, 0.98);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
.subsite-mobile-nav .page-width {
|
||||
display: grid;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.subsite-mobile-nav a,
|
||||
.subsite-mobile-nav button {
|
||||
min-height: 58px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 4px;
|
||||
border-bottom: 1px solid rgba(48, 112, 192, 0.1);
|
||||
color: #4b5c72;
|
||||
background: transparent;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.subsite-mobile-nav a.active {
|
||||
color: #1478fb;
|
||||
font-weight: 700;
|
||||
}
|
||||
.subsite-mobile-nav button {
|
||||
min-height: 50px;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 24px;
|
||||
padding: 0 20px;
|
||||
border: 0;
|
||||
border-radius: 7px;
|
||||
color: #fff;
|
||||
background: linear-gradient(100deg, #453cff, #00adf6);
|
||||
}
|
||||
}
|
||||
.mobile-navigation-enter-active,
|
||||
.mobile-navigation-leave-active {
|
||||
transition:
|
||||
opacity 0.22s,
|
||||
transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
.mobile-navigation-enter-from,
|
||||
.mobile-navigation-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-12px);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,40 @@
|
||||
export function useConsultation() {
|
||||
const isOpen = useState('consultation-open', () => false)
|
||||
const context = useState('consultation-context', () => ({
|
||||
title: '预约免费 GEO 诊断',
|
||||
source: '全站咨询入口',
|
||||
industry: ''
|
||||
}))
|
||||
const form = useState('consultation-form', () => ({
|
||||
name: '',
|
||||
company: '',
|
||||
contact: '',
|
||||
industry: '',
|
||||
need: '',
|
||||
message: '',
|
||||
consent: false
|
||||
}))
|
||||
|
||||
function openConsultation(payload = {}) {
|
||||
context.value = {
|
||||
title: payload.title || '预约免费 GEO 诊断',
|
||||
source: payload.source || '全站咨询入口',
|
||||
industry: payload.industry || ''
|
||||
}
|
||||
|
||||
if (payload.industry) form.value.industry = payload.industry
|
||||
isOpen.value = true
|
||||
}
|
||||
|
||||
function closeConsultation() {
|
||||
isOpen.value = false
|
||||
}
|
||||
|
||||
return {
|
||||
isOpen,
|
||||
context,
|
||||
form,
|
||||
openConsultation,
|
||||
closeConsultation
|
||||
}
|
||||
}
|
||||
+138
@@ -0,0 +1,138 @@
|
||||
export const caseCategories = ['全部', '企业服务', '教育培训', '本地生活', '医疗健康', '电商零售']
|
||||
|
||||
export const featuredCase = {
|
||||
slug: 'k12-geo-growth',
|
||||
industry: '教育培训',
|
||||
client: '某 K12 全科在线教育品牌',
|
||||
title: '420 个真实问题，5 个月进入 AI 推荐列表',
|
||||
summary:
|
||||
'围绕家长在 AI 平台中的真实提问场景，完成问题库搭建、内容体系建设、可信信源分发与持续效果监测。',
|
||||
duration: '5 个月',
|
||||
cover: '/images/lanhu/slices/home-group92-image17@2x.png',
|
||||
metrics: [
|
||||
['11% → 88%', '核心问题覆盖率'],
|
||||
['+215%', '官网 AI 来源流量'],
|
||||
['+190%', '精准学员咨询量']
|
||||
]
|
||||
}
|
||||
|
||||
export const resultSnapshots = [
|
||||
{
|
||||
industry: '企业服务',
|
||||
client: '某 B2B 企业服务客户',
|
||||
title: '从行业问题切入，让品牌提前进入采购比选',
|
||||
metric: '+320%',
|
||||
metricLabel: 'AI 搜索全域曝光',
|
||||
secondary: '月精准线索新增 80+',
|
||||
cover: '/images/lanhu/slices/home-group90-image15@2x.png'
|
||||
},
|
||||
{
|
||||
industry: '本地生活',
|
||||
client: '某区域本地生活品牌',
|
||||
title: '占住同城搜索入口，缩短从看到到到店',
|
||||
metric: '95%',
|
||||
metricLabel: '品牌词搜索覆盖率',
|
||||
secondary: '到店咨询量提升 170%',
|
||||
cover: '/images/lanhu/slices/home-group91-image16@2x.png'
|
||||
},
|
||||
{
|
||||
industry: '教育培训',
|
||||
client: '某职业教育机构',
|
||||
title: '用长尾问题覆盖课程比较与口碑验证',
|
||||
metric: '1200+',
|
||||
metricLabel: '长尾关键词布局',
|
||||
secondary: '有效线索成本降低 45%',
|
||||
cover: '/images/lanhu/slices/home-group93-image18@2x.png'
|
||||
},
|
||||
{
|
||||
industry: '电商零售',
|
||||
client: '某新消费零售品牌',
|
||||
title: '串起种草、主动搜索与店铺承接',
|
||||
metric: '3 万+',
|
||||
metricLabel: '内容资产沉淀',
|
||||
secondary: '自然流量占比提升至 60%',
|
||||
cover: '/images/lanhu/slices/home-group94-image20@2x.png'
|
||||
}
|
||||
]
|
||||
|
||||
export const k12CaseDetail = {
|
||||
...featuredCase,
|
||||
description:
|
||||
'某 K12 全科在线教育品牌于 2025 年开展 GEO 全链路优化。项目在合规框架下，将品牌推进家长的 AI 选型、课程比较与口碑验证场景。',
|
||||
background: [
|
||||
'该客户为国内某初高中全科培优在线教育品牌，具备自研教研体系、全职教师团队，并覆盖同步辅导、升学冲刺和专项提分等课程产品。',
|
||||
'品牌已有较好的用户基础，但信息流与竞价渠道成本持续走高，同时 K12 行业监管趋严，营销内容必须更加审慎、真实与合规。',
|
||||
'越来越多家长会先向 AI 询问学科提分方法、线上辅导机构选择和初三冲刺课程，再进一步比较机构、课程与口碑。项目初期，品牌在核心推荐问题中的出现率较低，师资和课程优势也没有被完整呈现。'
|
||||
],
|
||||
objectives: [
|
||||
'在合规前提下提升品牌在主流 AI 平台中的认知与提及率',
|
||||
'进入家长的机构选型、课程比较和口碑验证场景',
|
||||
'把 AI 搜索需求与官网课程页、咨询入口稳定连接'
|
||||
],
|
||||
baseline: [
|
||||
['核心推荐问题', '品牌精准提及率约 11%'],
|
||||
['多平台表现', '字节系、百度系等平台整体提及率约 15%'],
|
||||
['推荐排序', '首推率为 0，前三推荐率不足 8%'],
|
||||
['信息完整度', '师资、教研与真实案例信息分散且部分更新滞后'],
|
||||
['转化链路', 'AI 搜索需求与官网、课程页和咨询入口缺少稳定承接']
|
||||
],
|
||||
questionFramework: [
|
||||
{
|
||||
title: '精准选型类',
|
||||
content: '机构推荐、课程对比、价格区间、适合人群与报名咨询。',
|
||||
goal: '承接高意向用户，提高品牌进入推荐列表的概率。'
|
||||
},
|
||||
{
|
||||
title: '长尾场景类',
|
||||
content: '学科提分方法、年级规划、备考节奏与常见学习误区。',
|
||||
goal: '扩大前置需求覆盖，让品牌进入用户早期认知。'
|
||||
},
|
||||
{
|
||||
title: '能力证明类',
|
||||
content: '师资背景、教研体系、课程结构、教学服务与办学成果。',
|
||||
goal: '建立完整、专业且可信的品牌认知。'
|
||||
},
|
||||
{
|
||||
title: '口碑验证类',
|
||||
content: '学员案例、家长评价、服务体验与课程反馈。',
|
||||
goal: '降低家长决策顾虑，强化咨询和报名信心。'
|
||||
}
|
||||
],
|
||||
phases: [
|
||||
{
|
||||
number: '01',
|
||||
title: '先建立基础可见性与场景认知',
|
||||
text: '围绕学习方法、备考规划和提分误区等泛需求主题，输出知识科普与问题解答，让品牌在家长搜索学习问题时稳定出现。'
|
||||
},
|
||||
{
|
||||
number: '02',
|
||||
title: '再强化决策信任与推荐优先级',
|
||||
text: '围绕师资、教研、课程体系、服务流程与真实案例补充高信任内容，并用外部权威信源增加 AI 引用依据。'
|
||||
}
|
||||
],
|
||||
distribution: [
|
||||
['权威层', '教育类媒体、行业垂直平台', '补充品牌和课程体系的第三方公信力'],
|
||||
['讨论层', '教育创作者、家长社区、知识问答平台', '形成贴近真实用户场景的口碑内容'],
|
||||
['平台层', '官网、小程序、课程页与咨询入口', '承接 AI 搜索带来的访问和咨询需求']
|
||||
],
|
||||
resultTable: [
|
||||
['核心问题覆盖率', '11%', '88%', '品牌在核心家长问题中的稳定出现能力明显提升'],
|
||||
['核心推荐问题前三率', '不足 8%', '76%', '多个细分学科场景进入前三推荐'],
|
||||
['能力类问题覆盖率', '基础薄弱', '95%', '师资、教研与课程体系被更完整呈现'],
|
||||
['口碑类问题覆盖率', '基础薄弱', '90%', '学员案例与家长评价类内容形成补充'],
|
||||
['官网 AI 来源流量', '基线值', '+215%', 'AI 搜索带来的站点访问明显提升'],
|
||||
['精准学员咨询量', '基线值', '+190%', '咨询增长与 GEO 覆盖率提升呈现较强相关性'],
|
||||
['线索有效率', '传统信息流约 28%', 'AI 渠道约 65%', 'AI 搜索用户的决策意图更明确'],
|
||||
['线上获客成本', '基线值', '-38%', '获客结构得到优化']
|
||||
],
|
||||
outcomes: [
|
||||
['210+ 篇', '累计产出合规内容'],
|
||||
['15 类', '覆盖媒体、社区与知识平台渠道'],
|
||||
['第 4 个月', '客户启动年度续约沟通'],
|
||||
['新增需求', '小学段课程 GEO 推广进入沟通']
|
||||
]
|
||||
}
|
||||
|
||||
export function getCaseBySlug(slug) {
|
||||
return slug === k12CaseDetail.slug ? k12CaseDetail : null
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
export const insightCategories = [
|
||||
'全部',
|
||||
'最新文章',
|
||||
'行业动态',
|
||||
'GEO 行业知识',
|
||||
'实战复盘',
|
||||
'行业白皮书'
|
||||
]
|
||||
|
||||
export const insights = [
|
||||
{
|
||||
slug: 'what-is-geo',
|
||||
category: 'GEO 行业知识',
|
||||
title: 'GEO 是什么：从搜索排名到 AI 推荐的增长逻辑',
|
||||
excerpt:
|
||||
'当用户不再逐页浏览搜索结果，而是直接向 AI 提问，品牌需要重新理解内容、信源与推荐之间的关系。',
|
||||
date: '2026-07-12',
|
||||
readingTime: '8 分钟',
|
||||
views: '2,438',
|
||||
cover: '/images/lanhu/slices/home-group95-image21@2x.png',
|
||||
featured: true,
|
||||
lead: 'GEO（生成式引擎优化）不是给传统 SEO 换一个名字。它关注的是：当用户向 AI 描述需求时，品牌能否被准确理解、被可信来源支持，并进入最终答案。',
|
||||
sections: [
|
||||
{
|
||||
title: '用户的搜索动作正在发生什么变化',
|
||||
paragraphs: [
|
||||
'传统搜索通常从关键词开始。用户打开多个网页，比较产品、价格、口碑与服务，再自行形成判断。AI 搜索把大量比较工作压缩进一次对话：用户描述场景，平台整理信息并直接给出总结或推荐。',
|
||||
'这意味着品牌竞争不再只发生在结果页的排名位置，也发生在 AI 对品牌的认知结构中。企业公开信息是否完整、不同平台的说法是否一致、第三方信源是否足够可信，都会影响品牌是否进入回答。'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'GEO 与 SEO 的关注点并不相同',
|
||||
paragraphs: [
|
||||
'SEO 重点解决网页能否被搜索引擎抓取、理解并获得较好的自然排名。GEO 更进一步，关注内容能否成为生成式答案中的有效依据。两者并不冲突：清晰的网站结构仍然重要，但仅有站内页面已经不足以支撑完整的 AI 品牌认知。'
|
||||
],
|
||||
comparison: [
|
||||
['关注对象', '搜索结果页与网页排名', 'AI 回答中的理解、提及与推荐'],
|
||||
['内容范围', '以官网和可索引页面为主', '官网、媒体、社区、问答与真实讨论'],
|
||||
['衡量方式', '排名、点击率、自然流量', '问题覆盖率、提及率、推荐率与咨询转化'],
|
||||
['长期资产', '关键词与站点权重', '跨平台一致的品牌事实与可信信源']
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '一套可执行的 GEO 工作从哪里开始',
|
||||
paragraphs: [
|
||||
'第一步不是批量生产文章，而是建立问题库。企业需要知道用户在认知、比较、验证和决策阶段分别会问什么，再检查品牌目前在这些问题中的真实表现。',
|
||||
'完成基线诊断后，再围绕业务事实建设内容，匹配官网、权威媒体、垂直平台和真实讨论场景，并持续观察不同 AI 平台的引用与推荐变化。最终，所有曝光都应该连接到可以承接需求的页面和咨询入口。'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '判断 GEO 是否有效，不能只看曝光',
|
||||
paragraphs: [
|
||||
'有效的 GEO 指标应覆盖三个层次：品牌是否进入核心问题、是否被准确描述和优先推荐，以及这些认知是否带来网站访问、咨询和有效线索。只有把内容表现与业务结果放在同一条链路里，优化才不会停留在表面。'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
slug: 'ai-search-decision-path',
|
||||
category: '行业动态',
|
||||
title: 'AI 搜索如何改写用户的品牌决策路径',
|
||||
excerpt: '从“找网页”到“要答案”，企业需要在认知、比较和验证三个阶段重新安排信息。',
|
||||
date: '2026-07-08',
|
||||
readingTime: '6 分钟',
|
||||
views: '1,726',
|
||||
cover: '/images/lanhu/slices/home-group90-image15@2x.png'
|
||||
},
|
||||
{
|
||||
slug: 'geo-question-library',
|
||||
category: '实战复盘',
|
||||
title: '问题库不是关键词表：如何覆盖一条完整决策旅程',
|
||||
excerpt: '把零散关键词整理成认知、比较、能力证明与口碑验证四类真实问题。',
|
||||
date: '2026-07-03',
|
||||
readingTime: '7 分钟',
|
||||
views: '1,394',
|
||||
cover: '/images/lanhu/slices/home-group92-image17@2x.png'
|
||||
},
|
||||
{
|
||||
slug: 'credible-source-matrix',
|
||||
category: 'GEO 行业知识',
|
||||
title: '可信信源矩阵：为什么只更新官网还不够',
|
||||
excerpt: 'AI 对品牌的判断来自多个公开来源，一致、真实、可验证的信息比单点声量更重要。',
|
||||
date: '2026-06-27',
|
||||
readingTime: '5 分钟',
|
||||
views: '968',
|
||||
cover: '/images/lanhu/slices/home-group91-image16@2x.png'
|
||||
},
|
||||
{
|
||||
slug: 'geo-metrics',
|
||||
category: '最新文章',
|
||||
title: '除了提及率，GEO 项目还应该看哪些指标',
|
||||
excerpt: '从问题覆盖、推荐顺序到官网流量和线索质量，建立一套能连接业务结果的指标体系。',
|
||||
date: '2026-06-19',
|
||||
readingTime: '9 分钟',
|
||||
views: '1,185',
|
||||
cover: '/images/lanhu/slices/home-group93-image18@2x.png'
|
||||
},
|
||||
{
|
||||
slug: 'geo-industry-report-2026',
|
||||
category: '行业白皮书',
|
||||
title: '2026 AI 搜索与品牌增长观察',
|
||||
excerpt: '梳理用户搜索行为、企业内容建设和 GEO 评估框架的关键变化。',
|
||||
date: '2026-06-10',
|
||||
readingTime: '白皮书',
|
||||
views: '836',
|
||||
cover: '/images/lanhu/slices/home-group95-image21@2x.png'
|
||||
}
|
||||
]
|
||||
|
||||
export const featuredInsight = insights.find((item) => item.featured)
|
||||
|
||||
export function getInsightBySlug(slug) {
|
||||
return insights.find((item) => item.slug === slug) || null
|
||||
}
|
||||
+1
-1
@@ -3,7 +3,7 @@ export default defineNuxtConfig({
|
||||
compatibilityVersion: 3
|
||||
},
|
||||
modules: ['@nuxtjs/tailwindcss'],
|
||||
css: ['~/assets/css/main.css'],
|
||||
css: ['~/assets/css/main.css', '~/assets/css/interior-polish.css'],
|
||||
vite: {
|
||||
server: {
|
||||
watch: {
|
||||
|
||||
Generated
+10
@@ -6,6 +6,7 @@
|
||||
"": {
|
||||
"name": "damabang-geo-official-site",
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.2",
|
||||
"@nuxtjs/tailwindcss": "^6.14.0",
|
||||
"gsap": "^3.15.0",
|
||||
"nuxt": "^3.17.0"
|
||||
@@ -596,6 +597,15 @@
|
||||
"integrity": "sha512-/B8YJGPzaYq1NbsQmwgP8EZqg40NpTw4ZB3suuI0TplbxKHeK94jeaawLmVhCv+YwUnOpiWEz9U6SeThku/8JQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@element-plus/icons-vue": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.2.tgz",
|
||||
"integrity": "sha512-OzIuTaIfC8QXEPmJvB4Y4kw34rSXdCJzxcD1kFStBvr8bK6X1zQAYDo0CNMjojnfTqRQCJ0I7prlErcoRiET2A==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"vue": "^3.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@emnapi/core": {
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmmirror.com/@emnapi/core/-/core-1.10.0.tgz",
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
"format:check": "prettier --check ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.2",
|
||||
"@nuxtjs/tailwindcss": "^6.14.0",
|
||||
"gsap": "^3.15.0",
|
||||
"nuxt": "^3.17.0"
|
||||
|
||||
+1303
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
+30
-144
@@ -1,26 +1,14 @@
|
||||
<script setup>
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import SiteHeader from '~/components/site/SiteHeader.vue'
|
||||
import SiteFooter from '~/components/site/SiteFooter.vue'
|
||||
|
||||
const consultationOpen = ref(false)
|
||||
const mobileMenuOpen = ref(false)
|
||||
const activeSection = ref('home')
|
||||
const headerScrolled = ref(false)
|
||||
const notice = ref('')
|
||||
const pageRoot = ref(null)
|
||||
const { openConsultation: openGlobalConsultation } = useConsultation()
|
||||
let animationContext
|
||||
let animationMedia
|
||||
|
||||
const navItems = [
|
||||
['首页', 'home'],
|
||||
['营销增长服务', 'model'],
|
||||
['行业解决方案', 'industries'],
|
||||
['开放客户案例平台', 'cases'],
|
||||
['核心优势', 'advantages'],
|
||||
['全球营销增长洞察', 'delivery'],
|
||||
['关于我们', 'footer']
|
||||
]
|
||||
|
||||
const logos = [
|
||||
'Bond',
|
||||
'WaSun',
|
||||
@@ -115,18 +103,8 @@ const deliverySteps = [
|
||||
]
|
||||
]
|
||||
|
||||
function scrollToSection(id) {
|
||||
mobileMenuOpen.value = false
|
||||
document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
}
|
||||
function openConsultation() {
|
||||
mobileMenuOpen.value = false
|
||||
consultationOpen.value = true
|
||||
notice.value = ''
|
||||
}
|
||||
function submitConsultation() {
|
||||
consultationOpen.value = false
|
||||
notice.value = '已收到您的咨询，我们将尽快与您联系。'
|
||||
function requestConsultation(source, title = '预约免费 GEO 增长诊断') {
|
||||
openGlobalConsultation({ title, source })
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
@@ -156,7 +134,7 @@ onMounted(async () => {
|
||||
|
||||
const heroTimeline = gsap.timeline({ defaults: { ease: 'power3.out' } })
|
||||
heroTimeline
|
||||
.from('.site-header', { autoAlpha: 0, y: -16, duration: 0.5, clearProps: 'all' })
|
||||
.from('.subsite-header', { autoAlpha: 0, y: -16, duration: 0.5, clearProps: 'all' })
|
||||
.from('.hero-copy h1', { autoAlpha: 0, y: 32, duration: 0.7, clearProps: 'all' }, '-=0.12')
|
||||
.from(
|
||||
'.hero-points span',
|
||||
@@ -164,7 +142,7 @@ onMounted(async () => {
|
||||
'-=0.22'
|
||||
)
|
||||
.from(
|
||||
'.button-row button',
|
||||
'.button-row > *',
|
||||
{ autoAlpha: 0, y: 16, duration: 0.42, stagger: 0.1, clearProps: 'all' },
|
||||
'-=0.12'
|
||||
)
|
||||
@@ -247,30 +225,6 @@ onMounted(async () => {
|
||||
cleanup.push(() => element.removeEventListener(event, handler))
|
||||
}
|
||||
|
||||
ScrollTrigger.create({
|
||||
start: 80,
|
||||
end: 'max',
|
||||
onToggle: ({ isActive }) => {
|
||||
headerScrolled.value = isActive
|
||||
}
|
||||
})
|
||||
|
||||
navItems.forEach(([, target]) => {
|
||||
const trigger = target === 'home' ? '.hero-section' : `#${target}`
|
||||
if (!document.querySelector(trigger)) return
|
||||
ScrollTrigger.create({
|
||||
trigger,
|
||||
start: 'top 48%',
|
||||
end: 'bottom 48%',
|
||||
onEnter: () => {
|
||||
activeSection.value = target
|
||||
},
|
||||
onEnterBack: () => {
|
||||
activeSection.value = target
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const hero = document.querySelector('.hero-section')
|
||||
const heroCopy = document.querySelector('.hero-copy')
|
||||
if (hero && heroCopy) {
|
||||
@@ -414,63 +368,10 @@ onBeforeUnmount(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main id="home" ref="pageRoot" class="site-shell">
|
||||
<header class="site-header" :class="{ scrolled: headerScrolled }">
|
||||
<div class="page-width header-inner">
|
||||
<a href="#home" class="brand" aria-label="大马棒首页"
|
||||
><img
|
||||
src="/images/lanhu/slices/home-group114-image33@2x.png"
|
||||
alt="成都大马棒传媒有限公司"
|
||||
/></a>
|
||||
<nav class="desktop-nav" aria-label="主导航">
|
||||
<button
|
||||
v-for="([label, target], index) in navItems"
|
||||
:key="target"
|
||||
:class="{ active: target === activeSection }"
|
||||
@click="scrollToSection(target)"
|
||||
>
|
||||
{{ label }}<span v-if="index > 0 && index !== 3" class="nav-chevron">⌄</span>
|
||||
</button>
|
||||
</nav>
|
||||
<button
|
||||
class="mobile-menu-button"
|
||||
:class="{ open: mobileMenuOpen }"
|
||||
type="button"
|
||||
:aria-expanded="mobileMenuOpen"
|
||||
aria-controls="mobile-navigation"
|
||||
:aria-label="mobileMenuOpen ? '关闭导航菜单' : '打开导航菜单'"
|
||||
@click="mobileMenuOpen = !mobileMenuOpen"
|
||||
>
|
||||
<span class="menu-glyph" aria-hidden="true">{{ mobileMenuOpen ? '×' : '☰' }}</span>
|
||||
</button>
|
||||
<button class="login-button" @click="openConsultation"><span>●</span> 登录</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<Transition name="mobile-nav">
|
||||
<nav
|
||||
v-if="mobileMenuOpen"
|
||||
id="mobile-navigation"
|
||||
class="mobile-navigation"
|
||||
aria-label="移动端导航"
|
||||
>
|
||||
<div class="page-width mobile-navigation-inner">
|
||||
<button
|
||||
v-for="([label, target], index) in navItems"
|
||||
:key="`mobile-${target}`"
|
||||
:class="{ active: index === 0 }"
|
||||
@click="scrollToSection(target)"
|
||||
>
|
||||
<span>{{ label }}</span
|
||||
><b>↗</b>
|
||||
</button>
|
||||
<button class="mobile-consult-button" @click="openConsultation">
|
||||
立即免费咨询 <b>→</b>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</Transition>
|
||||
<div id="home" ref="pageRoot" class="site-shell">
|
||||
<SiteHeader />
|
||||
|
||||
<main>
|
||||
<section class="hero-section">
|
||||
<div class="hero-art" aria-hidden="true"></div>
|
||||
<div class="page-width hero-content">
|
||||
@@ -481,8 +382,13 @@ onBeforeUnmount(() => {
|
||||
><span>✓ 全链路转化闭环</span>
|
||||
</p>
|
||||
<div class="button-row">
|
||||
<button class="primary-button" @click="openConsultation">免费定制 <b>→</b></button
|
||||
><button class="outline-button" @click="scrollToSection('cases')">查看成功案例</button>
|
||||
<button
|
||||
class="primary-button"
|
||||
type="button"
|
||||
@click="requestConsultation('首页 Hero', '免费定制 GEO 增长方案')"
|
||||
>
|
||||
免费定制 <b>→</b></button
|
||||
><NuxtLink class="outline-button" to="/cases">查看成功案例</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -503,8 +409,8 @@ onBeforeUnmount(() => {
|
||||
<SectionTitle
|
||||
>已服务<span class="blue">300+</span>全类型经营主体，覆盖<span class="blue">12+</span
|
||||
>主流行业<template #subtitle
|
||||
>We Have Provided Services To Over 300 Full-spectrum Business Entities<br />Spanning More
|
||||
Than A Dozen Mainstream Industry Sectors</template
|
||||
>We Have Provided Services To Over 300 Full-spectrum Business Entities<br />Spanning
|
||||
More Than A Dozen Mainstream Industry Sectors</template
|
||||
></SectionTitle
|
||||
>
|
||||
<div class="stats-panel">
|
||||
@@ -561,9 +467,7 @@ onBeforeUnmount(() => {
|
||||
<h4><i></i>{{ point[0] }}</h4>
|
||||
<p>{{ point[1] }}</p>
|
||||
</div>
|
||||
<button class="primary-button small" @click="openConsultation">
|
||||
了解业务详情 <b>→</b>
|
||||
</button>
|
||||
<NuxtLink class="primary-button small" to="/services">了解业务详情 <b>→</b></NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -616,9 +520,7 @@ onBeforeUnmount(() => {
|
||||
</article>
|
||||
</div>
|
||||
<div class="center-action">
|
||||
<button class="primary-button small" @click="openConsultation">
|
||||
查看全部案例 <b>→</b>
|
||||
</button>
|
||||
<NuxtLink class="primary-button small" to="/cases">查看全部案例 <b>→</b></NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -684,33 +586,17 @@ onBeforeUnmount(() => {
|
||||
<section class="cta-section">
|
||||
<div class="cta-art"></div>
|
||||
<div class="cta-content">
|
||||
<h2>AI搜索增长风口已至，大马棒 · 云途全域GEO助<br />力企业打造品效双闭环的长效增长体系</h2>
|
||||
<h2>
|
||||
AI搜索增长风口已至，大马棒 · 云途全域GEO助<br />力企业打造品效双闭环的长效增长体系
|
||||
</h2>
|
||||
<p>免费获取1对1GEO增长诊断方案</p>
|
||||
<button class="primary-button" @click="openConsultation">立即免费咨询 <b>→</b></button>
|
||||
<button class="primary-button" type="button" @click="requestConsultation('首页底部 CTA')">
|
||||
立即免费咨询 <b>→</b>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer id="footer" class="site-footer">
|
||||
<div class="page-width footer-main">
|
||||
<img src="/images/lanhu/slices/home-group114-image33@2x.png" alt="成都大马棒传媒有限公司" />
|
||||
<div class="footer-links">
|
||||
<div v-for="n in 6" :key="n"><b>快捷导航</b><span>企业定位企业定位企业定位</span></div>
|
||||
</div>
|
||||
<div class="qr"><span>▦</span><span>▦</span><small>公众号 微信二维码</small></div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
备案信息 备案信息 备案信息 版权声明版权声明版权声明 友情链接友情链接友情链接
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div v-if="consultationOpen" class="dialog-mask" @click.self="consultationOpen = false">
|
||||
<section class="consult-dialog" role="dialog" aria-modal="true">
|
||||
<button class="close" aria-label="关闭" @click="consultationOpen = false">×</button>
|
||||
<h2>咨询全域 GEO 方案</h2>
|
||||
<p>提交后，我们会尽快为您匹配专属增长方案。</p>
|
||||
<button class="primary-button" @click="submitConsultation">提交咨询</button>
|
||||
</section>
|
||||
</div>
|
||||
<p v-if="notice" class="toast">{{ notice }}</p>
|
||||
</main>
|
||||
|
||||
<SiteFooter />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,696 @@
|
||||
<script setup>
|
||||
import SiteHeader from '~/components/site/SiteHeader.vue'
|
||||
import SiteFooter from '~/components/site/SiteFooter.vue'
|
||||
import { getInsightBySlug, insights } from '~/data/insights'
|
||||
|
||||
const route = useRoute()
|
||||
const { openConsultation } = useConsultation()
|
||||
const article = computed(() => getInsightBySlug(route.params.slug))
|
||||
|
||||
if (!article.value) {
|
||||
throw createError({ statusCode: 404, statusMessage: '洞察文章不存在' })
|
||||
}
|
||||
|
||||
const articleIndex = computed(() => insights.findIndex((item) => item.slug === article.value.slug))
|
||||
const previousArticle = computed(() => insights[articleIndex.value - 1] || null)
|
||||
const nextArticle = computed(() => insights[articleIndex.value + 1] || null)
|
||||
const relatedArticles = computed(() =>
|
||||
insights.filter((item) => item.slug !== article.value.slug).slice(0, 3)
|
||||
)
|
||||
|
||||
useHead(() => ({
|
||||
title: `${article.value.title}｜云途全域增长洞察`,
|
||||
meta: [
|
||||
{ name: 'description', content: article.value.excerpt },
|
||||
{ property: 'og:title', content: article.value.title },
|
||||
{ property: 'og:description', content: article.value.excerpt },
|
||||
{ property: 'og:image', content: article.value.cover }
|
||||
]
|
||||
}))
|
||||
|
||||
function requestDiagnosis(source) {
|
||||
openConsultation({ title: '预约免费 GEO 增长诊断', source })
|
||||
}
|
||||
|
||||
function requestWhitepaper(source) {
|
||||
openConsultation({ title: '获取 2026 AI 搜索与品牌增长观察', need: '行业白皮书', source })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="article-page">
|
||||
<a class="skip-link" href="#main-content">跳到文章正文</a>
|
||||
<SiteHeader />
|
||||
|
||||
<main id="main-content">
|
||||
<article>
|
||||
<header class="article-hero">
|
||||
<div class="article-hero-art" aria-hidden="true"></div>
|
||||
<div class="page-width article-hero-inner">
|
||||
<nav class="breadcrumbs" aria-label="面包屑">
|
||||
<NuxtLink to="/">首页</NuxtLink><span>/</span
|
||||
><NuxtLink to="/insights">增长洞察</NuxtLink><span>/</span
|
||||
><b>{{ article.category }}</b>
|
||||
</nav>
|
||||
<div class="article-heading">
|
||||
<p>{{ article.category }}</p>
|
||||
<h1>{{ article.title }}</h1>
|
||||
<span>{{ article.excerpt }}</span>
|
||||
<div class="article-byline">
|
||||
<div><strong>云途全域编辑部</strong><small>YUNTU GEO INSIGHTS</small></div>
|
||||
<time :datetime="article.date">{{ article.date }}</time
|
||||
><span>{{ article.readingTime }}</span
|
||||
><span>{{ article.views }} 阅读</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="page-width article-layout">
|
||||
<aside class="article-aside">
|
||||
<NuxtLink to="/insights" class="back-link"
|
||||
><AppIcon name="arrow-left" /> 返回洞察列表</NuxtLink
|
||||
>
|
||||
<div>
|
||||
<span>分享主题</span><strong>{{ article.category }}</strong>
|
||||
</div>
|
||||
<button type="button" @click="requestDiagnosis('洞察文章侧边栏')">
|
||||
诊断品牌可见性 <AppIcon name="arrow-right" />
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
<div class="article-content">
|
||||
<figure class="article-cover"><img :src="article.cover" :alt="article.title" /></figure>
|
||||
|
||||
<template v-if="article.sections?.length">
|
||||
<p class="article-lead">{{ article.lead }}</p>
|
||||
<section v-for="(section, index) in article.sections" :key="section.title">
|
||||
<span class="section-number">0{{ index + 1 }}</span>
|
||||
<h2>{{ section.title }}</h2>
|
||||
<p v-for="paragraph in section.paragraphs" :key="paragraph">{{ paragraph }}</p>
|
||||
<div v-if="section.comparison" class="comparison-table">
|
||||
<div class="comparison-head">
|
||||
<span>比较维度</span><span>传统 SEO</span><span>GEO</span>
|
||||
</div>
|
||||
<div v-for="row in section.comparison" :key="row[0]" class="comparison-row">
|
||||
<strong>{{ row[0] }}</strong
|
||||
><span>{{ row[1] }}</span
|
||||
><span>{{ row[2] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<blockquote>
|
||||
GEO
|
||||
的目标不是让品牌在每一个问题里出现，而是在真正影响用户决策的问题中，被准确理解并获得可信推荐。
|
||||
</blockquote>
|
||||
</template>
|
||||
|
||||
<section v-else class="article-draft">
|
||||
<span class="section-number">01</span>
|
||||
<h2>核心观察</h2>
|
||||
<p>{{ article.excerpt }}</p>
|
||||
<div class="draft-note">
|
||||
<strong>完整内容正在编辑</strong>
|
||||
<p>
|
||||
这篇文章的详细数据、方法与案例仍在复核。我们先保留摘要，避免发布未经确认的信息。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="inline-cta">
|
||||
<div>
|
||||
<span>把方法放回你的业务</span>
|
||||
<h3>了解品牌当前在 AI 搜索中的真实表现</h3>
|
||||
</div>
|
||||
<button type="button" @click="requestDiagnosis(`洞察文章：${article.title}`)">
|
||||
预约免费诊断 <AppIcon name="arrow-right" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<nav class="article-pagination page-width" aria-label="文章翻页">
|
||||
<NuxtLink v-if="previousArticle" :to="`/insights/${previousArticle.slug}`"
|
||||
><span>上一篇</span><strong>{{ previousArticle.title }}</strong></NuxtLink
|
||||
>
|
||||
<div v-else></div>
|
||||
<NuxtLink v-if="nextArticle" :to="`/insights/${nextArticle.slug}`"
|
||||
><span>下一篇</span><strong>{{ nextArticle.title }}</strong></NuxtLink
|
||||
>
|
||||
</nav>
|
||||
|
||||
<section class="related-section">
|
||||
<div class="page-width">
|
||||
<header>
|
||||
<div>
|
||||
<p>继续阅读</p>
|
||||
<h2>相关增长洞察</h2>
|
||||
</div>
|
||||
<button type="button" @click="requestWhitepaper('文章详情白皮书入口')">
|
||||
获取行业白皮书 <AppIcon name="arrow-right" />
|
||||
</button>
|
||||
</header>
|
||||
<div class="related-grid">
|
||||
<article v-for="item in relatedArticles" :key="item.slug">
|
||||
<NuxtLink :to="`/insights/${item.slug}`"
|
||||
><img :src="item.cover" :alt="item.title"
|
||||
/></NuxtLink>
|
||||
<span>{{ item.category }} · {{ item.date }}</span>
|
||||
<h3>
|
||||
<NuxtLink :to="`/insights/${item.slug}`">{{ item.title }}</NuxtLink>
|
||||
</h3>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<SiteFooter />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.article-page {
|
||||
--article-blue: #237df0;
|
||||
overflow: hidden;
|
||||
color: #344359;
|
||||
background: #fff;
|
||||
}
|
||||
.skip-link {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
background: #1f70df;
|
||||
transform: translateY(-150%);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.skip-link:focus {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.article-hero {
|
||||
position: relative;
|
||||
min-height: 545px;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
isolation: isolate;
|
||||
background: #f1f7ff;
|
||||
}
|
||||
.article-hero-art {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(circle at 80% 25%, rgba(71, 154, 251, 0.2), transparent 27%),
|
||||
linear-gradient(110deg, #f9fcff, #e8f2ff);
|
||||
}
|
||||
.article-hero-art::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: '';
|
||||
opacity: 0.18;
|
||||
background-image:
|
||||
linear-gradient(rgba(54, 124, 214, 0.08) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(54, 124, 214, 0.08) 1px, transparent 1px);
|
||||
background-size: 60px 60px;
|
||||
mask-image: linear-gradient(90deg, transparent 18%, #000);
|
||||
}
|
||||
.article-hero-inner {
|
||||
padding: 48px 0 60px;
|
||||
}
|
||||
.breadcrumbs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 9px;
|
||||
color: #8a9bb0;
|
||||
font-size: 10px;
|
||||
}
|
||||
.breadcrumbs a {
|
||||
color: #6c86a4;
|
||||
text-decoration: none;
|
||||
}
|
||||
.breadcrumbs b {
|
||||
color: #2a7ee6;
|
||||
font-weight: 600;
|
||||
}
|
||||
.article-heading {
|
||||
max-width: 980px;
|
||||
margin-top: 64px;
|
||||
}
|
||||
.article-heading > p {
|
||||
margin: 0;
|
||||
color: #247ce9;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
.article-heading h1 {
|
||||
margin: 18px 0 0;
|
||||
color: #34465b;
|
||||
font-size: clamp(42px, 4.4vw, 68px);
|
||||
letter-spacing: -0.055em;
|
||||
line-height: 1.18;
|
||||
text-wrap: balance;
|
||||
}
|
||||
.article-heading > span {
|
||||
max-width: 770px;
|
||||
display: block;
|
||||
margin-top: 23px;
|
||||
color: #6f8095;
|
||||
font-size: 15px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.article-byline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
margin-top: 30px;
|
||||
color: #8595a8;
|
||||
font-size: 10px;
|
||||
}
|
||||
.article-byline > div {
|
||||
display: grid;
|
||||
padding-right: 24px;
|
||||
border-right: 1px solid #cbdbea;
|
||||
}
|
||||
.article-byline strong {
|
||||
color: #526b87;
|
||||
font-size: 11px;
|
||||
}
|
||||
.article-byline small {
|
||||
margin-top: 3px;
|
||||
font-size: 8px;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.article-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 210px minmax(0, 800px);
|
||||
justify-content: center;
|
||||
gap: 70px;
|
||||
padding-top: 90px;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
.article-aside {
|
||||
position: sticky;
|
||||
top: 95px;
|
||||
align-self: start;
|
||||
display: grid;
|
||||
gap: 28px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
.article-aside > a {
|
||||
color: #607a98;
|
||||
font-size: 11px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.article-aside > div {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
padding-top: 22px;
|
||||
border-top: 1px solid #dce6f0;
|
||||
}
|
||||
.article-aside span {
|
||||
color: #93a2b3;
|
||||
font-size: 9px;
|
||||
}
|
||||
.article-aside strong {
|
||||
color: #3b5877;
|
||||
font-size: 12px;
|
||||
}
|
||||
.article-aside button {
|
||||
padding: 18px;
|
||||
border-radius: 5px 14px 5px 14px;
|
||||
color: #fff;
|
||||
background: #277fec;
|
||||
font-size: 11px;
|
||||
text-align: left;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.article-aside button:hover {
|
||||
box-shadow: 0 12px 25px rgba(39, 127, 236, 0.22);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.article-content {
|
||||
min-width: 0;
|
||||
}
|
||||
.article-cover {
|
||||
width: calc(100% + 120px);
|
||||
height: 420px;
|
||||
margin: 0 0 55px -60px;
|
||||
overflow: hidden;
|
||||
border-radius: 5px 22px 5px 22px;
|
||||
background: #edf5fd;
|
||||
}
|
||||
.article-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
.article-lead {
|
||||
margin: 0 0 62px;
|
||||
padding: 30px 35px;
|
||||
border-left: 3px solid #2b82ee;
|
||||
color: #49637f;
|
||||
background: #f1f7fd;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 1.85;
|
||||
}
|
||||
.article-content section {
|
||||
position: relative;
|
||||
margin-top: 66px;
|
||||
}
|
||||
.article-content section:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
.section-number {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: -54px;
|
||||
color: #8fb2d8;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.article-content h2 {
|
||||
margin: 0 0 25px;
|
||||
color: #34485f;
|
||||
font-size: 30px;
|
||||
letter-spacing: -0.025em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.article-content section > p {
|
||||
margin: 0 0 18px;
|
||||
color: #64778e;
|
||||
font-size: 15px;
|
||||
line-height: 2;
|
||||
}
|
||||
.article-content blockquote {
|
||||
margin: 68px 0 0;
|
||||
padding: 36px 42px;
|
||||
border-radius: 5px 18px 5px 18px;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #2778dc, #42aee2);
|
||||
box-shadow: 0 22px 45px rgba(38, 113, 205, 0.18);
|
||||
font-size: 21px;
|
||||
font-weight: 600;
|
||||
line-height: 1.75;
|
||||
}
|
||||
.comparison-table {
|
||||
margin-top: 32px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #dce7f2;
|
||||
border-radius: 5px 14px 5px 14px;
|
||||
}
|
||||
.comparison-head,
|
||||
.comparison-row {
|
||||
display: grid;
|
||||
grid-template-columns: 0.65fr 1fr 1fr;
|
||||
}
|
||||
.comparison-head {
|
||||
color: #fff;
|
||||
background: #317fdb;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.comparison-head span,
|
||||
.comparison-row > * {
|
||||
padding: 15px 18px;
|
||||
}
|
||||
.comparison-row {
|
||||
border-top: 1px solid #e0e9f2;
|
||||
color: #667a91;
|
||||
background: #f8fbfe;
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.comparison-row strong {
|
||||
color: #3c5877;
|
||||
background: #edf5fc;
|
||||
font-weight: 600;
|
||||
}
|
||||
.draft-note {
|
||||
margin-top: 34px;
|
||||
padding: 28px 30px;
|
||||
border-radius: 5px 15px 5px 15px;
|
||||
background: #f0f6fc;
|
||||
}
|
||||
.draft-note strong {
|
||||
color: #3c5875;
|
||||
font-size: 14px;
|
||||
}
|
||||
.draft-note p {
|
||||
margin: 8px 0 0;
|
||||
color: #78899c;
|
||||
font-size: 12px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
.inline-cta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 35px;
|
||||
margin-top: 72px;
|
||||
padding: 34px 38px;
|
||||
border-radius: 5px 17px 5px 17px;
|
||||
background: #eaf4ff;
|
||||
}
|
||||
.inline-cta span {
|
||||
color: #2b7fe8;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
.inline-cta h3 {
|
||||
margin: 9px 0 0;
|
||||
color: #3b536d;
|
||||
font-size: 20px;
|
||||
}
|
||||
.inline-cta button {
|
||||
flex: 0 0 auto;
|
||||
height: 42px;
|
||||
padding: 0 18px;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
background: #287fec;
|
||||
font-size: 11px;
|
||||
}
|
||||
.article-pagination {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 40px;
|
||||
padding-top: 42px;
|
||||
padding-bottom: 42px;
|
||||
border-top: 1px solid #dfe8f1;
|
||||
}
|
||||
.article-pagination a {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.article-pagination a:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
.article-pagination span {
|
||||
color: #8c9bab;
|
||||
font-size: 9px;
|
||||
}
|
||||
.article-pagination strong {
|
||||
color: #506983;
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.article-pagination a:hover strong {
|
||||
color: #237df0;
|
||||
}
|
||||
.related-section {
|
||||
padding: 96px 0 118px;
|
||||
background: #eef6fd;
|
||||
}
|
||||
.related-section header {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
gap: 30px;
|
||||
}
|
||||
.related-section header p {
|
||||
margin: 0;
|
||||
color: #247ce9;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
.related-section header h2 {
|
||||
margin: 12px 0 0;
|
||||
color: #354a62;
|
||||
font-size: 35px;
|
||||
}
|
||||
.related-section header button {
|
||||
padding: 0 0 5px;
|
||||
border-bottom: 1px solid #94bae3;
|
||||
color: #287bdc;
|
||||
background: transparent;
|
||||
font-size: 11px;
|
||||
}
|
||||
.related-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.2fr 0.9fr 0.9fr;
|
||||
gap: 22px;
|
||||
margin-top: 38px;
|
||||
}
|
||||
.related-grid article > a {
|
||||
height: 190px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
border-radius: 4px 14px 4px 14px;
|
||||
}
|
||||
.related-grid article:first-child > a {
|
||||
height: 250px;
|
||||
}
|
||||
.related-grid img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
.related-grid article:hover img {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
.related-grid article > span {
|
||||
display: block;
|
||||
margin-top: 18px;
|
||||
color: #7890aa;
|
||||
font-size: 9px;
|
||||
}
|
||||
.related-grid h3 {
|
||||
margin: 10px 0 0;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.related-grid h3 a {
|
||||
color: #3c526a;
|
||||
text-decoration: none;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.article-layout {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
.article-aside {
|
||||
position: static;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
}
|
||||
.article-aside > div {
|
||||
display: none;
|
||||
}
|
||||
.article-cover {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
.section-number {
|
||||
position: static;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.related-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.related-grid article:first-child {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.article-hero {
|
||||
min-height: auto;
|
||||
}
|
||||
.article-hero-inner {
|
||||
padding-top: 35px;
|
||||
padding-bottom: 52px;
|
||||
}
|
||||
.article-heading {
|
||||
margin-top: 42px;
|
||||
}
|
||||
.article-heading h1 {
|
||||
font-size: clamp(35px, 10vw, 47px);
|
||||
}
|
||||
.article-byline {
|
||||
flex-wrap: wrap;
|
||||
gap: 12px 18px;
|
||||
}
|
||||
.article-byline > div {
|
||||
width: 100%;
|
||||
padding: 0 0 12px;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid #d1dfed;
|
||||
}
|
||||
.article-layout {
|
||||
padding-top: 58px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
.article-aside {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.article-aside button {
|
||||
display: none;
|
||||
}
|
||||
.article-cover {
|
||||
height: 235px;
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
.article-lead {
|
||||
padding: 24px 21px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.article-content section {
|
||||
margin-top: 52px;
|
||||
}
|
||||
.article-content h2 {
|
||||
font-size: 25px;
|
||||
}
|
||||
.comparison-table {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.comparison-head,
|
||||
.comparison-row {
|
||||
min-width: 600px;
|
||||
}
|
||||
.article-content blockquote {
|
||||
padding: 29px 23px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.inline-cta {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
padding: 28px 23px;
|
||||
}
|
||||
.article-pagination {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.article-pagination a:last-child {
|
||||
text-align: left;
|
||||
}
|
||||
.related-section {
|
||||
padding-top: 76px;
|
||||
padding-bottom: 86px;
|
||||
}
|
||||
.related-section header {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
.related-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.related-grid article:first-child {
|
||||
grid-column: auto;
|
||||
}
|
||||
.related-grid article:first-child > a {
|
||||
height: 210px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,889 @@
|
||||
<script setup>
|
||||
import SiteHeader from '~/components/site/SiteHeader.vue'
|
||||
import SiteFooter from '~/components/site/SiteFooter.vue'
|
||||
import { featuredInsight, insightCategories, insights } from '~/data/insights'
|
||||
|
||||
const activeCategory = ref('全部')
|
||||
const visibleCount = ref(4)
|
||||
const { openConsultation } = useConsultation()
|
||||
|
||||
useHead({
|
||||
title: '增长洞察｜大马棒·云途全域 GEO',
|
||||
meta: [
|
||||
{
|
||||
name: 'description',
|
||||
content:
|
||||
'阅读 AI 搜索、GEO 行业知识、增长实战复盘与行业白皮书，了解品牌在生成式搜索中的增长方法。'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
const filteredInsights = computed(() => {
|
||||
const list = insights.filter((item) => !item.featured)
|
||||
if (activeCategory.value === '全部') return list
|
||||
if (activeCategory.value === '最新文章') return list.slice(0, 3)
|
||||
return list.filter((item) => item.category === activeCategory.value)
|
||||
})
|
||||
const visibleInsights = computed(() => filteredInsights.value.slice(0, visibleCount.value))
|
||||
const canLoadMore = computed(() => visibleCount.value < filteredInsights.value.length)
|
||||
|
||||
watch(activeCategory, () => {
|
||||
visibleCount.value = 4
|
||||
})
|
||||
|
||||
function requestDiagnosis(source) {
|
||||
openConsultation({ title: '预约免费 GEO 增长诊断', source })
|
||||
}
|
||||
|
||||
function requestWhitepaper(source) {
|
||||
openConsultation({
|
||||
title: '获取 2026 AI 搜索与品牌增长观察',
|
||||
need: '行业白皮书',
|
||||
source
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="insights-page">
|
||||
<a class="skip-link" href="#main-content">跳到主要内容</a>
|
||||
<SiteHeader />
|
||||
|
||||
<main id="main-content">
|
||||
<section class="insights-hero">
|
||||
<div class="insights-hero-art" aria-hidden="true"></div>
|
||||
<div class="page-width insights-hero-grid">
|
||||
<div class="insights-hero-copy">
|
||||
<p class="page-eyebrow">全域营销增长洞察</p>
|
||||
<h1>行业人在看的东西，<br /><span>全都在这里</span></h1>
|
||||
<p>持续记录 AI 搜索的变化、可执行的 GEO 方法，以及我们从真实项目里得到的判断。</p>
|
||||
<div class="hero-actions">
|
||||
<a href="#insight-library" class="primary-button"
|
||||
>开始阅读 <AppIcon name="bottom"
|
||||
/></a>
|
||||
<button type="button" @click="requestDiagnosis('增长洞察页 Hero')">
|
||||
免费诊断品牌可见性
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editorial-index" aria-label="增长洞察内容索引">
|
||||
<div class="index-header"><span>YUNTU / INSIGHTS</span><small>2026.07</small></div>
|
||||
<strong>06</strong>
|
||||
<p>围绕 AI 搜索、品牌认知与业务转化，建立一套可持续更新的知识索引。</p>
|
||||
<div class="index-lines"><i></i><i></i><i></i><i></i></div>
|
||||
<div class="index-footer">
|
||||
<span>KNOWLEDGE</span><span>PRACTICE</span><span>REPORT</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="insight-library" class="insight-library">
|
||||
<div class="page-width">
|
||||
<header class="library-heading">
|
||||
<div>
|
||||
<p class="section-kicker">本期推荐</p>
|
||||
<h2>先从一个关键变化开始</h2>
|
||||
</div>
|
||||
<p>AI 不只是新的流量入口，它正在改变用户理解品牌、比较方案和做出选择的方式。</p>
|
||||
</header>
|
||||
|
||||
<article class="featured-insight">
|
||||
<NuxtLink :to="`/insights/${featuredInsight.slug}`" class="featured-image">
|
||||
<img :src="featuredInsight.cover" :alt="featuredInsight.title" />
|
||||
<span>EDITOR'S PICK</span>
|
||||
</NuxtLink>
|
||||
<div class="featured-copy">
|
||||
<div class="article-meta">
|
||||
<span>{{ featuredInsight.category }}</span
|
||||
><time>{{ featuredInsight.date }}</time>
|
||||
</div>
|
||||
<h2>
|
||||
<NuxtLink :to="`/insights/${featuredInsight.slug}`">{{
|
||||
featuredInsight.title
|
||||
}}</NuxtLink>
|
||||
</h2>
|
||||
<p>{{ featuredInsight.excerpt }}</p>
|
||||
<div class="featured-footer">
|
||||
<NuxtLink :to="`/insights/${featuredInsight.slug}`"
|
||||
>阅读全文 <AppIcon name="arrow-right"
|
||||
/></NuxtLink>
|
||||
<span>{{ featuredInsight.readingTime }} · {{ featuredInsight.views }} 阅读</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<nav class="insight-filters" aria-label="洞察文章分类">
|
||||
<button
|
||||
v-for="category in insightCategories"
|
||||
:key="category"
|
||||
type="button"
|
||||
:class="{ active: activeCategory === category }"
|
||||
@click="activeCategory = category"
|
||||
>
|
||||
{{ category }}
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<Transition name="insight-change" mode="out-in">
|
||||
<div :key="activeCategory" class="article-results">
|
||||
<div v-if="visibleInsights.length" class="article-grid">
|
||||
<article
|
||||
v-for="(article, index) in visibleInsights"
|
||||
:key="article.slug"
|
||||
:class="{ lead: index === 0 }"
|
||||
>
|
||||
<NuxtLink :to="`/insights/${article.slug}`" class="article-cover">
|
||||
<img :src="article.cover" :alt="article.title" />
|
||||
<span>{{ article.category }}</span>
|
||||
</NuxtLink>
|
||||
<div class="article-copy">
|
||||
<div class="article-meta">
|
||||
<time>{{ article.date }}</time
|
||||
><span>{{ article.views }} 阅读</span>
|
||||
</div>
|
||||
<h3>
|
||||
<NuxtLink :to="`/insights/${article.slug}`">{{ article.title }}</NuxtLink>
|
||||
</h3>
|
||||
<p>{{ article.excerpt }}</p>
|
||||
<NuxtLink :to="`/insights/${article.slug}`" class="read-link"
|
||||
>查看详情 <AppIcon name="arrow-right"
|
||||
/></NuxtLink>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div v-else class="insight-empty">
|
||||
<span>CONTENT IN PROGRESS</span>
|
||||
<h3>该分类内容正在整理</h3>
|
||||
<p>可以先预约诊断，我们会结合你的行业分享对应的 GEO 判断与资料。</p>
|
||||
<button
|
||||
class="primary-button small"
|
||||
type="button"
|
||||
@click="requestDiagnosis('洞察分类空状态')"
|
||||
>
|
||||
预约免费诊断 <AppIcon name="arrow-right" />
|
||||
</button>
|
||||
</div>
|
||||
<button v-if="canLoadMore" class="load-more" type="button" @click="visibleCount += 4">
|
||||
加载更多 <AppIcon name="plus" />
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="whitepaper-section">
|
||||
<div class="whitepaper-art" aria-hidden="true"></div>
|
||||
<div class="page-width whitepaper-grid">
|
||||
<div class="whitepaper-number"><span>REPORT</span><strong>2026</strong></div>
|
||||
<div class="whitepaper-copy">
|
||||
<p>行业白皮书</p>
|
||||
<h2>AI 搜索与品牌增长观察</h2>
|
||||
<span>用户行为 · 内容信源 · 衡量框架 · 行业实践</span>
|
||||
</div>
|
||||
<button type="button" @click="requestWhitepaper('增长洞察页白皮书')">
|
||||
获取白皮书 <AppIcon name="arrow-right" />
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="insights-cta">
|
||||
<div class="page-width insights-cta-content">
|
||||
<p>阅读方法，也要回到自己的业务</p>
|
||||
<h2>看看你的品牌，正在被 AI 如何理解</h2>
|
||||
<button
|
||||
class="primary-button"
|
||||
type="button"
|
||||
@click="requestDiagnosis('增长洞察页底部 CTA')"
|
||||
>
|
||||
预约免费 GEO 诊断 <AppIcon name="arrow-right" />
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<SiteFooter />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.insights-page {
|
||||
--insight-blue: #237df0;
|
||||
overflow: hidden;
|
||||
color: #344359;
|
||||
background: #fff;
|
||||
}
|
||||
.skip-link {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
background: #1f70df;
|
||||
transform: translateY(-150%);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.skip-link:focus {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.page-eyebrow,
|
||||
.section-kicker {
|
||||
margin: 0;
|
||||
color: var(--insight-blue);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
.insights-hero {
|
||||
position: relative;
|
||||
min-height: 620px;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
isolation: isolate;
|
||||
background: #f2f7fd;
|
||||
}
|
||||
.insights-hero-art {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(circle at 78% 28%, rgba(66, 151, 251, 0.23), transparent 27%),
|
||||
linear-gradient(110deg, #f9fcff, #e8f2ff);
|
||||
}
|
||||
.insights-hero-art::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: '';
|
||||
opacity: 0.2;
|
||||
background-image:
|
||||
linear-gradient(rgba(54, 124, 214, 0.08) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(54, 124, 214, 0.08) 1px, transparent 1px);
|
||||
background-size: 60px 60px;
|
||||
mask-image: linear-gradient(90deg, transparent 18%, #000);
|
||||
}
|
||||
.insights-hero-grid {
|
||||
min-height: 620px;
|
||||
display: grid;
|
||||
grid-template-columns: 0.9fr 1.1fr;
|
||||
align-items: center;
|
||||
gap: 90px;
|
||||
padding: 58px 0 66px;
|
||||
}
|
||||
.insights-hero-copy h1 {
|
||||
margin: 16px 0 0;
|
||||
color: #35465c;
|
||||
font-size: clamp(48px, 4.5vw, 72px);
|
||||
letter-spacing: -0.055em;
|
||||
line-height: 1.16;
|
||||
}
|
||||
.insights-hero-copy h1 span {
|
||||
color: #1978ef;
|
||||
}
|
||||
.insights-hero-copy > p:nth-of-type(2) {
|
||||
max-width: 590px;
|
||||
margin: 24px 0 0;
|
||||
color: #6d7d91;
|
||||
font-size: 15px;
|
||||
line-height: 1.85;
|
||||
}
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
margin-top: 31px;
|
||||
}
|
||||
.hero-actions a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.hero-actions > button {
|
||||
color: #546b86;
|
||||
background: transparent;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.editorial-index {
|
||||
position: relative;
|
||||
width: min(570px, 100%);
|
||||
min-height: 390px;
|
||||
justify-self: end;
|
||||
padding: 38px 42px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.9);
|
||||
border-radius: 4px 24px 4px 24px;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
box-shadow:
|
||||
0 30px 65px rgba(56, 117, 193, 0.14),
|
||||
inset 0 1px 0 #fff;
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
.index-header,
|
||||
.index-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #6e8daf;
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
.editorial-index > strong {
|
||||
display: block;
|
||||
margin-top: 37px;
|
||||
color: #267fec;
|
||||
font-size: 104px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.07em;
|
||||
line-height: 0.9;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.editorial-index > p {
|
||||
max-width: 360px;
|
||||
margin: 23px 0 0;
|
||||
color: #5f748d;
|
||||
font-size: 14px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
.index-lines {
|
||||
position: absolute;
|
||||
top: 75px;
|
||||
right: 42px;
|
||||
width: 118px;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
.index-lines i {
|
||||
height: 1px;
|
||||
background: #b9d2ec;
|
||||
transform-origin: right;
|
||||
}
|
||||
.index-lines i:nth-child(2) {
|
||||
transform: scaleX(0.7);
|
||||
}
|
||||
.index-lines i:nth-child(3) {
|
||||
transform: scaleX(0.45);
|
||||
}
|
||||
.index-lines i:nth-child(4) {
|
||||
transform: scaleX(0.82);
|
||||
}
|
||||
.index-footer {
|
||||
position: absolute;
|
||||
right: 42px;
|
||||
bottom: 35px;
|
||||
left: 42px;
|
||||
padding-top: 17px;
|
||||
border-top: 1px solid #d3e1ef;
|
||||
}
|
||||
.insight-library {
|
||||
padding: 112px 0 132px;
|
||||
}
|
||||
.library-heading {
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 0.9fr;
|
||||
align-items: end;
|
||||
gap: 80px;
|
||||
}
|
||||
.library-heading h2 {
|
||||
margin: 15px 0 0;
|
||||
color: #344359;
|
||||
font-size: clamp(32px, 3vw, 48px);
|
||||
letter-spacing: -0.045em;
|
||||
line-height: 1.28;
|
||||
}
|
||||
.library-heading > p {
|
||||
max-width: 540px;
|
||||
margin: 0 0 5px;
|
||||
color: #748398;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.featured-insight {
|
||||
min-height: 450px;
|
||||
display: grid;
|
||||
grid-template-columns: 1.08fr 0.92fr;
|
||||
margin-top: 48px;
|
||||
overflow: hidden;
|
||||
border-radius: 5px 22px 5px 22px;
|
||||
background: #edf6ff;
|
||||
}
|
||||
.featured-image {
|
||||
position: relative;
|
||||
min-height: 450px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.featured-image::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: '';
|
||||
background: linear-gradient(90deg, transparent 65%, rgba(237, 246, 255, 0.85));
|
||||
}
|
||||
.featured-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
transition: transform 0.45s;
|
||||
}
|
||||
.featured-insight:hover img {
|
||||
transform: scale(1.035);
|
||||
}
|
||||
.featured-image > span {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 28px;
|
||||
left: 28px;
|
||||
padding: 8px 11px;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
background: rgba(34, 112, 209, 0.82);
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
.featured-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 48px 54px 48px 36px;
|
||||
}
|
||||
.article-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
color: #8798ab;
|
||||
font-size: 10px;
|
||||
}
|
||||
.article-meta span:first-child {
|
||||
color: #2b7ee5;
|
||||
font-weight: 700;
|
||||
}
|
||||
.featured-copy h2 {
|
||||
margin: 20px 0 0;
|
||||
font-size: clamp(30px, 2.6vw, 42px);
|
||||
line-height: 1.35;
|
||||
}
|
||||
.featured-copy h2 a,
|
||||
.article-copy h3 a {
|
||||
color: #34485f;
|
||||
text-decoration: none;
|
||||
}
|
||||
.featured-copy > p {
|
||||
margin: 18px 0 0;
|
||||
color: #718197;
|
||||
font-size: 13px;
|
||||
line-height: 1.85;
|
||||
}
|
||||
.featured-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #cfdeed;
|
||||
}
|
||||
.featured-footer a,
|
||||
.read-link {
|
||||
color: #247be8;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
.featured-footer > span {
|
||||
color: #8997a7;
|
||||
font-size: 9px;
|
||||
}
|
||||
.insight-filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 75px;
|
||||
padding-bottom: 18px;
|
||||
border-bottom: 1px solid #e0e9f3;
|
||||
}
|
||||
.insight-filters button {
|
||||
height: 38px;
|
||||
padding: 0 17px;
|
||||
border-radius: 4px;
|
||||
color: #61758c;
|
||||
background: #f1f6fc;
|
||||
font-size: 12px;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.insight-filters button:hover,
|
||||
.insight-filters button.active {
|
||||
color: #fff;
|
||||
background: #287ff0;
|
||||
box-shadow: 0 8px 18px rgba(39, 126, 238, 0.2);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.article-results {
|
||||
margin-top: 40px;
|
||||
}
|
||||
.article-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 28px;
|
||||
}
|
||||
.article-grid article {
|
||||
display: grid;
|
||||
grid-template-columns: 0.85fr 1.15fr;
|
||||
min-height: 285px;
|
||||
overflow: hidden;
|
||||
border-radius: 14px 4px 14px 4px;
|
||||
background: #f3f7fc;
|
||||
transition:
|
||||
transform 0.25s,
|
||||
box-shadow 0.25s,
|
||||
background 0.25s;
|
||||
}
|
||||
.article-grid article:hover {
|
||||
background: #fff;
|
||||
box-shadow: 0 20px 42px rgba(61, 119, 189, 0.13);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
.article-grid article.lead {
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: 1.05fr 0.95fr;
|
||||
min-height: 350px;
|
||||
}
|
||||
.article-cover {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.article-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
.article-grid article:hover img {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
.article-cover > span {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 18px;
|
||||
padding: 7px 9px;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
background: rgba(32, 105, 200, 0.82);
|
||||
font-size: 9px;
|
||||
}
|
||||
.article-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 28px;
|
||||
}
|
||||
.article-copy h3 {
|
||||
margin: 15px 0 0;
|
||||
font-size: 20px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.article-grid article.lead h3 {
|
||||
font-size: 28px;
|
||||
}
|
||||
.article-copy > p {
|
||||
margin: 12px 0 0;
|
||||
color: #75859a;
|
||||
font-size: 11px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
.read-link {
|
||||
align-self: flex-start;
|
||||
margin-top: 22px;
|
||||
padding-bottom: 4px;
|
||||
border-bottom: 1px solid #9bc1e9;
|
||||
}
|
||||
.load-more {
|
||||
min-width: 150px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin: 42px auto 0;
|
||||
border: 1px solid #bad2ea;
|
||||
border-radius: 5px;
|
||||
color: #527497;
|
||||
background: #fff;
|
||||
font-size: 12px;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.load-more:hover {
|
||||
color: #247be8;
|
||||
border-color: #73aae4;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.insight-empty {
|
||||
min-height: 390px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 45px 20px;
|
||||
border-radius: 16px 5px 16px 5px;
|
||||
background: #f2f7fd;
|
||||
text-align: center;
|
||||
}
|
||||
.insight-empty > span {
|
||||
color: #2a80ea;
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
.insight-empty h3 {
|
||||
margin: 14px 0 0;
|
||||
color: #3b4f66;
|
||||
font-size: 27px;
|
||||
}
|
||||
.insight-empty p {
|
||||
max-width: 490px;
|
||||
margin: 12px 0 0;
|
||||
color: #7b8b9d;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.insight-empty button {
|
||||
margin-top: 24px;
|
||||
}
|
||||
.insight-change-enter-active,
|
||||
.insight-change-leave-active {
|
||||
transition:
|
||||
opacity 0.18s,
|
||||
transform 0.22s;
|
||||
}
|
||||
.insight-change-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(9px);
|
||||
}
|
||||
.insight-change-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
.whitepaper-section {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #eaf4ff;
|
||||
}
|
||||
.whitepaper-art {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: url('/images/lanhu/slices/home-group98-image24@2x.png') center / cover no-repeat;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.whitepaper-grid {
|
||||
position: relative;
|
||||
min-height: 310px;
|
||||
display: grid;
|
||||
grid-template-columns: 0.65fr 1.35fr auto;
|
||||
align-items: center;
|
||||
gap: 65px;
|
||||
}
|
||||
.whitepaper-number {
|
||||
display: grid;
|
||||
}
|
||||
.whitepaper-number span {
|
||||
color: #6e92b9;
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
.whitepaper-number strong {
|
||||
color: #277fec;
|
||||
font-size: 64px;
|
||||
letter-spacing: -0.05em;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.whitepaper-copy p {
|
||||
margin: 0;
|
||||
color: #277fec;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
.whitepaper-copy h2 {
|
||||
margin: 13px 0 0;
|
||||
color: #395069;
|
||||
font-size: 35px;
|
||||
}
|
||||
.whitepaper-copy span {
|
||||
display: block;
|
||||
margin-top: 12px;
|
||||
color: #72869c;
|
||||
font-size: 12px;
|
||||
}
|
||||
.whitepaper-grid > button {
|
||||
height: 48px;
|
||||
padding: 0 24px;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
background: #277fec;
|
||||
box-shadow: 0 12px 25px rgba(39, 127, 236, 0.2);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.whitepaper-grid > button:hover {
|
||||
background: #176ed8;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.insights-cta {
|
||||
min-height: 410px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background:
|
||||
linear-gradient(rgba(248, 252, 255, 0.45), rgba(235, 246, 255, 0.7)),
|
||||
url('/images/lanhu/slices/home-group105-image31@2x.png') center / cover no-repeat;
|
||||
}
|
||||
.insights-cta-content {
|
||||
padding: 74px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.insights-cta-content p {
|
||||
margin: 0;
|
||||
color: #237df0;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
.insights-cta-content h2 {
|
||||
margin: 17px 0 0;
|
||||
color: #3375c5;
|
||||
font-size: clamp(32px, 3.2vw, 50px);
|
||||
letter-spacing: -0.045em;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.insights-cta-content button {
|
||||
margin-top: 29px;
|
||||
}
|
||||
@media (max-width: 980px) {
|
||||
.insights-hero,
|
||||
.insights-hero-grid {
|
||||
min-height: auto;
|
||||
}
|
||||
.insights-hero-grid,
|
||||
.library-heading {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.insights-hero-grid {
|
||||
padding-top: 74px;
|
||||
padding-bottom: 66px;
|
||||
}
|
||||
.editorial-index {
|
||||
justify-self: center;
|
||||
}
|
||||
.library-heading {
|
||||
gap: 22px;
|
||||
}
|
||||
.library-heading > p {
|
||||
margin: 0;
|
||||
}
|
||||
.featured-insight {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.featured-image {
|
||||
min-height: 360px;
|
||||
}
|
||||
.featured-image::after {
|
||||
background: linear-gradient(transparent 65%, #edf6ff);
|
||||
}
|
||||
.featured-copy {
|
||||
padding: 42px;
|
||||
}
|
||||
.article-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.article-grid article.lead {
|
||||
grid-column: auto;
|
||||
}
|
||||
.whitepaper-grid {
|
||||
grid-template-columns: 0.7fr 1.3fr;
|
||||
gap: 35px;
|
||||
padding-top: 54px;
|
||||
padding-bottom: 54px;
|
||||
}
|
||||
.whitepaper-grid > button {
|
||||
grid-column: 2;
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.insights-hero-grid {
|
||||
padding-top: 54px;
|
||||
}
|
||||
.insights-hero-copy h1 {
|
||||
font-size: clamp(39px, 11vw, 52px);
|
||||
}
|
||||
.hero-actions {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
.editorial-index {
|
||||
min-height: 330px;
|
||||
padding: 28px 25px;
|
||||
}
|
||||
.editorial-index > strong {
|
||||
font-size: 82px;
|
||||
}
|
||||
.index-lines {
|
||||
right: 25px;
|
||||
width: 85px;
|
||||
}
|
||||
.index-footer {
|
||||
right: 25px;
|
||||
bottom: 25px;
|
||||
left: 25px;
|
||||
}
|
||||
.insight-library {
|
||||
padding-top: 76px;
|
||||
padding-bottom: 86px;
|
||||
}
|
||||
.featured-image {
|
||||
min-height: 245px;
|
||||
}
|
||||
.featured-copy {
|
||||
padding: 30px 22px 34px;
|
||||
}
|
||||
.featured-footer {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
.insight-filters {
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.insight-filters button {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.article-grid article,
|
||||
.article-grid article.lead {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.article-cover {
|
||||
min-height: 210px;
|
||||
}
|
||||
.article-copy {
|
||||
padding: 25px 22px;
|
||||
}
|
||||
.article-grid article.lead h3 {
|
||||
font-size: 22px;
|
||||
}
|
||||
.whitepaper-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 22px;
|
||||
}
|
||||
.whitepaper-number strong {
|
||||
font-size: 52px;
|
||||
}
|
||||
.whitepaper-copy h2 {
|
||||
font-size: 29px;
|
||||
}
|
||||
.whitepaper-grid > button {
|
||||
grid-column: auto;
|
||||
}
|
||||
.insights-cta {
|
||||
min-height: 380px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+1878
File diff suppressed because it is too large
Load Diff
+1381
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
Reference in New Issue
Block a user