选项卡轮播新增页面显示
于肖磊
parent
b402a21bdb
commit
95ed3972bd
|
|
@ -18,6 +18,9 @@
|
|||
<script setup lang="ts">
|
||||
import { common_styles_computer, common_img_computer, padding_computer, gradient_computer, background_computer, margin_computer, radius_computer, box_shadow_computer, border_computer } from '@/utils';
|
||||
import { cloneDeep, isEmpty } from 'lodash';
|
||||
import { commonStore } from '@/store';
|
||||
const common_store = commonStore();
|
||||
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Object,
|
||||
|
|
@ -39,7 +42,7 @@ watch(
|
|||
props.value,
|
||||
(val) => {
|
||||
let new_data = cloneDeep(val);
|
||||
const { home_data } = new_data.content;
|
||||
const { home_data, is_tabs_safe_distance = '0' } = new_data.content;
|
||||
const new_style = new_data?.style;
|
||||
// 选项卡背景设置
|
||||
const tabs_data = {
|
||||
|
|
@ -48,8 +51,14 @@ watch(
|
|||
background_img_style: new_style.tabs_bg_background_img_style,
|
||||
background_img: new_style.tabs_bg_background_img,
|
||||
}
|
||||
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);
|
||||
tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_style.tabs_padding);
|
||||
// 选项卡是否开启了安全距离
|
||||
const is_general_safe_distance = common_store.is_general_safe_distance && is_tabs_safe_distance == '1';
|
||||
const new_tabs_padding = {
|
||||
...new_style.tabs_padding,
|
||||
padding_top: (new_style.tabs_padding?.padding_top || 0) + (is_general_safe_distance ? common_store.header_height : 0),
|
||||
}
|
||||
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);
|
||||
// 轮播区域背景设置
|
||||
const carousel_content_data = {
|
||||
color_list: new_style.carousel_content_color_list,
|
||||
|
|
|
|||
|
|
@ -23,6 +23,12 @@
|
|||
<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>
|
||||
</card-container>
|
||||
<div class="divider-line"></div>
|
||||
<card-container>
|
||||
|
|
@ -151,13 +157,13 @@ const on_sort = (new_list: nav_group[]) => {
|
|||
const tabs_theme_change = (val: string | number | boolean | undefined): void => {
|
||||
styles.value.tabs_color_checked = tabs_style(styles.value.tabs_color_checked, val);
|
||||
};
|
||||
// // 选项卡是否可以滑动置顶
|
||||
// const is_immersion_model = computed(() => common_store.is_immersion_model);
|
||||
// watchEffect(() => {
|
||||
// if (is_immersion_model.value) {
|
||||
// form.value.tabs_top_up = '0';
|
||||
// }
|
||||
// });
|
||||
// 选项卡是否设置安全距离
|
||||
const is_general_safe_distance = computed(() => common_store.is_general_safe_distance);
|
||||
watchEffect(() => {
|
||||
if (!is_general_safe_distance.value) {
|
||||
form.value.is_tabs_safe_distance = '0';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.cursor-move {
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
</el-form-item>
|
||||
<el-form-item v-if="form.header_background_type == 'transparent' && form.immersive_style === '1'" label="安全距离">
|
||||
<div class="flex-row align-c gap-10">
|
||||
<el-switch v-model="form.general_safe_distance_value" active-value="1" inactive-value="0"></el-switch>
|
||||
<el-switch v-model="form.general_safe_distance_value" active-value="1" inactive-value="0" @change="general_safe_distance_value_change"></el-switch>
|
||||
<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>
|
||||
|
|
@ -170,6 +170,7 @@ const header_background_type_change_event = (val: any) => {
|
|||
form.value.immersive_style = '0';
|
||||
// 沉浸模式关闭的时候，安全距离关闭
|
||||
form.value.general_safe_distance_value = '0';
|
||||
common_store.set_is_general_safe_distance(false);
|
||||
// common_store.set_is_immersion_model(false);
|
||||
} else {
|
||||
// 没有tabs的情况下，默认开启沉浸模式
|
||||
|
|
@ -200,14 +201,23 @@ const change_immersive_style = (val: string | number | boolean) => {
|
|||
if (val === '0') {
|
||||
// 沉浸模式关闭的时候，安全距离关闭
|
||||
form.value.general_safe_distance_value = '0';
|
||||
common_store.set_is_general_safe_distance(false);
|
||||
// common_store.set_is_immersion_model(false);
|
||||
return;
|
||||
} else {
|
||||
// 沉浸模式开启的时候，安全距离打开
|
||||
form.value.general_safe_distance_value = '1';
|
||||
form.value.general_safe_distance_value = '1';
|
||||
common_store.set_is_general_safe_distance(true);
|
||||
}
|
||||
// common_store.set_is_immersion_model(true);
|
||||
};
|
||||
|
||||
const general_safe_distance_value_change = (val: string | number | boolean) => {
|
||||
if (val === '0') {
|
||||
common_store.set_is_general_safe_distance(false);
|
||||
return;
|
||||
}
|
||||
common_store.set_is_general_safe_distance(true);
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.styles {
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ interface defaultTabs {
|
|||
tabs_adorn_icon: string;
|
||||
tabs_adorn_img: uploadList[];
|
||||
tabs_top_up: string;
|
||||
is_tabs_safe_distance: string;
|
||||
home_data: tabs_page;
|
||||
tabs_list: tabs_page[];
|
||||
carousel_type: string;
|
||||
|
|
@ -130,6 +131,8 @@ const defaultTabs: defaultTabs = {
|
|||
tabs_adorn_img: [],
|
||||
// 是否置顶
|
||||
tabs_top_up: '0',
|
||||
// 是否支持安全距离
|
||||
is_tabs_safe_distance: '0',
|
||||
// 选项卡数据
|
||||
home_data: { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '首页', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
|
||||
tabs_list: [
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ export const commonStore = defineStore('common', () => {
|
|||
// 链接是否需要调接口判断
|
||||
const is_common_api = ref(false);
|
||||
const is_immersion_model = ref(false);
|
||||
const is_general_safe_distance = ref(false);
|
||||
const is_tabs_0_up = ref(false);
|
||||
const header_height = ref(0);
|
||||
const common = ref({
|
||||
|
|
@ -48,6 +49,10 @@ export const commonStore = defineStore('common', () => {
|
|||
const set_is_immersion_model = (bool: boolean) => {
|
||||
is_immersion_model.value = bool;
|
||||
};
|
||||
|
||||
const set_is_general_safe_distance = (bool: boolean) => {
|
||||
is_general_safe_distance.value = bool;
|
||||
};
|
||||
|
||||
const set_is_tabs_0_up = (bool: boolean) => {
|
||||
is_tabs_0_up.value = bool;
|
||||
|
|
@ -63,9 +68,11 @@ export const commonStore = defineStore('common', () => {
|
|||
is_immersion_model,
|
||||
is_tabs_0_up,
|
||||
header_height,
|
||||
is_general_safe_distance,
|
||||
set_common,
|
||||
set_is_common_api,
|
||||
set_is_immersion_model,
|
||||
set_is_general_safe_distance,
|
||||
set_is_tabs_0_up,
|
||||
set_header_height,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -126,6 +126,7 @@ const clear_data_event = () => {
|
|||
form.value.diy_data = [];
|
||||
// 数据清空之后，将公共沉浸模式判断为false
|
||||
// common_store.set_is_immersion_model(false);
|
||||
common_store.set_is_general_safe_distance(false);
|
||||
diy_data_item.value = new_tem_form.header;
|
||||
};
|
||||
//#region 页面初始化数据 ---------------------start
|
||||
|
|
@ -146,10 +147,10 @@ const init = () => {
|
|||
|
||||
data.diy_data = data_merge(data.diy_data);
|
||||
data.tabs_data = data_merge(data.tabs_data);
|
||||
// // 判断默认数据是否开启沉浸式
|
||||
// if (data.header.com_data.style.immersive_style === '1') {
|
||||
// common_store.set_is_immersion_model(true);
|
||||
// }
|
||||
// 判断默认数据是否开启沉浸式,并且开启了安全距离
|
||||
if (data.header.com_data.style.immersive_style == '1' && data.header.com_data.style.general_safe_distance_value == '1') {
|
||||
common_store.set_is_general_safe_distance(true);
|
||||
}
|
||||
form.value = data;
|
||||
} else {
|
||||
is_empty.value = true;
|
||||
|
|
|
|||
Loading…
Reference in New Issue