@bee-hole/server 1.63.5 → 1.64.0

package/resource/public/cp/template/template12.html

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