修改选项卡轮播的处理
parent
2def858d6a
commit
435ef8e718
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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: [],
|
||||
|
|
|
|||
Loading…
Reference in New Issue