wip

public/build/beike/shop/default/css/app.css

@@ -313,16 +313,6 @@ footer .footer-bottom {
   color: #666;
 }
 
-.module-image-plus .module-image-plus-top {
-  display: flex;
-}
-.module-image-plus .module-image-plus-top .right {
-  margin-left: 20px;
-}
-.module-image-plus .module-image-plus-bottom {
-  margin-top: 20px;
-}
-
 .product-wrap {
   margin-bottom: 26px;
   text-align: center;
@@ -343,23 +333,6 @@ footer .footer-bottom {
   text-decoration: line-through;
 }
 
-.module-brand .brand-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
-  margin-bottom: 30px;
-  height: 90px;
-}
-
-.module-tab-product .nav .nav-link {
-  color: #6c757d;
-}
-.module-tab-product .nav .nav-link.active {
-  color: #111;
-  font-weight: bold;
-}
-
 body.page-login .login-item-header, body.page-forgotten .login-item-header {
   background: #f8f9fa;
   border-bottom: none;
@@ -825,6 +798,7 @@ body.page-account-address .addresses-wrap .item .address-bottom a, body.page-che
   right: 2px;
   top: 2px;
   bottom: 2px;
+  z-index: 9;
   outline: 2px solid #fd560f;
 }
 .module-item .module-edit {
@@ -877,3 +851,45 @@ body.page-account-address .addresses-wrap .item .address-bottom a, body.page-che
 .module-item .module-edit .edit-wrap > div:hover {
   background-color: #eb4802;
 }
+
+.module-image-plus .module-image-plus-top {
+  display: flex;
+}
+.module-image-plus .module-image-plus-top .right {
+  margin-left: 20px;
+}
+.module-image-plus .module-image-plus-bottom {
+  margin-top: 20px;
+}
+
+.module-brand .brand-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
+  margin-bottom: 30px;
+  height: 90px;
+}
+
+.module-tab-product .nav .nav-link {
+  color: #6c757d;
+}
+.module-tab-product .nav .nav-link.active {
+  color: #111;
+  font-weight: bold;
+}
+
+.swiper.module-slideshow {
+  --swiper-theme-color: #ff6600;
+  /* 设置Swiper风格 */
+  --swiper-navigation-color: #ff6600;
+  /* 单独设置按钮颜色 */
+  --swiper-navigation-size: 30px;
+  /* 设置按钮大小 */
+}
+.swiper.module-slideshow .swiper-button-prev, .swiper.module-slideshow .swiper-button-next {
+  display: none;
+}
+.swiper.module-slideshow:hover .swiper-button-prev, .swiper.module-slideshow:hover .swiper-button-next {
+  display: block;
+}

resources/beike/admin/views/pages/design/builder/index.blade.php

@@ -70,6 +70,15 @@
       for (; str.length < length; str += Math.random().toString(36).substr(2));
       return str.substr(0, length);
     }
+
+    // iframe 操作
+    var previewWindow = null;
+    $('#preview-iframe').on('load', function(event) {
+      previewWindow = document.getElementById("preview-iframe").contentWindow;
+      app.design.ready = true;
+      app.design.sidebar = true;
+    });
+
   </script>
 
   @include('admin::pages.design.builder.component.image_selector')
@@ -125,8 +134,8 @@
             content: this.form.modules[this.design.editingModuleIndex].content
           };
 
-          $http.post('design/builder/preview', data).then((res) => {
+          $http.post('design/builder/preview', data, {hload: true}).then((res) => {
-            layer.msg(res.message)
+            // layer.msg(res.message)
           })
           // console.log(module)
         },

resources/beike/admin/views/pages/design/module/slideshow.blade.php

@@ -21,7 +21,7 @@
                 <i class="el-icon-rank"></i>
               </el-tooltip>
 
-              {{-- <img :src="thumbnail(item.image[{{ helper.current_language_id() }}], 40, 40)" class="img-responsive"> --}}
+              <img :src="thumbnail(item.image[{{ current_language_id() }}], 40, 40)" class="img-responsive">
             </div>
 
             <div class="right">
@@ -68,10 +68,11 @@ Vue.component('module-editor-slideshow', {
   watch: {
     module: {
       handler: function (val) {
-        console.log(222)
+        console.log(previewWindow)
-        this.$emit('on-changed', val);
+        // $(previewWindow.document).find('.product-description h1').css('font-size', newValue);
+        // this.$emit('on-changed', val);
       },
-      deep: true
+      deep: true,
     }
   },
 

resources/beike/shop/default/css/app.scss

@@ -7,10 +7,7 @@ $primary: #fd560f;
 
 @import './header';
 @import './footer';
-@import './module-image-plus';
 @import './product-style';
-@import './module-brand';
-@import './module-tab-product';
 @import './login';
 @import './account/account';
 @import './product';
@@ -21,3 +18,7 @@ $primary: #fd560f;
 @import './page-account-order';
 @import './page-account-address';
 @import './home';
+@import './module/module-image-plus';
+@import './module/module-brand';
+@import './module/module-tab-product';
+@import './module/slideshow';

resources/beike/shop/default/css/home.scss

@@ -21,10 +21,10 @@
     right: 2px;
     top: 2px;
     bottom: 2px;
+    z-index: 9;
     outline: 2px solid $primary;
   }
 
-
   .module-edit {
     // position: relative;
     position: absolute;

resources/beike/shop/default/css/module/slideshow.scss

@@ -0,0 +1,15 @@
+.swiper.module-slideshow {
+  --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
+  --swiper-navigation-color: #ff6600;/* 单独设置按钮颜色 */
+  --swiper-navigation-size: 30px;/* 设置按钮大小 */
+
+  .swiper-button-prev,.swiper-button-next {
+    display: none;
+  }
+
+  &:hover {
+    .swiper-button-prev,.swiper-button-next {
+      display: block;
+    }
+  }
+}

themes/default/design/slideshow.blade.php

@@ -8,6 +8,43 @@
     </div>
   </div>
   <div class="module-info">
-    <img src="{{ asset('image/default/banner.png') }}" class="img-fluid">
+    <div class="swiper module-swiper-dasuybkdas module-slideshow">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide">
+          <a href=""><img src="{{ asset('image/default/banner.png') }}" class="img-fluid"></a>
+        </div>
+        <div class="swiper-slide">
+          <a href=""><img src="{{ asset('image/default/banner.png') }}" class="img-fluid"></a>
+        </div>
+      </div>
+      <div class="swiper-pagination"></div>
+      <div class="swiper-button-prev"></div>
+      <div class="swiper-button-next"></div>
+    </div>
   </div>
+
+  <script src="{{ asset('vendor/swiper/swiper-bundle.min.js') }}"></script>
+  <link rel="stylesheet" href="{{ asset('vendor/swiper/swiper-bundle.min.css') }}">
+
+  <script>
+    new Swiper ('.module-swiper-dasuybkdas', {
+      loop: true, // 循环模式选项
+      autoplay: true,
+      pauseOnMouseEnter: true,
+      clickable :true,
+
+      // 如果需要分页器
+      pagination: {
+        el: '.swiper-pagination',
+      },
+
+      // 如果需要前进后退按钮
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
+    })
+    </script>
 </section>
+
+