@bee-hole/server
Version:
www.bee-hole.com
269 lines (249 loc) • 6.63 kB
HTML
<div class="ProductPage">
<div class="topContent">
<div>
<img width="100%"
src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/14ocq651000d2mb9olvfq27muatb5fod.jpg" />
</div>
</div>
<div class="container-marginTop">
<div class="row item-list-phone-row ">
<div class="col-lg-4 col-md-4 item-list-col">
<img width="100%"
src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/14ocq651000d2mb9ognmta7mu23er24m.jpg" />
</div>
<div class="col-lg-4 col-md-4 item-list-col">
<img width="100%"
src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/14ocq651000d2mb9ofr4e05mu02k7hbd.jpg" />
</div>
<div class="col-lg-4 col-md-4 item-list-col">
<img width="100%"
src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/14ocq651000d2mb9ofp0099mtzaxdd0i.jpg" />
</div>
</div>
</div>
<div class="container-marginTop">
<div>
<img width="100%" src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/14ocq651000d2mb9ojgz56ymu7kw5jtv.jpg" />
</div>
</div>
<div class="container-marginTop">
<div class="row item-list item-list-row2-jj">
<div class="col-lg-6 col-md-12 item-list-img">
<img width="100%"
src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/14ocq651000d2mb9o7v8iglmtjuh1qxm.jpg" />
</div>
<div class="col-lg-6 col-md-12 item-list-img">
<img width="100%"
src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/14ocq651000d2mb9odko9o4mtrxio8gc.jpg" />
</div>
</div>
<div class="row item-list">
<div class="col-lg-6 col-md-12 item-list-img">
<img width="100%"
src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/14ocq651000d2mb9odu4rksmttmo0a0p.jpg" />
</div>
<div class="col-lg-6 col-md-12 item-list-img">
<img width="100%"
src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/14ocq651000d2mb9oax7wo1mtnfdke7b.jpg" />
</div>
</div>
</div>
<div class="container-marginTop">
<div class="row item-list-phone-row ">
<div class="col-lg-3 col-md-12 item-list-col-2">
<img width="100%"
src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/14ocq651000d2mb9o7cm2fwmthcfrc65.jpg" />
</div>
<div class="col-lg-3 col-md-12 item-list-col-2">
<img width="100%"
src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/14ocq651000d2mb9obgbi9zmtpk0zf5b.jpg" />
</div>
<div class="col-lg-3 col-md-12 item-list-col-2">
<img width="100%"
src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/14ocq651000d2mb9o6nqj57mtfi2b5g8.jpg" />
</div>
<div class="col-lg-3 col-md-12 item-list-col-2">
<img width="100%"
src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/14ocq651000d2mb9o7cm2fwmthcfrc65.jpg" />
</div>
</div>
</div>
</div>
<style>
.ProductPage {
--c-text: #000;
--list-gap:0 30px;
--list-gap-mobile: 18px 0px;
--list-row-gap:0 30px;
--list-row-gap-mobile: 10px;
--list-row-jj: 30px;
--list-row-jj-mobile: 18px;
--container-marginTop: 6rem;
--container-marginTop-mobile: 4rem;
}
@media (min-width: 1024px) {
.onePag-title {
font-size: 28pt;
color: #fff;
text-align: center;
line-height: 1;
margin-top: 1.5rem;
}
.onePag-content {
font-size: 20pt;
line-height: 1;
margin-top: 1.5rem;
}
.item-list-item .title {
font-size: 24pt;
font-weight: 500;
color: #000;
}
.item-list-item .desc {
font-size: 14pt;
font-weight: 500;
color: #000;
margin-top: 1.5rem;
}
.bujianxi {
margin-bottom: 40px;
}
}
/* Desktop-only class */
@media (max-width: 1023px) {
.onePag-title {
font-size: 18pt;
color: #fff;
text-align: center;
line-height: 1;
margin-top: 1.5rem;
}
.onePag-content {
font-size: 14pt;
line-height: 1;
margin-top: 1.5rem;
}
.item-list-item .title {
font-size: 16pt;
font-weight: 500;
color: #000;
}
.item-list-item .desc {
font-size: 12pt;
font-weight: 500;
color: #000;
margin-top: 1.5rem;
}
.bujianxi {
margin-bottom: 1rem;
}
}
.ProductPage img{
display: block;;
}
.postionTop {
position: absolute;
width: 100%;
top: 0;
}
.topContent {
text-align: center;
}
.a-button {
display: inline-block;
width: auto;
height: 2rem;
line-height: 2rem;
text-align: center;
background-color: #E0E0E0;
color: #000;
margin: 0 auto;
border-radius: 5px;
padding: 0 1rem;
font-size: 10pt;
margin-top: 1.5rem;
--c-text: #000 ;
}
.item-list {
width: 100%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: var(--list-gap);
@media (max-width: 720px) {
gap: var(--list-gap-mobile);
flex-direction: column;
}
}
.item-list-phone-row {
width: 100%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: var(--list-row-gap);
@media (max-width: 720px) {
gap: var(--list-row-gap-mobile);
}
}
.item-list-item {
background-color: #fff;
text-align: center;
padding-top: 3rem;
border-radius: 5px;
}
.bgWhite {
background-color: #fff ;
}
.bgGrey {
background-color: #E0E0E0 ;
}
@media (min-width: 1024px) {
.item-list-col {
flex: 1;
padding: 0;
margin-bottom: 0;
}
.item-list-img {
flex: 1;
padding: 0;
margin-bottom: 0;
}
.item-list-col-2{
flex: 1;
padding: 0;
margin-bottom: 0;
}
.item-list-row2-jj{
margin-bottom: var(--list-row-jj);
}
.container-marginTop{
margin-top: var(--container-marginTop);
}
}
@media (max-width: 720px) {
.item-list-col {
flex: 1;
padding: 0;
}
.item-list-img {
flex: 0;
padding: 0;
margin-bottom: 0;
}
.item-list-col-2{
flex: 1 1 calc(50% - 10px);
padding: 0;
margin-bottom: 0;
}
.item-list-row2-jj{
margin-bottom: var(--list-row-jj-mobile);
}
.container-marginTop{
margin-top: var(--container-marginTop-mobile);
}
}
#webSite {
--c-primary: green;
--c-light-variant: #fff;
}
</style>