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

www.bee-hole.com

<div class="ProductPage">
  <div class="top-item">
    <div class="row item-list">
      <div class="col-lg-6 col-md-6 item-list-col">
        <div>
          <img style="width: 100%;"
            src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-08/1an40rg1000d2jz0nmf4rdfagqiy5bm6.jpg" />
        </div>
      </div>
      <div class="col-lg-6 col-md-6 item-list-col">
        <p>The perfect fusion of texture and color injects new vitality into youl</p>
        <p>wardrobe. Our unique design philosophy focuses on every detail</p>
        <p>from style to color, to create unique women's clothing for you. Let</p>
        <p>you radiate confidence and radiance in every moment.</p>
      </div>
    </div>
  </div>
  <div style="margin-top:6rem">
    <div class="row item-list">
      <div class="col-lg-3 col-md-3 item-list-col">
        <div style="width:100%;height:50%"></div>
        <div style="height:50%;display: flex;flex-direction: column;justify-content: flex-end;align-items: flex-start;">
          <div style="margin-bottom:0.5rem;margin-left:-5px;">
            <div
              style="background:#A1D364;border-radius:15px;height:18px;line-height: 0;padding: 0 10px;width: auto;display: inline-block;">
              <div style="font-size: 20pt;font-weight: 600;">NEW</div>
            </div>
          </div>
          <div style="font-size:16pt;margin-bottom:1.5rem;">
            in autumn
          </div>
          <div style="margin-bottom:0.5rem;">
            <a style="padding: 5px 15px;border:1px solid #000;display: inline-block;">
              SHOP →
            </a>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 item-list-col">
        <div style="height:calc( 50% - 1rem);width:100%;text-align: right;margin-bottom:30px;">
          <div style="font-size:20pt;margin-bottom:0.5rem;font-weight:bold;">GO FAR</div>
          <div style="font-size:16pt;margin-bottom:0.5rem">秋夏上新</div>
          <div style="font-size:14pt">2024</div>
        </div>
        <div>
          <img style="width:100%"
            src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-08/1an40rg1000d2jz0n6i0jseagbi9zja2.jpg" />
        </div>
      </div>
      <div class="col-lg-3 col-md-3 item-list-col">
        <div style="margin-bottom:30px;">
          <img style="width:100%"
            src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-08/1an40rg1000d2jz0nfthylcagjxdcvd2.jpg" />
        </div>
        <div>
          <img style="width:100%"
            src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-08/1an40rg1000d2jz0ndr6squageuq8u35.jpg" />
        </div>
      </div>
      <div class="col-lg-3 col-md-3 item-list-colImg">
        <div>
          <img style="width: 100%;"
            src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-09/sykzob01000d2ku34xcfgwp1zhks9w8d.jpg" />
        </div>
      </div>
    </div>
  </div>
  <div style="margin-top:6rem">
    <img width="100%" src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-08/1an40rg1000d2jz0okqvb1jahigmk6ps.jpg" />
  </div>
  <div style="margin-top:6rem">
    <div class="row item-list">
      <div class="col-lg-6 col-md-6 item-list-col">
        <div>
          <img style="width: 100%;"
            src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-08/1an40rg1000d2jz0oor05b6ahmvyp9sk.jpg" />
        </div>
      </div>
      <div class="col-lg-6 col-md-6 item-list-col">
        <div style="height: calc(50% - 1.5rem);">
          <div style="font-size:20pt;margin-bottom:2rem;text-align: center;font-weight:bold;">BESTSELLERS</div>
          <div style="margin-bottom: 1.5rem;text-align: center;">Nam auctor nistestnec tempus acus viverra nec Nulam cursus</div>
          <div style="margin-bottom: 3rem;text-align: center;">nequenon conque aiquam mauris massa conseguat sem ul-laore...</div>
          <div style="text-align: center;;">
            <a style="padding: 5px 15px;border:1px solid #000;display: inline-block;">
              SHOP →
            </a>
          </div>
        </div>
        <div>
          <img style="width: 100%;"
            src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-08/1an40rg1000d2jz0notyf4jagwvvnqs7.jpg" />
        </div>
      </div>
    </div>
  </div>
  <div style="margin-top:6rem">
    <div style="font-size:20pt;margin-bottom:2rem;text-align: center;font-weight:bold;">EXPLORE OUR BESTSELLERS</div>
    <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-08/1an40rg1000d2jz0nkobrbiagmt7ayi2.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-08/1an40rg1000d2jz0ndrac1dagf5skqtu.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-08/1an40rg1000d2jz0nkv7fb4ago72ja5a.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-08/1an40rg1000d2jz0ndv4wt7aghford0p.jpg" />
      </div>
    </div>
  </div>
</div>
<style>
  @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;
    }

    .top-item {
      margin-top: 60rem;
    }
  }

  /* 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;
    }

    .top-item {
      margin-top: 10rem;
    }
  }

  .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: 10px;
    --container-marginTop: 6rem;
    --container-marginTop-mobile: 4rem;
  }
  .ProductPage img{
    display: block;
  }
  .ProductPage a{
    cursor: pointer;
  }

  .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 !important;
  }

  .item-list {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0 30px;

    @media (max-width: 720px) {
      gap: 18px 0;
      flex-direction: column;
    }

    /* margin-bottom:30px; */
    /* margin-top:20px; */
  }

  .item-list-item {
    background-color: #fff;
    text-align: center;
    padding-top: 3rem;
    border-radius: 5px;
  }


  .bgWhite {
    background-color: #fff !important;
  }

  .bgGrey {
    background-color: #E0E0E0 !important;
  }
  .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);
    }
  }

  @media (min-width: 1024px) {
    .item-list-col {
      flex: 1;
      padding: 0;
    }
    .item-list-colImg{
      flex: 1 0 4%;
      padding: 0;
    }
     .item-list-col-2 {
      flex: 1;
      padding: 0;
      margin-bottom: 0;
    }
  }

  @media (max-width: 720px) {
    .item-list-col {
      flex: 0;
    }
    .item-list-colImg{
      flex: 0;
    }
    .item-list-col-2 {
      flex: 1 1 calc(50% - 10px);
      padding: 0;
      margin-bottom: 0;
    }

  }

  #webSite {
    --c-primary: green;
    --c-light-variant: #fff;
  }
</style>