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

修改数据内容显示

v1.1.0
于肖磊 2024-11-29 17:38:43 +08:00
parent 028bd70576
commit 7eca93ad67
8 changed files with 201 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -81,6 +81,8 @@ const box_style = computed(() => {
let style = `background: ${ new_style.value.search_bg_color };border: 1px solid ${ new_style.value.search_border }; ${ radius_computer(new_style.value.search_border_radius) };`;
if (form.value.is_center == '1') {
style += `justify-content: center;`;
} else {
style += `padding-left: ${ new_style.value.search_padding_left }px;`;
}
return style;
});
@ -140,7 +142,7 @@ watchEffect(() => {
.search {
height: 3.2rem;
.box {
padding: 0.6rem 1.5rem;
padding: 0.6rem 1.5rem 0.6rem 0;
}
.img-box {
height: 100%;

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

@ -38,6 +38,9 @@
<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="左边距">
<slider v-model="form.search_padding_left" :min="1" :max="200"></slider>
</el-form-item>
<el-form-item label="搜索框线">
<color-picker v-model="form.search_border" default-color="#fff"></color-picker>
</el-form-item>

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

@ -34,17 +34,19 @@
</template>
</div>
</div>
<div v-else-if="['4', '5'].includes(form.theme)" class="flex-1 flex-row align-c h gap-10">
<div class="model-head-location flex-row gap-2 align-c" :style="'color:' + new_style.position_color">
<template v-if="form.is_location_left_icon_show == '1'">
<image-empty v-if="form.location_left_img.length > 0" v-model="form.location_left_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty>
<icon v-else :name="form.location_left_icon" size="12"></icon>
</template>
<span class="location-name size-14 text-line-1">{{ form.positioning_name }}</span>
<template v-if="form.is_location_right_icon_show == '1'">
<image-empty v-if="form.location_right_img.length > 0" v-model="form.location_right_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty>
<icon v-else :name="form.location_right_icon" size="12"></icon>
</template>
<div v-else-if="['4', '5'].includes(form.theme)" class="flex-1 flex-row align-c h gap-10 re">
<div :class="['model-head-location oh', form.positioning_name_float == '1' ? 'abs z-i' : '' ]" :style="style_location_container">
<div class="flex-row gap-2 align-c h oh" :style="style_location_img_container">
<template v-if="form.is_location_left_icon_show == '1'">
<image-empty v-if="form.location_left_img.length > 0" v-model="form.location_left_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty>
<icon v-else :name="form.location_left_icon" size="12"></icon>
</template>
<span class="location-name size-14 text-line-1">{{ form.positioning_name }}</span>
<template v-if="form.is_location_right_icon_show == '1'">
<image-empty v-if="form.location_right_img.length > 0" v-model="form.location_right_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty>
<icon v-else :name="form.location_right_icon" size="12"></icon>
</template>
</div>
</div>
<template v-if="['5'].includes(form.theme) && !is_search_alone_row">
<div class="flex-1">
@ -79,7 +81,7 @@
</div>
</template>
<script setup lang="ts">
import { background_computer, gradient_computer } from '@/utils';
import { background_computer, gradient_computer, margin_computer, padding_computer, radius_computer } from '@/utils';
import { isEmpty } from 'lodash';
import { commonStore } from '@/store';
const common_store = commonStore();
@ -168,6 +170,41 @@ const up_slide_img_style = computed(() => {
}
return style;
});
const location_height = computed(() => {
const { location_margin } = new_style.value;
return 32 - location_margin.margin_top - location_margin.margin_bottom + 'px';
});
const img_height = computed(() => {
const { location_margin } = new_style.value;
const height = 32 - location_margin.margin_top - location_margin.margin_bottom;
return height > 28 ? '28px' : height + 'px';
});
// 定位设置
const style_location_container = computed(() => {
const style = {
color_list: new_style.value.location_color_list,
direction: new_style.value.location_direction,
}
return gradient_computer(style) + margin_computer(new_style.value.location_margin) + radius_computer(new_style.value.location_radius) + `color: ${new_style.value.location_color};`;
});
// 背景图片
const style_location_img_container = computed(() => {
const { location_background_img, location_background_img_style, location_padding, location_border_direction, location_border_size, location_border_color } = new_style.value;
const style = {
background_img: location_background_img,
background_img_style: location_background_img_style,
}
let border = ``;
if (new_style.value.location_border_show == '1') {
// 边框
if (location_border_direction == 'all') {
border += `border: ${location_border_size}px solid ${location_border_color};`;
} else {
border += `border-${location_border_direction}: ${location_border_size}px solid ${location_border_color};`;
}
}
return background_computer(style) + padding_computer(location_padding) + border;
});
// 文字样式
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` : ''));
@ -199,16 +236,17 @@ const position_class = computed(() => (form.value?.indicator_location == 'center
.model-head-content {
height: 3.2rem;
.location-name {
line-height: 3.2rem;
// line-height: 100%;
max-width: 15rem;
width: 100%;
flex-basis: content;
flex-shrink: 1;
}
.model-head-location {
height: v-bind(location_height);
:deep(.el-image) {
width: 100%;
height: 2.8rem;
height: v-bind(img_height);
flex-basis: content;
flex-shrink: 1;
}

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

@ -46,6 +46,9 @@
<el-form-item label="定位名称">
<el-input v-model="form.positioning_name" placeholder="请输入默认定位名称" clearable></el-input>
</el-form-item>
<el-form-item label="定位浮起">
<el-switch v-model="form.positioning_name_float" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
</template>
<el-form-item label="数据换行">
<el-checkbox-group v-model="form.data_alone_row_value">

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

@ -30,6 +30,7 @@ const default_data = {
icon_setting: [
{ id: get_math(), img: [], icon: 'bell', link: {} },
],
positioning_name_float: '0',
is_location_left_icon_show: '1',
location_left_img: [],
location_left_icon: 'location',
@ -71,7 +72,37 @@ const default_data = {
radius_bottom_left: 16,
radius_bottom_right: 16,
},
position_color: '#333',
// 定位设置
location_direction: '90deg',
location_color_list: [{ color: '', color_percentage: undefined }],
location_background_img_style: '0',
location_background_img: [],
location_color: '#333',
location_border_show: '0',
location_border_color: 'FF3F3F',
location_border_direction: 'all',
location_border_size: 1,
location_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
location_padding: {
padding: 0,
padding_top: 0,
padding_right: 0,
padding_bottom: 0,
padding_left: 0,
},
location_margin: {
margin: 0,
margin_top: 0,
margin_right: 0,
margin_bottom: 0,
margin_left: 0,
},
img_size: '23',
img_space: '15',
img_color: '#666',
@ -86,6 +117,7 @@ const default_data = {
radius_bottom_left: 16,
radius_bottom_right: 16,
},
search_padding_left: 15,
}
}
const common_config = computed(() => {

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

@ -28,9 +28,6 @@
<el-form-item v-if="['1', '2', '3'].includes(page_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>
<el-form-item v-if="['4', '5'].includes(page_content.theme)" label="定位颜色">
<color-picker v-model="form.position_color" default-color="#333"></color-picker>
</el-form-item>
<el-form-item v-if="form.header_background_type == 'transparent'" label="沉浸样式">
<div class="flex-row align-c gap-10">
<el-switch v-model="form.immersive_style" active-value="1" inactive-value="0" :disabled="is_have_tabs" @change="change_immersive_style"></el-switch>
@ -75,6 +72,54 @@
<slider v-model="form.data_alone_row_space" :max="100"></slider>
</el-form-item>
</card-container>
<template v-if="['4', '5'].includes(page_content.theme)">
<card-container>
<div class="mb-12">定位设置</div>
<el-form-item label="定位背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.location_color_list" :type="form.location_direction" @update:value="location_mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.location_background_img_style"></bg-btn-style>
</div>
<upload v-model="form.location_background_img" :limit="1" @update:model-value="location_background_img_change"></upload>
</div>
</el-form-item>
<el-form-item v-if="['4', '5'].includes(page_content.theme)" label="定位颜色">
<color-picker v-model="form.location_color" default-color="#333"></color-picker>
</el-form-item>
<el-form-item label="圆角">
<radius :value="form.location_radius"></radius>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.location_padding"></padding>
</el-form-item>
<el-form-item label="外边距">
<margin :value="form.location_margin"></margin>
</el-form-item>
<el-form-item label="边框">
<el-switch v-model="form.location_border_show" active-value="1" inactive-value="0" />
</el-form-item>
<template v-if="form.location_border_show == '1'">
<el-form-item label="边框颜色">
<color-picker v-model="form.location_border_color" default-color="#FF3F3F"></color-picker>
</el-form-item>
<el-form-item label="边框位置">
<el-radio-group v-model="form.location_border_direction">
<el-radio value="all">全部</el-radio>
<el-radio value="left">左侧</el-radio>
<el-radio value="right">右侧</el-radio>
<el-radio value="top">上边框</el-radio>
<el-radio value="bottom">下边框</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="边框粗细">
<slider v-model="form.location_border_size" :max="100"></slider>
</el-form-item>
</template>
</card-container>
</template>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">右侧图标设置</div>
@ -164,6 +209,16 @@ 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 location_mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.location_color_list = arry;
form.value.location_direction = type.toString();
};
// 定位背景图片处理
const location_background_img_change = (val: uploadList[]) => {
form.value.location_background_img = val;
};
const change_immersive_style = (val: string | number | boolean) => {
if (val === '0') {
// 沉浸模式关闭的时候，安全距离关闭

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

@ -24,6 +24,7 @@ interface DefaultFooterNav {
indicator_location: string;
bottom_navigation_show: string;
positioning_name: string;
positioning_name_float: string;
icon_setting: { id: string; img: uploadList[]; link: object; icon: string }[];
is_location_left_icon_show: string;
location_left_img: uploadList[];
@ -72,7 +73,18 @@ interface DefaultFooterNav {
search_botton_background_img_style: string;
search_botton_background_img: uploadList[];
search_button_radius: object;
position_color: string;
location_direction: string;
location_color_list: color_list[],
location_background_img_style: string,
location_background_img: string[],
location_color: string;
location_border_show: string;
location_border_color: string;
location_border_direction: string;
location_border_size: number;
location_radius: radiusStyle;
location_padding: paddingStyle;
location_margin: marginStyle;
img_size: string;
img_space: string;
img_color: string;
@ -81,6 +93,7 @@ interface DefaultFooterNav {
search_border: string;
search_bg_color: string;
search_border_radius: object;
search_padding_left: number,
common_style: object;
};
}
@ -105,6 +118,7 @@ const defaultFooterNav: DefaultFooterNav = {
location_left_icon: 'location',
// 定位内容
positioning_name: '未选择位置',
positioning_name_float: '0',
// 定位右侧图标内容
is_location_right_icon_show: '1',
location_right_img: [],
@ -158,8 +172,37 @@ const defaultFooterNav: DefaultFooterNav = {
// 左侧返回按钮颜色
left_back_btn_color: '#333',
icon_color: '#ccc',
// 定位颜色
position_color: '#333',
// 定位设置
location_direction: '90deg',
location_color_list: [{ color: '', color_percentage: undefined }],
location_background_img_style: '0',
location_background_img: [],
location_color: '#333',
location_border_show: '0',
location_border_color: 'FF3F3F',
location_border_direction: 'all',
location_border_size: 1,
location_radius: {
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
},
location_padding: {
padding: 0,
padding_top: 0,
padding_right: 0,
padding_bottom: 0,
padding_left: 0,
},
location_margin: {
margin: 0,
margin_top: 0,
margin_right: 0,
margin_bottom: 0,
margin_left: 0,
},
// 右侧图标大小和间距
img_size: '23',
img_space: '15',
@ -195,6 +238,7 @@ const defaultFooterNav: DefaultFooterNav = {
radius_bottom_left: 16,
radius_bottom_right: 16,
},
search_padding_left: 15,
common_style: {
...defaultCommon,
color_list: [{ color: '#f5f5f5', color_percentage: undefined }],

2
src/config/const/search.ts
View File

@ -30,6 +30,7 @@ interface defaultSearch {
search_botton_background_img_style: string;
search_botton_background_img: uploadList[];
search_button_radius: object;
search_padding_left: number;
tips_color: string;
hot_words_color: string;
search_border: string;
@ -95,6 +96,7 @@ const defaultSearch: defaultSearch = {
radius_bottom_left: 16,
radius_bottom_right: 16,
},
search_padding_left: 10,
// 热词轮播
is_roll: '1',
interval_time: 3,