@bee-hole/server/resource/public/cp/template/template13.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-15/1yk7v5u1000d2pp5eg519qqjj9fxtwkd.jpg" />
    </div>
  </div>
  <div class="container-marginTop">
    <div class="onePag-title fBlock">关于「猫科」</div>
    <div style="font-size:12pt;width: calc(100% - 1.5rem);margin-top:0.5rem;">ABOUT GREEN FAMILY</div>
    <div class="row item-list-phone-row2" style="margin-top:4rem;margin-top:0.5rem">
      <div class="col-lg-4 col-md-4 item-list-col-2">
        <img width="100%"
          src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-15/1yk7v5u1000d2pp5dzxzb55ji5m7yj9n.jpg" />
      </div>
      <div class="col-lg-4 col-md-4 item-list-col-32">
        <div class="item-list-row2-jj">
          <img style="width:100%"
            src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-15/1yk7v5u1000d2pp5ds071pljhi34si75.jpg" />
        </div>
        <div>
          <img style="width:100%"
            src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-15/1yk7v5u1000d2pp5dtp9mofjhojz26lj.jpg" />
        </div>
      </div>
      <div class="col-lg-4 col-md-4 item-list-col-22">
        <img width="100%"
          src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-15/1yk7v5u1000d2pp5e0mp7w0jiaun82ii.jpg" />
      </div>
    </div>
  </div>
  <div class="container-marginTop rightContainer">
    <div class="onePag-title fBlock" style="text-align: left;width: 100%;">「有宠」生活</div>
    <div style="font-size:12pt;"  style="text-align: left;width: 100%;width: calc(100% - 1.5rem);margin-top:0.5rem">ABOUT GREEN FAMILY</div>
    <div class="container1">
      <div class="header1"></div>
      <div class="subheader1"></div>
      <img src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-15/1yk7v5u1000d2pp5dvg7p8yjhsz4yar2.jpg" alt="Pet 1">
      <img src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-15/1yk7v5u1000d2pp5duzj6ucjhqcqbfia.jpg" alt="Pet 2">
      <img src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-15/1yk7v5u1000d2pp5dy2x41cjhwnxxjyb.jpg" alt="Pet 3">
      <img src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-15/1yk7v5u1000d2pp5dzc4vtqji31gb8sn.jpg" alt="Pet 4">
      <img src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-15/1yk7v5u1000d2pp5dyon939ji1k0cyli.jpg" alt="Pet 5">
      <img src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-15/1yk7v5u1000d2pp5e5754u9jiobsbld0.jpg" alt="Pet 6">
      <img src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-15/1yk7v5u1000d2pp5e571loqjinrsbhu5.jpg" alt="Pet 7">
      <img src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-15/1yk7v5u1000d2pp5dyfxiwajhzlsoqb2.jpg" alt="Pet 8">
      <img src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-15/1yk7v5u1000d2pp5e6lftjajiwvdkw99.jpg" alt="Pet 9">
      <img src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-15/1yk7v5u1000d2pp5e77v8j8jiy335zh9.jpg" alt="Pet 10">
      <img src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-15/1yk7v5u1000d2pp5dt4jm3rjhm09go78.jpg" alt="Pet 11">
      <img src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-15/1yk7v5u1000d2pp5e2actjujijx042q1.jpg" alt="Pet 12">
      <div></div>
      <img src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-15/1yk7v5u1000d2pp5ds071q5jhhz0q6b9.jpg" alt="Pet 13">
      <div></div>
    </div>
  </div>
  <div class="container-marginTop">
    <div class="onePag-title fBlock">宠物「动态」</div>
    <div style="font-size:12pt;width: calc(100% - 1.5rem);margin-top:0.5rem;">ENTERPRISE DYNAMICS</div>
    <div class="row item-list-phone-row">
      <div class="col-lg-4 col-md-4 item-list-col-2">
        <img width="100%" src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-15/1yk7v5u1000d2pp5e5z6noljiumfgjwb.jpg" />
        <div>
          <div class="desc">「猫咪饲养」</div>
          <div class="desc">新手养猫全攻略!</div>
        </div>
      </div>
      <div class="col-lg-4 col-md-4 item-list-col-2">
        <img width="100%"
          src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-15/1yk7v5u1000d2pp5e11n6hkjidexy5ri.jpg" />
          <div>
            <div class="desc">「猫咪饲养」</div>
            <div class="desc">猫咪选粮!</div>
          </div>
      </div>
      <div class="col-lg-4 col-md-4 item-list-col-2">
        <img width="100%"
          src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-15/1yk7v5u1000d2pp5dxynyrzjhumu4hf6.jpg" />
          <div>
            <div class="desc">「猫咪训练」</div>
            <div class="desc">如何改掉猫咪的坏习惯?</div>
          </div>
      </div>
      <div class="col-lg-4 col-md-4 item-list-col-2">
        <img width="100%"
          src="https://xbuy.oss-cn-shanghai.aliyuncs.com/xbuy/1/2024-07-15/1yk7v5u1000d2pp5e0dlfdoji7cox6wk.jpg" />
        <div>
          <div class="desc">「猫咪饲养」</div>
          <div class="desc">秋冬该怎么照顾猫主子?</div>
        </div>
      </div>
    </div>
  </div>
</div>
<style>
  .container1 {
    display: grid;
    /* grid-template-columns: repeat(3, minmax(150px, 1fr)); */
    gap: 10px;
    padding: 20px;
    max-width: 600px;
    /* background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
  }

  .container1 img {
    width: 100%;
    height: auto;
    border-radius: 10px;
  }
  .container1 > a {
    width: 100%;
    height: auto;
    border-radius: 10px;
  }
  .container1 .header1 {
    grid-column: span 3;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .container1 .subheader1 {
    grid-column: span 3;
    text-align: center;
    font-size: 14px;
    margin-bottom: 20px;
  }

  .container1 > img:nth-child(3n + 1) {
    margin-top: -50%;
  }
  .container1 > a:nth-child(3n + 1) {
    margin-top: -50%;
  }
  .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;
  }

  @media (min-width: 1024px) {
    .onePag-title {
      font-size: 28pt;
      color: #fff;
      text-align: left;
      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;
    }
    .rightContainer{
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
  }

  /* Desktop-only class */
  @media (max-width: 1023px) {
    .onePag-title {
      font-size: 18pt;
      color: #fff;
      text-align: left;
      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-phone-row2 {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--list-row-gap);

    @media (max-width: 720px) {
      flex-wrap: nowrap;
      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-col-32 {
      flex: 0 0 32.9%;
      padding: 0;
      margin-bottom: 0;
    }

    .item-list-col-22 {
      flex: 0 0 22.3%;
      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-col-32 {
      flex: 0 0 32.3%;
      padding: 0;
      margin-bottom: 0;
    }

    .item-list-col-22 {
      flex: 0 0 22.1%;
      padding: 0;
      margin-bottom: 0;
    }

    .item-list-row2-jj {
      margin-bottom: var(--list-row-jj-mobile);
    }

    .container-marginTop {
      margin-top: var(--container-marginTop-mobile);
    }
  }

  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
  }

  .gallery img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
  }

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