feat: refine responsive automotive storefront
This commit is contained in:
李宝儿的Macbook
+428
-96
@@ -158,13 +158,22 @@ img {
|
||||
text-decoration: none;
|
||||
line-height: 1.2;
|
||||
cursor: pointer;
|
||||
transition: opacity 180ms ease, background-color 180ms ease, border-color 180ms ease;
|
||||
transition:
|
||||
opacity 180ms ease,
|
||||
color 180ms ease,
|
||||
background-color 180ms ease,
|
||||
border-color 180ms ease,
|
||||
transform 180ms ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
opacity: 0.85;
|
||||
transform: none;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn:focus-visible {
|
||||
@@ -267,7 +276,16 @@ img {
|
||||
border-bottom: 1px solid var(--b2b-line-light);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
transition: border-color 180ms ease;
|
||||
transition:
|
||||
background-color 240ms ease,
|
||||
border-color 240ms ease,
|
||||
box-shadow 240ms ease;
|
||||
}
|
||||
|
||||
.b2b-header.sticky {
|
||||
background: rgba(250, 250, 248, 0.98);
|
||||
border-color: rgba(28, 28, 26, 0.12);
|
||||
box-shadow: 0 8px 24px rgba(28, 28, 26, 0.06);
|
||||
}
|
||||
|
||||
.b2b-header .navbar {
|
||||
@@ -339,7 +357,14 @@ img {
|
||||
min-height: 85vh;
|
||||
padding: 8rem 0 5rem;
|
||||
align-items: center;
|
||||
background: var(--b2b-surface);
|
||||
background:
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgba(250, 250, 248, 0.98) 0%,
|
||||
rgba(250, 250, 248, 0.92) 42%,
|
||||
rgba(250, 250, 248, 0.28) 100%
|
||||
),
|
||||
url("../images/hero-car.jpg") center 58% / cover no-repeat;
|
||||
}
|
||||
|
||||
.b2b-hero h1 {
|
||||
@@ -593,9 +618,22 @@ img {
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
.cta-section .btn-b2b-primary {
|
||||
color: var(--b2b-ink);
|
||||
background: var(--b2b-surface);
|
||||
border-color: var(--b2b-surface);
|
||||
}
|
||||
|
||||
.cta-section .btn-b2b-primary:hover,
|
||||
.cta-section .btn-b2b-primary:focus {
|
||||
color: var(--b2b-ink);
|
||||
background: var(--b2b-mist);
|
||||
border-color: var(--b2b-mist);
|
||||
}
|
||||
|
||||
/* ---- FAQ Section ---- */
|
||||
.faq-section {
|
||||
background: var(--b2b-surface);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.faq-section .accordion,
|
||||
@@ -628,11 +666,26 @@ img {
|
||||
.faq-section .accordion-button::after {
|
||||
filter: none;
|
||||
opacity: 0.4;
|
||||
transition: opacity 220ms ease, transform 220ms ease;
|
||||
}
|
||||
|
||||
.faq-section .accordion-button:hover::after,
|
||||
.faq-section .accordion-button:not(.collapsed)::after {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.faq-section .accordion-body {
|
||||
padding: 0 0 1.5rem;
|
||||
color: var(--b2b-ink-soft);
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
transition: opacity 220ms ease, transform 220ms ease;
|
||||
}
|
||||
|
||||
.faq-section .accordion-collapse.collapsing .accordion-body,
|
||||
.faq-section .accordion-collapse.show .accordion-body {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* ---- Factory / Store Environment ---- */
|
||||
@@ -676,10 +729,88 @@ img {
|
||||
grid-row: span 2;
|
||||
}
|
||||
|
||||
.factory-gallery-extra {
|
||||
grid-column: 1 / -1;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.factory-gallery img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 500ms ease;
|
||||
}
|
||||
|
||||
.factory-gallery figure:hover img {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
/* ---- Store Credentials ---- */
|
||||
.credentials-section {
|
||||
background: var(--b2b-elevated);
|
||||
}
|
||||
|
||||
.credentials-section .section-lead {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.credentials-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 1px;
|
||||
background: var(--b2b-line);
|
||||
}
|
||||
|
||||
.credential-card {
|
||||
min-width: 0;
|
||||
background: var(--b2b-surface);
|
||||
}
|
||||
|
||||
.credential-media {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 4 / 3;
|
||||
background: var(--b2b-mist);
|
||||
}
|
||||
|
||||
.credential-media img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 500ms ease;
|
||||
}
|
||||
|
||||
.credential-media:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.credential-media:hover img {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.credential-media.is-contain {
|
||||
padding: 1rem;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.credential-media.is-contain img {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.credential-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.credential-body h3 {
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.credential-body p {
|
||||
margin: 0;
|
||||
color: var(--b2b-ink-soft);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* ---- Factory Video ---- */
|
||||
@@ -914,6 +1045,21 @@ textarea:focus-visible {
|
||||
padding-top: 8.5rem;
|
||||
}
|
||||
|
||||
.b2b-section.about-intro {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(16, 17, 15, 0.7), rgba(16, 17, 15, 0.42)),
|
||||
url("../images/store/storefront.jpg") center 42% / cover no-repeat;
|
||||
}
|
||||
|
||||
.about-intro .section-heading,
|
||||
.about-intro .section-eyebrow,
|
||||
.about-intro h1,
|
||||
.about-intro .about-content {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
@@ -964,101 +1110,200 @@ textarea:focus-visible {
|
||||
}
|
||||
|
||||
/* ---- Contact Page ---- */
|
||||
.contact-info-card {
|
||||
padding: 2.5rem 2rem;
|
||||
.contact-section {
|
||||
padding-top: 0;
|
||||
background: var(--b2b-surface);
|
||||
border: 1px solid var(--b2b-line);
|
||||
}
|
||||
|
||||
.contact-info-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
padding: 1.25rem 0;
|
||||
}
|
||||
|
||||
.contact-info-item + .contact-info-item {
|
||||
border-top: 1px solid var(--b2b-line-light);
|
||||
}
|
||||
|
||||
.contact-info-icon {
|
||||
flex-shrink: 0;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--b2b-mist);
|
||||
}
|
||||
|
||||
.contact-info-body h3 {
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.2rem;
|
||||
color: var(--b2b-ink-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.contact-info-body p,
|
||||
.contact-info-body a {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: var(--b2b-ink);
|
||||
text-decoration: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.contact-info-body a:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.contact-info-body .whatsapp-link {
|
||||
display: inline-block;
|
||||
margin-top: 0.25rem;
|
||||
padding: 0.375rem 1rem;
|
||||
background: var(--b2b-ink);
|
||||
color: var(--b2b-surface);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.contact-info-body .whatsapp-link:hover {
|
||||
opacity: 0.85;
|
||||
color: var(--b2b-surface);
|
||||
}
|
||||
|
||||
/* Map card */
|
||||
.contact-map-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 320px;
|
||||
padding: 3rem 2rem;
|
||||
background: var(--b2b-mist);
|
||||
border: 1px solid var(--b2b-line);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
transition: background 180ms ease;
|
||||
}
|
||||
|
||||
.contact-map-card:hover {
|
||||
.contact-hero-grid {
|
||||
min-height: 520px;
|
||||
background: var(--b2b-elevated);
|
||||
}
|
||||
|
||||
.contact-hero-copy {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
min-height: 520px;
|
||||
padding: clamp(2.5rem, 5vw, 5rem);
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.contact-hero-copy h1 {
|
||||
margin-bottom: 1.5rem;
|
||||
font-family: var(--b2b-font-display);
|
||||
font-size: clamp(2.7rem, 5vw, 4.8rem);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.contact-hero-lead {
|
||||
max-width: 440px;
|
||||
margin-bottom: 0;
|
||||
color: var(--b2b-ink-soft);
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.contact-hero-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.contact-store-media {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
min-height: 520px;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background: var(--b2b-mist);
|
||||
}
|
||||
|
||||
.contact-store-media img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
|
||||
}
|
||||
|
||||
.contact-store-media:hover img {
|
||||
transform: scale(1.025);
|
||||
}
|
||||
|
||||
.contact-store-media figcaption {
|
||||
position: absolute;
|
||||
right: 1.25rem;
|
||||
bottom: 1.25rem;
|
||||
padding: 0.55rem 0.8rem;
|
||||
color: #fff;
|
||||
background: rgba(16, 17, 15, 0.72);
|
||||
font-size: 0.74rem;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.contact-details-section {
|
||||
background: var(--b2b-mist);
|
||||
}
|
||||
|
||||
.contact-detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 1px;
|
||||
background: var(--b2b-line);
|
||||
}
|
||||
|
||||
.contact-detail-grid.has-hours {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.contact-detail-card {
|
||||
min-width: 0;
|
||||
padding: 2rem;
|
||||
background: var(--b2b-surface);
|
||||
}
|
||||
|
||||
.contact-detail-label {
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--b2b-ink-muted);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.contact-detail-card h3,
|
||||
.contact-detail-card h3 a {
|
||||
margin: 0;
|
||||
color: var(--b2b-ink);
|
||||
font-size: clamp(1.05rem, 1.8vw, 1.35rem);
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.contact-map-icon {
|
||||
color: var(--b2b-ink-soft);
|
||||
margin-bottom: 1rem;
|
||||
.contact-detail-card h3 a:hover {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.contact-map-address {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: var(--b2b-ink);
|
||||
.contact-detail-empty {
|
||||
margin: 0;
|
||||
max-width: 320px;
|
||||
color: var(--b2b-ink-muted);
|
||||
}
|
||||
|
||||
.contact-map-section {
|
||||
background: var(--b2b-surface);
|
||||
}
|
||||
|
||||
.contact-map-heading {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.contact-map-heading h2 {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.contact-map-heading p:last-child {
|
||||
color: var(--b2b-ink-soft);
|
||||
}
|
||||
|
||||
.contact-map-panel {
|
||||
position: relative;
|
||||
min-height: 520px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(rgba(28, 28, 26, 0.06) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(28, 28, 26, 0.06) 1px, transparent 1px),
|
||||
var(--b2b-mist);
|
||||
background-size: 48px 48px;
|
||||
border: 1px solid var(--b2b-line);
|
||||
}
|
||||
|
||||
.contact-map-panel iframe {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 520px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.contact-map-placeholder {
|
||||
display: flex;
|
||||
min-height: 520px;
|
||||
padding: 2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contact-map-placeholder span {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.contact-map-placeholder p {
|
||||
margin: 0;
|
||||
color: var(--b2b-ink-soft);
|
||||
}
|
||||
|
||||
/* ---- Reveal Motion ---- */
|
||||
.motion-ready .reveal-item {
|
||||
opacity: 0;
|
||||
transform: translateY(var(--reveal-distance, 18px));
|
||||
transition:
|
||||
opacity 550ms cubic-bezier(0.2, 0.7, 0.2, 1),
|
||||
transform 550ms cubic-bezier(0.2, 0.7, 0.2, 1);
|
||||
transition-delay: var(--reveal-delay, 0ms);
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
.motion-ready .reveal-item.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
will-change: auto;
|
||||
}
|
||||
|
||||
/* ---- Reduced Motion ---- */
|
||||
@@ -1070,6 +1315,11 @@ textarea:focus-visible {
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
|
||||
.motion-ready .reveal-item {
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
@@ -1127,6 +1377,29 @@ textarea:focus-visible {
|
||||
.b2b-header .offcanvas .nav-item {
|
||||
border-bottom: 1px solid var(--b2b-line-light);
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transform: translateX(8px);
|
||||
transition:
|
||||
opacity 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
|
||||
transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
|
||||
}
|
||||
|
||||
.b2b-header .offcanvas.showing .nav-item,
|
||||
.b2b-header .offcanvas.show .nav-item {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.b2b-header .offcanvas .nav-item:nth-child(2) { transition-delay: 40ms; }
|
||||
.b2b-header .offcanvas .nav-item:nth-child(3) { transition-delay: 80ms; }
|
||||
.b2b-header .offcanvas .nav-item:nth-child(4) { transition-delay: 120ms; }
|
||||
.b2b-header .offcanvas .nav-item:nth-child(5) { transition-delay: 160ms; }
|
||||
.b2b-header .offcanvas .nav-item:nth-child(6) { transition-delay: 200ms; }
|
||||
|
||||
.b2b-header .offcanvas.hiding .nav-item {
|
||||
opacity: 0;
|
||||
transform: translateX(4px);
|
||||
transition-delay: 0ms;
|
||||
}
|
||||
|
||||
.b2b-header .offcanvas .nav-link {
|
||||
@@ -1182,13 +1455,29 @@ textarea:focus-visible {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.credentials-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.factory-video-section {
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
.contact-map-card {
|
||||
min-height: 220px;
|
||||
padding: 2rem 1.5rem;
|
||||
.contact-hero-grid,
|
||||
.contact-hero-copy,
|
||||
.contact-store-media {
|
||||
min-height: 420px;
|
||||
}
|
||||
|
||||
.contact-detail-grid,
|
||||
.contact-detail-grid.has-hours {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.contact-map-panel,
|
||||
.contact-map-panel iframe,
|
||||
.contact-map-placeholder {
|
||||
min-height: 420px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1209,6 +1498,9 @@ textarea:focus-visible {
|
||||
|
||||
.b2b-hero {
|
||||
padding-top: 6.5rem;
|
||||
background:
|
||||
linear-gradient(rgba(250, 250, 248, 0.84), rgba(250, 250, 248, 0.84)),
|
||||
url("../images/hero-car.jpg") 62% center / cover no-repeat;
|
||||
}
|
||||
|
||||
.b2b-hero h1 {
|
||||
@@ -1265,6 +1557,35 @@ textarea:focus-visible {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.contact-section {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.contact-hero-copy {
|
||||
min-height: auto;
|
||||
padding: 3rem 2rem;
|
||||
}
|
||||
|
||||
.contact-store-media {
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
.contact-detail-grid,
|
||||
.contact-detail-grid.has-hours {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.contact-map-heading {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.contact-map-panel,
|
||||
.contact-map-panel iframe,
|
||||
.contact-map-placeholder {
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
.about-cta {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
@@ -1279,13 +1600,23 @@ textarea:focus-visible {
|
||||
.factory-gallery {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(4, 200px);
|
||||
grid-template-rows: none;
|
||||
grid-auto-rows: 200px;
|
||||
}
|
||||
|
||||
.factory-gallery figure:first-child {
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.factory-gallery-extra {
|
||||
grid-column: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.credentials-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.capability-body {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
@@ -1294,7 +1625,8 @@ textarea:focus-visible {
|
||||
padding: 1.25rem 1rem;
|
||||
}
|
||||
|
||||
.contact-map-card {
|
||||
min-height: 180px;
|
||||
.contact-hero-actions .btn,
|
||||
.contact-map-heading .btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
# Image attribution
|
||||
|
||||
- `hero-car.jpg` — Photo by Quentin Martinez on [Pexels](https://www.pexels.com/photo/sleek-profile-of-a-luxury-sports-car-in-studio-lighting-33345481/), downloaded on 2026-07-25 and used under the [Pexels License](https://www.pexels.com/license/).
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 301 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 232 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 318 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 296 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 504 KiB |
@@ -25,9 +25,93 @@
|
||||
});
|
||||
}
|
||||
|
||||
function initRevealMotion() {
|
||||
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
var compactMotion = window.matchMedia('(max-width: 768px)').matches;
|
||||
if (reducedMotion || !('IntersectionObserver' in window)) return;
|
||||
|
||||
var revealItems = [];
|
||||
|
||||
function prepareGroup(containerSelector, itemSelector, delayStep) {
|
||||
document.querySelectorAll(containerSelector).forEach(function (container) {
|
||||
container.querySelectorAll(itemSelector).forEach(function (item, index) {
|
||||
var effectiveStep = compactMotion ? 40 : delayStep;
|
||||
var maximumDelay = compactMotion ? 200 : 300;
|
||||
var delay = Math.min(index * effectiveStep, maximumDelay);
|
||||
item.classList.add('reveal-item');
|
||||
item.style.setProperty('--reveal-delay', delay + 'ms');
|
||||
revealItems.push(item);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
prepareGroup(
|
||||
'.b2b-hero',
|
||||
'.section-eyebrow, h1, .b2b-hero-lead, .d-flex.flex-wrap, .hero-proof-list',
|
||||
80
|
||||
);
|
||||
prepareGroup('.trust-strip .row', '.trust-metric', 60);
|
||||
prepareGroup('.capability-grid', '.capability-card', 60);
|
||||
prepareGroup('.case-grid', '.case-card', 60);
|
||||
prepareGroup('.factory-gallery', 'figure', 60);
|
||||
prepareGroup('.credentials-grid', '.credential-card', 60);
|
||||
prepareGroup('.document-grid', 'article', 60);
|
||||
prepareGroup('.contact-detail-grid', '.contact-detail-card', 60);
|
||||
prepareGroup('.service-content, .case-content', ':scope > *', 40);
|
||||
|
||||
document.querySelectorAll(
|
||||
[
|
||||
'.section-heading',
|
||||
'.factory-proof .col-lg-5',
|
||||
'.factory-video-card',
|
||||
'.faq-section .col-lg-4',
|
||||
'.faq-section .accordion',
|
||||
'.contact-hero-copy',
|
||||
'.contact-store-media',
|
||||
'.contact-map-heading',
|
||||
'.contact-map-panel',
|
||||
'.cta-section .container',
|
||||
'.about-cta .container',
|
||||
'.page-header'
|
||||
].join(', ')
|
||||
).forEach(function (item) {
|
||||
if (item.classList.contains('reveal-item')) return;
|
||||
item.classList.add('reveal-item');
|
||||
item.style.setProperty('--reveal-delay', '0ms');
|
||||
revealItems.push(item);
|
||||
});
|
||||
|
||||
if (!revealItems.length) return;
|
||||
|
||||
document.documentElement.classList.add('motion-ready');
|
||||
|
||||
var observer = new IntersectionObserver(
|
||||
function (entries) {
|
||||
entries.forEach(function (entry) {
|
||||
if (!entry.isIntersecting) return;
|
||||
entry.target.classList.add('is-visible');
|
||||
observer.unobserve(entry.target);
|
||||
});
|
||||
},
|
||||
{
|
||||
threshold: 0.12,
|
||||
rootMargin: '0px'
|
||||
}
|
||||
);
|
||||
|
||||
window.requestAnimationFrame(function () {
|
||||
window.requestAnimationFrame(function () {
|
||||
revealItems.forEach(function (item) {
|
||||
observer.observe(item);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function initTheme() {
|
||||
initStickyHeader();
|
||||
initNavigation();
|
||||
initRevealMotion();
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
|
||||
+3
-3
@@ -18,8 +18,8 @@ function fragrance_trade_defaults() {
|
||||
|
||||
$defaults = array(
|
||||
'b2b_hero_eyebrow' => __( '需求沟通 · 方案确认 · 施工交付', 'fragrance-trade' ),
|
||||
'b2b_hero_title' => __( '根据车型与使用场景，选择更合适的汽车贴膜方案', 'fragrance-trade' ),
|
||||
'b2b_hero_text' => __( '隐形车衣、改色膜、隔热膜等项目，从需求沟通、膜料确认到施工交付，把选择和注意事项先讲清楚。', 'fragrance-trade' ),
|
||||
'b2b_hero_title' => __( 'xxx店铺名字', 'fragrance-trade' ),
|
||||
'b2b_hero_text' => __( 'xxx地址', 'fragrance-trade' ),
|
||||
'b2b_hero_primary_label' => __( '联系门店', 'fragrance-trade' ),
|
||||
'b2b_hero_primary_url' => '/contact/',
|
||||
'b2b_hero_secondary_label' => __( '了解服务项目', 'fragrance-trade' ),
|
||||
@@ -86,7 +86,7 @@ function fragrance_trade_defaults() {
|
||||
'linkedin_url' => '',
|
||||
'instagram_social_url' => '',
|
||||
'store_address' => '',
|
||||
'store_phone' => '',
|
||||
'store_phone' => __( 'xxx电话', 'fragrance-trade' ),
|
||||
'store_hours' => '',
|
||||
'store_map_url' => '',
|
||||
'footer_text' => __( '专注汽车贴膜方案沟通、施工交付与日常护理说明。', 'fragrance-trade' ),
|
||||
|
||||
@@ -467,7 +467,7 @@ msgid "查看接车检查、车辆清洁、裁膜施工、复检交付等主要
|
||||
msgstr ""
|
||||
|
||||
#: inc/defaults.php:21
|
||||
msgid "根据车型与使用场景，选择更合适的汽车贴膜方案"
|
||||
msgid "xxx店铺名字"
|
||||
msgstr ""
|
||||
|
||||
#: inc/cpt.php:40
|
||||
@@ -755,7 +755,7 @@ msgid "陶瓷隔热膜"
|
||||
msgstr ""
|
||||
|
||||
#: inc/defaults.php:22
|
||||
msgid "隐形车衣、改色膜、隔热膜等项目，从需求沟通、膜料确认到施工交付，把选择和注意事项先讲清楚。"
|
||||
msgid "xxx地址"
|
||||
msgstr ""
|
||||
|
||||
#: inc/cpt.php:88
|
||||
@@ -825,3 +825,146 @@ msgstr ""
|
||||
#: archive-case.php:21 archive-service.php:21 inc/cpt.php:285 inc/helpers.php:61 page-about.php:27 page-contact.php:35 page-faq.php:22 single-case.php:22 single-service.php:25
|
||||
msgid "首页"
|
||||
msgstr ""
|
||||
|
||||
#: template-parts/home/credentials.php:15
|
||||
msgid "KDX 品牌服务"
|
||||
msgstr ""
|
||||
|
||||
#: template-parts/home/credentials.php:24
|
||||
msgid "KDX 汽车膜授权服务店证书"
|
||||
msgstr ""
|
||||
|
||||
#: template-parts/home/credentials.php:40
|
||||
msgid "KDX 品牌活动现场"
|
||||
msgstr ""
|
||||
|
||||
#: template-parts/home/credentials.php:25
|
||||
msgid "KDX 汽车膜授权服务店证书，具体有效期以证书原件为准。"
|
||||
msgstr ""
|
||||
|
||||
#: template-parts/home/credentials.php:41
|
||||
msgid "参加 KDX 品牌活动，了解产品与施工服务信息。"
|
||||
msgstr ""
|
||||
|
||||
#: template-parts/home/credentials.php:57
|
||||
msgid "通过门店授权、品牌活动与赛事记录，了解门店的实际经营与服务背景。"
|
||||
msgstr ""
|
||||
|
||||
#: template-parts/home/credentials.php:32
|
||||
msgid "赛事荣誉"
|
||||
msgstr ""
|
||||
|
||||
#: template-parts/home/credentials.php:17
|
||||
msgid "KDX 品牌标识"
|
||||
msgstr ""
|
||||
|
||||
#: template-parts/home/credentials.php:16
|
||||
msgid "门店展示的 KDX 品牌标识与产品服务体系。"
|
||||
msgstr ""
|
||||
|
||||
#: template-parts/home/factory.php:13
|
||||
msgid "门店临街门头"
|
||||
msgstr ""
|
||||
|
||||
#: template-parts/home/factory.php:14
|
||||
msgid "门店接待与施工环境"
|
||||
msgstr ""
|
||||
|
||||
#: template-parts/home/factory.php:15
|
||||
msgid "门店咨询与产品展示区"
|
||||
msgstr ""
|
||||
|
||||
msgid "门店补充实景"
|
||||
msgstr ""
|
||||
|
||||
#: template-parts/home/credentials.php:33
|
||||
msgid "2026 KDX 全国百强直播 PK 赛第一季“魄界王者”荣誉。"
|
||||
msgstr ""
|
||||
|
||||
#: template-parts/home/credentials.php:34
|
||||
msgid "KDX 全国百强直播 PK 赛魄界王者奖杯"
|
||||
msgstr ""
|
||||
|
||||
#: template-parts/home/credentials.php:39
|
||||
msgid "品牌交流活动"
|
||||
msgstr ""
|
||||
|
||||
#: template-parts/home/credentials.php:54
|
||||
msgid "品牌与门店资料"
|
||||
msgstr ""
|
||||
|
||||
#: template-parts/home/credentials.php:55
|
||||
msgid "资质与荣誉"
|
||||
msgstr ""
|
||||
|
||||
#: template-parts/home/credentials.php:23
|
||||
msgid "授权服务资质"
|
||||
msgstr ""
|
||||
|
||||
#. translators: %s: credential title.
|
||||
#: template-parts/home/credentials.php:66
|
||||
#, php-format
|
||||
msgid "查看%s大图"
|
||||
msgstr ""
|
||||
|
||||
#: page-contact.php
|
||||
msgid "到店前可先电话确认车型、施工项目和时间，我们会提前做好接待安排。"
|
||||
msgstr ""
|
||||
|
||||
#: page-contact.php
|
||||
msgid "拨打门店电话"
|
||||
msgstr ""
|
||||
|
||||
#: page-contact.php
|
||||
msgid "查看门店位置"
|
||||
msgstr ""
|
||||
|
||||
#: page-contact.php
|
||||
msgid "门店外景"
|
||||
msgstr ""
|
||||
|
||||
#: page-contact.php
|
||||
msgid "门店信息"
|
||||
msgstr ""
|
||||
|
||||
#: page-contact.php
|
||||
msgid "联系与到店信息"
|
||||
msgstr ""
|
||||
|
||||
#: page-contact.php
|
||||
msgid "门店名称"
|
||||
msgstr ""
|
||||
|
||||
#: page-contact.php
|
||||
msgid "请在后台填写联系电话"
|
||||
msgstr ""
|
||||
|
||||
#: page-contact.php
|
||||
msgid "请在后台填写门店地址"
|
||||
msgstr ""
|
||||
|
||||
#: page-contact.php
|
||||
msgid "地图与导航"
|
||||
msgstr ""
|
||||
|
||||
#: page-contact.php
|
||||
msgid "找到门店"
|
||||
msgstr ""
|
||||
|
||||
#: page-contact.php
|
||||
msgid "打开地图导航"
|
||||
msgstr ""
|
||||
|
||||
#. translators: %s: store name.
|
||||
#: page-contact.php
|
||||
#, php-format
|
||||
msgid "%s门店地图"
|
||||
msgstr ""
|
||||
|
||||
#: page-contact.php
|
||||
msgid "填写门店地址后将在这里显示地图。"
|
||||
msgstr ""
|
||||
|
||||
#: inc/defaults.php
|
||||
msgid "xxx电话"
|
||||
msgstr ""
|
||||
|
||||
+4
-4
@@ -55,13 +55,13 @@ get_header();
|
||||
?>
|
||||
|
||||
<?php
|
||||
/* ---- 2. 信任要点 ---- */
|
||||
get_template_part( 'template-parts/home/trust' );
|
||||
/* ---- 2. 门店环境 ---- */
|
||||
get_template_part( 'template-parts/home/factory' );
|
||||
?>
|
||||
|
||||
<?php
|
||||
/* ---- 3. 门店环境 ---- */
|
||||
get_template_part( 'template-parts/home/factory' );
|
||||
/* ---- 3. 品牌资质与荣誉 ---- */
|
||||
get_template_part( 'template-parts/home/credentials' );
|
||||
?>
|
||||
|
||||
<?php
|
||||
|
||||
+120
-75
@@ -1,28 +1,42 @@
|
||||
<?php
|
||||
/**
|
||||
* Template Name: 联系我们
|
||||
* Contact page with store info and map navigation.
|
||||
* Contact page with store details, storefront image, and map.
|
||||
*
|
||||
* @package Fragrance_Trade
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
get_header();
|
||||
|
||||
$store_name = fragrance_trade_get_mod( 'b2b_hero_title' );
|
||||
$store_address = fragrance_trade_get_mod( 'store_address', '' );
|
||||
$store_phone = fragrance_trade_get_mod( 'store_phone', '' );
|
||||
$store_phone = fragrance_trade_get_mod( 'store_phone' );
|
||||
$store_hours = fragrance_trade_get_mod( 'store_hours', '' );
|
||||
$whatsapp = fragrance_trade_whatsapp_number();
|
||||
$email = fragrance_trade_inquiry_email();
|
||||
$store_image = fragrance_trade_image_uri( 'b2b_factory_image_1', 'store/storefront.jpg' );
|
||||
$phone_href = preg_replace( '/[^0-9+]/', '', $store_phone );
|
||||
$has_phone = strlen( preg_replace( '/[^0-9]/', '', $phone_href ) ) >= 5;
|
||||
|
||||
$map_nav_url = fragrance_trade_get_mod( 'store_map_url', '' );
|
||||
if ( ! $map_nav_url && $store_address ) {
|
||||
$map_nav_url = 'https://api.map.baidu.com/geocoder?address='
|
||||
if ( ! $store_address ) {
|
||||
$store_address = fragrance_trade_get_mod( 'b2b_hero_text' );
|
||||
}
|
||||
|
||||
$map_nav_url = fragrance_trade_get_mod( 'store_map_url', '' );
|
||||
$baidu_map_url = '';
|
||||
if ( $store_address ) {
|
||||
$baidu_map_url = 'https://api.map.baidu.com/geocoder?address='
|
||||
. rawurlencode( $store_address )
|
||||
. '&output=html&src=webapp';
|
||||
}
|
||||
if ( ! $map_nav_url ) {
|
||||
$map_nav_url = $baidu_map_url;
|
||||
}
|
||||
|
||||
/* translators: %s: store name. */
|
||||
$map_title = sprintf( __( '%s门店地图', 'fragrance-trade' ), $store_name );
|
||||
?>
|
||||
<main id="primary" class="site-main">
|
||||
<div class="page-content container">
|
||||
@@ -38,85 +52,116 @@ if ( ! $map_nav_url && $store_address ) {
|
||||
)
|
||||
);
|
||||
?>
|
||||
</div>
|
||||
|
||||
<section class="b2b-section contact-section">
|
||||
<div class="container">
|
||||
<div class="section-heading text-center mx-auto mb-5">
|
||||
<p class="section-eyebrow"><?php esc_html_e( '咨询与到店', 'fragrance-trade' ); ?></p>
|
||||
<h2><?php esc_html_e( '联系门店，确认您的需求', 'fragrance-trade' ); ?></h2>
|
||||
<p class="section-lead"><?php esc_html_e( '咨询时可说明车型、年份、想做的项目和期望时间，方便门店更快判断可选方案。', 'fragrance-trade' ); ?></p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="<?php echo $map_nav_url ? 'col-lg-5' : 'col-lg-8 mx-auto'; ?>">
|
||||
<div class="contact-info-card">
|
||||
<?php if ( $store_phone ) : ?>
|
||||
<div class="contact-info-item">
|
||||
<div class="contact-info-icon" aria-hidden="true">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
|
||||
</div>
|
||||
<div class="contact-info-body">
|
||||
<h3><?php esc_html_e( '联系电话', 'fragrance-trade' ); ?></h3>
|
||||
<a href="tel:<?php echo esc_attr( preg_replace( '/[^0-9+]/', '', $store_phone ) ); ?>"><?php echo esc_html( $store_phone ); ?></a>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( $whatsapp ) : ?>
|
||||
<div class="contact-info-item">
|
||||
<div class="contact-info-icon" aria-hidden="true">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
|
||||
</div>
|
||||
<div class="contact-info-body">
|
||||
<h3>WhatsApp</h3>
|
||||
<a href="<?php echo esc_url( fragrance_trade_get_inquiry_url() ); ?>" class="whatsapp-link" target="_blank" rel="noopener">
|
||||
<?php esc_html_e( '在线咨询', 'fragrance-trade' ); ?> ↗
|
||||
<div class="row g-0 align-items-stretch contact-hero-grid">
|
||||
<div class="col-lg-5">
|
||||
<div class="contact-hero-copy">
|
||||
<p class="section-eyebrow"><?php esc_html_e( '咨询与到店', 'fragrance-trade' ); ?></p>
|
||||
<h1><?php echo esc_html( $store_name ); ?></h1>
|
||||
<p class="contact-hero-lead"><?php esc_html_e( '到店前可先电话确认车型、施工项目和时间，我们会提前做好接待安排。', 'fragrance-trade' ); ?></p>
|
||||
<div class="contact-hero-actions">
|
||||
<?php if ( $has_phone ) : ?>
|
||||
<a class="btn btn-b2b-primary" href="tel:<?php echo esc_attr( $phone_href ); ?>">
|
||||
<?php esc_html_e( '拨打门店电话', 'fragrance-trade' ); ?>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( $store_hours ) : ?>
|
||||
<div class="contact-info-item">
|
||||
<div class="contact-info-icon" aria-hidden="true">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
</div>
|
||||
<div class="contact-info-body">
|
||||
<h3><?php esc_html_e( '营业时间', 'fragrance-trade' ); ?></h3>
|
||||
<p><?php echo esc_html( $store_hours ); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="contact-info-item">
|
||||
<div class="contact-info-icon" aria-hidden="true">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
|
||||
</div>
|
||||
<div class="contact-info-body">
|
||||
<h3><?php esc_html_e( '电子邮箱', 'fragrance-trade' ); ?></h3>
|
||||
<a href="mailto:<?php echo esc_attr( antispambot( $email ) ); ?>"><?php echo esc_html( antispambot( $email ) ); ?></a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if ( $map_nav_url ) : ?>
|
||||
<a class="btn btn-b2b-outline" href="<?php echo esc_url( $map_nav_url ); ?>" target="_blank" rel="noopener noreferrer">
|
||||
<?php esc_html_e( '查看门店位置', 'fragrance-trade' ); ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if ( $map_nav_url ) : ?>
|
||||
<div class="col-lg-7">
|
||||
<a href="<?php echo esc_url( $map_nav_url ); ?>" class="contact-map-card" target="_blank" rel="noopener noreferrer">
|
||||
<div class="contact-map-icon" aria-hidden="true">
|
||||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||
</div>
|
||||
<?php if ( $store_address ) : ?>
|
||||
<p class="contact-map-address"><?php echo esc_html( $store_address ); ?></p>
|
||||
<?php endif; ?>
|
||||
<span class="btn btn-b2b-primary mt-3">
|
||||
<?php esc_html_e( '在百度地图中导航', 'fragrance-trade' ); ?> ↗
|
||||
</span>
|
||||
</a>
|
||||
<figure class="contact-store-media">
|
||||
<img src="<?php echo esc_url( $store_image ); ?>" alt="<?php esc_attr_e( '门店临街门头', 'fragrance-trade' ); ?>" width="1600" height="1199" loading="eager" decoding="async">
|
||||
<figcaption><?php esc_html_e( '门店外景', 'fragrance-trade' ); ?></figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="b2b-section contact-details-section" aria-labelledby="contact-details-title">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<p class="section-eyebrow"><?php esc_html_e( '门店信息', 'fragrance-trade' ); ?></p>
|
||||
<h2 id="contact-details-title"><?php esc_html_e( '联系与到店信息', 'fragrance-trade' ); ?></h2>
|
||||
</div>
|
||||
<div class="contact-detail-grid<?php echo $store_hours ? ' has-hours' : ''; ?> mt-5">
|
||||
<article class="contact-detail-card">
|
||||
<p class="contact-detail-label"><?php esc_html_e( '门店名称', 'fragrance-trade' ); ?></p>
|
||||
<h3><?php echo esc_html( $store_name ); ?></h3>
|
||||
</article>
|
||||
<article class="contact-detail-card">
|
||||
<p class="contact-detail-label"><?php esc_html_e( '联系电话', 'fragrance-trade' ); ?></p>
|
||||
<?php if ( $store_phone ) : ?>
|
||||
<h3>
|
||||
<?php if ( $has_phone ) : ?>
|
||||
<a href="tel:<?php echo esc_attr( $phone_href ); ?>"><?php echo esc_html( $store_phone ); ?></a>
|
||||
<?php else : ?>
|
||||
<?php echo esc_html( $store_phone ); ?>
|
||||
<?php endif; ?>
|
||||
</h3>
|
||||
<?php else : ?>
|
||||
<p class="contact-detail-empty"><?php esc_html_e( '请在后台填写联系电话', 'fragrance-trade' ); ?></p>
|
||||
<?php endif; ?>
|
||||
</article>
|
||||
<article class="contact-detail-card">
|
||||
<p class="contact-detail-label"><?php esc_html_e( '门店地址', 'fragrance-trade' ); ?></p>
|
||||
<?php if ( $store_address ) : ?>
|
||||
<h3><?php echo esc_html( $store_address ); ?></h3>
|
||||
<?php else : ?>
|
||||
<p class="contact-detail-empty"><?php esc_html_e( '请在后台填写门店地址', 'fragrance-trade' ); ?></p>
|
||||
<?php endif; ?>
|
||||
</article>
|
||||
<?php if ( $store_hours ) : ?>
|
||||
<article class="contact-detail-card">
|
||||
<p class="contact-detail-label"><?php esc_html_e( '营业时间', 'fragrance-trade' ); ?></p>
|
||||
<h3><?php echo esc_html( $store_hours ); ?></h3>
|
||||
</article>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="b2b-section contact-map-section" aria-labelledby="contact-map-title">
|
||||
<div class="container">
|
||||
<div class="contact-map-heading">
|
||||
<div>
|
||||
<p class="section-eyebrow"><?php esc_html_e( '地图与导航', 'fragrance-trade' ); ?></p>
|
||||
<h2 id="contact-map-title"><?php esc_html_e( '找到门店', 'fragrance-trade' ); ?></h2>
|
||||
<?php if ( $store_address ) : ?>
|
||||
<p><?php echo esc_html( $store_address ); ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php if ( $map_nav_url ) : ?>
|
||||
<a class="btn btn-b2b-primary" href="<?php echo esc_url( $map_nav_url ); ?>" target="_blank" rel="noopener noreferrer">
|
||||
<?php esc_html_e( '打开地图导航', 'fragrance-trade' ); ?> ↗
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<div class="contact-map-panel">
|
||||
<?php if ( $baidu_map_url ) : ?>
|
||||
<iframe
|
||||
src="<?php echo esc_url( $baidu_map_url ); ?>"
|
||||
title="<?php echo esc_attr( $map_title ); ?>"
|
||||
loading="lazy"
|
||||
referrerpolicy="no-referrer-when-downgrade"
|
||||
></iframe>
|
||||
<?php else : ?>
|
||||
<div class="contact-map-placeholder">
|
||||
<span aria-hidden="true">＋</span>
|
||||
<p><?php esc_html_e( '填写门店地址后将在这里显示地图。', 'fragrance-trade' ); ?></p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<?php get_footer(); ?>
|
||||
|
||||
@@ -25,9 +25,6 @@ get_header();
|
||||
)
|
||||
);
|
||||
?>
|
||||
<header class="page-header pb-5">
|
||||
<h1><?php the_title(); ?></h1>
|
||||
</header>
|
||||
<div class="pb-5">
|
||||
<?php get_template_part( 'template-parts/home/faq' ); ?>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
<?php
|
||||
/**
|
||||
* Store credentials and brand activity.
|
||||
*
|
||||
* @package Fragrance_Trade
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
$credentials = array(
|
||||
array(
|
||||
'image' => 'store/kdx-logo.jpg',
|
||||
'title' => __( 'KDX 品牌服务', 'fragrance-trade' ),
|
||||
'description' => __( '门店展示的 KDX 品牌标识与产品服务体系。', 'fragrance-trade' ),
|
||||
'alt' => __( 'KDX 品牌标识', 'fragrance-trade' ),
|
||||
'width' => 1600,
|
||||
'height' => 1472,
|
||||
'contain' => true,
|
||||
),
|
||||
array(
|
||||
'image' => 'store/authorization.jpg',
|
||||
'title' => __( '授权服务资质', 'fragrance-trade' ),
|
||||
'description' => __( 'KDX 汽车膜授权服务店证书，具体有效期以证书原件为准。', 'fragrance-trade' ),
|
||||
'alt' => __( 'KDX 汽车膜授权服务店证书', 'fragrance-trade' ),
|
||||
'width' => 1600,
|
||||
'height' => 1199,
|
||||
'contain' => true,
|
||||
),
|
||||
array(
|
||||
'image' => 'store/award.jpg',
|
||||
'title' => __( '赛事荣誉', 'fragrance-trade' ),
|
||||
'description' => __( '2026 KDX 全国百强直播 PK 赛第一季“魄界王者”荣誉。', 'fragrance-trade' ),
|
||||
'alt' => __( 'KDX 全国百强直播 PK 赛魄界王者奖杯', 'fragrance-trade' ),
|
||||
'width' => 900,
|
||||
'height' => 1600,
|
||||
'contain' => false,
|
||||
),
|
||||
array(
|
||||
'image' => 'store/brand-event.jpg',
|
||||
'title' => __( '品牌交流活动', 'fragrance-trade' ),
|
||||
'description' => __( '参加 KDX 品牌活动，了解产品与施工服务信息。', 'fragrance-trade' ),
|
||||
'alt' => __( 'KDX 品牌活动现场', 'fragrance-trade' ),
|
||||
'width' => 1600,
|
||||
'height' => 1066,
|
||||
'contain' => false,
|
||||
),
|
||||
);
|
||||
?>
|
||||
<section class="b2b-section credentials-section" aria-labelledby="credentials-title">
|
||||
<div class="container">
|
||||
<div class="section-heading text-center mx-auto">
|
||||
<p class="section-eyebrow"><?php esc_html_e( '品牌与门店资料', 'fragrance-trade' ); ?></p>
|
||||
<h2 id="credentials-title"><?php esc_html_e( '资质与荣誉', 'fragrance-trade' ); ?></h2>
|
||||
<p class="section-lead"><?php esc_html_e( '通过门店授权、品牌活动与赛事记录，了解门店的实际经营与服务背景。', 'fragrance-trade' ); ?></p>
|
||||
</div>
|
||||
<div class="credentials-grid mt-5">
|
||||
<?php foreach ( $credentials as $credential ) : ?>
|
||||
<article class="credential-card">
|
||||
<a
|
||||
class="credential-media<?php echo $credential['contain'] ? ' is-contain' : ''; ?>"
|
||||
href="<?php echo esc_url( fragrance_trade_asset_uri( 'images/' . $credential['image'] ) ); ?>"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="<?php echo esc_attr( sprintf( __( '查看%s大图', 'fragrance-trade' ), $credential['title'] ) ); ?>"
|
||||
>
|
||||
<img
|
||||
src="<?php echo esc_url( fragrance_trade_asset_uri( 'images/' . $credential['image'] ) ); ?>"
|
||||
alt="<?php echo esc_attr( $credential['alt'] ); ?>"
|
||||
width="<?php echo esc_attr( $credential['width'] ); ?>"
|
||||
height="<?php echo esc_attr( $credential['height'] ); ?>"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
>
|
||||
</a>
|
||||
<div class="credential-body">
|
||||
<h3><?php echo esc_html( $credential['title'] ); ?></h3>
|
||||
<p><?php echo esc_html( $credential['description'] ); ?></p>
|
||||
</div>
|
||||
</article>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -4,13 +4,46 @@ if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
$factory_fallbacks = array( 'placeholder-factory-01.svg', 'placeholder-factory-02.svg', 'placeholder-factory-03.svg', 'placeholder-factory-04.svg' );
|
||||
$factory_fallbacks = array(
|
||||
'store/storefront.jpg',
|
||||
'store/showroom-main.jpg',
|
||||
'store/showroom-consultation.jpg',
|
||||
);
|
||||
$factory_alts = array(
|
||||
__( '门店临街门头', 'fragrance-trade' ),
|
||||
__( '门店接待与施工环境', 'fragrance-trade' ),
|
||||
__( '门店咨询与产品展示区', 'fragrance-trade' ),
|
||||
);
|
||||
$factory_extra_image = fragrance_trade_get_mod( 'b2b_factory_image_4', '' );
|
||||
?>
|
||||
<section id="factory" class="b2b-section factory-proof">
|
||||
<div class="container">
|
||||
<div class="row g-5 align-items-center">
|
||||
<div class="col-lg-5"><p class="section-eyebrow"><?php echo esc_html( fragrance_trade_get_mod( 'b2b_factory_eyebrow' ) ); ?></p><h2><?php echo esc_html( fragrance_trade_get_mod( 'b2b_factory_title' ) ); ?></h2><p class="section-lead"><?php echo esc_html( fragrance_trade_get_mod( 'b2b_factory_text' ) ); ?></p><ul class="factory-points list-unstyled mt-4"><?php for ( $index = 1; $index <= 4; $index++ ) : ?><li><span aria-hidden="true">✓</span><?php echo esc_html( fragrance_trade_get_mod( 'b2b_factory_point_' . $index ) ); ?></li><?php endfor; ?></ul></div>
|
||||
<div class="col-lg-7"><div class="factory-gallery"><?php for ( $index = 1; $index <= 4; $index++ ) : ?><figure><img src="<?php echo esc_url( fragrance_trade_image_uri( 'b2b_factory_image_' . $index, $factory_fallbacks[ $index - 1 ] ) ); ?>" alt="<?php echo esc_attr( sprintf( __( '门店实景 %d', 'fragrance-trade' ), $index ) ); ?>" loading="lazy"></figure><?php endfor; ?></div></div>
|
||||
<div class="col-lg-5">
|
||||
<p class="section-eyebrow"><?php echo esc_html( fragrance_trade_get_mod( 'b2b_factory_eyebrow' ) ); ?></p>
|
||||
<h2><?php echo esc_html( fragrance_trade_get_mod( 'b2b_factory_title' ) ); ?></h2>
|
||||
<p class="section-lead"><?php echo esc_html( fragrance_trade_get_mod( 'b2b_factory_text' ) ); ?></p>
|
||||
<ul class="factory-points list-unstyled mt-4">
|
||||
<?php for ( $index = 1; $index <= 4; $index++ ) : ?>
|
||||
<li><span aria-hidden="true">✓</span><?php echo esc_html( fragrance_trade_get_mod( 'b2b_factory_point_' . $index ) ); ?></li>
|
||||
<?php endfor; ?>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-7">
|
||||
<div class="factory-gallery">
|
||||
<?php foreach ( $factory_fallbacks as $offset => $fallback ) : ?>
|
||||
<?php $index = $offset + 1; ?>
|
||||
<figure>
|
||||
<img src="<?php echo esc_url( fragrance_trade_image_uri( 'b2b_factory_image_' . $index, $fallback ) ); ?>" alt="<?php echo esc_attr( $factory_alts[ $offset ] ); ?>" width="1600" height="1199" loading="lazy" decoding="async">
|
||||
</figure>
|
||||
<?php endforeach; ?>
|
||||
<?php if ( $factory_extra_image ) : ?>
|
||||
<figure class="factory-gallery-extra">
|
||||
<img src="<?php echo esc_url( $factory_extra_image ); ?>" alt="<?php esc_attr_e( '门店补充实景', 'fragrance-trade' ); ?>" loading="lazy" decoding="async">
|
||||
</figure>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -8,4 +8,4 @@ if ( ! fragrance_trade_show_section( 'b2b_show_faq' ) ) {
|
||||
return;
|
||||
}
|
||||
?>
|
||||
<section id="faqs" class="b2b-section faq-section"><div class="container"><div class="row g-5"><div class="col-lg-4"><p class="section-eyebrow"><?php esc_html_e( '常见问题', 'fragrance-trade' ); ?></p><h2><?php echo esc_html( fragrance_trade_get_mod( 'b2b_faq_title' ) ); ?></h2><p><?php esc_html_e( '以下内容用于帮助您提前了解选择和施工注意事项。具体项目、价格、工期与质保，请以门店最终确认为准。', 'fragrance-trade' ); ?></p></div><div class="col-lg-8"><div class="accordion" id="b2b-faq-accordion"><?php for ( $index = 1; $index <= 8; $index++ ) : $first = 1 === $index; ?><div class="accordion-item"><h3 class="accordion-header" id="b2b-faq-heading-<?php echo esc_attr( $index ); ?>"><button class="accordion-button<?php echo $first ? '' : ' collapsed'; ?>" type="button" data-bs-toggle="collapse" data-bs-target="#b2b-faq-panel-<?php echo esc_attr( $index ); ?>" aria-expanded="<?php echo $first ? 'true' : 'false'; ?>" aria-controls="b2b-faq-panel-<?php echo esc_attr( $index ); ?>"><?php echo esc_html( fragrance_trade_get_mod( 'b2b_faq_' . $index . '_question' ) ); ?></button></h3><div id="b2b-faq-panel-<?php echo esc_attr( $index ); ?>" class="accordion-collapse collapse<?php echo $first ? ' show' : ''; ?>" aria-labelledby="b2b-faq-heading-<?php echo esc_attr( $index ); ?>" data-bs-parent="#b2b-faq-accordion"><div class="accordion-body"><?php echo esc_html( fragrance_trade_get_mod( 'b2b_faq_' . $index . '_answer' ) ); ?></div></div></div><?php endfor; ?></div></div></div></div></section>
|
||||
<section id="faqs" class="b2b-section faq-section"><div class="container"><div class="row g-5"><div class="col-lg-4"><h1><?php echo esc_html( fragrance_trade_get_mod( 'b2b_faq_title' ) ); ?></h1><p><?php esc_html_e( '以下内容用于帮助您提前了解选择和施工注意事项。具体项目、价格、工期与质保，请以门店最终确认为准。', 'fragrance-trade' ); ?></p></div><div class="col-lg-8"><div class="accordion" id="b2b-faq-accordion"><?php for ( $index = 1; $index <= 8; $index++ ) : $first = 1 === $index; ?><div class="accordion-item"><h3 class="accordion-header" id="b2b-faq-heading-<?php echo esc_attr( $index ); ?>"><button class="accordion-button<?php echo $first ? '' : ' collapsed'; ?>" type="button" data-bs-toggle="collapse" data-bs-target="#b2b-faq-panel-<?php echo esc_attr( $index ); ?>" aria-expanded="<?php echo $first ? 'true' : 'false'; ?>" aria-controls="b2b-faq-panel-<?php echo esc_attr( $index ); ?>"><?php echo esc_html( fragrance_trade_get_mod( 'b2b_faq_' . $index . '_question' ) ); ?></button></h3><div id="b2b-faq-panel-<?php echo esc_attr( $index ); ?>" class="accordion-collapse collapse<?php echo $first ? ' show' : ''; ?>" aria-labelledby="b2b-faq-heading-<?php echo esc_attr( $index ); ?>" data-bs-parent="#b2b-faq-accordion"><div class="accordion-body"><?php echo esc_html( fragrance_trade_get_mod( 'b2b_faq_' . $index . '_answer' ) ); ?></div></div></div><?php endfor; ?></div></div></div></div></section>
|
||||
|
||||
Reference in New Issue
Block a user