修改轮播切换方式
于肖磊
parent
60dbd6bf9d
commit
c12fe71907
|
|
@ -13,7 +13,6 @@
|
|||
:allow-touch-move="false"
|
||||
:speed="500"
|
||||
:slides-per-view="swiper_style.slidesPerView"
|
||||
:space-between="swiper_style.spaceBetween"
|
||||
:centered-slides="swiper_style.centeredSlides"
|
||||
:pause-on-mouse-enter="true"
|
||||
:modules="modules"
|
||||
|
|
@ -27,7 +26,7 @@
|
|||
@slide-change="slideChange"
|
||||
>
|
||||
<swiper-slide v-for="(item, index) in form.carousel_list" :key="index">
|
||||
<div class="item-image flex align-c w h re oh" :style="img_style">
|
||||
<div class="item-image flex align-c w h re oh" :style="`${ img_style }${ data_spacing }`">
|
||||
<image-empty v-model="item.carousel_img[0]" :style="img_style" :fit="img_fit"></image-empty>
|
||||
<div v-if="new_style.video_is_show == '1' && item.carousel_video.length > 0" :class="{'x-middle': new_style.video_location == 'center', 'right-0': new_style.video_location == 'flex-end' }" class="z-deep abs oh video-class" :style="`bottom: ${new_style.video_bottom}px;`">
|
||||
<div class="flex-row gap-5 align-c" :style="video_style">
|
||||
|
|
@ -43,7 +42,7 @@
|
|||
</div>
|
||||
</swiper-slide>
|
||||
<swiper-slide v-for="(item, index1) in seat_list" :key="index1">
|
||||
<div class="item-image flex align-c w h re oh" :style="img_style">
|
||||
<div class="item-image flex align-c w h re oh" :style="`${ img_style }${ data_spacing }`">
|
||||
<image-empty v-model="item.carousel_img[0]" :style="img_style" :fit="img_fit"></image-empty>
|
||||
<div v-if="new_style.video_is_show == '1' && item.carousel_video.length > 0" :class="{'x-middle': new_style.video_location == 'center', 'right-0': new_style.video_location == 'flex-end' }" class="z-deep abs oh video-class" :style="`bottom: ${new_style.video_bottom}px;`">
|
||||
<div class="flex-row gap-5 align-c" :style="video_style">
|
||||
|
|
@ -78,6 +77,7 @@ import { common_styles_computer, radius_computer, get_math, gradient_computer, p
|
|||
import { isEmpty, cloneDeep, throttle } from 'lodash';
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||
import { Autoplay, EffectCoverflow } from 'swiper/modules';
|
||||
import { old_padding } from '@/utils/common';
|
||||
const modules = [Autoplay, EffectCoverflow];
|
||||
|
||||
const props = defineProps({
|
||||
|
|
@ -175,9 +175,19 @@ const swiper_Width = ref(390);
|
|||
|
||||
// const swiper_right_2 = computed(() => (swiper_Width.value - new_style.value.image_spacing) / 2 + 'px');
|
||||
// const swiper_right_3 = computed(() => (swiper_Width.value / 2) - 55 - (new_style.value.image_spacing * 2) + 'px');
|
||||
const data_spacing = computed(() => {
|
||||
const { data_padding = old_padding, data_left_spacing = 0, image_spacing = 0} = new_style.value;
|
||||
if (form.value.carousel_type == 'inherit') {
|
||||
return padding_computer(data_padding) + 'box-sizing: border-box;';
|
||||
} else if (form.value.carousel_type !== 'card') {
|
||||
return `padding-left: ${ data_left_spacing }px;padding-right:${image_spacing}px;box-sizing: border-box;`;
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
});
|
||||
|
||||
const swiper_right_2 = computed(() => (swiper_Width.value - new_style.value.image_spacing) / 2 + (55 * 1.5 + new_style.value.image_spacing) + 'px');
|
||||
const swiper_right_3 = computed(() => (swiper_Width.value - new_style.value.image_spacing) / 3 + 'px');
|
||||
const swiper_right_2 = computed(() => (swiper_Width.value - new_style.value.image_spacing) / 2 - new_style.value.data_left_spacing + 'px');
|
||||
const swiper_right_3 = computed(() => (swiper_Width.value - new_style.value.image_spacing) / 3 - new_style.value.data_left_spacing + 'px');
|
||||
|
||||
const negative_swiper_right_2 = computed(() => '-' + swiper_right_2.value);
|
||||
const negative_swiper_right_3 = computed(() => '-' + swiper_right_3.value);
|
||||
|
|
@ -190,25 +200,20 @@ onMounted(() => {
|
|||
const swiper_style = computed(() => {
|
||||
let slidesPerView: number | "auto" | undefined = 'auto';
|
||||
let centeredSlides = true;
|
||||
let spaceBetween = 0;
|
||||
// 轮播图类型 一拖一，二拖一不同状态下的不同风格
|
||||
if (form.value.carousel_type == 'oneDragOne') {
|
||||
slidesPerView = 2;
|
||||
centeredSlides = false;
|
||||
spaceBetween = new_style.value.image_spacing;
|
||||
} else if (form.value.carousel_type == 'twoDragOne') {
|
||||
slidesPerView = 3;
|
||||
centeredSlides = false
|
||||
spaceBetween = new_style.value.image_spacing;
|
||||
} else if (form.value.carousel_type == 'inherit') {
|
||||
slidesPerView = 1;
|
||||
centeredSlides = true;
|
||||
spaceBetween = 0;
|
||||
}
|
||||
return {
|
||||
slidesPerView: slidesPerView,
|
||||
centeredSlides: centeredSlides,
|
||||
spaceBetween: spaceBetween
|
||||
centeredSlides: centeredSlides
|
||||
}
|
||||
});
|
||||
// 视频播放按钮显示逻辑
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="common-style-height">
|
||||
<el-form :model="form" label-width="70">
|
||||
<el-form :model="form" label-width="75">
|
||||
<template v-if="!isCommon">
|
||||
<card-container>
|
||||
<div class="mb-12">内容设置</div>
|
||||
|
|
@ -29,13 +29,23 @@
|
|||
<radius :value="form"></radius>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
<template v-if="['oneDragOne', 'twoDragOne'].includes(new_content.carousel_type)">
|
||||
<template v-if="['oneDragOne', 'twoDragOne', 'inherit'].includes(new_content.carousel_type)">
|
||||
<div class="divider-line"></div>
|
||||
<card-container>
|
||||
<div class="mb-12">轮播设置</div>
|
||||
<el-form-item label="图片间距">
|
||||
<slider v-model="form.image_spacing" :max="100"></slider>
|
||||
</el-form-item>
|
||||
<template v-if="['oneDragOne', 'twoDragOne'].includes(new_content.carousel_type)">
|
||||
<el-form-item label="图片间距">
|
||||
<slider v-model="form.image_spacing" :max="100"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据左间距">
|
||||
<slider v-model="form.data_left_spacing" :max="100"></slider>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-form-item label="数据内边距">
|
||||
<padding :value="form.data_padding"></padding>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</card-container>
|
||||
</template>
|
||||
<div class="divider-line"></div>
|
||||
|
|
|
|||
|
|
@ -34,6 +34,8 @@ interface defaultSearch {
|
|||
radius_bottom_right: number;
|
||||
is_show: string;
|
||||
image_spacing: number,
|
||||
data_left_spacing: number,
|
||||
data_padding: paddingStyle,
|
||||
indicator_style: string;
|
||||
indicator_new_location: string;
|
||||
indicator_location: string;
|
||||
|
|
@ -140,6 +142,16 @@ const defaultSearch: defaultSearch = {
|
|||
radius_bottom_right: 0,
|
||||
// 图片间距
|
||||
image_spacing: 10,
|
||||
// 数据左侧间距
|
||||
data_left_spacing: 0,
|
||||
// 数据内间距
|
||||
data_padding: {
|
||||
padding: 0,
|
||||
padding_top: 0,
|
||||
padding_bottom: 0,
|
||||
padding_left: 0,
|
||||
padding_right: 0,
|
||||
},
|
||||
// 指示器是否显示
|
||||
is_show: '1',
|
||||
// 指示器样式
|
||||
|
|
|
|||
Loading…
Reference in New Issue