修改轮播滚动事件默认时间为3秒
parent
c1c197e124
commit
2c739590bf
|
|
@ -63,7 +63,7 @@ const data_style = {
|
|||
background_img: [],
|
||||
is_roll: '0',
|
||||
rotation_direction: 'horizontal',
|
||||
interval_time: 2,
|
||||
interval_time: 3,
|
||||
heading_color: '#000',
|
||||
heading_typeface: '400',
|
||||
heading_size: 20,
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ const props = withDefaults(defineProps<Props>(), {
|
|||
radius_bottom_right: 0,
|
||||
is_show: '1',
|
||||
is_roll: '1',
|
||||
interval_time: 2,
|
||||
interval_time: 3,
|
||||
indicator_style: 'dot',
|
||||
indicator_location: 'center',
|
||||
indicator_size: 5,
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ onBeforeMount(async () => {
|
|||
progress_button_icon_color: '#FF2525',
|
||||
progress_text_color: '#FF3434',
|
||||
is_roll: '1',
|
||||
interval_time: 2,
|
||||
interval_time: 3,
|
||||
rolling_fashion: 'translation',
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,42 +1,44 @@
|
|||
<template>
|
||||
<div class="model-top">
|
||||
<div :class="['roll', { 'page-settings-border': showPage }]" :style="roll_style" @click="page_settings">
|
||||
<div class="w h abs up_slide_bg" :style="up_slide_style">
|
||||
<div class="w h" :style="up_slide_img_style"></div>
|
||||
</div>
|
||||
<div class="pt-15 pl-18 pr-22 w pb-6">
|
||||
<img class="img" :style="`Filter: brightness(${new_style.function_buttons_type == 'black' ? 0 : 100})`" src="@/assets/images/layout/main/main-top.png" />
|
||||
</div>
|
||||
<div class="model-head tc re mlr-12 mt-6">
|
||||
<div class="model-head-content flex-row align-c jc-sb gap-16 re">
|
||||
<div v-if="['1', '2', '3'].includes(form.theme)" class="flex-1">
|
||||
<div class="flex-row align-c jc-c h gap-16" :class="position_class" :style="[{ 'justify-content': form?.indicator_location || 'center' }, text_style]">
|
||||
<template v-if="['2', '3'].includes(form.theme)">
|
||||
<div class="logo-outer-style"><image-empty v-model="form.logo[0]" class="logo-style" error-img-style="width:2rem;height:2rem;"></image-empty></div>
|
||||
</template>
|
||||
<div v-if="['1', '2'].includes(form.theme)">{{ form.title }}</div>
|
||||
<template v-if="['3', '5'].includes(form.theme)">
|
||||
<div :class="[{ 'page-settings-border': showPage }]" :style="roll_style" @click="page_settings">
|
||||
<div class="roll" :style="roll_img_style">
|
||||
<div class="w h abs up_slide_bg" :style="up_slide_style">
|
||||
<div class="w h" :style="up_slide_img_style"></div>
|
||||
</div>
|
||||
<div class="pt-15 pl-18 pr-22 w pb-6">
|
||||
<img class="img" :style="`Filter: brightness(${new_style.function_buttons_type == 'black' ? 0 : 100})`" src="@/assets/images/layout/main/main-top.png" />
|
||||
</div>
|
||||
<div class="model-head tc re mlr-12 mt-6">
|
||||
<div class="model-head-content flex-row align-c jc-sb gap-16 re">
|
||||
<div v-if="['1', '2', '3'].includes(form.theme)" class="flex-1">
|
||||
<div class="flex-row align-c jc-c h gap-16" :class="position_class" :style="[{ 'justify-content': form?.indicator_location || 'center' }, text_style]">
|
||||
<template v-if="['2', '3'].includes(form.theme)">
|
||||
<div class="logo-outer-style"><image-empty v-model="form.logo[0]" class="logo-style" error-img-style="width:2rem;height:2rem;"></image-empty></div>
|
||||
</template>
|
||||
<div v-if="['1', '2'].includes(form.theme)">{{ form.title }}</div>
|
||||
<template v-if="['3', '5'].includes(form.theme)">
|
||||
<div class="flex-1">
|
||||
<model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="['4', '5'].includes(form.theme)" class="flex-1 flex-row align-c h gap-10">
|
||||
<div class="flex-row gap-2">
|
||||
<icon name="position" size="12" color="0"></icon><span class="size-14 cr-3 text-line-1">{{ form.positioning_name }}</span>
|
||||
<icon v-if="form.is_arrows_show == '1'" name="arrow-right" size="12" color="0"></icon>
|
||||
</div>
|
||||
<template v-if="['5'].includes(form.theme)">
|
||||
<div class="flex-1">
|
||||
<model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="['4', '5'].includes(form.theme)" class="flex-1 flex-row align-c h gap-10">
|
||||
<div class="flex-row gap-2">
|
||||
<icon name="position" size="12" color="0"></icon><span class="size-14 cr-3 text-line-1">{{ form.positioning_name }}</span>
|
||||
<icon v-if="form.is_arrows_show == '1'" name="arrow-right" size="12" color="0"></icon>
|
||||
</div>
|
||||
<template v-if="['5'].includes(form.theme)">
|
||||
<div class="flex-1">
|
||||
<model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
|
||||
<div v-if="!isEmpty(form.icon_setting)" class="flex-row align-c" :class="'gap-' + new_style.img_space">
|
||||
<div v-for="(item, index) in form.icon_setting" :key="index" :style="{ width: new_style.img_size + 'px', height: new_style.img_size + 'px' }">
|
||||
<image-empty v-if="item.img.length > 0" v-model="item.img[0]" :error-img-style="'width: ' + Number(new_style.img_size) / 2 + 'px;height:' + Number(new_style.img_size) / 2 + 'px;'"></image-empty>
|
||||
<icon v-else :name="item.icon" :size="new_style.img_size + ''" color="6"></icon>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="!isEmpty(form.icon_setting)" class="flex-row align-c" :class="'gap-' + new_style.img_space">
|
||||
<div v-for="(item, index) in form.icon_setting" :key="index" :style="{ width: new_style.img_size + 'px', height: new_style.img_size + 'px' }">
|
||||
<image-empty v-if="item.img.length > 0" v-model="item.img[0]" :error-img-style="'width: ' + Number(new_style.img_size) / 2 + 'px;height:' + Number(new_style.img_size) / 2 + 'px;'"></image-empty>
|
||||
<icon v-else :name="item.icon" :size="new_style.img_size + ''" color="6"></icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -67,19 +69,28 @@ const new_style = computed(() => props.pageData.com_data.style);
|
|||
const position = computed(() => (new_style.value.up_slide_display == '1' ? 'absolute' : 'relative'));
|
||||
const roll_style = computed(() => {
|
||||
let style = ``;
|
||||
const { header_background_img, header_background_img_style, header_background_color_list, header_background_direction, header_background_type } = new_style.value;
|
||||
const { header_background_color_list, header_background_direction, header_background_type } = new_style.value;
|
||||
if (header_background_type === 'color_image') {
|
||||
// 渐变
|
||||
const gradient = { color_list: header_background_color_list, direction: header_background_direction };
|
||||
// 背景图
|
||||
const back = { background_img: header_background_img, background_img_style: header_background_img_style };
|
||||
style += gradient_computer(gradient) + background_computer(back);
|
||||
style += gradient_computer(gradient);
|
||||
} else {
|
||||
style += `background: transparent;`;
|
||||
}
|
||||
return style;
|
||||
});
|
||||
|
||||
const roll_img_style = computed(() => {
|
||||
let style = ``;
|
||||
const { header_background_img, header_background_img_style, header_background_type } = new_style.value;
|
||||
if (header_background_type === 'color_image') {
|
||||
// 背景图
|
||||
const back = { background_img: header_background_img, background_img_style: header_background_img_style };
|
||||
style += background_computer(back);
|
||||
}
|
||||
return style;
|
||||
});
|
||||
|
||||
const up_slide_style = computed(() => {
|
||||
let style = ``;
|
||||
if (props.scollTop > 0) {
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ const defaultArticleList: DefaultArticleList = {
|
|||
content_spacing: 10, // 内容间距
|
||||
article_spacing: 10, // 文章间距
|
||||
article_height: 155, // 文章高度
|
||||
interval_time: 2, //滚动时间
|
||||
interval_time: 3, //滚动时间
|
||||
is_roll: 1, // 是否轮播
|
||||
common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 },
|
||||
},
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ const defaultArticleTabs: DefaultArticleTabs = {
|
|||
content_spacing: 10, // 内容间距
|
||||
article_spacing: 10, // 文章间距
|
||||
article_height: 155, // 文章高度
|
||||
interval_time: 2, //滚动时间
|
||||
interval_time: 3, //滚动时间
|
||||
is_roll: 1, // 是否轮播
|
||||
common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_left: 10, padding_right: 10, padding_bottom: 10 },
|
||||
},
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ const defaultSearch: defaultSearch = {
|
|||
carousel_type: 'inherit',
|
||||
img_fit: 'contain',
|
||||
is_roll: '1',
|
||||
interval_time: 2,
|
||||
interval_time: 3,
|
||||
carousel_list: [
|
||||
{
|
||||
carousel_img: [],
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ const defaultProductList: DefaultProductList = {
|
|||
content_spacing: 10,
|
||||
content_outer_height: 232,
|
||||
is_roll: '1',
|
||||
interval_time: 2,
|
||||
interval_time: 3,
|
||||
shop_title_typeface: '500',
|
||||
shop_title_size: 14,
|
||||
shop_title_color: "#333333",
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@ const defaultProductList: DefaultProductList = {
|
|||
content_spacing: 10,
|
||||
content_outer_height: 232,
|
||||
is_roll: '1',
|
||||
interval_time: 2,
|
||||
interval_time: 3,
|
||||
shop_title_typeface: '500',
|
||||
shop_title_size: 14,
|
||||
shop_title_color: '#333333',
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ const defaultSearch: defaultSearch = {
|
|||
radius_bottom_right: 0,
|
||||
is_show: '1',
|
||||
is_roll: '1',
|
||||
interval_time: 2,
|
||||
interval_time: 3,
|
||||
indicator_style: 'dot',
|
||||
indicator_location: 'center',
|
||||
indicator_size: 5,
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ const defaultSearch: defaultSearch = {
|
|||
img_src: [],
|
||||
icon_class: '',
|
||||
is_right_button: '1',
|
||||
interval_time: 2,
|
||||
interval_time: 3,
|
||||
more_link: {},
|
||||
notice_list: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -162,7 +162,7 @@ const defaultSeckill: DefaultSeckill = {
|
|||
progress_button_icon_color: '#FF2525',
|
||||
progress_text_color: '#FF3434',
|
||||
is_roll: '1',
|
||||
interval_time: 2,
|
||||
interval_time: 3,
|
||||
rolling_fashion: 'translation',
|
||||
common_style: { ...defaultCommon, padding: 0, padding_top: 2, padding_bottom: 10, padding_left: 10, padding_right: 10 },
|
||||
},
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ const defaultTabs: defaultTabs = {
|
|||
carousel_type: 'inherit',
|
||||
img_fit: 'contain',
|
||||
is_roll: '1',
|
||||
interval_time: 2,
|
||||
interval_time: 3,
|
||||
carousel_list: [
|
||||
{
|
||||
carousel_img: [],
|
||||
|
|
|
|||
Loading…
Reference in New Issue