修改选项卡轮播的处理

v1.2.0
于肖磊 2025-02-18 13:36:45 +08:00
parent 2def858d6a
commit 435ef8e718
3 changed files with 23 additions and 9 deletions

View File

@ -2,8 +2,8 @@
<div class="re" :style="style_container + swiper_bg_style">
<div class="abs z-i top-0 w h" :style="swiper_bg_img_style"></div>
<div class="flex-col oh" :style="style_img_container + (!isEmpty(swiper_bg_img_style) ? `background-image: url('');` : '')">
<div class="oh z-deep re" :style="tabs_container + swiper_bg_style">
<div class="abs z-i top-0 w h" :style="swiper_bg_img_style"></div>
<div class="oh z-deep re" :style="tabs_container + (is_rotating_background ? swiper_bg_style : '')">
<div v-if="is_rotating_background" class="abs z-i top-0 w h" :style="swiper_bg_img_style"></div>
<div class="oh z-deep" :style="tabs_img_container">
<tabs-view ref="tabs" :value="tabs_list" :is-tabs="true" :active-index="tabs_active_index" :tabs-sliding-fixed-bg="tabs_sliding_fixed_bg"></tabs-view>
</div>
@ -41,11 +41,12 @@ const carousel_container = ref('');
const carousel_img_container = ref('');
//
const tabs_sliding_fixed_bg = ref('');
const is_rotating_background = ref(false);
watch(
props.value,
(val) => {
let new_data = cloneDeep(val);
const { home_data, is_tabs_safe_distance = '0' } = new_data.content;
const { home_data, is_tabs_safe_distance = '0', rotating_background } = new_data.content;
const new_style = new_data?.style;
//
const tabs_data = {
@ -60,6 +61,9 @@ watch(
...new_style.tabs_padding,
padding_top: (new_style.tabs_padding?.padding_top || 0) + (is_general_safe_distance ? common_store.header_height : 0),
}
//
is_rotating_background.value = rotating_background == '1';
//
tabs_sliding_fixed_bg.value = gradient_computer(tabs_data);
tabs_container.value = gradient_computer(tabs_data) + radius_computer(new_style.tabs_radius) + margin_computer(new_style.tabs_margin) + box_shadow_computer(new_style.tabs_content) + border_computer(new_style.tabs_content) + `margin-top: ${ new_style.tabs_margin.margin_top - (is_general_safe_distance ? common_store.header_height : 0) }px;`;
tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_tabs_padding);

View File

@ -33,12 +33,20 @@
<icon name="miaosha-hdgz" size="12" color="#999"></icon>
</el-tooltip>
</el-form-item>
<el-form-item v-if="is_general_safe_distance && !isCommon" label="安全距离">
<el-switch v-model="form.is_tabs_safe_distance" class="mr-10" active-value="1" inactive-value="0" />
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>选项卡是否支持安全距离</span>" raw-content placement="top">
<icon name="miaosha-hdgz" size="12" color="#999"></icon>
</el-tooltip>
</el-form-item>
<template v-if="!isCommon">
<el-form-item v-if="is_general_safe_distance" label="安全距离">
<el-switch v-model="form.is_tabs_safe_distance" class="mr-10" active-value="1" inactive-value="0" />
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>选项卡是否支持安全距离</span>" raw-content placement="top">
<icon name="miaosha-hdgz" size="12" color="#999"></icon>
</el-tooltip>
</el-form-item>
<el-form-item label="轮播背景">
<el-switch v-model="form.rotating_background" class="mr-10" active-value="1" inactive-value="0" />
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>1.关闭的时候,如果没有选项卡背景会使用通用背景.<br/>2.打开的时候,如果没有选项卡背景会使用轮播背景,都没有的时候会使用通用背景.</span>" raw-content placement="top">
<icon name="miaosha-hdgz" size="12" color="#999"></icon>
</el-tooltip>
</el-form-item>
</template>
</card-container>
<div class="divider-line"></div>
<card-container>

View File

@ -33,6 +33,7 @@ interface defaultTabs {
content: {
content_top: object;
justification: string,
rotating_background: string;
show_more: string,
tabs_theme: string;
tabs_adorn_icon: string;
@ -131,6 +132,7 @@ const defaultTabs: defaultTabs = {
show_more: '1',
// 选项卡风格
tabs_theme: '0',
rotating_background: '0',
// 选中装饰图标
tabs_adorn_icon: 'checked-smooth',
tabs_adorn_img: [],