@bee-hole/admin 1.24.42 → 1.24.44

package/dist/template/template13.html

@@ -0,0 +1,438 @@
+<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>