feat: refine responsive automotive storefront
This commit is contained in:
李宝儿的Macbook
@@ -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