sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改页面显示设置

v1.0.0
于肖磊 2024-10-09 16:44:55 +08:00
parent 9145cfe5f0
commit 93415ce16f
10 changed files with 94 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/common/common-styles/index.vue
View File

@ -12,13 +12,13 @@
<div class="size-12">背景图</div>
<el-radio-group v-model="form.background_img_style" is-button @change="background_img_style_change">
<el-tooltip content="单张" placement="top" effect="light">
<el-radio-button value="0"><icon name="single-sheet"></icon></el-radio-button>
<el-radio-button :value="0"><icon name="single-sheet"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="平铺" placement="top" effect="light">
<el-radio-button value="1"><icon name="tile"></icon></el-radio-button>
<el-radio-button :value="1"><icon name="tile"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="铺满" placement="top" effect="light">
<el-radio-button value="2"><icon name="spread-over"></icon></el-radio-button>
<el-radio-button :value="2"><icon name="spread-over"></icon></el-radio-button>
</el-tooltip>
</el-radio-group>
</div>

6
src/components/model-data-magic/components/tabs-styles.vue
View File

@ -8,13 +8,13 @@
<div class="size-12">背景图</div>
<el-radio-group v-model="form.background_img_style" is-button>
<el-tooltip content="单张" placement="top" effect="light">
<el-radio-button value="0"><icon name="single-sheet"></icon></el-radio-button>
<el-radio-button :value="0"><icon name="single-sheet"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="平铺" placement="top" effect="light">
<el-radio-button value="1"><icon name="tile"></icon></el-radio-button>
<el-radio-button :value="1"><icon name="tile"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="铺满" placement="top" effect="light">
<el-radio-button value="2"><icon name="spread-over"></icon></el-radio-button>
<el-radio-button :value="2"><icon name="spread-over"></icon></el-radio-button>
</el-tooltip>
</el-radio-group>
</div>

6
src/components/model-notice/model-notice-styles.vue
View File

@ -60,13 +60,13 @@
<div class="size-12">背景图</div>
<el-radio-group v-model="form.container_background_img_style" is-button>
<el-tooltip content="单张" placement="top" effect="light">
<el-radio-button value="0"><icon name="single-sheet"></icon></el-radio-button>
<el-radio-button :value="0"><icon name="single-sheet"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="平铺" placement="top" effect="light">
<el-radio-button value="1"><icon name="tile"></icon></el-radio-button>
<el-radio-button :value="1"><icon name="tile"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="铺满" placement="top" effect="light">
<el-radio-button value="2"><icon name="spread-over"></icon></el-radio-button>
<el-radio-button :value="2"><icon name="spread-over"></icon></el-radio-button>
</el-tooltip>
</el-radio-group>
</div>

6
src/components/model-search/model-search-styles.vue
View File

@ -24,13 +24,13 @@
<div class="size-12">背景图</div>
<el-radio-group v-model="form.search_botton_background_img_style" is-button>
<el-tooltip content="单张" placement="top" effect="light">
<el-radio-button value="0"><icon name="single-sheet"></icon></el-radio-button>
<el-radio-button :value="0"><icon name="single-sheet"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="平铺" placement="top" effect="light">
<el-radio-button value="1"><icon name="tile"></icon></el-radio-button>
<el-radio-button :value="1"><icon name="tile"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="铺满" placement="top" effect="light">
<el-radio-button value="2"><icon name="spread-over"></icon></el-radio-button>
<el-radio-button :value="2"><icon name="spread-over"></icon></el-radio-button>
</el-tooltip>
</el-radio-group>
</div>

6
src/components/model-seckill/model-seckill-styles.vue
View File

@ -27,17 +27,17 @@
<div class="size-12">背景图</div>
<el-radio-group v-model="form.header_background_img_style" is-button>
<el-tooltip content="单张" placement="top" effect="light">
<el-radio-button value="0">
<el-radio-button :value="0">
<icon name="single-sheet"></icon>
</el-radio-button>
</el-tooltip>
<el-tooltip content="平铺" placement="top" effect="light">
<el-radio-button value="1">
<el-radio-button :value="1">
<icon name="tile"></icon>
</el-radio-button>
</el-tooltip>
<el-tooltip content="铺满" placement="top" effect="light">
<el-radio-button value="2">
<el-radio-button :value="2">
<icon name="spread-over"></icon>
</el-radio-button>
</el-tooltip>

30
src/components/page-settings/index.vue
View File

@ -1,6 +1,9 @@
<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>
@ -48,10 +51,12 @@ import { isEmpty } from 'lodash';
interface Props {
pageData: any;
showPage: boolean;
scollTop: number;
}
const props = withDefaults(defineProps<Props>(), {
pageData: () => ({}),
showPage: true,
scollTop: 0
});
const emits = defineEmits(['page_settings']);
const page_settings = () => {
@ -75,6 +80,28 @@ const roll_style = computed(() => {
return style;
});
const up_slide_style = computed(() => {
let style = ``;
if (props.scollTop > 0) {
const { up_slide_background_color_list, up_slide_background_direction } = new_style.value;
// 渐变
const gradient = { color_list: up_slide_background_color_list, direction: up_slide_background_direction };
style += gradient_computer(gradient) + `opacity: ${(props.scollTop + 20) / 90 > 1 ? 1 :(props.scollTop + 20) / 90 };`
}
return style;
});
const up_slide_img_style = computed(() => {
let style = ``;
if (props.scollTop > 0) {
const { up_slide_background_img, up_slide_background_img_style } = new_style.value;
// 背景图
const back = { background_img: up_slide_background_img, background_img_style: up_slide_background_img_style };
style += background_computer(back);
}
return style;
});
const text_style = computed(() => `font-weight:${new_style.value.header_background_title_typeface}; font-size: ${new_style.value.header_background_title_size}px; color: ${new_style.value.header_background_title_color};`);
const position_class = computed(() => (form.value?.indicator_location == 'center' ? `indicator-center` : ''));
</script>
@ -136,4 +163,7 @@ const position_class = computed(() => (form.value?.indicator_location == 'center
text-align: center;
top: 0;
}
.up_slide_bg {
z-index: -1;
}
</style>

2
src/components/page-settings/page-setting.vue
View File

@ -38,6 +38,8 @@ const default_data = {
function_buttons_type: 'black',
immersive_style: '0',
up_slide_display: '1',
up_slide_background_color_list: [{ color: '#fff', color_percentage: undefined }],
up_slide_background_direction: '180deg',
icon_color: '#ccc',
button_inner_color: '#fff',
search_botton_color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],

36
src/components/page-settings/page-styles.vue
View File

@ -15,17 +15,17 @@
<div class="size-12">背景图</div>
<el-radio-group v-model="form.header_background_img_style" is-button>
<el-tooltip content="单张" placement="top" effect="light">
<el-radio-button value="0">
<el-radio-button :value="0">
<icon name="single-sheet"></icon>
</el-radio-button>
</el-tooltip>
<el-tooltip content="平铺" placement="top" effect="light">
<el-radio-button value="1">
<el-radio-button :value="1">
<icon name="tile"></icon>
</el-radio-button>
</el-tooltip>
<el-tooltip content="铺满" placement="top" effect="light">
<el-radio-button value="2">
<el-radio-button :value="2">
<icon name="spread-over"></icon>
</el-radio-button>
</el-tooltip>
@ -55,6 +55,32 @@
<el-form-item label="上滑展示">
<el-switch v-model="form.up_slide_display" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
<el-form-item label="上滑背景">
<div class="flex-col gap-10">
<mult-color-picker :value="form.up_slide_background_color_list" :type="form.up_slide_background_direction" @update:value="up_slide_mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<el-radio-group v-model="form.up_slide_background_img_style" is-button>
<el-tooltip content="单张" placement="top" effect="light">
<el-radio-button :value="0">
<icon name="single-sheet"></icon>
</el-radio-button>
</el-tooltip>
<el-tooltip content="平铺" placement="top" effect="light">
<el-radio-button :value="1">
<icon name="tile"></icon>
</el-radio-button>
</el-tooltip>
<el-tooltip content="铺满" placement="top" effect="light">
<el-radio-button :value="2">
<icon name="spread-over"></icon>
</el-radio-button>
</el-tooltip>
</el-radio-group>
</div>
<upload v-model="form.up_slide_background_img" :limit="1"></upload>
</div>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<card-container>
@ -130,6 +156,10 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.header_background_color_list = arry;
form.value.header_background_direction = type.toString();
};
const up_slide_mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.up_slide_background_color_list = arry;
form.value.up_slide_background_direction = type.toString();
}
const change_immersive_style = (val: string | number | boolean) => {
if (val === '0') {
common_store.set_is_immersion_model(false);

8
src/config/const/header-nav.ts
View File

@ -42,6 +42,10 @@ interface DefaultFooterNav {
function_buttons_type: string;
immersive_style: string;
up_slide_display: string;
up_slide_background_color_list: color_list[];
up_slide_background_direction: string;
up_slide_background_img_style: number;
up_slide_background_img: uploadList[];
icon_color: string;
button_inner_color: string;
search_botton_color_list: color_list[];
@ -97,6 +101,10 @@ const defaultFooterNav: DefaultFooterNav = {
function_buttons_type: 'black',
immersive_style: '0',
up_slide_display: '1',
up_slide_background_color_list: [{ color: '#fff', color_percentage: undefined }],
up_slide_background_direction: '180deg',
up_slide_background_img_style: 2,
up_slide_background_img: [],
icon_color: '#ccc',
button_inner_color: '#fff',
search_botton_color_list: [

8
src/views/layout/components/main/index.vue
View File

@ -62,9 +62,9 @@
<el-button size="large" @click="clear_click">清空</el-button>
</div>
<!-- 拖拽区 -->
<div ref="scrollTop" class="model-drag">
<div ref="scrollTop" class="model-drag" @scroll="on_scroll_event">
<!-- 页面设置 -->
<page-settings :show-page="page_data.show_tabs == '1'" :page-data="page_data" @page_settings="page_settings"></page-settings>
<page-settings :show-page="page_data.show_tabs == '1'" :page-data="page_data" :scoll-top="scoll_top" @page_settings="page_settings"></page-settings>
<div class="model-wall" :style="content_style">
<div class="model-wall-content" :style="`padding-top:${top_padding}px; margin-top: ${top_margin}px;padding-bottom:${bottom_navigation_show ? footer_nav_counter_store.padding_footer : 0}px;`">
<div-content :diy-data="tabs_data" :show-model-border="show_model_border" :is-tabs="true" :main-content-style="main_content_style" @on_choose="set_tabs_event(true)" @del="del"></div-content>
@ -423,6 +423,10 @@ const scroll = () => {
}
});
};
const scoll_top = ref(0);
const on_scroll_event = (e: any) => {
scoll_top.value = e.target.scrollTop;
}
//#endregion
//#region 页面设置 导出 导入
// 在组件挂载时默认执行