This commit is contained in:
pushuo 2022-07-15 11:10:37 +08:00
parent 3ed2b19c78
commit d5b48e667b
12 changed files with 144 additions and 38 deletions

View File

@ -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;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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) => {
layer.msg(res.message)
$http.post('design/builder/preview', data, {hload: true}).then((res) => {
// layer.msg(res.message)
})
// console.log(module)
},

View File

@ -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)
this.$emit('on-changed', val);
console.log(previewWindow)
// $(previewWindow.document).find('.product-description h1').css('font-size', newValue);
// this.$emit('on-changed', val);
},
deep: true
deep: true,
}
},

View File

@ -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';

View File

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

View File

@ -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;
}
}
}

View File

@ -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>