@bee-hole/server/resource/public/cp/template/template8.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-05/5emozr01000d2h85ml6l9fv28opcgbpt.png" />
    </div>
    <div class="postionTop">
      <div class="onePag-title">
        HUAWEI Pura 70 Pro+
      </div>
      <div class="onePag-content">
        锐意向前
      </div>
      <div>
        <a class="a-button bgWhite">
          了解更多
        </a>
      </div>
    </div>
  </div>
  <div style="margin-top:6rem;">
    <div class="row item-list">
      <div class="col-lg-4 col-md-4 item-list-col">
        <div class="item-list-item">
          <div class="title">HUAWEIWATCH FIT 3</div>
          <div class="desc">大方出场 时尚有方</div>
          <a class="a-button bgGrey">
            了解更多
          </a>
          <div>
            <img width="100%"
              src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-05/17fgy591000d2h9h8svqwtl2fa7xtghp.jpg" />
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-4 item-list-col">
        <div class="item-list-item">
          <div class="title">HUAWElMatePad 11.5"s</div>
          <div class="desc">云晰柔光屏 满屏新视野</div>
          <a class="a-button bgGrey">
            了解更多
          </a>
          <div>
            <img width="100%"
              src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-05/17fgy591000d2h9jqbtyqar2m6tx89je.jpg" />
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-4 item-list-col">
        <div class="item-list-item">
          <div class="title">HUAWElMatePad SE</div>
          <div class="desc">高刷好屏 全家臻亨</div>
          <a class="a-button bgGrey">
            了解更多
          </a>
          <div>
            <img width="100%"
              src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-05/17fgy591000d2h9fvd5nwah2cexwvodq.jpg" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <div style="margin-top:6rem;">
    <div class="row item-list " style="margin-bottom:20px">
      <div class="col-lg-6 col-md-6 item-list-col">
        <div>
          <img width="100%"
            src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-05/5emozr01000d2h85mnco4ql28q0w7qww.png" />
        </div>
      </div>
      <div class="col-lg-6 col-md-6 item-list-col">
        <div>
          <img width="100%"
            src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-05/5emozr01000d2h85mx35k5229gs7q0co.png" />
        </div>
      </div>
    </div>
    <div class="row item-list ">
      <div class="col-lg-6 col-md-6 item-list-col">
        <div>
          <img width="100%"
            src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-05/5emozr01000d2h85ms6k6w7290wa0b21.png" />
        </div>
      </div>
      <div class="col-lg-6 col-md-6 item-list-col">
        <div>
          <img width="100%"
            src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-05/5emozr01000d2h85mtuqpk0295e9vl33.png" />
        </div>
      </div>
    </div>
  </div>
  <div style="margin-top: 6rem;">
    <div style="font-size:20pt;font-weight:600;text-align: center;margin-bottom:1.5rem;color:#000;">所有产品</div>
    <div class="row item-list " style="margin-bottom:20px">
      <div class="col-lg-4 col-md-4 item-list-col">
        <div>
          <img width="100%"
            src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-05/5emozr01000d2h85mttn7cl294sbveuf.png" />
        </div>
      </div>
      <div class="col-lg-4 col-md-4 item-list-col">
        <div class="bujianxi" style="position: relative;">
          <img width="100%"
            src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-05/5emozr01000d2h85moo0tie28uqpk35t.png" />
          <div style="position: absolute;bottom: 2rem;color: #000;text-align: center;width: 100%;font-weight: 600;">
            HUAWEl Pura 70 Pro
          </div>
        </div>
        <div style="position: relative;">
          <img width="100%"
            src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-05/5emozr01000d2h85modgjku28sebr0tm.png" />
          <div style="position: absolute;bottom: 2rem;color: #000;text-align: center;width: 100%;font-weight: 600;">
            HUAWEl Pura 70
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-4 item-list-col">
        <div class="bujianxi" style="position: relative;">
          <img width="100%"
            src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-05/5emozr01000d2h85ms5nsj628zeinc8k.png" />
          <div style="position: absolute;bottom: 2rem;color: #000;text-align: center;width: 100%;font-weight: 600;">
            HUAWEIPocket 2
          </div>
        </div>
        <div style="position: relative;">
          <img width="100%"
            src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-05/5emozr01000d2h85ms5nsj628zeinc8k.png" />
          <div style="position: absolute;bottom: 2rem;color: #000;text-align: center;width: 100%;font-weight: 600;">
            HUAWEIPocket 2
          </div>
        </div>
      </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;
  }
}

/* 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{
    --c-text: #000 ;
  }
  .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 20px;

    @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-col {
    flex: 1;

    @media (max-width: 720px) {
      flex: 0;
    }
  }
  #webSite {
    --c-primary: green;
    --c-light-variant: #fff;
  }
</style>