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

www.bee-hole.com

<div class="ProductPage">
  <div class="vsfTop"></div>
  <div class="container-marginTop topContent">
    <div style="position: relative;">
      <div>
        <img width="100%"
          src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-12/uaxie901000d2n6q4dxukg4vpp1ey8z8.jpg">
      </div>
      <div class="postionTop">
        <div class="onePag-title">
          Subscribe to newsletter
        </div>
        <div class="onePag-content">
          Be the first to know about upcoming sales and events. Get gifts and special offers!
        </div>
        <div style="margin-top:4rem;">
          <a class="a-button bgYellow fBlock">
            SUBSCRIBE
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="container-marginTop">
    <div class="onePag-title fWhite" style="text-align: left;">
      新品上市
    </div>
    <div style="position: relative;margin-top:2rem">
      <div>
        <img width="100%"
          src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-12/uaxie901000d2n6q4juthnavptof2eez.jpg" />
      </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 bgWhite">
            <div>
              <img width="100%"
                src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-12/uaxie901000d2n6q42sicm0vpb4lwqo8.png" />
            </div>
            <div class="desc">全景落地窗帐篷</div>
            <div class="desc">
              <a class="a-button bgYellow fBlock" style="margin-top:0">
                立即购买
              </a>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-3 item-list-col-2">
          <div class="item-list-item bgWhite">
            <div>
              <img width="100%"
                src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-12/uaxie901000d2n6q406kgievoy6i113d.png" />
            </div>
            <div class="desc">银胶自动款帐篷</div>
            <div class="desc">
              <a class="a-button bgYellow fBlock" style="margin-top:0">
                立即购买
              </a>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-3 item-list-col-2">
          <div class="item-list-item bgWhite">
            <div>
              <img width="100%"
                src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-12/uaxie901000d2n6q425dyiovp9hjly9u.png" />
            </div>
            <div class="desc">黑胶天幕帐篷</div>
            <div class="desc">
              <a class="a-button bgYellow fBlock" style="margin-top:0">
                立即购买
              </a>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-3 item-list-col-2">
          <div class="item-list-item bgWhite">
            <div>
              <img width="100%"
                src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-12/uaxie901000d2n6q41bk86jvp53nlh02.png" />
            </div>
            <div class="desc">青梅竹马天幕帐篷</div>
            <div class="desc">
              <a class="a-button bgYellow fBlock" style="margin-top:0">
                立即购买
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container-marginTop">
    <div class="onePag-title fWhite" style="text-align: left;">
      新品上市
    </div>
    <div style="position: relative;margin-top:2rem">
      <div>
        <img width="100%"
          src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-12/uaxie901000d2n6q4gccvsivprk959ej.jpg" />
      </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 bgWhite">
            <div>
              <img width="100%"
                src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-12/uaxie901000d2n6q409e8ikvp0hwczh7.png" />
            </div>
            <div class="desc">全景落地窗帐篷</div>
            <div class="desc">
              <a class="a-button bgYellow fBlock" style="margin-top:0">
                立即购买
              </a>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-3 item-list-col-2">
          <div class="item-list-item bgWhite">
            <div>
              <img width="100%"
                src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-12/uaxie901000d2n6q409e8ikvp0hwczh7.png" />
            </div>
            <div class="desc">银胶自动款帐篷</div>
            <div class="desc">
              <a class="a-button bgYellow fBlock" style="margin-top:0">
                立即购买
              </a>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-3 item-list-col-2">
          <div class="item-list-item bgWhite">
            <div>
              <img width="100%"
                src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-12/uaxie901000d2n6q418s9lyvp3433pqh.png" />
            </div>
            <div class="desc">黑胶天幕帐篷</div>
            <div class="desc">
              <a class="a-button bgYellow fBlock" style="margin-top:0">
                立即购买
              </a>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-3 item-list-col-2">
          <div class="item-list-item bgWhite">
            <div>
              <img width="100%"
                src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-12/uaxie901000d2n6q41v960fvp76wmxfj.png" />
            </div>
            <div class="desc">青梅竹马天幕帐篷</div>
            <div class="desc">
              <a class="a-button bgYellow fBlock" style="margin-top:0">
                立即购买
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container-marginTop">
    <div class="onePag-title fWhite" style="text-align: left;">
      产品推荐
    </div>
    <div style="position: relative;margin-top:2rem">
      <div>
        <img width="100%"
          src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-12/uaxie901000d2n6q4dxukg4vpp1ey8z8.jpg" />
      </div>
    </div>
    <div class="ProductImageList2" style="padding:0;width:100%;margin-top:2rem;">
      <div class="row item-list-phone-row">
        <div class="col-lg-3 col-md-3 item-list-col-2">
          <div class="item-list-item bgWhite">
            <div>
              <img width="100%"
                src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-12/uaxie901000d2n6q3m7u2plvol9r7kok.png" />
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-3 item-list-col-2">
          <div class="item-list-item bgWhite">
            <div>
              <img width="100%"
                src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-12/uaxie901000d2n6q3rlfnjgvopyalfcz.png" />
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-3 item-list-col-2">
          <div class="item-list-item bgWhite">
            <div>
              <img width="100%"
                src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-12/uaxie901000d2n6q3ssln4wvorv83lhm.png" />
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-3 item-list-col-2">
          <div class="item-list-item bgWhite">
            <div>
              <img width="100%"
                src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-12/uaxie901000d2n6q3nui3a3vonlgwivs.png" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<style>
  #webSite {
    --c-primary: green;
    --c-light-variant: #fff;
  }
  .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) {
     #webSite .vsfTop{
      margin-top:49.2rem;
    }
    .onePag-title {
      font-size: 28pt;
      color: #fff;
      text-align: right;
      line-height: 1;
      margin-top: 1.5rem;
    }

    .onePag-content {
      font-size: 20pt;
      line-height: 1;
      margin-top: 1.5rem;
      color: #fff;
      text-align: right;
    }

    .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: 0.5rem;
      /* margin-top: 1.5rem; */
    }

    .bujianxi {
      margin-bottom: 40px;
    }

    .postionTop {
      position: absolute;
      width: calc( 100% - 4rem);
      top: 20%;
    }
    .ProductImageList2{
      width: 80%;
      margin: 0 auto;
      position: relative;
      padding: 3rem 2rem;
      border-radius: 15px;
    }
    .ProductImageList {
      /* background: #EEEEEE; */
      width: 80%;
      margin: 0 auto;
      margin-top: -15rem;
      position: relative;
      padding: 3rem 2rem;
      border-radius: 15px;
    }
  }

  /* Desktop-only class */
  @media (max-width: 1023px) {
    .onePag-title {
      font-size: 18pt;
      color: #fff;
      text-align: right;
      line-height: 1;
      margin-top: 1.5rem;
    }

    .onePag-content {
      font-size: 14pt;
      line-height: 1;
      margin-top: 1.5rem;
      text-align: right;
    }

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


  .ProductPage img {
    display: block;
    ;
  }


  .topContent {
    text-align: right;
  }

  .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;
    cursor: pointer;
  }
  .fWhite{
    color: #fff;
     --c-text: #fff !important;
  }
  .fBlock {
    color: #000;
    --c-text: #000 !important;
  }

  .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: 15px;
    padding: 5px;
  }

  .bgYellow{
    background-color: #F6C100;
  }
  .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);
    }
  }

</style>