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

Merge remote-tracking branch 'origin/dev-yxl' into dev-sws

v1.0.0
sws 2024-08-30 14:05:17 +08:00
parent 9da40d1e12 db5f4f92b7
commit 1f6432684c
11 changed files with 216 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/common/theme-select/index.vue
View File

@ -36,7 +36,7 @@
<text v-else class="cr-9">{{ placeholder }}</text>
</div>
<div class="theme-icon">
<template v-if="temp_data_obj === null">
<template v-if="temp_data_obj === null || notCleardButton">
<icon name="arrow-right" size="12" color="9"></icon>
</template>
<template v-else>
@ -64,6 +64,10 @@ const props = defineProps({
type: Array as PropType<data[]>,
default: () => [],
},
notCleardButton: {
type: Boolean,
default: false,
}
});
const model_value = defineModel({ type: String, default: '' });
const { data } = toRefs(props);

2
src/components/model-notice/index.vue
View File

@ -141,7 +141,7 @@ watchEffect(() => {
</script>
<style lang="scss" scoped>
.news-box {
min-height: 4.4rem;
height: v-bind(container_height);
overflow: hidden;
padding: 0 1rem;
background: #fff;

16
src/components/model-search/index.vue
View File

@ -2,7 +2,7 @@
<div :style="style_container">
<div :style="style" class="flex-row align-c">
<div class="search w re">
<div class="box h oh flex align-c gap-10" :style="box_style">
<div class="box h oh flex align-c gap-10 bg-f" :style="box_style">
<template v-if="form.is_icon_show">
<template v-if="form.icon_img_src.length > 0">
<div class="img-box">
@ -13,17 +13,17 @@
<el-icon :class="`iconfont ${ !isEmpty(form.icon_class) ? 'icon-' + form.icon_class : 'icon-search' } size-14`" :style="`color:${new_style.icon_color};`" />
</template>
</template>
<span v-if="form.is_tips_show" class="size-14" :style="`color: ${ new_style.tips_color }`">{{ form.tips }}</span>
<span v-if="form.is_tips_show" :class="[isPageSettings ? 'size-12 text-line-1' : 'size-14 text-line-1']" :style="`color: ${ new_style.tips_color }`">{{ form.tips }}</span>
</div>
<div v-if="form.is_search_show" class="abs search-botton h flex align-c jc-c" :style="search_button">
<template v-if="form.search_type === 'text'">
<div class="pl-16 pr-16 ptb-3 size-12">{{ form.search_tips }}</div>
<div :class="['ptb-3 size-12', isPageSettings ? 'plr-12' : 'plr-16']">{{ form.search_tips }}</div>
</template>
<template v-else-if="form.search_botton_src.length > 0">
<image-empty v-model="form.search_botton_src[0]" class="img" :style="search_button_radius" error-img-style="width: 4rem;height: 2.8rem;" />
</template>
<template v-else>
<div class="pl-16 pr-16 ptb-3 size-12">
<div :class="['ptb-3 size-12', isPageSettings ? 'plr-12' : 'plr-16']">
<el-icon :class="`iconfont ${ 'icon-' + form.search_botton_icon } size-14`" />
</div>
</template>
@ -43,6 +43,10 @@ const props = defineProps({
return {};
},
},
isPageSettings: {
type: Boolean,
default: false,
},
});
// 用于页面判断显示
const state = reactive({
@ -62,12 +66,12 @@ const style = computed(() => {
}
return common_styles;
});
const style_container = computed(() => common_styles_computer(new_style.value.common_style));
const style_container = computed(() => props.isPageSettings ? '' : common_styles_computer(new_style.value.common_style));
const search_button_radius = computed(() => radius_computer(new_style.value.search_button_radius));
// 搜索框设置
const box_style = computed(() => {
let style = `background: ${ new_style.value.search_border }; ${ radius_computer(new_style.value.search_border_radius) }`;
let style = `border: 1px solid ${ new_style.value.search_border }; ${ radius_computer(new_style.value.search_border_radius) };`;
if (form.value.is_center) {
style += `justify-content: center;`;
}

44
src/components/model-search/model-search-content.vue
View File

@ -4,38 +4,46 @@
<card-container>
<div class="mb-12">展示设置</div>
<el-form-item label="图标样式" class="align-s">
<div class="flex-col w h gap-10">
<el-switch v-model="form.is_icon_show" />
<template v-if="form.is_icon_show">
<el-row class="w">
<el-col :span="24"><el-switch v-model="form.is_icon_show" width="40"></el-switch></el-col>
</el-row>
<el-row v-if="form.is_icon_show" class="mt-10 w">
<el-col :span="24">
<upload v-model="form.icon_img_src" v-model:icon-value="form.icon_class" is-icon :limit="1" size="50"></upload>
</template>
</div>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="提示文字">
<div class="flex-col gap-10 w">
<el-switch v-model="form.is_tips_show" />
<el-input v-if="form.is_tips_show" v-model="form.tips" placeholder="请输入提示文字"></el-input>
</div>
<el-row class="w">
<el-col :span="24"><el-switch v-model="form.is_tips_show"></el-switch></el-col>
</el-row>
<el-row v-if="form.is_tips_show" class="mt-10 w">
<el-col :span="24">
<el-input v-model="form.tips" placeholder="请输入提示文字"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item v-if="form.is_tips_show || form.is_icon_show" label="是否居中">
<el-switch v-model="form.is_center" />
<el-switch v-model="form.is_center"></el-switch>
</el-form-item>
<el-form-item label="搜索按钮" class="align-s">
<div class="flex-col w h gap-10">
<el-switch v-model="form.is_search_show" />
<template v-if="form.is_search_show">
<el-radio-group v-model="form.search_type" class="ml-4">
<el-row class="w">
<el-col :span="24"><el-switch v-model="form.is_search_show"></el-switch></el-col>
</el-row>
<el-row v-if="form.is_search_show" class="mt-10 w">
<el-col :span="24">
<el-radio-group v-model="form.search_type">
<el-radio value="img-icon">图片/图标</el-radio>
<el-radio value="text">文字</el-radio>
</el-radio-group>
<template v-if="form.search_type === 'img-icon'">
<upload v-model="form.search_botton_src" v-model:icon-value="form.search_botton_icon" is-icon :limit="1" size="50"></upload>
<upload v-model="form.search_botton_src" v-model:icon-value="form.search_botton_icon" is-icon :limit="1" size="50" class="mt-10"></upload>
</template>
<template v-else>
<el-input v-model="form.search_tips" placeholder="请输入文字内容"></el-input>
<el-input v-model="form.search_tips" placeholder="请输入文字内容" class="mt-10"></el-input>
</template>
</template>
</div>
</el-col>
</el-row>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />

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

@ -1,53 +1,57 @@
<template>
<div class="w h">
<el-form :model="form" label-width="70">
<card-container>
<div class="mb-12">左侧图标</div>
<el-form-item label="图标">
<color-picker v-model="form.icon_color" default-color="#CCCCCC"></color-picker>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">搜索按钮</div>
<el-form-item label="搜索按钮">
<color-picker v-model="form.button_inner_color" default-color="#fff"></color-picker>
</el-form-item>
<el-form-item v-if="content.search_type != 'img'" label="背景设置">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.color_list" :type="form.direction" @update:value="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.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>
<template v-if="search_content.is_icon_show">
<card-container>
<div class="mb-12">左侧图标</div>
<el-form-item label="图标">
<color-picker v-model="form.icon_color" default-color="#CCCCCC"></color-picker>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
</template>
<template v-if="search_content.is_search_show">
<card-container>
<div class="mb-12">搜索按钮</div>
<el-form-item label="搜索按钮">
<color-picker v-model="form.button_inner_color" default-color="#fff"></color-picker>
</el-form-item>
<el-form-item v-if="content.search_type != 'img'" label="背景设置">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.color_list" :type="form.direction" @update:value="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.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>
</div>
<upload v-model="form.background_img_url" :limit="1"></upload>
</div>
</el-form-item>
<el-form-item label="按钮圆角">
<radius :value="form.search_button_radius" @update:value="button_radius_change"></radius>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
</el-form-item>
<el-form-item label="按钮圆角">
<radius :value="form.search_button_radius" @update:value="button_radius_change"></radius>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
</template>
<card-container>
<div class="mb-12">框体样式</div>
<el-form-item label="提示文字">
<el-form-item v-if="search_content.is_tips_show" label="提示文字">
<color-picker v-model="form.tips_color" default-color="#CCCCCC"></color-picker>
</el-form-item>
<el-form-item label="热词文字">
<color-picker v-model="form.hot_words_color" default-color="#000"></color-picker>
</el-form-item>
<el-form-item label="搜索框">
<el-form-item label="搜索框线">
<color-picker v-model="form.search_border" default-color="#fff"></color-picker>
</el-form-item>
<el-form-item label="框体圆角">
@ -55,8 +59,10 @@
</el-form-item>
</card-container>
</el-form>
<div class="bg-f5 divider-line" />
<common-styles :value="form.common_style" @update:value="common_styles_update" />
<template v-if="isShowCommon">
<div class="bg-f5 divider-line" />
<common-styles :value="form.common_style" @update:value="common_styles_update" />
</template>
</div>
</template>
<script setup lang="ts">
@ -70,14 +76,18 @@ const props = defineProps({
type: Object,
default: () => ({}),
},
isShowCommon: {
type: Boolean,
default: true,
}
});
const state = reactive({
form: props.value,
content: props.content,
search_content: props.content,
});
// 如果需要解构，确保使用toRefs
const { form } = toRefs(state);
const { form, search_content } = toRefs(state);
// 监听整个form对象,发生变化的时候触发emit
const emit = defineEmits(['update:value']);

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

@ -1,17 +1,27 @@
<template>
<div class="model-top">
<div :class="['roll', { 'page-settings-border': showPage }]" :style="roll_style" @click="page_settings">
<div class="pb-12 pl-6 pr-13 w">
<div class="pt-15 pl-18 pr-22 w pb-6" :style="[!isEmpty(roll_style) ? '' : 'background-color: #fff']">
<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 re">
<div class="flex align-c jc-c h gap-16" :style="[{ 'justify-content': form?.indicator_location || 'center', 'padding-right': form?.indicator_location == 'flex-end' ? '90px' : '0'}, text_style]">
<template v-if="form.theme == '2' || form.theme == '3'">
<div class="model-head tc re mlr-12 mt-6">
<div v-if="['1', '2', '3'].includes(form.theme)" class="flex align-c jc-c h gap-16" :style="[{ 'justify-content': form?.indicator_location || 'center', 'padding-right': form?.indicator_location == 'flex-end' ? '90px' : '0'}, text_style]">
<template v-if="['2', '3'].includes(form.theme)">
<div class="logo-outer-style"><image-empty v-model="form.logo[0]" class="logo-style" error-img-style="width:2rem;height:2rem;"></image-empty></div>
</template>
<div v-if="form.theme == '1' || form.theme == '2'">{{ form?.title || '新建页面' }}</div>
<template v-if="form.theme == '3'">
<model-search :value="pageData.com_data"></model-search>
<div v-if="['1', '2'].includes(form.theme)">{{ form.title }}</div>
<template v-if="['3', '5'].includes(form.theme)">
<div class="flex-1" style="padding-right:90px">
<model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
</div>
</template>
</div>
<div v-else-if="['4', '5'].includes(form.theme)" class="flex align-c h gap-10">
<div class="flex-row gap-2"><icon name="position" size="12" color="0"></icon><span class="size-14 cr-3 text-line-1">{{ form.positioning_name }}</span><icon v-if="form.is_arrows_show" name="arrow-right" size="12" color="0"></icon></div>
<template v-if="['5'].includes(form.theme)">
<div class="flex-1" style="padding-right:90px">
<model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
</div>
</template>
</div>
<div class="model-head-icon">
@ -23,7 +33,7 @@
</template>
<script setup lang="ts">
import { background_computer, gradient_computer } from '@/utils';
import { isEmpty } from 'lodash';
interface Props {
pageData: any;
showPage: boolean;
@ -41,18 +51,24 @@ 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_image') {
style += gradient_computer({ color_list: new_style.value.background_color_list, direction: new_style.value.background_direction }) + background_computer(new_style.value);
if (new_style.value.header_background_type === 'color_image') {
const { header_background_img_url, header_background_img_style, header_background_color_list, header_background_direction } = new_style.value;
// 渐变
const gradient = { color_list: header_background_color_list, direction: header_background_direction };
// 背景图
const back = { background_img_url: header_background_img_url, background_img_style: header_background_img_style };
style += gradient_computer(gradient) + background_computer(back);
} else {
style += `background: transparent;`;
}
console.log(style);
return style
});
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;
};
const text_style = computed(() => `font-weight:${ new_style.value.background_title_typeface }; font-size: ${ new_style.value.background_title_size }px; color: ${ new_style.value.background_title_color };`);
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 };`);
</script>
<style lang="scss" scoped>
.model-top {
@ -63,7 +79,7 @@ const text_style = computed(() => `font-weight:${ new_style.value.background_tit
transform: translateX(-50%);
.roll {
width: 39rem;
padding: 1.5rem 1.2rem 0.9rem 1.2rem;
padding-bottom: 0.9rem;
margin: 0 auto;
cursor: pointer;
}

26
src/components/page-settings/page-content.vue
View File

@ -3,16 +3,16 @@
<el-form :model="form" label-width="70">
<card-container>
<el-form-item label="选择风格">
<theme-select v-model="form.theme" :data="base_list.themeList" @update:model-value="themeChange"></theme-select>
<theme-select v-model="form.theme" :data="base_list.themeList" :not-cleard-button="true" @update:model-value="themeChange"></theme-select>
</el-form-item>
<template v-if="form.theme == '1' || form.theme == '2' || form.theme == '3'">
<el-form-item v-if="form.theme == '2' || form.theme == '3'" label="logo">
<template v-if="['1', '2', '3'].includes(form.theme)">
<el-form-item v-if="['2', '3'].includes(form.theme)" label="logo">
<upload v-model="form.logo" :limit="1"></upload>
</el-form-item>
<el-form-item v-if="form.theme == '3'" label="链接地址">
<el-form-item v-if="['3'].includes(form.theme)" label="链接地址">
<url-value v-model="form.link"></url-value>
</el-form-item>
<template v-if="form.theme == '1' || form.theme == '2'">
<template v-if="['1', '2'].includes(form.theme)">
<el-form-item label="页面标题">
<el-input v-model="form.title" placeholder="请输入标题名称"></el-input>
</el-form-item>
@ -40,12 +40,23 @@
</el-form-item>
</template>
</template>
<template v-if="['4', '5'].includes(form.theme)">
<el-form-item label="定位名称">
<el-input v-model="form.positioning_name" placeholder="请输入默认定位名称"></el-input>
</el-form-item>
<el-form-item label="箭头按钮">
<el-radio-group v-model="form.is_arrows_show">
<el-radio :value="true">显示</el-radio>
<el-radio :value="false">隐藏</el-radio>
</el-radio-group>
</el-form-item>
</template>
</card-container>
<div class="bg-f5 divider-line" />
<template v-if="form.theme == '3'">
<template v-if="['3', '5'].includes(form.theme)">
<model-search-content :value="form"></model-search-content>
<div class="bg-f5 divider-line" />
</template>
<div class="bg-f5 divider-line" />
<card-container>
<el-form-item label="底部导航">
<el-radio-group v-model="form.bottom_navigation_show" class="ml-4">
@ -71,7 +82,6 @@ const base_list = reactive({
{ id: '3', name: '风格3', url: new URL(`../../assets/images/components/page-settings/theme-3.png`, import.meta.url).href },
{ id: '4', name: '风格4', url: new URL(`../../assets/images/components/page-settings/theme-4.png`, import.meta.url).href },
{ id: '5', name: '风格5', url: new URL(`../../assets/images/components/page-settings/theme-5.png`, import.meta.url).href },
{ id: '6', name: '风格6', url: new URL(`../../assets/images/components/page-settings/theme-6.png`, import.meta.url).href },
],
bottom_navigation: [
{ name: '显示', value: '1' },

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

@ -1,12 +1,10 @@
<template>
<div class="setting-content">
<template v-if="type == '1'">
<page-content :value="value.content" @update:change-theme="change_theme"></page-content>
</template>
<template v-else-if="type == '2'">
<page-styles :value="value.style" :content="value.content"></page-styles>
</template>
</div>
<template v-if="type == '1'">
<page-content :value="value.content" @update:change-theme="change_theme"></page-content>
</template>
<template v-else-if="type == '2'">
<page-styles :value="value.style" :content="value.content"></page-styles>
</template>
</template>
<script setup lang="ts">
const props = defineProps({
@ -19,138 +17,55 @@ const props = defineProps({
default: () => ({}),
},
});
const default_data = {
header_background_type: 'color_image',
header_background_color_list: [{ color: '#fff', color_percentage: undefined }],
header_background_direction: '180deg',
header_background_img_style: 2,
header_background_img_url: [],
header_background_title_color: '#333',
header_background_title_typeface: '500',
header_background_title_size: 16,
function_buttons_type: 'black',
immersive_style: false,
up_slide_display: true,
icon_color: '#ccc',
button_inner_color: '#fff',
color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],
direction: '90deg',
background_img_style: '',
background_img_url: [],
search_button_radius: {
radius: 16,
radius_top_left: 16,
radius_top_right: 16,
radius_bottom_left: 16,
radius_bottom_right: 16,
},
tips_color: '#ccc',
hot_words_color: '#000',
search_border: '#E4E4E4',
search_border_radius: {
radius: 16,
radius_top_left: 16,
radius_top_right: 16,
radius_bottom_left: 16,
radius_bottom_right: 16,
},
}
const default_config = {
style: {
theme_1: {
header_background_type: 'color_image',
header_background_color_list: [{ color: '#fff', color_percentage: undefined }],
header_background_direction: '180deg',
header_background_img_style: 2,
header_background_img_url: [],
header_background_title_color: '#000',
header_background_title_typeface: '500',
header_background_title_size: 14,
function_buttons_type: 'black',
immersive_style: false,
up_slide_display: true,
icon_color: '#ccc',
button_inner_color: '#fff',
color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],
direction: '90deg',
background_img_style: '',
background_img_url: [],
search_button_radius: {
radius: 16,
radius_top_left: 16,
radius_top_right: 16,
radius_bottom_left: 16,
radius_bottom_right: 16,
},
tips_color: '#ccc',
hot_words_color: '#000',
search_border: '#fff',
search_border_radius: {
radius: 16,
radius_top_left: 16,
radius_top_right: 16,
radius_bottom_left: 16,
radius_bottom_right: 16,
},
},
theme_2: {
header_background_type: 'color_image',
header_background_color_list: [{ color: '#fff', color_percentage: undefined }],
header_background_direction: '180deg',
header_background_img_style: 2,
header_background_img_url: [],
header_background_title_color: '#000',
header_background_title_typeface: '500',
header_background_title_size: 14,
function_buttons_type: 'black',
immersive_style: false,
up_slide_display: true,
icon_color: '#ccc',
button_inner_color: '#fff',
color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],
direction: '90deg',
background_img_style: '',
background_img_url: [],
search_button_radius: {
radius: 16,
radius_top_left: 16,
radius_top_right: 16,
radius_bottom_left: 16,
radius_bottom_right: 16,
},
tips_color: '#ccc',
hot_words_color: '#000',
search_border: '#fff',
search_border_radius: {
radius: 16,
radius_top_left: 16,
radius_top_right: 16,
radius_bottom_left: 16,
radius_bottom_right: 16,
},
},
theme_3: {
background_type: 'color_image',
background_color_list: [{ color: '#fff', color_percentage: undefined }],
background_direction: '180deg',
background_img_style: 2,
background_img_url: [],
background_title_color: '#000',
background_title_typeface: '500',
background_title_size: 14,
function_buttons_type: 'black',
immersive_style: false,
up_slide_display: true,
},
theme_4: {
background_type: 'color_image',
background_color_list: [{ color: '#fff', color_percentage: undefined }],
background_direction: '180deg',
background_img_style: 2,
background_img_url: [],
background_title_color: '#000',
background_title_typeface: '500',
background_title_size: 14,
function_buttons_type: 'black',
immersive_style: false,
up_slide_display: true,
},
theme_5: {
background_type: 'color_image',
background_color_list: [{ color: '#fff', color_percentage: undefined }],
background_direction: '180deg',
background_img_style: 2,
background_img_url: [],
background_title_color: '#000',
background_title_typeface: '500',
background_title_size: 14,
function_buttons_type: 'black',
immersive_style: false,
up_slide_display: true,
},
theme_6: {
background_type: 'color_image',
background_color_list: [{ color: '#fff', color_percentage: undefined }],
background_direction: '180deg',
background_img_style: 2,
background_img_url: [],
background_title_color: '#000',
background_title_typeface: '500',
background_title_size: 14,
function_buttons_type: 'black',
immersive_style: false,
up_slide_display: true,
},
theme_1: {},
theme_2: {},
theme_3: {},
theme_4: {},
theme_5: {},
},
};
const form = ref(props.value);
const change_theme = (val: string) => {
if (val) {
form.value.style = Object.assign({}, form.value.style, (<arrayIndex>default_config.style)[`theme_${Number(val)}`]);
form.value.style = Object.assign({}, form.value.style, default_data, (<arrayIndex>default_config.style)[`theme_${Number(val)}`]);
}
};
</script>

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

@ -5,15 +5,15 @@
<div class="mb-12">头部样式</div>
<el-form-item label="顶部背景">
<div class="flex-col gap-10">
<el-radio-group v-model="form.background_type">
<el-radio-group v-model="form.header_background_type">
<el-radio value="transparent">透明</el-radio>
<el-radio value="color_image">颜色/图片</el-radio>
</el-radio-group>
<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 v-if="form.header_background_type === 'color_image'">
<mult-color-picker :value="form.header_background_color_list" :type="form.header_background_direction" @update:value="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.background_img_style" is-button>
<el-radio-group v-model="form.header_background_img_style" is-button>
<el-tooltip content="单张" placement="top" effect="light">
<el-radio-button value="0">
<icon name="single-sheet"></icon>
@ -31,7 +31,7 @@
</el-tooltip>
</el-radio-group>
</div>
<upload v-model="form.background_img_url" :limit="1"></upload>
<upload v-model="form.header_background_img_url" :limit="1"></upload>
</template>
</div>
</el-form-item>
@ -53,14 +53,14 @@
<el-radio :value="false">关闭</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="标题名称">
<color-text-size-group v-model:color="form.background_title_color" v-model:typeface="form.background_title_typeface" v-model:size="form.background_title_size" default-color="#000000"></color-text-size-group>
<el-form-item v-if="['1', '2'].includes(search_content.theme)" label="标题名称">
<color-text-size-group v-model:color="form.header_background_title_color" v-model:typeface="form.header_background_title_typeface" v-model:size="form.header_background_title_size" default-color="#000000"></color-text-size-group>
</el-form-item>
</card-container>
</el-form>
<div class="bg-f5 divider-line" />
<template v-if="content.theme == '3'">
<model-search-styles :value="form" :content="props.content"></model-search-styles>
<template v-if="['3', '5'].includes(content.theme)">
<model-search-styles :value="form" :content="props.content" :is-show-common="false"></model-search-styles>
</template>
<div class="bg-f5 divider-line" />
<common-styles :value="form.common_style" :is-margin="false" :is-shadow="false" :is-radius="false" @update:value="common_styles_update" />
@ -80,15 +80,19 @@ const props = defineProps({
},
});
const emit = defineEmits(['update:value']);
// 默认值
let form = reactive(props.value);
const state = reactive({
form: props.value,
search_content: props.content,
});
// 如果需要解构，确保使用toRefs
const { form, search_content } = toRefs(state);
const common_styles_update = (val: Object) => {
form.common_style = val;
form.value.common_style = val;
};
const mult_color_picker_event = (arry: color_list[], type: number) => {
form.background_color_list = arry;
form.background_direction = type.toString();
form.value.header_background_color_list = arry;
form.value.header_background_direction = type.toString();
};
</script>
<style lang="scss" scoped>

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

