@bee-hole/server/resource/public/cp/template/template11.html

www.bee-hole.com

<div class="ProductPage">
  <div class="topContent">
    <div>
      <img width="100%"
        src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/352u9z01000d2mi4h8362iqn50s3ifnl.jpg" />
    </div>
  </div>
  <div class="container-marginTop"> 
    <div style="position: relative;">
      <div>
        <img width="100%"
          src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/352u9z01000d2mi4fjhtgt4mt0hkrntz.jpg" />
      </div>
      <div class="postionTop">
        <div class="onePag-title">
          当季新品
        </div>
        <div class="onePag-content">
          JEW PROBUCT
        </div>
        <div style="text-align: center;">
          <a class="a-button bgBlock">
            即刻上脚
          </a>
        </div>
      </div>
    </div>
    <div class="ProductImageList">
      <div class="row item-list-phone-row">
        <div class="col-lg-3 col-md-3 item-list-col-2">
          <div class="item-list-item">
            <div>
              <img width="100%"
                src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/352u9z01000d2mi4b31vpdkl8081fbjk.jpg" />
            </div>
            <div class="desc">AGILITY PEAK 5</div>
            <div class="desc">蜂鸟5越野跑鞋</div>
          </div>
        </div>
        <div class="col-lg-3 col-md-3 item-list-col-2">
          <div class="item-list-item">
            <div>
              <img width="100%"
                src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/352u9z01000d2mi4aqad1jml00cg55po.jpg" />
            </div>
            <div class="desc">HUT MOC 2 PACKABLE</div>
            <div class="desc">便携式休闲面包鞋</div>
          </div>
        </div>
        <div class="col-lg-3 col-md-3 item-list-col-2">
          <div class="item-list-item">
            <div>
              <img width="100%"
                src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/352u9z01000d2mi4b6i9c66lb0ah0fd6.jpg" />
            </div>
            <div class="desc">MOAB SPEED 2 GTX</div>
            <div class="desc">防水款徒步越野两用鞋</div>
          </div>
        </div>
        <div class="col-lg-3 col-md-3 item-list-col-2">
          <div class="item-list-item">
            <div>
              <img width="100%"
                src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/352u9z01000d2mi4ausa74pl40z69qp3.jpg" />
            </div>
            <div class="desc">HDRO NEXT GEN MOO</div>
            <div class="desc">毒液3厚底洞洞鞋</div>
          </div>
        </div>
      </div>
      <div class="row item-list-phone-row">
        <div class="col-lg-3 col-md-3 item-list-col-2">
          <div class="item-list-item">
            <div>
              <img width="100%"
                src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/352u9z01000d2mi4aufuntpl20octgrq.jpg" />
            </div>
            <div class="desc">SUN-PROOF CLOTHING</div>
            <div class="desc">UPF300+凉感速干防晒服</div>
          </div>
        </div>
        <div class="col-lg-3 col-md-3 item-list-col-2">
          <div class="item-list-item">
            <div>
              <img width="100%"
                src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/352u9z01000d2mi4b6kfianld0fr02ss.jpg" />
            </div>
            <div class="desc">WINTER JACKET</div>
            <div class="desc">山行者三合一冲锋衣</div>
          </div>
        </div>
        <div class="col-lg-3 col-md-3 item-list-col-2">
          <div class="item-list-item">
            <div>
              <img width="100%"
                src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/352u9z01000d2mi4awhu7nzl60lzcy56.jpg" />
            </div>
            <div class="desc">WINTER JACKET</div>
            <div class="desc">风语者单层冲锋衣</div>
          </div>
        </div>
        <div class="col-lg-3 col-md-3 item-list-col-2">
          <div class="item-list-item">
            <div>
              <img width="100%"
                src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/352u9z01000d2mi4afuk43uky0tg6ux2.jpg" />
            </div>
            <div class="desc">CASUAL PANTS</div>
            <div class="desc">透气速干休闲裤</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container-marginTop">
    <div class="onePag-title fBlock">
      户外推荐
    </div>
    <div class="onePag-content fBlock">
      NEW PRODUCT OF THE SEASON
    </div>
    <div class="row item-list-phone-row" style="margin-top:4rem;">
      <div class="col-lg-6 col-md-12 item-list-col">
        <div class="row item-list-phone-row item-list-row2-jj">
          <div class="col-lg-6 col-md-12 item-list-col">
            <img width="100%" src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/352u9z01000d2mi4coj47vcmb04mdift.jpg" />
          </div>
          <div class="col-lg-6 col-md-12 item-list-col">
            <img width="100%"
              src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/352u9z01000d2mi4bjah6selj09iy5bd.jpg" />
          </div>
        </div>
        <div class="row item-list-phone-row">
          <div class="col-lg-6 col-md-12 item-list-col">
            <img width="100%"
              src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/352u9z01000d2mi4cg3kl6gm30tgu81k.jpg" />
          </div>
          <div class="col-lg-6 col-md-12 item-list-col">
            <img width="100%"
              src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/352u9z01000d2mi4bo5v5hvlo0z9ourj.jpg" />
          </div>
        </div>
      </div>
      <div class="col-lg-6 col-md-12 item-list-col">
        <img width="100%" src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/352u9z01000d2mi4gr1bjwnn10b5pz4y.jpg" />
      </div>
    </div>
    <div class="row item-list-phone-row" style="margin-top:3rem;">
      <div class="col-lg-6 col-md-12 item-list-col">
        <img width="100%"
          src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/352u9z01000d2mi4fuom4uhmy0jwcyph.jpg" />
      </div>
      <div class="col-lg-6 col-md-12 item-list-col">
        <div class="row item-list-phone-row item-list-row2-jj">
          <div class="col-lg-6 col-md-12 item-list-col-2">
            <img width="100%"
              src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/352u9z01000d2mi4by3c7huls01z47h7.jpg" />
          </div>
          <div class="col-lg-6 col-md-12 item-list-col-2">
            <img width="100%"
              src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/352u9z01000d2mi4cj0ynr8m50lulqnr.jpg" />
          </div>
        </div>
        <div class="row item-list-phone-row">
          <div class="col-lg-6 col-md-12 item-list-col-2">
            <img width="100%"
              src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/352u9z01000d2mi4bzthel2lv0005u4x.jpg" />
          </div>
          <div class="col-lg-6 col-md-12 item-list-col-2">
            <img width="100%"
              src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/352u9z01000d2mi4bmr9bnjlm04k20kp.jpg" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container-marginTop">
    <div>
      <img width="100%" src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/352u9z01000d2mi4fj1nbitmr0175os8.jpg" />
    </div>
  </div>
  <div class="container-marginTop">
    <div class="onePag-title fBlock">
      人气榜单
    </div>
    <div class="onePag-content fBlock">
      Popularity Ranking
    </div>
    <div class="row item-list-phone-row" style="margin-top: 4rem;">
      <div class="col-lg-4 col-md-12 item-list-col">
        <img width="100%" src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/352u9z01000d2mi4de2fbxoml0bdtmuv.jpg" />
      </div>
      <div class="col-lg-4 col-md-12 item-list-col">
        <img width="100%"
          src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/352u9z01000d2mi4cuv637hmg08k7is6.jpg" />
      </div>
      <div class="col-lg-4 col-md-12 item-list-col">
        <img width="100%"
          src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-11/352u9z01000d2mi4cmj98lbm801tqijh.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;
      color:#fff;
      text-align: center;
    }

    .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;
    }
     .postionTop {
      position: absolute;
      width: 100%;
      top: 20%;
    }
    .ProductImageList{
      background:#EEEEEE;
      width: 80%;
      margin: 0 auto;
      margin-top: -2rem;
      position: relative;
      padding: 3rem 2rem;
      border-radius: 15px;
    }
  }

  /* 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;
      text-align: center;
    }

    .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;
    }
    .postionTop {
      position: absolute;
      width: 100%;
      top: 0;
    }
    .ProductImageList{
      background:#EEEEEE;
      width: 80%;
      margin: 0 auto;
      margin-top: 7rem;
      position: relative;
      padding: 3rem 2rem;
      border-radius: 15px;
    }
  }
 

  .ProductPage img {
    display: block;
    ;
  }


  .topContent {
    text-align: center;
  }

  .a-button {
    display: inline-flex;
    width: auto;
    height: 2rem;
    align-items: center;
    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 !important;
  }
  .fBlock{
    color: #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 !important;
  }
  .bgBlock {
    background-color: #000 !important;
    --c-text:#fff !important;
  }
  .bgGrey {
    background-color: #E0E0E0 !important;
  }

  @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>