实时体育数据 数据来源：西瓜体育
⚽ 足球实时 (10)
| 主队 | 比分 | 客队 | 联赛 | 时间(北京) |
|---|---|---|---|---|
| 特律格/拉德 | 0:0 | 洛伦斯科格 | 挪威乙级联赛第2组 | 20:30 |
| 内杰梅 | 1:0 | 马巴拉 | 黎巴嫩超级联赛 | 20:30 |
| 斯卢茨克 | 0:0 | 鲍里索夫BATE-2队 | 白俄罗斯甲级联赛 | 20:00 |
| 梅查尔 | 0:0 | 埃塞俄比亚梅丁 | 埃塞俄比亚超级联赛 | 20:00 |
| 科克舍套奥克热特佩斯 | 0:1 | 托博尔 | 哈萨克斯坦超级联赛 | 20:00 |
| 布拉特沃格 | 1:0 | 耶夫 | 挪威乙级联赛第1组 | 20:00 |
| 塔尔图坦美卡 | 0:0 | 纳尔瓦特兰斯 | 爱沙尼亚足球甲级联赛 | 19:30 |
| 新特罗伊茨克诺斯塔 | 0:1 | 巴尔瑙尔迪纳摩 | 俄罗斯FNL 2联赛第4组 | 19:00 |
| 特尔希艾迪尤加斯 | 0:2 | 苏杜瓦 | 立陶宛A联赛 | 19:15 |
| 苏州东吴 | 2:4 | 云南玉昆 | 英格兰足总杯 | 19:00 |
更新于 2026-06-21 20:38（北京时间）
立即购买 小部件
集锦、数据统计及社区讨论等丰富内容，助您全方位掌握赛场动态。
西瓜体育组件
实时比分组件需集成专业数据源。请确保您的页面已正确引入相关API接口，以提供最精准的赛况更新。
分類
<!-- Widget: Categories -->
<div class="widget widget-categories">
<h3 class="widget-title">Shop categories</h3>
<div id="shop-categories" class="accordion">
<!-- Category with search bar and scrollbar (more items) -->
<div class="accordion-item">
<h3 class="accordion-header">
<a href="#clothing" class="accordion-button" role="button" data-bs-toggle="collapse" aria-expanded="true" aria-controls="clothing">
Clothing
</a>
</h3>
<div id="clothing" class="accordion-collapse collapse show" data-bs-parent="#shop-categories">
<div class="accordion-body">
<div class="widget widget-links widget-filter">
<!-- Search -->
<div class="input-group input-group-sm mb-2">
<input type="text" class="widget-filter-search form-control rounded-end" placeholder="Search">
<i class="ci-search position-absolute top-50 end-0 translate-middle-y fs-sm me-3"></i>
</div>
<!-- Sub-categories -->
<ul class="widget-list widget-filter-list pt-1" style="height: 12rem;" data-simplebar data-simplebar-auto-hide="false">
<li class="widget-list-item widget-filter-item">
<a href="#" class="widget-list-link d-flex justify-content-between align-items-center">
<span class="widget-filter-item-text">View all</span>
<span class="fs-xs text-muted ms-3">2,548</span>
</a>
</li>
<li class="widget-list-item widget-filter-item">
<a href="#" class="widget-list-link d-flex justify-content-between align-items-center">
<span class="widget-filter-item-text">Blazers & Suits</span>
<span class="fs-xs text-muted ms-3">235</span>
</a>
</li>
<li class="widget-list-item widget-filter-item">
<a href="#" class="widget-list-link d-flex justify-content-between align-items-center">
<span class="widget-filter-item-text">Blouses</span>
<span class="fs-xs text-muted ms-3">410</span>
</a>
</li>
...
</ul>
</div>
</div>
</div>
</div>
<!-- Category without search bar and scrollbar (less items) -->
<div class="accordion-item">
<h3 class="accordion-header">
<a href="#sunglasses" class="accordion-button collapsed" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sunglasses">
Sunglasses
</a>
</h3>
<div id="sunglasses" class="accordion-collapse collapse" data-bs-parent="#shop-categories">
<div class="accordion-body">
<!-- Sub-categories -->
<div class="widget widget-links">
<ul class="widget-list">
<li class="widget-list-item">
<a href="#" class="widget-list-link d-flex justify-content-between align-items-center">
<span>View all</span>
<span class="fs-xs text-muted ms-3">1,842</span>
</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link d-flex justify-content-between align-items-center">
<span>Fashion Sunglasses</span>
<span class="fs-xs text-muted ms-3">953</span>
</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link d-flex justify-content-between align-items-center">
<span>Sport Sunglasses</span>
<span class="fs-xs text-muted ms-3">589</span>
</a>
</li>
...
</ul>
</div>
</div>
</div>
</div>
<!-- Add as many categories and sub-categories as you need -->
</div>
</div>// Widget: Categories
.widget.widget-categories
h3.widget-title Shop categories
#shop-categories.accordion
// Category with search bar and scrollbar (more items)
.accordion
h3.accordion-header
a(href="#clothing", role="button", data-bs-toggle="collapse", aria-expanded="true", aria-controls="clothing").accordion-button
| Clothing
#clothing.accordion-collapse.collapse.show(data-bs-parent="#shop-categories")
.accordion-body
.widget.widget-links.widget-filter
// Search
.input-group.input-group-sm.mb-2
input(type="text", placeholder="Search").widget-filter-search.form-control.rounded-end
i.ci-search.position-absolute.top-50.end-0.translate-middle-y.fs-sm.me-3
// Sub-categories
ul(style="height: 12rem;", data-simplebar, data-simplebar-auto-hide="false").widget-list.widget-filter-list.pt-1
li.widget-list-item.widget-filter-item
a(href="#").widget-list-link.d-flex.justify-content-between.align-items-center
span.widget-filter-item-text View all
span.fs-xs.text-muted.ms-3 2,548
li.widget-list-item.widget-filter-item
a(href="#").widget-list-link.d-flex.justify-content-between.align-items-center
span.widget-filter-item-text Blazers & Suits
span.fs-xs.text-muted.ms-3 235
li.widget-list-item.widget-filter-item
a(href="#").widget-list-link.d-flex.justify-content-between.align-items-center
span.widget-filter-item-text Blouses
span.fs-xs.text-muted.ms-3 410
...
// Category without search bar and scrollbar (less items)
.accordion
h3.accordion-header
a(href="#sunglasses" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sunglasses").accordion-button.collapsed
| Sunglasses
#sunglasses.accordion-collapse.collapse(data-bs-parent="#shop-categories")
.accordion-body
// Sub-categories
.widget.widget-links
ul.widget-list
li.widget-list-item
a(href="#").widget-list-link.d-flex.justify-content-between.align-items-center
span View all
span.fs-xs.text-muted.ms-3 1,842
li.widget-list-item
a(href="#").widget-list-link.d-flex.justify-content-between.align-items-center
span Fashion Sunglasses
span.fs-xs.text-muted.ms-3 953
li.widget-list-item
a(href="#").widget-list-link.d-flex.justify-content-between.align-items-center
span Sport Sunglasses
span.fs-xs.text-muted.ms-3 589
li.widget-list-item
a(href="#").widget-list-link.d-flex.justify-content-between.align-items-center
span Classic Sunglasses
span.fs-xs.text-muted.ms-3 300
// Add as many categories and sub-categories as you need
價格範圍
<!-- Widget: Range slider
Data API:
data-start-min - position of the slider's left handle
data-start-max - position of the slider's right handle
data-min - range minimum
data-max - range maximum
data-step - range step
-->
<div class="widget">
<h3 class="widget-title">Price range</h3>
<div class="range-slider" data-start-min="250" data-start-max="680" data-min="0" data-max="1000" data-step="1">
<div class="range-slider-ui"></div>
<div class="d-flex">
<div class="w-50 pe-2 me-2">
<div class="input-group input-group-sm">
<span class="input-group-text">$</span>
<input class="form-control range-slider-value-min" type="text">
</div>
</div>
<div class="w-50 ps-2">
<div class="input-group input-group-sm">
<span class="input-group-text">$</span>
<input class="form-control range-slider-value-max" type="text">
</div>
</div>
</div>
</div>
</div>// Widget: Range slider
// Data API:
// data-start-min - position of the slider's left handle
// data-start-max - position of the slider's right handle
// data-min - range minimum
// data-max - range maximum
// data-step - range step
.widget
h3.widget-title Price range
.range-slider(data-start-min="250", data-start-max="680", data-min="0", data-max="1000", data-step="1")
.range-slider-ui
.d-flex
.w-50.pe-2.me-2
.input-group.input-group-sm
span.input-group-text $
input(type="text").form-control.range-slider-value-min
.w-50.ps-2
.input-group.input-group-sm
span.input-group-text $
input(type="text").form-control.range-slider-value-max
連結
<!-- Widget: Links -->
<div class="widget widget-links">
<h3 class="widget-title">Useful links</h3>
<ul class="widget-list">
<li class="widget-list-item">
<a href="#" class="widget-list-link">Your account</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Shipping rates & policies</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Refunds & replacements</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Taxes</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Delivery info</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Affiliate program</a>
</li>
</ul>
</div>// Widget: Links
.widget.widget-links
h3.widget-title Useful links
ul.widget-list
li.widget-list-item
a.widget-list-link(href="#") Your account
li.widget-list-item
a.widget-list-link(href="#") Shipping rates & policies
li.widget-list-item
a.widget-list-link(href="#") Refunds & replacements
li.widget-list-item
a.widget-list-link(href="#") Taxes
li.widget-list-item
a.widget-list-link(href="#") Delivery info
li.widget-list-item
a.widget-list-link(href="#") Affiliate program
精選產品列表
<!-- Widget: Featured products list -->
<div class="widget">
<h3 class="widget-title">Featured products</h3>
<!-- Item -->
<div class="d-flex align-items-center pb-2 border-bottom">
<a class="flex-shrink-0" href="#">
<img src="path-to-image" width="64" alt="Product"/>
</a>
<div class="ps-2">
<h6 class="widget-product-title"><a href="#">Women Colorblock Sneakers</a></h6>
<div class="widget-product-meta">
<span class="text-accent me-2">$150.<small>00</small></span>
</div>
</div>
</div>
<!-- Item -->
<div class="d-flex align-items-center py-2 border-bottom">
<a class="flex-shrink-0" href="#">
<img src="path-to-image" width="64" alt="Product"/>
</a>
<div class="ps-2">
<6 class="widget-product-title"><a href="#">TH Jeans City Backpack</a></h6>
<div class="widget-product-meta">
<span class="text-accent me-2">$79.<small>00</small></span>
</div>
</div>
</div>
<!-- Item -->
<div class="d-flex align-items-center py-2 border-bottom">
<a class="flex-shrink-0" href="#">
<img src="path-to-image" width="64" alt="Product"/>
</a>
<div class="ps-2y">
<h6 class="widget-product-title"><a href="#">3-Color Sun Stash Hat</a></h6>
<div class="widget-product-meta">
<span class="text-accent me-2">$22.<small>00</small></span>
</div>
</div>
</div>
<!-- Item -->
<div class="d-flex align-items-center py-2">
<a class="flex-shrink-0" href="#">
<img src="path-to-image" width="64" alt="Product"/>
</a>
<div class="ps-2">
<h6 class="widget-product-title"><a href="#">Cotton Polo Regular Fit</a></h6>
<div class="widget-product-meta">
<span class="text-accent me-2">$9.<small>00</small></span>
</div>
</div>
</div>
</div>// Widget: Featured products list
.widget
h3.widget-title Featured products
// Item
.d-flex.align-items-center.pb-2.border-bottom
a(href="#").flex-shrink-0
img(src="path-to-image", width="64", alt="Product")
.ps-2
h6.widget-product-title
a(href="#") Women Colorblock Sneakers
.widget-product-meta
span.text-accent.me-2
| $150.
small 00
// Item
.d-flex.align-items-center.py-2.border-bottom
a(href="#").flex-shrink-0
img(src="path-to-image", width="64", alt="Product")
.ps-2
h6.widget-product-title
a(href="#") TH Jeans City Backpack
.widget-product-meta
span.text-accent.me-2
| $79.
small 50
// Item
.d-flex.align-items-center.py-2.border-bottom
a(href="#").flex-shrink-0
img(src="path-to-image", width="64", alt="Product")
.ps-2
h6.widget-product-title
a(href="#") 3-Color Sun Stash Hat
.widget-product-meta
span.text-accent.me-2
| $22.
small 50
// Item
.d-flex.align-items-center.py-2
a(href="#").flex-shrink-0
img(src="path-to-image", width="64", alt="Product")
.ps-2
h6.widget-product-title
a(href="#") Cotton Polo Regular Fit
.widget-product-meta
span.text-accent.me-2
| $9.
small 00
精選產品輪播
<!-- Widget: Featured products carousel -->
<div class="widget">
<h3 class="widget-title">Featured products</h3>
<div class="tns-carousel tns-nav-start">
<div class="tns-carousel-inner" data-carousel-options='{"controls": false}'>
<!-- Item -->
<div>
<div class="d-flex align-items-center">
<a class="flex-shrink-0" href="#">
<img src="path-to-image" width="64" alt="Product"/>
</a>
<div class="ps-2">
<h6 class="widget-product-title"><a href="#">Women Colorblock Sneakers</a></h6>
<div class="widget-product-meta">
<span class="text-accent me-2">$150.<small>00</small></span>
</div>
</div>
</div>
</div>
<!-- Item -->
<div>
<div class="d-flex align-items-center">
<a class="flex-shrink-0" href="#">
<img src="path-to-image" width="64" alt="Product"/>
</a>
<div class="ps-2">
<6 class="widget-product-title"><a href="#">TH Jeans City Backpack</a></h6>
<div class="widget-product-meta">
<span class="text-accent me-2">$79.<small>00</small></span>
</div>
</div>
</div>
</div>
<!-- Item -->
<div>
<div class="d-flex align-items-center">
<a class="flex-shrink-0" href="#">
<img src="path-to-image" width="64" alt="Product"/>
</a>
<div class="ps-2">
<h6 class="widget-product-title"><a href="#">3-Color Sun Stash Hat</a></h6>
<div class="widget-product-meta">
<span class="text-accent me-2">$22.<small>00</small></span>
</div>
</div>
</div>
</div>
<!-- Item -->
<div>
<div class="d-flex align-items-center">
<a class="flex-shrink-0" href="#">
<img src="path-to-image" width="64" alt="Product"/>
</a>
<div class="ps-2">
<h6 class="widget-product-title"><a href="#">Cotton Polo Regular Fit</a></h6>
<div class="widget-product-meta">
<span class="text-accent me-2">$9.<small>00</small></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>// Widget: Featured products carousel
.widget
h3.widget-title Featured products
.tns-carousel.tns-nav-start
.tns-carousel-inner(data-carousel-options='{"controls": false}')
// Item
div
.d-flex.align-items-center
a(href="#").flex-shrink-0
img(src="path-to-image", width="64", alt="Product")
.ps-2
h6.widget-product-title
a(href="#") Women Colorblock Sneakers
.widget-product-meta
span.text-accent.me-2
| $150.
small 00
// Item
div
.d-flex.align-items-center
a(href="#").flex-shrink-0
img(src="path-to-image", width="64", alt="Product")
.ps-2
h6.widget-product-title
a(href="#") TH Jeans City Backpack
.widget-product-meta
span.text-accent.me-2
| $79.
small 50
// Item
div
.d-flex.align-items-center
a(href="#").flex-shrink-0
img(src="path-to-image", width="64", alt="Product")
.ps-2
h6.widget-product-title
a(href="#") 3-Color Sun Stash Hat
.widget-product-meta
span.text-accent.me-2
| $22.
small 50
// Item
div
.d-flex.align-items-center
a(href="#").flex-shrink-0
img(src="path-to-image", width="64", alt="Product")
.ps-2
h6.widget-product-title
a(href="#") Cotton Polo Regular Fit
.widget-product-meta
span.text-accent.me-2
| $9.
small 00
購物車
<!-- Widget: Shopping cart -->
<div class="widget widget-cart">
<h3 class="widget-title">Your cart</h3>
<!-- Scrollable area -->
<div style="max-height: 15rem;" data-simplebar data-simplebar-auto-hide="false">
<!-- Item -->
<div class="widget-cart-item pb-2 border-bottom">
<button class="btn-close text-danger" type="button" aria-label="Remove">
<span aria-hidden="true">×</span>
</button>
<div class="d-flex align-items-center">
<a class="flex-shrink-0" href="#">
<img src="path-to-image" width="64" alt="Product"/>
</a>
<div class="ps-2">
<h6 class="widget-product-title"><a href="#">Women Colorblock Sneakers</a></h6>
<div class="widget-product-meta">
<span class="text-accent me-2">$150.<small>00</small></span>
<span class="text-muted">x 1</span>
</div>
</div>
</div>
</div>
<!-- Item -->
<div class="widget-cart-item py-2 border-bottom">
<button class="btn-close text-danger" type="button" aria-label="Remove">
<span aria-hidden="true">×</span>
</button>
<div class="d-flex align-items-center">
<a class="flex-shrink-0" href="#">
<img src="path-to-image" width="64" alt="Product"/>
</a>
<div class="ps-2">
<6 class="widget-product-title"><a href="#">TH Jeans City Backpack</a></h6>
<div class="widget-product-meta">
<span class="text-accent me-2">$79.<small>00</small></span>
<span class="text-muted">x 1</span>
</div>
</div>
</div>
</div>
<!-- Item -->
<div class="widget-cart-item py-2 border-bottom">
<button class="btn-close text-danger" type="button" aria-label="Remove">
<span aria-hidden="true">×</span>
</button>
<div class="d-flex align-items-center">
<a class="flex-shrink-0" href="#">
<img src="path-to-image" width="64" alt="Product"/>
</a>
<div class="ps-2">
<h6 class="widget-product-title"><a href="#">3-Color Sun Stash Hat</a></h6>
<div class="widget-product-meta">
<span class="text-accent me-2">$22.<small>00</small></span>
<span class="text-muted">x 1</span>
</div>
</div>
</div>
</div>
<!-- Item -->
<div class="widget-cart-item py-2 border-bottom">
<button class="btn-close text-danger" type="button" aria-label="Remove">
<span aria-hidden="true">×</span>
</button>
<div class="d-flex align-items-center">
<a class="flex-shrink-0" href="#">
<img src="path-to-image" width="64" alt="Product"/>
</a>
<div class="ps-2">
<h6 class="widget-product-title"><a href="#">Cotton Polo Regular Fit</a></h6>
<div class="widget-product-meta">
<span class="text-accent me-2">$9.<small>00</small></span>
<span class="text-muted">x 1</span>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="d-flex flex-wrap justify-content-between align-items-center py-3">
<div class="fs-sm me-2 py-2">
<span class="text-muted">Subtotal:</span>
<span class="text-accent fs-base ms-1">$265.<small>00</small></span>
</div>
<a class="btn btn-outline-secondary btn-sm" href="#">
Expand cart
<i class="ci-arrow-right ms-1 me-n1"></i>
</a>
</div>
<a class="btn btn-primary btn-sm d-block w-100" href="#">
<i class="ci-card me-2 fs-base align-middle"></i>
Checkout
</a>
</div>// Widget: Shopping cart
.widget.widget-cart
h3.widget-title Your cart
// Scrollable area
div(style="max-height: 15rem;", data-simplebar, data-simplebar-auto-hide="false")
// Item
.widget-cart-item.pb-2.border-bottom
button(type="button", class="btn-close text-danger", aria-label="Remove")
span(aria-hidden="true") ×
.d-flex.align-items-center
a(href="#").flex-shrink-0
img(src="path-to-image", width="64", alt="Product")
.ps-2
h6.widget-product-title
a(href="#") Women Colorblock Sneakers
.widget-product-meta
span.text-accent.me-2
| $150.
small 00
span.text-muted x 1
// Item
.widget-cart-item.py-2.border-bottom
button(type="button", class="btn-close text-danger", aria-label="Remove")
span(aria-hidden="true") ×
.d-flex.align-items-center
a(href="#").flex-shrink-0
img(src="path-to-image", width="64", alt="Product")
.ps-2
h6.widget-product-title
a(href="#") TH Jeans City Backpack
.widget-product-meta
span.text-accent.me-2
| $79.
small 50
span.text-muted x 1
// Item
.widget-cart-item.py-2.border-bottom
button(type="button", class="btn-close text-danger", aria-label="Remove")
span(aria-hidden="true") ×
.d-flex.align-items-center
a(href="#").flex-shrink-0
img(src="path-to-image", width="64", alt="Product")
.ps-2
h6.widget-product-title
a(href="#") 3-Color Sun Stash Hat
.widget-product-meta
span.text-accent.me-2
| $22.
small 50
span.text-muted x 1
// Item
.widget-cart-item.py-2.border-bottom
button(type="button", class="btn-close text-danger", aria-label="Remove")
span(aria-hidden="true") ×
.d-flex.align-items-center
a(href="#").flex-shrink-0
img(src="path-to-image", width="64", alt="Product")
.ps-2
h6.widget-product-title
a(href="#") Cotton Polo Regular Fit
.widget-product-meta
span.text-accent.me-2
| $9.
small 00
span.text-muted x 1
// Footer
.d-flex.flex-wrap.justify-content-between.align-items-center.py-3
.fs-sm.me-2.py-2
span.text-muted Subtotal:
span.text-accent.fs-base.ms-1
| $265.
small 00
a(href="#").btn.btn-outline-secondary.btn-sm
| Expand cart
i.ci-arrow-right.ms-1.me-n1
a(href="#").btn.btn-primary.btn-sm.d-block.w-100
i.ci-card.me-2.fs-base.align-middle
| Checkout
篩選 (核取方塊)
<!-- Widget: Filter (checkboxes) -->
<div class="widget widget-filter">
<h3 class="widget-title">Filter by brand</h3>
<div class="input-group input-group-sm mb-2">
<input type="text" class="widget-filter-search form-control rounded-end pe-5" placeholder="Search">
<i class="ci-search position-absolute top-50 end-0 translate-middle-y fs-sm me-3"></i>
</div>
<ul class="widget-list widget-filter-list list-unstyled pt-1" style="max-height: 13rem;" data-simplebar data-simplebar-auto-hide="false">
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input type="checkbox" id="adidas" class="form-check-input">
<label class="form-check-label widget-filter-item-text" for="adidas">Adidas</label>
</div>
<span class="fs-xs text-muted">425</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input type="checkbox" id="ataylor" class="form-check-input">
<label class="form-check-label widget-filter-item-text" for="ataylor">Ann Taylor</label>
</div>
<span class="fs-xs text-muted">15</span>
</li>
<!-- Add as many items as you need -->
</ul>
</div>// Widget: Filter (checkboxes)
.widget.widget-filter
h3.widget-title Filter by brand
.input-group.input-group-sm.mb-2
input(type="text", placeholder="Search").widget-filter-search.form-control.rounded-end.pe-5
i.ci-search.position-absolute.top-50.end-0.translate-middle-y.fs-sm.me-3
ul(style="max-height: 13rem;", data-simplebar, data-simplebar-auto-hide="false").widget-list.widget-filter-list.list-unstyled.pt-1
li.widget-filter-item.d-flex.justify-content-between.align-items-center.mb-1
.form-check
input(type="checkbox", id="adidas").form-check-input
label.form-check-label.widget-filter-item-text(for="adidas") Adidas
span.fs-xs.text-muted 425
li.widget-filter-item.d-flex.justify-content-between.align-items-center.mb-1
.form-check
input(type="checkbox", id="ataylor").form-check-input
label.form-check-label.widget-filter-item-text(for="ataylor") Ann Taylor
span.fs-xs.text-muted 15
//- Add as many items as you need
訂閱 (MailChimp Ajax)
<!-- Widget: Subscription (MailChimp Ajax)
Instructions how to get MailChimp action link:
1. Log in to your MailChimp Dashboard / Audience / Manage Audience / Signup forms / Embedded forms
2. In the provided code find form action link and copy it
3. Paste it to the form action attribute below
4. Also in the form code provided by MailChimp find antispam input and copy it name attribute contents
5. Paste what you have copied from name attribute to the name attribute of input with class "subscription-form-antispam"
-->
<div class="widget">
<h3 class="widget-title">Subscribe</h3>
<form class="subscription-form validate" action="mailchimp-embedded-form-atcion-link" method="post" name="mc-embedded-subscribe-form" target="_blank" novalidate>
<div class="input-group flex-nowrap">
<i class="ci-mail position-absolute top-50 translate-middle-y text-muted fs-base ms-3"></i>
<input class="form-control rounded-start" type="email" name="EMAIL" placeholder="Your email" required>
<button class="btn btn-primary" type="submit" name="subscribe">Subscribe*</button>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" class="subscription-form-antispam" name="mailchimp-embedded-form-antispam-name-attribute" tabindex="-1">
</div>
<div class="form-text">*Subscribe to our newsletter to receive early discount offers, updates and new products info.</div>
<div class="subscription-status"></div>
</form>
</div>// Widget: Subscription (MailChimp Ajax)
// Instructions how to get MailChimp action link:
// 1. Log in to your MailChimp Dashboard / Audience / Manage Audience / Signup forms / Embedded forms
// 2. In the provided code find form action link and copy it
// 3. Paste it to the form action attribute below
// 4. Also in the form code provided by MailChimp find antispam input and copy it name attribute contents
// 5. Paste what you have copied from name attribute to the name attribute of input with class "subscription-form-antispam"
form(action="mailchimp-embedded-form-atcion-link", method="post", name="mc-embedded-subscribe-form", target="_blank", novalidate).subscription-form.validate
.input-group.flex-nowrap
i.ci-mail.position-absolute.top-50.translate-middle-y.text-muted.fs-base.ms-3
input(type="email", name="EMAIL", placeholder="Your email", required).form-control.rounded-start
button(type="submit", name="subscribe").btn.btn-primary Subscribe*
// real people should not fill this in and expect good things - do not remove this or risk form bot signups
div(style="position: absolute; left: -5000px;" aria-hidden="true")
input(type="text", name="mailchimp-embedded-form-antispam-name-attribute", tabindex="-1").subscription-form-antispam
.form-text *Subscribe to our newsletter to receive early discount offers, updates and new products info.
.subscription-status
聯絡詳情
<!-- Widget: Contact details -->
<div class="widget">
<ul class="widget-list">
<li class="d-flex pb-3 border-bottom">
<i class="ci-location fs-lg mt-2 text-primary"></i>
<div class="ps-3">
<span class="fs-ms text-muted">Find us</span>
<a class="d-block text-heading fs-sm" href="#">769, Industrial Dr, West Chicago, IL 60185, USA</a>
</div>
</li>
<li class="d-flex pt-2 pb-3 border-bottom">
<i class="ci-phone fs-lg mt-2 text-primary"></i>
<div class="ps-3">
<span class="fs-ms text-muted">Call us</span>
<a class="d-block text-heading fs-sm" href="tel:+184725276533">+1 (847) 252 765 33</a>
</div>
</li>
<li class="d-flex pt-2">
<i class="ci-mail fs-lg mt-2 text-primary"></i>
<div class="ps-3">
<span class="fs-ms text-muted">Write us</span>
<a class="d-block text-heading fs-sm" href="mailto:service@xiguazhibo.com.cn">service@xiguazhibo.com.cn</a>
</div>
</li>
</ul>
</div>// Widget: Contact details
.widget
ul.widget-list
li.d-flex.pb-3.border-bottom
i.ci-location.fs-lg.mt-2.text-primary
.ps-3
span.fs-ms.text-muted Find us
a.d-block.text-heading.fs-sm(href="#") 769, Industrial Dr, West Chicago, IL 60185, USA
li.d-flex.pt-2.pb-3.border-bottom
i.ci-phone.fs-lg.mt-2.text-primary
.ps-3
span.fs-ms.text-muted Call us
a.d-block.text-heading.fs-sm(href="tel:+184725276533") +1 (847) 252 765 33
li.d-flex.pt-2
i.ci-mail.fs-lg.mt-2.text-primary
.ps-3
span.fs-ms.text-muted Write us
a.d-block.text-heading.fs-sm(href="mailto:service@xiguazhibo.com.cn") service@xiguazhibo.com.cn