@ -13,6 +13,8 @@ interface DefaultFooterNav {
link: object;
indicator_location: string;
bottom_navigation_show: string;
positioning_name: string;
is_arrows_show: boolean;
is_center: boolean;
is_icon_show: boolean;
icon_src: string;
@ -57,9 +59,11 @@ const defaultFooterNav: DefaultFooterNav = {
content: {
theme: '1',
logo: [],
title: '',
title: '新建页面',
link: {},
indicator_location: 'center',
positioning_name: '默认定位名称',
is_arrows_show: true,
is_center: false,
is_icon_show: true,
icon_src: '',
@ -87,9 +91,9 @@ const defaultFooterNav: DefaultFooterNav = {
header_background_direction: '180deg',
header_background_img_style: 2,
header_background_img_url: [],
header_background_title_color: '#000',
header_background_title_color: '#333',
header_background_title_typeface: '500',
header_background_title_size: 14,
header_background_title_size: 16,
function_buttons_type: 'black',
immersive_style: false,
up_slide_display: true,

2
src/layout/components/main/default/notice.ts
View File

@ -31,6 +31,7 @@ interface defaultSearch {
topic_size: number;
topic_width: number;
topic_height: number;
container_height: number;
icon_size: number;
icon_color: string;
container_color_list: color_list[],
@ -80,6 +81,7 @@ const defaultSearch: defaultSearch = {
topic_size: 14,
topic_width: 24,
topic_height: 24,
container_height: 44,
icon_size: 12,
icon_color: '#999',
button_color: '#999',