修改轮播滚动事件默认时间为3秒

v1.0.0
于肖磊 2024-10-09 18:20:27 +08:00
parent c1c197e124
commit 2c739590bf
13 changed files with 58 additions and 47 deletions

View File

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

View File

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

View File

@ -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',
}
}

View File

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

View File

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

View File

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

View File

@ -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: [],

View File

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

View File

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

View File

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

View File

@ -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: [
{

View File

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

View File

@ -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: [],