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

新增标题和定位上滑变色

v1.4.0
于肖磊 2025-05-16 15:22:08 +08:00
parent d03d28bec8
commit db33e34e73
4 changed files with 77 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/common/color-text-size-group/index.vue
View File

@ -1,9 +1,15 @@
<template>
<div class="flex-col w h gap-10">
<color-picker v-if="typeList.includes('color')" v-model="color" :default-color="props.defaultColor"></color-picker>
<el-radio-group v-if="typeList.includes('typeface')" v-model="typeface">
<el-radio v-for="item in font_weight" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
<div v-if="typeList.includes('color')" class="flex-col w gap-10">
<div class="flex-row gap-10"><span v-if="isUpSlideDisplay" class="desc-title">默认</span><color-picker v-model="color" :default-color="props.defaultColor"></color-picker></div>
<div v-if="isUpSlideDisplay" class="flex-row gap-10"><span class="desc-title">上滑</span><color-picker v-model="upColor"></color-picker></div>
</div>
<div class="flex-row gap-10">
<span v-if="isUpSlideDisplay" class="desc-title">字体</span>
<el-radio-group v-if="typeList.includes('typeface')" v-model="typeface">
<el-radio v-for="item in font_weight" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</div>
<el-form-item v-if="typeList.includes('size')" :label="sliderName" :label-width="labelWidth" class="mb-0 w form-item-child-label">
<slider v-model="size" :max="100"></slider>
</el-form-item>
@ -19,17 +25,23 @@ interface Props {
typeList?: string[]; // 默认显示3个，传递了之后按照传递的显示
sliderName?: string;
labelWidth?: number;
isUpSlideDisplay?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
defaultColor: '',
typeList: () => ['color', 'typeface', 'size'],
sliderName: '字号',
labelWidth: 40,
labelWidth: 36,
isUpSlideDisplay: false,
});
const color = defineModel('color', {
type: String,
default: '',
});
const upColor = defineModel('upColor', {
type: String,
default: '',
});
const typeface = defineModel('typeface', {
type: String,
default: '400',
@ -40,4 +52,9 @@ const size = defineModel('size', {
});
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.desc-title {
font-size: 1.2rem;
color: #999;
}
</style>

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

@ -12,7 +12,7 @@
<div class="flex-col" :style="`gap: ${new_style.data_alone_row_space}px`">
<div class="model-head-content flex-row align-c jc-sb gap-16 re">
<div v-if="['1', '2', '3'].includes(form.theme)" class="flex-1">
<div class="flex-1 flex-row align-c jc-c h gap-16" :class="position_class" :style="[{ 'justify-content': form?.indicator_location || 'center' }, text_style]">
<div class="flex-1 flex-row align-c jc-c h gap-16" :class="position_class" :style="[{ 'justify-content': form?.indicator_location || 'center' }, text_style, up_slide_title_style]">
<template v-if="['2', '3'].includes(form.theme) && form.logo.length > 0">
<div class="logo-outer-style re">
<template v-if="new_style.up_slide_logo && new_style.up_slide_logo.length > 0">
@ -35,7 +35,7 @@
</div>
</div>
<div v-else-if="['4', '5'].includes(form.theme)" class="flex-1 flex-row align-c h re">
<div v-if="form.positioning_name_float !== '1'" class="model-head-location oh" :style="style_location_container">
<div v-if="form.positioning_name_float !== '1'" class="model-head-location oh" :style="style_location_container + up_slide_location_style">
<div class="flex-row gap-4 align-c 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>
@ -164,15 +164,39 @@ const up_slide_icon_style = computed(() => {
let style = ``;
const { up_slide_display, img_color = '', up_slide_icon_color = '' } = new_style.value;
if (props.scollTop > 20 && up_slide_display == '1') {
const opacityValue = (props.scollTop - 20) / 90;
const opacity = opacityValue > 1 ? '1' : opacityValue.toFixed(2);
const numericOpacity = parseFloat(opacity); // 转换为数字
style += up_slide_icon_color == '' || numericOpacity <= 0 ? `color: ${ img_color };` : `color: ${ up_slide_icon_color };${ up_slide_opacity.value }`;
style += up_slide_icon_color == '' || new_opacity.value <= 0 ? `color: ${ img_color };` : `color: ${ up_slide_icon_color };${ up_slide_opacity.value }`;
} else {
style += `color: ${ img_color };`;
}
return style;
});
const new_opacity = computed(() => {
const opacityValue = (props.scollTop - 20) / 90;
const opacity = opacityValue > 1 ? '1' : opacityValue.toFixed(2);
return parseFloat(opacity); // 转换为数字
})
// 上滑标题更新
const up_slide_title_style = computed(() => {
let style = ``;
const { up_slide_display, header_background_title_color = '', up_slide_title_color = '' } = new_style.value;
if (props.scollTop > 20 && up_slide_display == '1') {
style += up_slide_title_color == '' || new_opacity.value <= 0 ? `color: ${ header_background_title_color };` : `color: ${ up_slide_title_color };${ up_slide_opacity.value }`;
} else {
style += `color: ${ header_background_title_color };`;
}
return style;
});
// 上滑标题更新
const up_slide_location_style = computed(() => {
let style = ``;
const { up_slide_display, location_color = '', up_slide_location_color = '' } = new_style.value;
if (props.scollTop > 20 && up_slide_display == '1') {
style += up_slide_location_color == '' || new_opacity.value <= 0 ? `color: ${ location_color };` : `color: ${ up_slide_location_color };${ up_slide_opacity.value }`;
} else {
style += `color: ${ location_color };`;
}
return style;
});
// 上滑显示图片效果
const up_slide_img_style = computed(() => {
let style = ``;

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

@ -26,7 +26,7 @@
</el-radio-group>
</el-form-item>
<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>
<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" v-model:up-color="form.up_slide_title_color" :is-up-slide-display="form.up_slide_display == '1'" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item v-if="form.header_background_type == 'transparent'" label="沉浸样式">
<div class="flex-row align-c gap-10">
@ -52,8 +52,18 @@
</el-form-item>
</template>
<el-form-item label="返回颜色">
<color-picker v-model="form.left_back_btn_color" class="mr-10" default-color="#333"></color-picker>
<tooltip content="打开新页面才会出现返回按钮"></tooltip>
<div class="flex-col gap-10">
<div class="flex-row gap-10">
<span v-if="form.up_slide_display == '1'" class="desc-title">默认</span>
<color-picker v-model="form.left_back_btn_color" default-color="#333"></color-picker>
<tooltip content="打开新页面才会出现返回按钮"></tooltip>
</div>
<div v-if="form.up_slide_display == '1'" class="flex-row gap-10">
<span class="desc-title">上滑</span>
<color-picker v-model="form.up_slide_left_back_btn_color"></color-picker>
<tooltip content="打开新页面才会出现返回按钮"></tooltip>
</div>
</div>
</el-form-item>
<el-form-item v-if="page_content.data_alone_row_value.length > 0" label="换行间距">
<slider v-model="form.data_alone_row_space" :max="100"></slider>
@ -67,7 +77,10 @@
<background-common v-model:color_list="form.location_color_list" v-model:direction="form.location_direction" v-model:img_style="form.location_background_img_style" v-model:img="form.location_background_img" @mult_color_picker_event="location_mult_color_picker_event" />
</el-form-item>
<el-form-item label="定位颜色">
<color-picker v-model="form.location_color" default-color="#333"></color-picker>
<div class="flex-col gap-10">
<div class="flex-row gap-10"><span v-if="form.up_slide_display == '1' && page_content.theme !== '5' && page_content.positioning_name_float !== '1'" class="desc-title">默认</span><color-picker v-model="form.location_color" default-color="#333"></color-picker></div>
<div v-if="form.up_slide_display == '1' && page_content.theme !== '5' && page_content.positioning_name_float !== '1'" class="flex-row gap-10"><span class="desc-title">上滑</span><color-picker v-model="form.up_slide_location_color"></color-picker></div>
</div>
</el-form-item>
<template v-if="!isEmpty(page_content.location_left_icon)">
<el-form-item label="左侧图标">
@ -120,7 +133,7 @@
<el-form-item label="图标颜色">
<div class="flex-col gap-10">
<div class="flex-row gap-10"><span v-if="form.up_slide_display == '1'" class="desc-title">默认</span><color-picker v-model="form.img_color" default-color="#666"></color-picker></div>
<div v-if="form.up_slide_display == '1'" class="flex-row gap-10"><span class="desc-title">上滑</span><color-picker v-model="form.up_slide_icon_color" class="mr-10"></color-picker></div>
<div v-if="form.up_slide_display == '1'" class="flex-row gap-10"><span class="desc-title">上滑</span><color-picker v-model="form.up_slide_icon_color"></color-picker></div>
</div>
</el-form-item>
</card-container>

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

@ -69,6 +69,9 @@ interface DefaultFooterNav {
up_slide_logo: uploadList[];
up_slide_display: string;
up_slide_icon_color: string;
up_slide_title_color: string,
up_slide_location_color : string,
up_slide_left_back_btn_color: string,
up_slide_background_color_list: color_list[];
up_slide_background_direction: string;
up_slide_background_img_style: string;
@ -192,6 +195,9 @@ const defaultFooterNav: DefaultFooterNav = {
up_slide_logo: [],
up_slide_display: '1',
up_slide_icon_color: '',
up_slide_title_color: '',
up_slide_location_color : '',
up_slide_left_back_btn_color: '',
up_slide_background_color_list: [{ color: '#fff', color_percentage: undefined }],
up_slide_background_direction: '180deg',
up_slide_background_img_style: '2',