修改数据魔方的轮播处理
于肖磊
parent
a021d8c2c1
commit
e8fb20686f
|
|
@ -4,6 +4,21 @@
|
|||
<el-switch v-model="form.is_show" active-value="1" inactive-value="0"/>
|
||||
</el-form-item>
|
||||
<template v-if="form.is_show == '1'">
|
||||
<el-form-item label="位置">
|
||||
<el-radio-group v-model="form.indicator_new_location">
|
||||
<el-radio value="top">上</el-radio>
|
||||
<el-radio value="bottom">下</el-radio>
|
||||
<el-radio value="left">左</el-radio>
|
||||
<el-radio value="right">右</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="对齐方式">
|
||||
<el-radio-group v-model="form.indicator_location">
|
||||
<el-radio value="flex-start">{{ ['left', 'right'].includes(form.indicator_new_location) ? '上' : '左' }}对齐</el-radio>
|
||||
<el-radio value="center">居中</el-radio>
|
||||
<el-radio value="flex-end">{{ ['left', 'right'].includes(form.indicator_new_location) ? '下' : '右' }}对齐</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="样式">
|
||||
<el-radio-group v-model="form.indicator_style" is-button>
|
||||
<el-tooltip content="点" placement="top" effect="light">
|
||||
|
|
@ -17,19 +32,6 @@
|
|||
</el-tooltip>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="位置">
|
||||
<el-radio-group v-model="form.indicator_location" is-button>
|
||||
<el-tooltip content="左对齐" placement="top" effect="light">
|
||||
<el-radio-button value="flex-start"><icon name="iconfont icon-left"></icon></el-radio-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="居中" placement="top" effect="light">
|
||||
<el-radio-button value="center"><icon name="iconfont icon-center"></icon></el-radio-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="右对齐" placement="top" effect="light">
|
||||
<el-radio-button value="flex-end"><icon name="iconfont icon-right"></icon></el-radio-button>
|
||||
</el-tooltip>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="色值">
|
||||
<div class="flex-col gap-20">
|
||||
<div class="flex-row gap-20"><span class="size-12 cr-9">选中样式</span><color-picker v-model="form.actived_color" default-color="#2A94FF" @update:value="color_picker_change($event, 'actived_color')"></color-picker></div>
|
||||
|
|
@ -39,7 +41,7 @@
|
|||
<el-form-item label="大小">
|
||||
<slider v-model="form.indicator_size" :max="100"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="isIndicatorBottom" label="下边距">
|
||||
<el-form-item v-if="isIndicatorBottom" label="边距">
|
||||
<slider v-model="form.indicator_bottom" :min="0" :max="100"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.indicator_style != 'num'" label="圆角">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="isFloatingUp" label="组件上浮">
|
||||
<slider v-model="form.floating_up" :min="0" :max="200"></slider>
|
||||
<slider v-model="form.floating_up" :min="0" :max="500"></slider>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="isFloatingUp" label="组件层级">
|
||||
<slider v-model="form.module_z_index" :min="0" :max="10"></slider>
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<div v-if="new_style.is_show == '1'" :class="{'x-middle': new_style.indicator_location == 'center', 'right-0': new_style.indicator_location == 'flex-end' }" class="dot flex abs" :style="`bottom: ${new_style.indicator_bottom}px;`">
|
||||
<div v-if="new_style.is_show == '1'" :class="['left', 'right'].includes(new_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="indicator_location_style">
|
||||
<template v-if="new_style.indicator_style == 'num'">
|
||||
<div :style="indicator_style" class="dot-item">
|
||||
<span class="num-active">{{ actived_index + 1 }}</span><span>/{{ form.carousel_list.length }}</span>
|
||||
|
|
@ -101,6 +101,9 @@ const style_img_container = computed(() => props.isCommon ? common_img_computer(
|
|||
const autoplay = ref<boolean | object>(false)
|
||||
// 图片的设置
|
||||
const img_style = computed(() => radius_computer(new_style.value) );
|
||||
//#region 指示器处理
|
||||
// 指示器选中样式
|
||||
const actived_color = computed(() => new_style.value?.actived_color || '#2A94FF' );
|
||||
// 指示器的样式
|
||||
const indicator_style = computed(() => {
|
||||
let indicator_styles = '';
|
||||
|
|
@ -113,13 +116,43 @@ const indicator_style = computed(() => {
|
|||
indicator_styles += `font-size: ${size}px;`;
|
||||
} else if (new_style.value.indicator_style == 'elliptic') {
|
||||
indicator_styles += `background: ${new_style.value?.color || '#DDDDDD'};`;
|
||||
indicator_styles += `width: ${size * 3}px; height: ${size}px;`;
|
||||
if (['left', 'right'].includes(new_style.value.indicator_new_location)) {
|
||||
indicator_styles += `width: ${ size }px; height: ${size * 3}px;`;
|
||||
} else {
|
||||
indicator_styles += `width: ${size * 3}px; height: ${size}px;`;
|
||||
}
|
||||
} else {
|
||||
indicator_styles += `background: ${new_style.value?.color || '#DDDDDD'};`;
|
||||
indicator_styles += `width: ${size}px; height: ${size}px;`;
|
||||
}
|
||||
return indicator_styles;
|
||||
});
|
||||
// 根据指示器的位置来处理 对齐方式的处理
|
||||
const indicator_location_style = computed(() => {
|
||||
const { indicator_new_location, indicator_location, indicator_bottom } = new_style.value;
|
||||
let styles = '';
|
||||
if (['left', 'right'].includes(indicator_new_location)) {
|
||||
if (indicator_location == 'flex-start') {
|
||||
styles += `top: 0px;`;
|
||||
} else if (indicator_location == 'center') {
|
||||
styles += `top: 50%; transform: translateY(-50%);`;
|
||||
} else {
|
||||
styles += `bottom: 0px;`;
|
||||
}
|
||||
} else {
|
||||
if (indicator_location == 'flex-start') {
|
||||
styles += `left: 0px;`;
|
||||
} else if (indicator_location == 'center') {
|
||||
styles += `left: 50%; transform: translateX(-50%);`;
|
||||
} else {
|
||||
styles += `right: 0px;`;
|
||||
}
|
||||
}
|
||||
// 如果有位置的处理，就使用指示器的位置处理，否则的话就用下边距处理
|
||||
styles += `${ !isEmpty(indicator_new_location) ? `${indicator_new_location}: ${ indicator_bottom }px;` : `bottom: ${ indicator_bottom }px;` }`;
|
||||
return styles;
|
||||
});
|
||||
//#endregion
|
||||
const seat_list = computed(() => {
|
||||
if (form.value.carousel_list.length > 3) {
|
||||
return [];
|
||||
|
|
@ -150,8 +183,6 @@ const interval_type = ref('');
|
|||
const carouselKey = ref('0');
|
||||
// 轮播图滚动位置
|
||||
const actived_index = ref(0);
|
||||
// 轮播图显示样式
|
||||
const actived_color = computed(() => new_style.value?.actived_color || '#2A94FF' );
|
||||
const img_fit = computed(() => form.value.img_fit );
|
||||
// 记录当前显示的轮播图的数据
|
||||
const interval_list = ref({
|
||||
|
|
@ -268,18 +299,12 @@ const slideChange = (swiper: { realIndex: number }) => {
|
|||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.dot {
|
||||
z-index: 1;
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
.dot-item {
|
||||
margin: 0 0.3rem;
|
||||
&.active {
|
||||
background: v-bind(actived_color) !important;
|
||||
}
|
||||
.num-active {
|
||||
color: v-bind(actived_color) !important;
|
||||
}
|
||||
.dot-item {
|
||||
&.active {
|
||||
background: v-bind(actived_color) !important;
|
||||
}
|
||||
.num-active {
|
||||
color: v-bind(actived_color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,94 +1,44 @@
|
|||
<template>
|
||||
<template v-if="data_source_content_list.length > 0 && form.data_source_direction == '0'">
|
||||
<div v-for="(item1, index1) in data_source_content_list" :key="index1" :style="style_container">
|
||||
<div class="w h" :style="style_img_container">
|
||||
<div class="w h re custom-other">
|
||||
<div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (form.custom_list.length - 1) - index}">
|
||||
<template v-if="item.key == 'text'">
|
||||
<model-text :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-text>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'img'">
|
||||
<model-image :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-image>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'auxiliary-line'">
|
||||
<model-lines :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-lines>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'icon'">
|
||||
<model-icon :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-icon>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'panel'">
|
||||
<model-panel :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-panel>
|
||||
</template>
|
||||
<div :style="style_container">
|
||||
<div class="w h re" :style="style_img_container">
|
||||
<template v-if="data_source_content_list.length > 0 && form.data_source_direction == '0'">
|
||||
<div v-for="(item1, index1) in data_source_content_list" :key="index1" :style="style_chunk_container">
|
||||
<div class="w h" :style="style_chunk_img_container">
|
||||
<data-rendering :custom-list="form.custom_list" :source-list="item1" :source-type="form?.data_source || ''" :data-height="form.height" :scale="scale"></data-rendering>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else-if="data_source_content_list.length > 0 && ['1', '2'].includes(form.data_source_direction)" class="re oh" :style="form.data_source_direction == '1' ? `height:100%;` : `height: ${ swiper_height }px;`">
|
||||
<swiper :key="carouselKey" class="w flex" :direction="form.data_source_direction == '1' ? 'horizontal': 'vertical'" :height="swiper_height" :loop="true" :autoplay="autoplay" :slides-per-view="form.data_source_carousel_col" :slides-per-group="slides_per_group" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange">
|
||||
<swiper-slide v-for="(item1, index1) in data_source_content_list" :key="index1">
|
||||
<div :style="style_container">
|
||||
<div class="w h" :style="style_img_container">
|
||||
<div class="w re custom-other">
|
||||
<div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (form.custom_list.length - 1) - index}">
|
||||
<template v-if="item.key == 'text'">
|
||||
<model-text :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-text>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'img'">
|
||||
<model-image :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-image>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'auxiliary-line'">
|
||||
<model-lines :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-lines>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'icon'">
|
||||
<model-icon :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-icon>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'panel'">
|
||||
<model-panel :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-panel>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<div v-if="new_style.is_show == '1' && dot_list.length > 0" :class="{'x-middle': new_style.indicator_location == 'center', 'right-0': new_style.indicator_location == 'flex-end' }" class="dot flex abs" :style="`bottom: ${new_style.indicator_bottom}px;`">
|
||||
<template v-if="new_style.indicator_style == 'num'">
|
||||
<div :style="indicator_style" class="dot-item">
|
||||
<span class="num-active">{{ actived_index + 1 }}</span
|
||||
><span>/{{ dot_list.length }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else-if="data_source_content_list.length > 0 && ['1', '2'].includes(form.data_source_direction)" class="oh" :style="form.data_source_direction == '2' ? `height:100%;` : `height: ${ swiper_height }px;`">
|
||||
<swiper :key="carouselKey" class="w flex" :direction="form.data_source_direction == '2' ? 'horizontal': 'vertical'" :height="swiper_height" :loop="true" :autoplay="autoplay" :slides-per-view="form.data_source_carousel_col" :slides-per-group="slides_per_group" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange">
|
||||
<swiper-slide v-for="(item1, index1) in data_source_content_list" :key="index1">
|
||||
<div :style="style_chunk_container">
|
||||
<div class="w h" :style="style_chunk_img_container">
|
||||
<data-rendering :custom-list="form.custom_list" :source-list="item1" :source-type="form?.data_source || ''" :data-height="form.height" :scale="scale"></data-rendering>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<div v-if="new_style.is_show == '1' && dot_list.length > 0" :class="['left', 'right'].includes(new_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="indicator_location_style">
|
||||
<template v-if="new_style.indicator_style == 'num'">
|
||||
<div :style="indicator_style" class="dot-item">
|
||||
<span class="num-active">{{ actived_index + 1 }}</span><span>/{{ dot_list.length }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div v-for="(item, index) in dot_list" :key="index" :style="indicator_style" :class="{ 'dot-item': true, active: actived_index == index }" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div v-for="(item, index) in dot_list" :key="index" :style="indicator_style" :class="{ 'dot-item': true, active: actived_index == index }" />
|
||||
<div :style="style_chunk_container">
|
||||
<div class="w h" :style="style_chunk_img_container">
|
||||
<data-rendering :custom-list="form.custom_list" :data-height="form.height" :scale="scale"></data-rendering>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div :style="style_container">
|
||||
<div class="w h" :style="style_img_container">
|
||||
<div class="w h re custom-other">
|
||||
<div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (form.custom_list.length - 1) - index}">
|
||||
<template v-if="item.key == 'text'">
|
||||
<model-text :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-text>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'img'">
|
||||
<model-image :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-image>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'auxiliary-line'">
|
||||
<model-lines :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-lines>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'icon'">
|
||||
<model-icon :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-icon>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'panel'">
|
||||
<model-panel :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-panel>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { isEmpty, cloneDeep } from 'lodash';
|
||||
|
|
@ -135,16 +85,14 @@ onBeforeMount(() => {
|
|||
}
|
||||
});
|
||||
//#region 计算比例大小，和每块当前的大小
|
||||
const custom_height = computed(() => form.value.height * scale.value + 'px');
|
||||
const scale = ref(1);
|
||||
const percentage_count = (val: number) => {
|
||||
return val * scale.value + 'px';
|
||||
};
|
||||
// 计算整体宽度和比例
|
||||
watchEffect(() => {
|
||||
const { margin_left, margin_right, padding_left, padding_right } = new_style.value.common_style;
|
||||
const { common_style, data_style } = new_style.value;
|
||||
const outer_spacing = common_style.margin_left + common_style.margin_right + common_style.padding_left + common_style.padding_right;
|
||||
const internal_spacing = data_style.margin_left + data_style.margin_right + data_style.padding_left + data_style.padding_right;
|
||||
// 根据容器宽度来计算内部大小
|
||||
const width = 390 - margin_left - margin_right - padding_left - padding_right - props.outerContainerPadding;
|
||||
const width = 390 - outer_spacing - internal_spacing - props.outerContainerPadding;
|
||||
// 获得对应宽度的比例
|
||||
scale.value = width / 390;
|
||||
});
|
||||
|
|
@ -153,6 +101,9 @@ watchEffect(() => {
|
|||
const style_container = computed(() => common_styles_computer(new_style.value.common_style));
|
||||
const style_img_container = computed(() => common_img_computer(new_style.value.common_style));
|
||||
|
||||
const style_chunk_container = computed(() => common_styles_computer(new_style.value.data_style));
|
||||
const style_chunk_img_container = computed(() => common_img_computer(new_style.value.data_style));
|
||||
|
||||
// 数据来源的内容
|
||||
let data_source_content_list = computed(() => {
|
||||
if (['goods', 'article', 'brand'].includes(form.value.data_source)) {
|
||||
|
|
@ -191,9 +142,9 @@ watchEffect(() => {
|
|||
// 判断是平移还是整屏滚动
|
||||
slides_per_group.value = new_style.value.rolling_fashion == 'translation' ? 1 : form.value.data_source_carousel_col;
|
||||
const num = new_style.value.rolling_fashion == 'translation' ? data_source_content_list.value.length : Math.ceil(data_source_content_list.value.length / form.value.data_source_carousel_col);
|
||||
const { padding_top, padding_bottom, margin_bottom, margin_top } = new_style.value.common_style;
|
||||
const { padding_top, padding_bottom, margin_bottom, margin_top } = new_style.value.data_style;
|
||||
// 轮播图高度控制
|
||||
if (form.value.data_source_direction == '1') {
|
||||
if (form.value.data_source_direction == '2') {
|
||||
swiper_height.value = form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top;
|
||||
} else {
|
||||
swiper_height.value = (form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top) * form.value.data_source_carousel_col;
|
||||
|
|
@ -215,7 +166,11 @@ const indicator_style = computed(() => {
|
|||
indicator_styles += `font-size: ${size}px;`;
|
||||
} else if (new_style.value.indicator_style == 'elliptic') {
|
||||
indicator_styles += `background: ${new_style.value?.color || '#DDDDDD'};`;
|
||||
indicator_styles += `width: ${size * 3}px; height: ${size}px;`;
|
||||
if (['left', 'right'].includes(new_style.value.indicator_new_location)) {
|
||||
indicator_styles += `width: ${ size }px; height: ${size * 3}px;`;
|
||||
} else {
|
||||
indicator_styles += `width: ${size * 3}px; height: ${size}px;`;
|
||||
}
|
||||
} else {
|
||||
indicator_styles += `background: ${new_style.value?.color || '#DDDDDD'};`;
|
||||
indicator_styles += `width: ${size}px; height: ${size}px;`;
|
||||
|
|
@ -228,27 +183,41 @@ const slideChange = (swiper: { realIndex: number }) => {
|
|||
actived_index.value = new_style.value.rolling_fashion == 'translation' ? swiper.realIndex : (swiper.realIndex / form.value.data_source_carousel_col) > 0 ? (swiper.realIndex / form.value.data_source_carousel_col) : 0;
|
||||
};
|
||||
//#endregion
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.custom-other {
|
||||
height: v-bind(custom_height);
|
||||
}
|
||||
.dot {
|
||||
z-index: 1;
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
.dot-item {
|
||||
margin: 0 0.3rem;
|
||||
&.active {
|
||||
background: v-bind(actived_color) !important;
|
||||
//#region 指示器位置
|
||||
// 根据指示器的位置来处理 对齐方式的处理
|
||||
const indicator_location_style = computed(() => {
|
||||
const { indicator_new_location, indicator_location, indicator_bottom } = new_style.value;
|
||||
let styles = '';
|
||||
if (['left', 'right'].includes(indicator_new_location)) {
|
||||
if (indicator_location == 'flex-start') {
|
||||
styles += `top: 0px;`;
|
||||
} else if (indicator_location == 'center') {
|
||||
styles += `top: 50%; transform: translateY(-50%);`;
|
||||
} else {
|
||||
styles += `bottom: 0px;`;
|
||||
}
|
||||
.num-active {
|
||||
color: v-bind(actived_color) !important;
|
||||
} else {
|
||||
if (indicator_location == 'flex-start') {
|
||||
styles += `left: 0px;`;
|
||||
} else if (indicator_location == 'center') {
|
||||
styles += `left: 50%; transform: translateX(-50%);`;
|
||||
} else {
|
||||
styles += `right: 0px;`;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-content {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
// 如果有位置的处理，就使用指示器的位置处理，否则的话就用下边距处理
|
||||
styles += `${ !isEmpty(indicator_new_location) ? `${indicator_new_location}: ${ indicator_bottom }px;` : `bottom: ${ indicator_bottom }px;` }`;
|
||||
return styles;
|
||||
});
|
||||
//#endregion
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.dot-item {
|
||||
&.active {
|
||||
background: v-bind(actived_color) !important;
|
||||
}
|
||||
.num-active {
|
||||
color: v-bind(actived_color) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -17,16 +17,24 @@
|
|||
<el-form-item label="铺满方式">
|
||||
<el-radio-group v-model="form.data_source_direction">
|
||||
<el-radio value="0">纵向展示</el-radio>
|
||||
<el-radio value="2">纵向滑动</el-radio>
|
||||
<el-radio value="1">横向滑动</el-radio>
|
||||
<el-radio value="1">纵向滑动</el-radio>
|
||||
<el-radio value="2">横向滑动</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="['1', '2'].includes(form.data_source_direction)" label="每屏显示">
|
||||
<el-radio-group v-model="form.data_source_carousel_col">
|
||||
<el-radio :value="1">单列展示</el-radio>
|
||||
<el-radio :value="2">两列展示</el-radio>
|
||||
<el-radio :value="3">三列展示</el-radio>
|
||||
<el-radio :value="4">四列展示</el-radio>
|
||||
<template v-if="form.data_source_direction == '2'">
|
||||
<el-radio :value="1">单列展示</el-radio>
|
||||
<el-radio :value="2">两列展示</el-radio>
|
||||
<el-radio :value="3">三列展示</el-radio>
|
||||
<el-radio :value="4">四列展示</el-radio>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-radio :value="1">单行展示</el-radio>
|
||||
<el-radio :value="2">两行展示</el-radio>
|
||||
<el-radio :value="3">三行展示</el-radio>
|
||||
<el-radio :value="4">四行展示</el-radio>
|
||||
</template>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
|
|
|
|||
|
|
@ -23,9 +23,33 @@
|
|||
<card-container>
|
||||
<carousel-indicator :value="form"></carousel-indicator>
|
||||
</card-container>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<card-container>
|
||||
<div class="mb-12">数据样式</div>
|
||||
<el-form-item label="背景">
|
||||
<div class="flex-col gap-10 w">
|
||||
<div class="size-12">背景色</div>
|
||||
<mult-color-picker :value="form.data_style.color_list" :type="form.data_style.direction" @update:value="mult_color_picker_event"></mult-color-picker>
|
||||
<div class="flex-row jc-sb align-c">
|
||||
<div class="size-12">背景图</div>
|
||||
<bg-btn-style v-model="form.data_style.background_img_style"></bg-btn-style>
|
||||
</div>
|
||||
<upload v-model="form.data_style.background_img" :limit="1"></upload>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="外间距">
|
||||
<margin :value="form.data_style"></margin>
|
||||
</el-form-item>
|
||||
<el-form-item label="内间距">
|
||||
<padding :value="form.data_style"></padding>
|
||||
</el-form-item>
|
||||
<el-form-item label="圆角">
|
||||
<radius :value="form.data_style"></radius>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
</el-form>
|
||||
<div class="bg-f5 divider-line" />
|
||||
</template>
|
||||
<div class="bg-f5 divider-line" />
|
||||
<common-styles :value="form.common_style" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -47,6 +71,10 @@ const state = reactive({
|
|||
// 如果需要解构，确保使用toRefs
|
||||
const { form, data } = toRefs(state);
|
||||
|
||||
const mult_color_picker_event = (arry: color_list[], type: number) => {
|
||||
form.value.data_style.color_list = arry;
|
||||
form.value.data_style.direction = type.toString();
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.topic {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<template>
|
||||
<div class="w h oh" :style="props.type === 'img' ? '' : style_container">
|
||||
<div class="w h" :style="props.type === 'img' ? '' : style_img_container">
|
||||
<el-carousel :key="form.data_style.carouselKey" indicator-position="none" :interval="form.data_style.interval_time * 1000" arrow="never" :direction="form.data_style.rotation_direction" :autoplay="form.data_style.is_roll == '1' ? true : false" @change="carousel_change">
|
||||
<el-carousel-item v-for="(item1, index1) in form.data_content.list" :key="index1">
|
||||
<div ref="card_container" class="w h oh" :style="props.type === 'img' ? '' : style_container">
|
||||
<div class="w re oh" :style="props.type === 'img' ? `height: ${ outer_height }px;` : `height: ${ outer_height }px;${ style_img_container }`">
|
||||
<swiper :key="form.data_style.carouselKey" class="w flex" :direction="form.data_style.rotation_direction" :loop="true" :autoplay="autoplay" :slides-per-view="slides_per_view" :slides-per-group="slides_per_group" :space-between="props.type === 'img' ? 0 : form.data_style.data_goods_gap" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange">
|
||||
<swiper-slide v-for="(item1, index1) in form.data_content.list" :key="index1">
|
||||
<template v-if="props.type === 'img'">
|
||||
<image-empty v-model="item1.carousel_img[0]" :style="form.data_style.get_img_radius" :fit="form.data_content.img_fit"></image-empty>
|
||||
</template>
|
||||
<template v-else>
|
||||
<product-list-show :outerflex="form.data_content.goods_outerflex" :flex="form.data_content.goods_flex" :num="form.data_content.goods_num" :actived="props.actived" :is-show="form.data_content.is_show" :chunk-padding="form.data_style.chunk_padding" :value="item1.split_list" :good-style="props.goodStyle" :content-img-radius="form.data_style.get_img_radius"></product-list-show>
|
||||
<product-list-show :outerflex="form.data_content.goods_outerflex" :flex="form.data_content.goods_flex" :num="show_num" :actived="props.actived" :is-show="form.data_content.is_show" :chunk-padding="form.data_style.chunk_padding" :value="item1.split_list" :good-style="props.goodStyle" :content-img-radius="form.data_style.get_img_radius"></product-list-show>
|
||||
</template>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -18,6 +18,11 @@
|
|||
<script setup lang="ts">
|
||||
import { gradient_computer, radius_computer, padding_computer, background_computer } from "@/utils";
|
||||
import { isEmpty } from "lodash";
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||
import { Autoplay } from 'swiper/modules';
|
||||
import 'swiper/css';
|
||||
const modules = [Autoplay];
|
||||
|
||||
interface Props {
|
||||
value: any;
|
||||
type: string;
|
||||
|
|
@ -30,15 +35,6 @@ const props = withDefaults(defineProps<Props>(), {
|
|||
});
|
||||
|
||||
const form = computed(() => props.value);
|
||||
interface new_style {
|
||||
data_color_list: color_list[];
|
||||
data_direction: string;
|
||||
data_radius: radiusStyle;
|
||||
data_chunk_padding: paddingStyle;
|
||||
data_background_img: uploadList[];
|
||||
data_background_img_style: string;
|
||||
}
|
||||
|
||||
// 用于样式显示
|
||||
const style_container = computed(() => {
|
||||
if (!isEmpty(form.value.data_style)) {
|
||||
|
|
@ -66,11 +62,68 @@ const style_img_container = computed(() => {
|
|||
});
|
||||
|
||||
const emits = defineEmits(['carousel_change']);
|
||||
const carousel_change = (index: number) => {
|
||||
emits('carousel_change', index);
|
||||
const slideChange = (swiper: { realIndex: number }) => {
|
||||
emits('carousel_change', swiper.realIndex);
|
||||
};
|
||||
|
||||
const autoplay = ref<boolean | object>(false);
|
||||
const slides_per_group = ref(1);
|
||||
const slides_per_view = ref(1);
|
||||
const card_container = ref<HTMLElement | null>(null);
|
||||
const outer_height = ref(0);
|
||||
const show_num = ref(0);
|
||||
// 内容参数的集合
|
||||
watchEffect(() => {
|
||||
// 是否滚动
|
||||
if (form.value.data_style.is_roll == '1') {
|
||||
autoplay.value = {
|
||||
delay: (form.value.data_style.interval_time || 2) * 1000,
|
||||
pauseOnMouseEnter: true,
|
||||
};
|
||||
} else {
|
||||
autoplay.value = false;
|
||||
}
|
||||
// 图片时的处理
|
||||
if (props.type === 'img') {
|
||||
slides_per_group.value = 1;
|
||||
slides_per_view.value = 1; // 能够同时显示的slides数量
|
||||
} else {
|
||||
// 商品时的处理逻辑
|
||||
const { goods_outerflex, goods_num } = form.value.data_content;
|
||||
const { rotation_direction, rolling_fashion } = form.value.data_style;
|
||||
// 判断是平移还是整屏滚动, 平移的时候是一个为1组
|
||||
if (rolling_fashion == 'translation') {
|
||||
slides_per_group.value = 1;
|
||||
// 如果是商品是横排的，轮播也是横排的，就不对商品进行拆分/如果商品是竖排的，轮播也是竖排的，不对商品进行拆分
|
||||
if ((goods_outerflex == 'row' && rotation_direction == 'horizontal') || (goods_outerflex == 'col' && rotation_direction == 'vertical')) {
|
||||
slides_per_view.value = goods_num; // 能够同时显示的slides数量
|
||||
show_num.value = 1; // 一屏显示的数量 用于商品内部处理显示
|
||||
} else {
|
||||
slides_per_view.value = 1; // 能够同时显示的slides数量
|
||||
show_num.value = goods_num; // 一屏显示的数量 用于商品内部处理显示
|
||||
}
|
||||
} else {
|
||||
// 切屏的时候为多个为一组
|
||||
show_num.value = goods_num; // 一屏显示的数量 用于商品内部处理显示
|
||||
slides_per_group.value = 1;
|
||||
slides_per_view.value = 1; // 能够同时显示的slides数量
|
||||
}
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
// 外层高度
|
||||
if (card_container.value) {
|
||||
outer_height.value = card_container.value?.clientHeight;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
:deep(.swiper) {
|
||||
height: 100%;
|
||||
.swiper-slide {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
|
||||
</template>
|
||||
<div v-if="!isEmpty(isShow)" class="flex-col w h tl jc-sb">
|
||||
<div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="props.goodStyle.goods_title_style">{{ item.title }}</div>
|
||||
<div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="props.goodStyle.goods_title_style + `height: ${ (props.goodStyle.goods_title_size + 3) * 2 }px;`">{{ item.title }}</div>
|
||||
<div v-if="isShow.includes('price')" class="identifying" :style="props.goodStyle.goods_price_style">
|
||||
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
|
||||
<template v-if="isShow.includes('price_unit')">
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
<template v-else>
|
||||
<image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
|
||||
</template>
|
||||
<div v-if="isShow.includes('price')" class="price-suspension text-line-1" :style="props.goodStyle.goods_price_style">
|
||||
<div v-if="isShow.includes('price')" class="price-suspension text-line-1" :style="props.goodStyle.goods_price_style + `height: ${ props.goodStyle.goods_title_size + 3 }px;`">
|
||||
{{ item.show_price_symbol }}{{ item.min_price }}
|
||||
<template v-if="isShow.includes('price_unit')">
|
||||
{{ item.show_price_unit }}
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
<image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
|
||||
</template>
|
||||
<div v-if="!isEmpty(isShow)" class="flex-col w tl jc-sb" :style="`${ padding_computer(props.goodStyle.goods_chunk_padding) }`">
|
||||
<div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="props.goodStyle.goods_title_style">{{ item.title }}</div>
|
||||
<div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="props.goodStyle.goods_title_style + `height: ${ (props.goodStyle.goods_title_size + 3) * 2 }px;`">{{ item.title }}</div>
|
||||
<div v-if="isShow.includes('price')" class="identifying" :style="props.goodStyle.goods_price_style">
|
||||
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
|
||||
<template v-if="isShow.includes('price_unit')">
|
||||
|
|
@ -137,7 +137,6 @@ const style_img_container = computed(() => {
|
|||
}
|
||||
});
|
||||
const split_list = computed(() => props.value || {});
|
||||
const gap_height = computed(() => 20 / 3 + 'px');
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -168,9 +167,6 @@ const gap_height = computed(() => 20 / 3 + 'px');
|
|||
bottom: 0.4rem;
|
||||
border-radius: 0.8rem;
|
||||
}
|
||||
.shop-max-height{
|
||||
max-height: calc((100% / 3) - v-bind(gap_height));
|
||||
}
|
||||
.half-width {
|
||||
width: 50%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,50 +2,14 @@
|
|||
<template v-if="data_source_content_list.length > 0">
|
||||
<div v-for="(item1, index1) in data_source_content_list" :key="index1" class="oh" :style="style_container">
|
||||
<div class="w h oh" :style="style_img_container">
|
||||
<div class="w h re custom-other oh">
|
||||
<div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (form.custom_list.length - 1) - index}">
|
||||
<template v-if="item.key == 'text'">
|
||||
<model-text :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-text>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'img'">
|
||||
<model-image :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-image>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'auxiliary-line'">
|
||||
<model-lines :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-lines>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'icon'">
|
||||
<model-icon :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-icon>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'panel'">
|
||||
<model-panel :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="item1" :source-type="form?.data_source || ''" :is-percentage="true"></model-panel>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<data-rendering :custom-list="form.custom_list" :source-list="item1" :source-type="form?.data_source || ''" :data-height="form.height" :scale="scale"></data-rendering>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="oh" :style="style_container">
|
||||
<div class="w h oh" :style="style_img_container">
|
||||
<div class="w h re custom-other oh">
|
||||
<div v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (form.custom_list.length - 1) - index}">
|
||||
<template v-if="item.key == 'text'">
|
||||
<model-text :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-text>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'img'">
|
||||
<model-image :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-image>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'auxiliary-line'">
|
||||
<model-lines :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-lines>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'icon'">
|
||||
<model-icon :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-icon>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'panel'">
|
||||
<model-panel :key="item.com_data" :value="item.com_data" :scale="scale" :is-percentage="true"></model-panel>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<data-rendering :custom-list="form.custom_list" :data-height="form.height" :scale="scale"></data-rendering>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -132,7 +96,6 @@ const style_img_container = computed(() => {
|
|||
return '';
|
||||
}
|
||||
});
|
||||
const custom_height = computed(() => form.value.height * scale.value + 'px');
|
||||
watchEffect(() => {
|
||||
// 重新赋值
|
||||
form.value = props.value.data_content;
|
||||
|
|
@ -146,11 +109,4 @@ watchEffect(() => {
|
|||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.custom-other {
|
||||
height: v-bind(custom_height);
|
||||
}
|
||||
.main-content {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,12 @@
|
|||
<el-radio value="vertical">纵向</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="['goods', 'custom'].includes(tabs_content.data_type)" label="滚动方式">
|
||||
<el-radio-group v-model="form.rolling_fashion">
|
||||
<el-radio value="translation">平移</el-radio>
|
||||
<el-radio value="cut-screen">切屏</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="间隔时间">
|
||||
<slider v-model="form.interval_time" :min="1" :max="100"></slider>
|
||||
</el-form-item>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<template v-if="form.style_actived == 7">
|
||||
<div class="flex-row align-c jc-c style-size flex-wrap">
|
||||
<div v-for="(item, index) in data_magic_list" :key="index" :style="`${ item.data_style.background_style } ${ content_radius }`" :class="['img-spacing-border', { 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]">
|
||||
<div class="w h" :style="`${ item.data_style.background_img_style }`">
|
||||
<div class="w h re" :style="`${ item.data_style.background_img_style }`">
|
||||
<template v-if="item.data_content.data_type == 'goods'">
|
||||
<div class="w h flex-col" :style="`${ padding_computer(item.data_style.chunk_padding) };gap: ${ item.data_style.title_data_gap }px;`">
|
||||
<div v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle))" :class="'tl' + (item.data_style.title_line == '1' ? ' flex-row align-c' : ' flex-col')" :style="'gap:' + item.data_style.title_gap + 'px;'">
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
<template v-else>
|
||||
<videoIndex :value="item.data_content" :data-style="item.data_style"></videoIndex>
|
||||
</template>
|
||||
<div v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs" :style="`bottom: ${item.data_style?.indicator_bottom}px;`">
|
||||
<div v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="['left', 'right'].includes(item.data_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="item.data_style.indicator_location_style">
|
||||
<template v-if="item.data_style.indicator_style == 'num'">
|
||||
<div :style="item.data_style.indicator_styles" class="dot-item">
|
||||
<span class="num-active" :style="`color: ${ item.data_style.actived_color }`">{{ item.actived_index + 1 }}</span><span>/{{ item.data_content.list.length }}</span>
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
</template>
|
||||
<template v-else>
|
||||
<div v-for="(item, index) in data_magic_list" :key="index" class="cube-selected img-spacing-border" :style="`${ selected_style(item) } ${ item.data_style.background_style } ${ content_radius }`">
|
||||
<div class="w h" :style="`${ item.data_style.background_img_style }`">
|
||||
<div class="w h re" :style="`${ item.data_style.background_img_style }`">
|
||||
<template v-if="item.data_content.data_type == 'goods'">
|
||||
<div class="w h flex-col" :style="`${ padding_computer(item.data_style.chunk_padding) };gap: ${ item.data_style.title_data_gap }px;`">
|
||||
<div v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" :class="'tl' + (item.data_style.title_line == '1' ? ' flex-row align-c' : ' flex-col')" :style="'gap:' + item.data_style.title_gap + 'px;'">
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
</template>
|
||||
<p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
|
||||
</div>
|
||||
<div class="w h">
|
||||
<div class="w h flex-1">
|
||||
<magic-carousel :value="item" :good-style="item.data_style" type="product" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
<template v-else>
|
||||
<videoIndex :value="item.data_content" :data-style="item.data_style"></videoIndex>
|
||||
</template>
|
||||
<div v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs" :style="`bottom: ${item.data_style?.indicator_bottom}px;`">
|
||||
<div v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="['left', 'right'].includes(item.data_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="item.data_style.indicator_location_styles">
|
||||
<template v-if="item.data_style.indicator_style == 'num'">
|
||||
<div :style="item.data_style.indicator_styles" class="dot-item">
|
||||
<span class="num-active" :style="`color: ${ item.data_style.actived_color }`">{{ item.actived_index + 1 }}</span><span>/{{ item.data_content.list.length }}</span>
|
||||
|
|
@ -200,13 +200,44 @@ const indicator_style = (item: any) => {
|
|||
styles += `font-size: ${size}px;`;
|
||||
} else if (item.indicator_style == 'elliptic') {
|
||||
styles += `background: ${item?.color || '#DDDDDD'};`;
|
||||
styles += `width: ${size * 3}px; height: ${size}px;`;
|
||||
if (['left', 'right'].includes(item.indicator_new_location)) {
|
||||
styles += `width: ${ size }px; height: ${size * 3}px;`;
|
||||
} else {
|
||||
styles += `width: ${size * 3}px; height: ${size}px;`;
|
||||
}
|
||||
} else {
|
||||
styles += `background: ${item?.color || '#DDDDDD'};`;
|
||||
styles += `width: ${size}px; height: ${size}px;`;
|
||||
}
|
||||
return styles;
|
||||
};
|
||||
//#region 指示器位置
|
||||
// 根据指示器的位置来处理 对齐方式的处理
|
||||
const indicator_location_style = (item: any) => {
|
||||
const { indicator_new_location, indicator_location, indicator_bottom } = item;
|
||||
let styles = '';
|
||||
if (['left', 'right'].includes(indicator_new_location)) {
|
||||
if (indicator_location == 'flex-start') {
|
||||
styles += `top: 0px;`;
|
||||
} else if (indicator_location == 'center') {
|
||||
styles += `top: 50%; transform: translateY(-50%);`;
|
||||
} else {
|
||||
styles += `bottom: 0px;`;
|
||||
}
|
||||
} else {
|
||||
if (indicator_location == 'flex-start') {
|
||||
styles += `left: 0px;`;
|
||||
} else if (indicator_location == 'center') {
|
||||
styles += `left: 50%; transform: translateX(-50%);`;
|
||||
} else {
|
||||
styles += `right: 0px;`;
|
||||
}
|
||||
}
|
||||
// 如果有位置的处理，就使用指示器的位置处理，否则的话就用下边距处理
|
||||
styles += `${ !isEmpty(indicator_new_location) ? `${indicator_new_location}: ${ indicator_bottom }px;` : `bottom: ${ indicator_bottom }px;` }`;
|
||||
return styles;
|
||||
};
|
||||
//#endregion
|
||||
const style_actived_color = (item: any, index: number) => {
|
||||
return item.actived_index == index ? `background: ${ item.data_style.actived_color };` : ''
|
||||
}
|
||||
|
|
@ -262,25 +293,58 @@ const default_list = {
|
|||
** @param {Number} num 显示数量
|
||||
** @return {Array}
|
||||
*/
|
||||
const commodity_list = (list: any[], num: number) => {
|
||||
if (list.length > 0) {
|
||||
// 深拷贝一下，确保不会出现问题
|
||||
const goods_list = cloneDeep(list).map((item: any) => ({
|
||||
...item.data,
|
||||
title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
|
||||
new_cover: item.new_cover,
|
||||
}));
|
||||
// 存储数据显示
|
||||
let nav_list = [];
|
||||
const commodity_list = (list: any[], num: number, data_content: any, data_style: any) => {
|
||||
if (list.length > 0) {
|
||||
// 深拷贝一下，确保不会出现问题
|
||||
const goods_list = cloneDeep(list).map((item: any) => ({
|
||||
...item.data,
|
||||
title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
|
||||
new_cover: item.new_cover,
|
||||
}));
|
||||
// 存储数据显示
|
||||
let nav_list: { split_list: any[] }[] = [];
|
||||
// 如果是滑动，需要根据每行显示的个数来区分来拆分数据 translation 表示的是平移
|
||||
if (data_style.rolling_fashion != 'translation') {
|
||||
// 拆分的数量
|
||||
const split_num = Math.ceil(goods_list.length / num);
|
||||
for (let i = 0; i < split_num; i++) {
|
||||
nav_list.push({ split_list: goods_list.slice(i * num, (i + 1) * num) });
|
||||
}
|
||||
return nav_list;
|
||||
} else {
|
||||
return rotation_calculation(goods_list, num, data_content, data_style)
|
||||
}
|
||||
} else {
|
||||
const list = Array(num).fill(default_list);
|
||||
if (data_style.rolling_fashion != 'translation') {
|
||||
return [{ split_list: list }];
|
||||
} else {
|
||||
return rotation_calculation(list, num, data_content, data_style)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const rotation_calculation = (list: Array<any>, num: number, data_content: any, data_style: any) => {
|
||||
// 存储数据显示
|
||||
let nav_list: { split_list: any[] }[] = [];
|
||||
const goods_outerflex = data_content.goods_outerflex;
|
||||
const rotation_direction = data_style.rotation_direction;
|
||||
// 如果是商品是横排的，轮播也是横排的，就不对商品进行拆分/如果商品是竖排的，轮播也是竖排的，不对商品进行拆分
|
||||
if ((goods_outerflex == 'row' && rotation_direction == 'horizontal') || (goods_outerflex == 'col' && rotation_direction == 'vertical')) {
|
||||
list.forEach((item) => {
|
||||
nav_list.push({
|
||||
split_list: [item],
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// 拆分的数量
|
||||
const split_num = Math.ceil(goods_list.length / num);
|
||||
const split_num = Math.ceil(list.length / num);
|
||||
for (let i = 0; i < split_num; i++) {
|
||||
nav_list.push({ split_list: goods_list.slice(i * num, (i + 1) * num) });
|
||||
nav_list.push({ split_list: list.slice(i * num, (i + 1) * num) });
|
||||
}
|
||||
return nav_list;
|
||||
} else {
|
||||
return [{ split_list: Array(num).fill(default_list)}];
|
||||
}
|
||||
return nav_list;
|
||||
}
|
||||
|
||||
const old_list = ref<any>({});
|
||||
|
|
@ -295,19 +359,20 @@ watch(props.value.content, (val) => {
|
|||
item.actived_index = 0;
|
||||
// 指示器样式
|
||||
data_style.indicator_styles = indicator_style(data_style);
|
||||
data_style.indicator_location_styles = indicator_location_style(data_style);
|
||||
data_style.background_style = gradient_computer(data_style);
|
||||
data_style.background_img_style = background_computer(data_style);
|
||||
const radius = !isEmpty(data_style.img_radius) ? data_style.img_radius : { radius: 4, radius_top_left: 4, radius_top_right: 4, radius_bottom_left: 4, radius_bottom_right: 4 };
|
||||
data_style.get_img_radius = radius_computer(radius);
|
||||
|
||||
// 商品名称和价格样式
|
||||
data_style.goods_title_style = goods_trends_config(item.data_style, 'title') + `line-height: ${ item.data_style.goods_title_size + 3 }px;height: ${ (item.data_style.goods_title_size + 3) * 2 }px;`;
|
||||
data_style.goods_title_style = goods_trends_config(item.data_style, 'title') + `line-height: ${ item.data_style.goods_title_size + 3 }px;`;
|
||||
data_style.goods_price_style = goods_trends_config(item.data_style, 'price') + `line-height: ${ item.data_style.goods_price_size }px;`;
|
||||
|
||||
const { is_roll, rotation_direction, interval_time } = data_style;
|
||||
const { is_roll, rotation_direction, interval_time, rolling_fashion } = data_style;
|
||||
const { goods_list, images_list } = data_content;
|
||||
if (data_content.data_type == 'goods') {
|
||||
data_content.list = commodity_list(data_content.goods_list, data_content.goods_num);
|
||||
data_content.list = commodity_list(data_content.goods_list, data_content.goods_num, data_content, data_style);
|
||||
} else {
|
||||
data_content.list = data_content.images_list;
|
||||
}
|
||||
|
|
@ -316,6 +381,7 @@ watch(props.value.content, (val) => {
|
|||
interval_time: interval_time,
|
||||
is_roll: is_roll,
|
||||
rotation_direction: rotation_direction,
|
||||
rolling_fashion: rolling_fashion,
|
||||
goods_list: [...goods_list], // 确保深拷贝
|
||||
images_list: [...images_list] // 确保深拷贝
|
||||
};
|
||||
|
|
@ -395,21 +461,6 @@ watchEffect(() => {
|
|||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.dot-center {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.dot-right {
|
||||
right: 0;
|
||||
}
|
||||
.dot {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
z-index: 3;
|
||||
.dot-item {
|
||||
margin: 0 0.3rem;
|
||||
}
|
||||
}
|
||||
// 轮播高度自适应
|
||||
:deep(.el-carousel) {
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -78,6 +78,7 @@ const data_style = {
|
|||
background_img: [],
|
||||
carouselKey: get_math(),
|
||||
is_roll: '0',
|
||||
rolling_fashion: 'cut-screen',
|
||||
rotation_direction: 'horizontal',
|
||||
interval_time: 3,
|
||||
title_gap: 5,
|
||||
|
|
@ -156,6 +157,7 @@ const data_style = {
|
|||
radius_bottom_right: 4,
|
||||
},
|
||||
indicator_style: 'dot',
|
||||
indicator_new_location: 'bottom',
|
||||
indicator_location: 'center',
|
||||
indicator_size: 5,
|
||||
indicator_bottom: 6,
|
||||
|
|
@ -198,6 +200,10 @@ const data_content = {
|
|||
height: 150,
|
||||
// 容器基础的宽度
|
||||
width: 0,
|
||||
// 铺满方式 0 纵向展示 1 纵向滑动 2 横向滑动
|
||||
data_source_direction: '0',
|
||||
// 滑动时的显示 轮播数量
|
||||
data_source_carousel_col: 1,
|
||||
// 数据源内容
|
||||
data_source_content: {
|
||||
// 存放手动输入的id
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div :style="style_container">
|
||||
<div :style="style_img_container">
|
||||
<div class="re" :style="style_img_container">
|
||||
<el-carousel :key="carouselKey" indicator-position="none" :interval="interval_time" arrow="never" :autoplay="is_roll" @change="carousel_change">
|
||||
<el-carousel-item v-for="(item, index) in nav_content_list" :key="index">
|
||||
<div ref="bannerImg" class="flex flex-wrap" :style="nav_space">
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<div v-if="form.display_style == 'slide' && new_style.is_show == '1'" :style="{ 'justify-content': new_style?.indicator_location || 'center' }" class="dot flex mt-10 mb-4">
|
||||
<div v-if="form.display_style == 'slide' && new_style.is_show == '1'" :class="['left', 'right'].includes(new_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="indicator_location_style">
|
||||
<template v-if="new_style.indicator_style == 'num'">
|
||||
<div :style="indicator_style" class="dot-item">
|
||||
<span class="num-active">{{ actived_index + 1 }}</span
|
||||
|
|
@ -55,6 +55,11 @@ const style_img_container = computed(() => common_img_computer(new_style.value.c
|
|||
const img_style = computed(() => radius_computer(new_style.value));
|
||||
// 标题的样式
|
||||
const text_style = computed(() => `font-size: ${new_style.value.title_size || 12}px; color: ${new_style.value.title_color || '#000'};`);
|
||||
//#region 指示器处理
|
||||
// 轮播图滚动位置
|
||||
const actived_index = ref(0);
|
||||
// 轮播图显示样式
|
||||
const actived_color = computed(() => new_style.value?.actived_color || '#2A94FF');
|
||||
// 指示器的样式
|
||||
const indicator_style = computed(() => {
|
||||
let indicator_styles = '';
|
||||
|
|
@ -67,13 +72,43 @@ const indicator_style = computed(() => {
|
|||
indicator_styles += `font-size: ${size}px;`;
|
||||
} else if (new_style.value.indicator_style == 'elliptic') {
|
||||
indicator_styles += `background: ${new_style.value?.color || '#DDDDDD'};`;
|
||||
indicator_styles += `width: ${size * 3}px; height: ${size}px;`;
|
||||
if (['left', 'right'].includes(new_style.value.indicator_new_location)) {
|
||||
indicator_styles += `width: ${ size }px; height: ${size * 3}px;`;
|
||||
} else {
|
||||
indicator_styles += `width: ${size * 3}px; height: ${size}px;`;
|
||||
}
|
||||
} else {
|
||||
indicator_styles += `background: ${new_style.value?.color || '#DDDDDD'};`;
|
||||
indicator_styles += `width: ${size}px; height: ${size}px;`;
|
||||
}
|
||||
return indicator_styles;
|
||||
});
|
||||
// 根据指示器的位置来处理 对齐方式的处理
|
||||
const indicator_location_style = computed(() => {
|
||||
const { indicator_new_location, indicator_location, indicator_bottom } = new_style.value;
|
||||
let styles = '';
|
||||
if (['left', 'right'].includes(indicator_new_location)) {
|
||||
if (indicator_location == 'flex-start') {
|
||||
styles += `top: 0px;`;
|
||||
} else if (indicator_location == 'center') {
|
||||
styles += `top: 50%; transform: translateY(-50%);`;
|
||||
} else {
|
||||
styles += `bottom: 0px;`;
|
||||
}
|
||||
} else {
|
||||
if (indicator_location == 'flex-start') {
|
||||
styles += `left: 0px;`;
|
||||
} else if (indicator_location == 'center') {
|
||||
styles += `left: 50%; transform: translateX(-50%);`;
|
||||
} else {
|
||||
styles += `right: 0px;`;
|
||||
}
|
||||
}
|
||||
// 如果有位置的处理，就使用指示器的位置处理，否则的话就用下边距处理
|
||||
styles += `${ !isEmpty(indicator_new_location) ? `${indicator_new_location}: ${ indicator_bottom }px;` : `bottom: ${ indicator_bottom }px;` }`;
|
||||
return styles;
|
||||
});
|
||||
//#endregion
|
||||
// 导航间距
|
||||
const nav_space = computed(() => 'row-gap:' + (new_style.value?.space || '0') + 'px');
|
||||
// 导航标题间距
|
||||
|
|
@ -88,10 +123,6 @@ const interval_time = ref(2000);
|
|||
const is_roll = ref(false);
|
||||
// 轮播图key值
|
||||
const carouselKey = ref('0');
|
||||
// 轮播图滚动位置
|
||||
const actived_index = ref(0);
|
||||
// 轮播图显示样式
|
||||
const actived_color = computed(() => new_style.value?.actived_color || '#2A94FF');
|
||||
// 记录当前显示的轮播图的数据
|
||||
const interval_list = ref({
|
||||
time: 2000,
|
||||
|
|
@ -191,17 +222,12 @@ const carousel_change = (index: number) => {
|
|||
.flex-wrap .item {
|
||||
width: v-bind(group_width);
|
||||
}
|
||||
.dot {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
.dot-item {
|
||||
margin: 0 0.3rem;
|
||||
&.active {
|
||||
background: v-bind(actived_color) !important;
|
||||
}
|
||||
.num-active {
|
||||
color: v-bind(actived_color) !important;
|
||||
}
|
||||
.dot-item {
|
||||
&.active {
|
||||
background: v-bind(actived_color) !important;
|
||||
}
|
||||
.num-active {
|
||||
color: v-bind(actived_color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -210,4 +236,4 @@ const carousel_change = (index: number) => {
|
|||
height: v-bind(newHeight);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
</card-container>
|
||||
<div class="divider-line"></div>
|
||||
<card-container>
|
||||
<carousel-indicator :value="form" :is-indicator-bottom="false"></carousel-indicator>
|
||||
<carousel-indicator :value="form"></carousel-indicator>
|
||||
</card-container>
|
||||
<div class="divider-line"></div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -212,10 +212,10 @@ const slide_active_color = computed(() => {
|
|||
|
||||
const seckill_head_style = computed(() => {
|
||||
let style = ``;
|
||||
const { header_background_color_list, header_background_direction } = new_style.value;
|
||||
const { header_background_color_list, header_background_direction, seckill_head_radius } = new_style.value;
|
||||
// 渐变
|
||||
const gradient = { color_list: header_background_color_list, direction: header_background_direction };
|
||||
style += gradient_computer(gradient);
|
||||
style += gradient_computer(gradient) + radius_computer(seckill_head_radius);
|
||||
return style;
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -30,6 +30,9 @@
|
|||
<upload v-model="form.header_background_img" :limit="1"></upload>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="圆角">
|
||||
<radius :value="form.seckill_head_radius"></radius>
|
||||
</el-form-item>
|
||||
<el-form-item label="内间距">
|
||||
<padding :value="form.seckill_head_padding"></padding>
|
||||
</el-form-item>
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ interface defaultSearch {
|
|||
is_show: string;
|
||||
image_spacing: number,
|
||||
indicator_style: string;
|
||||
indicator_new_location: string;
|
||||
indicator_location: string;
|
||||
indicator_size: number;
|
||||
indicator_bottom: number;
|
||||
|
|
@ -93,6 +94,7 @@ const defaultSearch: defaultSearch = {
|
|||
actived_color: '#2A94FF',
|
||||
// 常规颜色
|
||||
color: '#DDDDDD',
|
||||
indicator_new_location: 'bottom',
|
||||
// 指示器位置
|
||||
indicator_location: 'center',
|
||||
// 指示器大小
|
||||
|
|
|
|||
|
|
@ -92,9 +92,12 @@ interface defaultSearch {
|
|||
color: string;
|
||||
indicator_style: string;
|
||||
indicator_bottom: number;
|
||||
indicator_new_location: string;
|
||||
indicator_location: string;
|
||||
indicator_size: number;
|
||||
indicator_radius: radiusStyle;
|
||||
data_style: object;
|
||||
// 通用样式
|
||||
common_style: object;
|
||||
};
|
||||
}
|
||||
|
|
@ -113,15 +116,15 @@ const defaultSearch: defaultSearch = {
|
|||
},
|
||||
// 数据源类型 商品(goods) 文章(article) 品牌(brand) 用户信息(user-info)
|
||||
data_source:'',
|
||||
// 铺满方式 0 纵向展示 1 横向滑动 2 纵向滑动
|
||||
// 铺满方式 0 纵向展示 1 纵向滑动 2 横向滑动
|
||||
data_source_direction: '0',
|
||||
// 横向滑动时的显示 轮播数量
|
||||
// 滑动时的显示 轮播数量
|
||||
data_source_carousel_col: 1,
|
||||
// 自定义内容列表
|
||||
custom_list: []
|
||||
},
|
||||
style: {
|
||||
is_roll: '0',
|
||||
is_roll: '1',
|
||||
interval_time: 3,
|
||||
rolling_fashion: 'translation',
|
||||
is_show: false,
|
||||
|
|
@ -130,6 +133,7 @@ const defaultSearch: defaultSearch = {
|
|||
// 常规颜色
|
||||
color: '#DDDDDD',
|
||||
indicator_style: 'dot',
|
||||
indicator_new_location: 'bottom',
|
||||
indicator_location: 'center',
|
||||
indicator_size: 5,
|
||||
indicator_bottom: 6,
|
||||
|
|
@ -140,6 +144,27 @@ const defaultSearch: defaultSearch = {
|
|||
radius_bottom_left: 4,
|
||||
radius_bottom_right: 4,
|
||||
},
|
||||
data_style: {
|
||||
color_list: [{ color: 'rgb(244, 252, 255)', color_percentage: undefined }],
|
||||
direction: '180deg',
|
||||
background_img_style: '2',
|
||||
background_img: [],
|
||||
radius: 0,
|
||||
radius_top_left: 0,
|
||||
radius_top_right: 0,
|
||||
radius_bottom_left: 0,
|
||||
radius_bottom_right: 0,
|
||||
padding: 0,
|
||||
padding_top: 0,
|
||||
padding_bottom: 0,
|
||||
padding_left: 0,
|
||||
padding_right: 0,
|
||||
margin: 0,
|
||||
margin_top: 0,
|
||||
margin_bottom: 0,
|
||||
margin_left: 0,
|
||||
margin_right: 0,
|
||||
},
|
||||
common_style: {
|
||||
...defaultCommon,
|
||||
color_list: [{ color: 'rgb(244, 252, 255)', color_percentage: undefined }],
|
||||
|
|
|
|||
|
|
@ -26,6 +26,8 @@ interface defaultSearch {
|
|||
is_roll: string;
|
||||
interval_time: number;
|
||||
indicator_style: string;
|
||||
indicator_bottom: number;
|
||||
indicator_new_location: string;
|
||||
indicator_location: string;
|
||||
indicator_size: number;
|
||||
indicator_radius: radiusStyle;
|
||||
|
|
@ -93,8 +95,10 @@ const defaultSearch: defaultSearch = {
|
|||
// 指示器处理逻辑
|
||||
is_show: '1',
|
||||
indicator_style: 'dot',
|
||||
indicator_new_location: 'bottom',
|
||||
indicator_location: 'center',
|
||||
indicator_size: 5,
|
||||
indicator_bottom: 6,
|
||||
indicator_radius: {
|
||||
radius: 4,
|
||||
radius_top_left: 4,
|
||||
|
|
@ -111,7 +115,7 @@ const defaultSearch: defaultSearch = {
|
|||
common_style: {
|
||||
...defaultCommon,
|
||||
padding_top: 9,
|
||||
padding_bottom: 5,
|
||||
padding_bottom: 15,
|
||||
padding_left: 15,
|
||||
padding_right: 15,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ interface DefaultSeckill {
|
|||
header_background_direction: string;
|
||||
header_background_img_style: string;
|
||||
header_background_img: uploadList[];
|
||||
seckill_head_radius: radiusStyle;
|
||||
seckill_head_padding: paddingStyle;
|
||||
shop_direction: string,
|
||||
shop_color_list: color_list[],
|
||||
|
|
@ -125,6 +126,13 @@ const defaultSeckill: DefaultSeckill = {
|
|||
header_background_direction: '180deg',
|
||||
header_background_img_style: '2',
|
||||
header_background_img: [{ id: 1, url: new_url + 'header-bg.png', original: '背景', title: '背景1', ext: '.png', type: 'img' }],
|
||||
seckill_head_radius: {
|
||||
radius: 0,
|
||||
radius_top_left: 0,
|
||||
radius_top_right: 0,
|
||||
radius_bottom_left: 0,
|
||||
radius_bottom_right: 0,
|
||||
},
|
||||
// 头部内边距
|
||||
seckill_head_padding: {
|
||||
padding: 0,
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@ interface defaultTabs {
|
|||
is_show: string;
|
||||
image_spacing: number;
|
||||
indicator_style: string;
|
||||
indicator_new_location: string;
|
||||
indicator_location: string;
|
||||
indicator_size: number;
|
||||
indicator_bottom: number;
|
||||
|
|
@ -160,6 +161,7 @@ const defaultTabs: defaultTabs = {
|
|||
// 指示器设置
|
||||
is_show: '1',
|
||||
indicator_style: 'dot',
|
||||
indicator_new_location: 'bottom',
|
||||
indicator_location: 'center',
|
||||
indicator_size: 5,
|
||||
indicator_bottom: 6,
|
||||
|
|
|
|||
|
|
@ -291,3 +291,25 @@
|
|||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.indicator_up_down_location {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.dot-item {
|
||||
margin: 0.3rem 0;
|
||||
}
|
||||
}
|
||||
.indicator_about_location {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
.dot-item {
|
||||
margin: 0 0.3rem;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue