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

修改页面显示

v1.0.0
于肖磊 2024-08-28 16:24:28 +08:00
parent 7f5df0e0d9
commit dbca8cf3c5
3 changed files with 41 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,10 +2,15 @@
<div class="model-top">
<div :class="['roll', { 'page-settings-border': showPage }]" :style="roll_style" @click="page_settings">
<div class="pt-15 pb-10 pl-25 pr-25 w">
<img class="img" :style="`Filter: brightness(${ new_style.function_buttons_type == 'black' ? 0 : 100 })`" :src="url_computer()" />
<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">
{{ props.pageData.com_data?.content?.title || '新建页面' }}
<div class="model-head tc re">
<div class="flex align-c jc-c w h">
{{ props.pageData.com_data?.content?.title || '新建页面' }}
</div>
<div class="model-head-icon">
<img class="function-icon" :src="url_computer(new_style.function_buttons_type == 'black' ? 'function-icon-black' : 'function-icon-white')" />
</div>
</div>
</div>
</div>
@ -30,17 +35,15 @@ const new_style = computed(() => props.pageData.com_data.style);
const position = computed(() => new_style.value.up_slide_display ? 'absolute' : 'relative');
const roll_style = computed(() => {
let style = ``;
if (new_style.value.background_type === 'color') {
style += gradient_computer({ color_list: new_style.value.background_color_list, direction: new_style.value.background_direction });
} else if (new_style.value.background_type === 'image') {
style += background_computer(new_style.value);
if (new_style.value.background_type === 'color_image') {
style += gradient_computer({ color_list: new_style.value.background_color_list, direction: new_style.value.background_direction }) + background_computer(new_style.value);
} else {
style += `background: transparent;`;
}
return style
});
const url_computer = () => {
const new_url = ref(new URL(`../../assets/images/layout/main/main-top.png`, import.meta.url).href).value;
const url_computer = (name: string) => {
const new_url = ref(new URL(`../../assets/images/layout/main/${name}.png`, import.meta.url).href).value;
return new_url;
};
</script>
@ -54,8 +57,7 @@ const url_computer = () => {
.roll {
width: 39rem;
margin: 0 auto;
// box-shadow: 0px 0 0px 0.2rem #fff;
// border-bottom: 0.1rem solid #f5f5f5;
cursor: pointer;
}
.img {
width: 34rem;
@ -63,8 +65,15 @@ const url_computer = () => {
}
.model-head {
height: 4.3rem;
padding: 1.1rem 0;
cursor: pointer;
}
.model-head-icon {
position: absolute;
right: 1.2rem;
bottom: 0.6rem;
height: 3.2rem;
.function-icon {
height: 3.2rem;
}
}
.page-settings-border {
// border: 0.2rem solid $cr-main;

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

@ -7,13 +7,24 @@
<div class="flex-col gap-10">
<el-radio-group v-model="form.background_type">
<el-radio value="transparent">透明</el-radio>
<el-radio value="color">颜色</el-radio>
<el-radio value="image">图片</el-radio>
<el-radio value="color_image">颜色/图片</el-radio>
</el-radio-group>
<template v-if="form.background_type === 'color'">
<template v-if="form.background_type === 'color_image'">
<mult-color-picker :value="form.background_color_list" :type="form.background_direction" @update:value="mult_color_picker_event"></mult-color-picker>
</template>
<template v-else-if="form.background_type === 'image'">
<div class="flex-row jc-sb align-c">
<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-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.background_img_url" :limit="1"></upload>
</template>
</div>

4
src/layout/components/main/default/header-nav.ts
View File

@ -9,6 +9,7 @@ interface DefaultFooterNav {
background_type: string;
background_color_list: color_list[];
background_direction: string;
background_img_style: number;
background_img_url: uploadList[];
background_title_color: string,
background_title_typeface: string,
@ -25,9 +26,10 @@ const defaultFooterNav: DefaultFooterNav = {
title: '',
},
style: {
background_type: 'color',
background_type: 'color_image',
background_color_list: [{ color: '#fff', color_percentage: '' }],
background_direction: '180deg',
background_img_style: 2,
background_img_url: [],
background_title_color: '#000',
background_title_typeface: '500',