shoplazza-cli 0.0.1

package/fixtures/assets/relative_product.scss

@@ -0,0 +1,45 @@
+@import './tools.scss';
+
+.relative_product {
+  @media ($pc) {
+    padding-right: 0;
+    padding-left: 0;
+  }
+  &__content {
+    margin: 0 -12px;
+    clear: both;
+    @media ($mobile) {
+      margin: 0 -7.5px;
+    }
+  }
+  &__change {
+    // position: absolute;
+    float: right;
+    right: 0;
+    font-size: 12px;
+    color: #666;
+    text-decoration: underline;
+    margin-bottom: 10px;
+    cursor: pointer;
+  }
+  &__title {
+    font-size: 24px;
+    line-height: 29px;
+    margin-bottom: 56px;
+    margin-top: 68px;
+    white-space: nowrap;
+
+    @media ($mobile) {
+      font-size: 18px;
+      margin-bottom: 28px;
+      margin-top: 28px;
+    }
+  }
+}
+html[dir='rtl'] .relative_product {
+  &__change {
+    left: 0;
+    right: unset;
+    float: left;
+  }
+}

package/fixtures/assets/reviews.scss

@@ -0,0 +1,70 @@
+@import './tools.scss';
+
+.reviews-no-tips {
+  padding: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  display: none;
+}
+.reviews-content-loading{
+  margin:100px auto;
+}
+.reviews-product-container{
+  overflow:auto;
+  overflow: -moz-scrollbars-none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar { 
+    width: 0 !important 
+  }
+}
+
+.reviews-product {
+  display: flex;
+  border-bottom: 1px solid #eee;
+}
+
+@media(max-width: 768px){
+  .reviews-product{
+    width:300%;
+  }
+}
+
+
+.review-product-item {
+  flex: 0 0 25%;
+  padding: 0 12px;
+  position:relative;
+}
+.review-product-item:after{content: "";position: absolute;width: 80%;height: 4px;bottom: 0;left: 10%;}
+
+.review-product-item.on:after {
+  background: #FFC700;
+}
+.review-product-item .image-wrap {
+  height: 280px;
+  overflow: hidden;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.review-product-item h3 {
+  font-size: 20px;
+  font-weight:400;
+  line-height:28px;
+  text-align: center;
+  margin-top: 12px;
+  margin-bottom: 26px;
+}
+.reviews-content[data-product-reviews='0']{
+  pointer-events: none;
+}
+
+@media ($pc) {
+  .reviews-product-container{
+    &.row{
+      margin: 0 px-to-rem(- $bootstrap_padding - $pc_row_padding / 2);
+    }
+  }
+}

package/fixtures/assets/rich_text.scss

@@ -0,0 +1,71 @@
+@import './tools.scss';
+
+.rich-text {
+  margin: 0 auto;
+
+  @media ($mobile) {
+    padding-left: px-to-rem(15);
+    padding-right: px-to-rem(15);
+  }
+
+  &__title {
+    color: #212121;
+    font-weight: 500;
+    text-align: center;
+    margin-bottom: px-to-rem(24);
+
+    &_large {
+      font-size: px-to-rem(48);
+    }
+
+    &_medium {
+      font-size: px-to-rem(36);
+    }
+
+    &_small {
+      font-size: px-to-rem(24);
+    }
+
+    @media ($mobile) {
+      margin-bottom: px-to-rem(12);
+
+      &_large {
+        font-size: px-to-rem(30);
+      }
+
+      &_medium {
+        font-size: px-to-rem(24);
+      }
+
+      &_small {
+        font-size: px-to-rem(18);
+      }
+    }
+  }
+
+  &__text {
+    &_large {
+      font-size: px-to-rem(18);
+    }
+
+    &_medium {
+      font-size: px-to-rem(16);
+    }
+
+    &_small {
+      font-size: px-to-rem(14);
+    }
+  }
+
+  @media ($pc) {
+    &__width_large {
+      width: 100%;
+      max-width: px-to-rem(1080);
+    }
+
+    &__width_medium {
+      width: 70.37%;
+      max-width: px-to-rem(760);
+    }
+  }
+}

package/fixtures/assets/search.js

@@ -0,0 +1,87 @@
+(function ($) {
+  $.search_card = function (params) {
+    var $section = $('[data-section-id=' + params.id + ']');
+    var searchUrl = '/api/search?';
+    var page = 1, //分页码
+      limit = 12, // 每页数量
+      loading = false, // 请求数据标示
+      hasMore = true, // 是否还有数据
+      key = params.keyword; // 搜索关键词
+
+    // 获取数据，拼接html模板
+    var getData = function (param, reload, cb) {
+      // 请求数据
+      $(document).trigger('dj.common.load_more.loading.start', { sectionId: params.id });
+      $.get(param, function (res) {
+        if (res) {
+          var products = res.data.products || [];
+          products = products.filter(function (item) {
+            return item.published;
+          });
+          page++;
+          hasMore = res.data.has_more == 1 ? true : false;
+          var html = window.template('search-art-tpl', {
+            products: products,
+          });
+          var content = $section.find('.common__product-row');
+          // 如果reload，清空原来的列表，重置page数值
+          reload && content.empty() && (page = 1);
+          content.append(html);
+          // 更新数量和关键字的显示,根据count是否为0渲染不同dom
+          if (key && res.data.total > 0) {
+            $section.find('.search__result').html('<div class="search__result_not-empty">' + params.search_result + '</div>');
+          }
+          $section.find('.search__key').html('“' + decodeURIComponent(res.data.keyword) + '“');
+          $section.find('.search__count').html(res.data.total);
+        } else {
+          hasMore = false;
+          // console.log(res.msg);
+        }
+        if (hasMore) {
+          $(document).trigger('dj.common.load_more.loading.end', { sectionId: params.id });
+        } else {
+          $(document).trigger('dj.common.load_more.hide', { sectionId: params.id });
+        }
+        loading = false;
+      });
+    };
+
+    var loadMore = function () {
+      if (!loading && hasMore) {
+        loading = true;
+        getData(
+          searchUrl +
+          $.toQuery({
+            type: "product",
+            page: page,
+            keyword: key,
+            limit: limit
+          }),
+          false
+        );
+      }
+    };
+
+    // 监听滚动，请求数据
+    $(document).on(
+      'scroll',
+      $.throttle(
+        function () {
+          // 判断是否到底
+          if ($.isToPageEnd(params.id)) {
+            loadMore();
+          }
+        },
+        10,
+        50
+      )
+    );
+
+    // 监听loadmore点击，请求数据
+    $(document).on('dj.common.load_more.is_click', function (e, data) {
+      if (data.sectionId == params.id) {
+        loadMore();
+      }
+    });
+  };
+})(window.jQuery);

package/fixtures/assets/search.scss

@@ -0,0 +1,67 @@
+@import './tools.scss';
+.search {
+  @media ($mobile) {
+    padding-top: px-to-rem(50);
+    padding-bottom: px-to-rem(50);
+  }
+
+  padding-bottom: px-to-rem(200);
+
+  &__title {
+    font-size: px-to-rem(44 / 2);
+    line-height: px-to-rem(53 / 2);
+    letter-spacing: 2px;
+    margin-bottom: px-to-rem(50 / 2);
+
+    @media ($pc) {
+      font-size: px-to-rem(34);
+      line-height: px-to-rem(40);
+      letter-spacing: 1px;
+      margin-bottom: px-to-rem(53);
+    }
+  }
+
+  &__input {
+    border: 1px solid rgba(215, 220, 222, 1);
+    font-size: px-to-rem(14);
+    color: rgba(0, 0, 0, 1);
+    line-height: px-to-rem(17);
+    height: px-to-rem(88 / 2);
+    margin-bottom: px-to-rem(50 / 2);
+
+    @media ($pc) {
+      margin-bottom: px-to-rem(0);
+      height: px-to-rem(50);
+    }
+  }
+
+  &__btn {
+    width: 100%;
+    height: px-to-rem(88 / 2);
+    font-size: px-to-rem(30 / 2);
+
+    @media ($pc) {
+      height: px-to-rem(50);
+      width: px-to-rem(120);
+      margin-left: px-to-rem(-20);
+      font-size: px-to-rem(18);
+    }
+  }
+
+  &__result {
+    font-size: px-to-rem(14);
+    color: rgba(119, 119, 119, 1);
+    line-height: px-to-rem(17);
+    margin-top: px-to-rem(25);
+    margin-bottom: px-to-rem(50);
+
+    @media ($pc) {
+      font-size: px-to-rem(18);
+      margin-bottom: px-to-rem(56);
+    }
+  }
+
+  &__key {
+    color: #212121;
+  }
+}

package/fixtures/assets/slide.scss

@@ -0,0 +1,51 @@
+@import './tools.scss';
+
+.slide {
+  &__screen {
+    background: #f7f7f7;
+  }
+
+  &__img-wrapper {
+    overflow: hidden;
+    outline: 0;
+
+    .slide__img {
+      width: 100%;
+      object-fit: cover;
+      &_auto {
+        object-fit: contain;
+      }
+    }
+  }
+
+  &__bottom-margin {
+    margin-bottom: px-to-rem(40);
+  }
+
+  .swiper-container {
+    .swiper-slide {
+      width: 100% !important;
+    }
+
+    .swiper-pagination {
+      // bottom: px-to-rem(34);
+    }
+
+    .swiper-pagination-bullet {
+      margin: 0 px-to-rem(6);
+      width: px-to-rem(11);
+      height: px-to-rem(11);
+      background: transparent;
+      opacity: 1;
+      border: 2px solid white;
+
+      @media ($pc) {
+        border: 1px solid white;
+      }
+    }
+
+    .swiper-pagination-bullet-active {
+      background: #fff;
+    }
+  }
+}

package/fixtures/assets/slider.scss

@@ -0,0 +1,141 @@
+@import './tools.scss';
+
+/* slider starts */
+.sep-slider {
+  overflow: hidden;
+  width: 100%;
+}
+
+.sep-slider > div {
+  display: none;
+}
+
+.sep-slider > div:first-child {
+  display: block;
+}
+
+.sep-slider_loaded {
+  display: none;
+}
+
+.sep-loaded-slider {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+}
+
+.sep-loaded-slider__wrapper {
+  display: flex;
+  width: 300%;
+  overflow: hidden;
+  transform: translate(-33.3333%);
+}
+
+.sep-loaded-slider__item {
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.sep-loaded-slider__item img {
+  pointer-events: none;
+}
+
+.sep-loaded-slider__item[data-slider-idx] {
+  height: 1px;
+  overflow: hidden;
+}
+
+.sep-loaded-slider__item.sep-loaded-slider_item_transiting[data-slider-idx] {
+  height: auto;
+}
+
+.sep-loaded-slider__bullets {
+  position: absolute;
+  z-index: 2;
+  bottom: 10px;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.sep-loaded-slider__bullet {
+  margin: 0 px-to-rem(6);
+  width: px-to-rem(11);
+  height: px-to-rem(11);
+  opacity: 1;
+  border: 2px solid white;
+  border-radius: 50%;
+}
+
+.sep-loaded-slider__bullet_active {
+  background-color: #fff;
+}
+
+.sep-loaded-slider__buttons {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  z-index: 2;
+  display: flex;
+  width: 100%;
+  height: px-to-rem(50);
+  line-height: px-to-rem(50);
+  margin-top: px-to-rem(-25);
+  justify-content: space-between;
+}
+
+.sep-loaded-slider__button {
+  color: #000;
+  text-decoration: none;
+  width: px-to-rem(50);
+  text-align: center;
+  font-size: 14px;
+  color: #000;
+  background-color: #fff;
+  opacity: 0.5;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  z-index: 2;
+  height: px-to-rem(50);
+  line-height: px-to-rem(50);
+  margin-top: px-to-rem(-25);
+}
+
+.sep-loaded-slider__button-next,
+html[dir='rtl'] .sep-loaded-slider__button-prev {
+  left: auto;
+  right: 0;
+}
+
+.sep-loaded-slider__button-prev,
+html[dir='rtl'] .sep-loaded-slider__button-next {
+  left: 0;
+  right: auto;
+}
+
+.sep-loaded-slider__button:hover {
+  background-color: #222;
+  color: #fff;
+}
+
+.sep-loaded-slider__button-prev_disabled,
+.sep-loaded-slider__button-next_disabled {
+  opacity: 0;
+}
+
+.sep-loaded-slider_no-buttons .sep-loaded-slider__buttons {
+  display: none;
+}
+
+.sep-loaded-slider_no-bullets .sep-loaded-slider__bullets {
+  display: none;
+}
+
+/*  rtl support */
+html[dir='rtl'] .sep-loaded-slider__wrapper {
+  transform: translate(33.3333%);
+}
+
+/* slider ends */