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

修改页面显示

v1.0.0
于肖磊 2024-09-18 14:22:27 +08:00
parent bf7e0f9c8d
commit 3e6d2a2db4
7 changed files with 82 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/components/page-settings/theme-3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
src/assets/images/components/page-settings/theme-5.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

1
src/components/model-custom/model-custom-content.vue
View File

@ -166,7 +166,6 @@ const changeDataSource = (key: string) => {
const url_value_dialog_call_back = (item: any[]) => {
if (item.length > 0) {
form.data_source_content = item[0];
form.data_source_content_value = item[0].id;
} else {
form.data_source_content = {};
}

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

@ -5,27 +5,35 @@
<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 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' }, 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="['1', '2'].includes(form.theme)">{{ form.title }}</div>
<template v-if="['3', '5'].includes(form.theme)">
<div class="flex-1">
<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 == '1'" name="arrow-right" size="12" color="0"></icon>
<div class="flex-row align-c js-sb">
<div v-if="['1', '2', '3'].includes(form.theme)" class="flex-row align-c jc-c h gap-16" :style="[{ 'justify-content': form?.indicator_location || 'center' }, 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="['1', '2'].includes(form.theme)">{{ form.title }}</div>
<template v-if="['3', '5'].includes(form.theme)">
<div class="flex-1">
<model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
</div>
</template>
</div>
<template v-if="['5'].includes(form.theme)">
<div class="flex-1">
<model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
<div v-else-if="['4', '5'].includes(form.theme)" class="flex-row 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 == '1'" name="arrow-right" size="12" color="0"></icon>
</div>
</template>
<template v-if="['5'].includes(form.theme)">
<div class="flex-1">
<model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
</div>
</template>
</div>
<div class="flex-row align-c" :class="'gap-' + new_style.img_space">
<div v-for="(item, index) in form.icon_setting" :key="index" :style="{ width: new_style.img_size + 'px', height: new_style.img_size + 'px' }">
<image-empty v-if="item.img.length > 0" v-model="item.img[0]" :error-img-style="'width: ' + Number(new_style.img_size) / 2 + 'px;height:' + Number(new_style.img_size) / 2 + 'px;'"></image-empty>
<icon v-else :name="item.icon" :size="new_style.img_size + ''" color="6"></icon>
</div>
</div>
</div>
</div>
</div>

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

@ -54,6 +54,20 @@
<model-search-content :value="form"></model-search-content>
<div class="bg-f5 divider-line" />
</template>
<card-container>
<div class="mb-12">图标设置</div>
<div class="size-12 cr-c mb-20">图片建议宽高80*80；鼠标拖拽左侧圆点可调整导航顺序</div>
<div class="nav-list">
<drag :data="form.icon_setting" :space-col="20" @remove="icon_setting_remove" @on-sort="icon_setting_sort">
<template #default="{ row }">
<upload v-model="row.img" v-model:icon-value="row.icon" is-icon type="img" :limit="1" :styles="2" :size="30"></upload>
<url-value v-model="row.link"></url-value>
</template>
</drag>
<el-button class="mtb-20 w" @click="add">+添加</el-button>
</div>
</card-container>
<div class="bg-f5 divider-line" />
<card-container>
<el-form-item label="底部导航">
<el-switch v-model="form.bottom_navigation_show" active-value="1" inactive-value="0"></el-switch>
@ -63,6 +77,7 @@
</div>
</template>
<script setup lang="ts">
import { get_math } from '@/utils';
const props = defineProps({
value: {
type: Object,
@ -80,6 +95,20 @@ const base_list = reactive({
]
});
const icon_setting_remove = (index: number) => {
form.icon_setting.splice(index, 1);
};
const icon_setting_sort = (item: any) => {
form.icon_setting = item;
};
const add = () => {
form.icon_setting.push({
id: get_math(),
img: [],
icon: '',
link: {},
});
};
const emit = defineEmits(['update:change-theme']);
const themeChange = (val: string) => {
emit('update:change-theme', val);

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

@ -51,6 +51,24 @@
<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>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">右侧图标设置</div>
<el-form-item label="图标大小">
<el-radio-group v-model="form.img_size">
<el-radio value="28">大</el-radio>
<el-radio value="23">中</el-radio>
<el-radio value="18">小</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="图标间距">
<el-radio-group v-model="form.img_space">
<el-radio value="35">大</el-radio>
<el-radio value="25">中</el-radio>
<el-radio value="15">小</el-radio>
</el-radio-group>
</el-form-item>
</card-container>
</el-form>
<template v-if="['3', '5'].includes(content.theme)">
<div class="bg-f5 divider-line" />

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

@ -14,6 +14,7 @@ interface DefaultFooterNav {
indicator_location: string;
bottom_navigation_show: string;
positioning_name: string;
icon_setting: { id: string; img: uploadList[]; link: object; icon: string }[];
is_arrows_show: string;
is_center: string;
is_icon_show: string;
@ -48,6 +49,8 @@ interface DefaultFooterNav {
search_botton_background_img_style: string;
search_botton_background_img: uploadList[];
search_button_radius: object;
img_size: string;
img_space: string;
tips_color: string;
hot_words_color: string;
search_border: string;
@ -63,6 +66,9 @@ const defaultFooterNav: DefaultFooterNav = {
link: {},
indicator_location: 'center',
positioning_name: '默认名称',
icon_setting: [
{ id: get_math(), img: [], icon: 'applet-me-message-acquiesce', link: {} },
],
is_arrows_show: '1',
is_center: '0',
is_icon_show: '1',
@ -107,6 +113,8 @@ const defaultFooterNav: DefaultFooterNav = {
radius_bottom_left: 16,
radius_bottom_right: 16,
},
img_size: '23',
img_space: '25',
tips_color: '#ccc',
hot_words_color: '#000',
search_border: '#E4E4E4',