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

新增图标上滑背景

v1.4.0
于肖磊 2025-05-16 11:07:46 +08:00
parent f976b49866
commit d03d28bec8
3 changed files with 26 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -57,7 +57,7 @@
<div v-if="!isEmpty(form.icon_setting) && !is_icon_alone_row" 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]" fit="contain" :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="new_style.img_color"></icon>
<icon v-else :name="item.icon" :size="new_style.img_size + ''" :styles="up_slide_icon_style"></icon>
</div>
</div>
</div>
@ -70,7 +70,7 @@
<div v-if="!isEmpty(form.icon_setting) && is_icon_alone_row" 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]" fit="contain" :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="new_style.img_color"></icon>
<icon v-else :name="item.icon" :size="new_style.img_size + ''" :styles="up_slide_icon_style"></icon>
</div>
</div>
</div>
@ -159,6 +159,20 @@ const up_slide_style = computed(() => {
}
return style;
});
// 上滑图标更新
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 }`;
} else {
style += `color: ${ img_color };`;
}
return style;
});
// 上滑显示图片效果
const up_slide_img_style = computed(() => {
let style = ``;

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

@ -118,7 +118,10 @@
</el-radio-group>
</el-form-item>
<el-form-item label="图标颜色">
<color-picker v-model="form.img_color" default-color="#666"></color-picker>
<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>
</el-form-item>
</card-container>
</el-form>
@ -217,4 +220,8 @@ const general_safe_distance_value_change = (val: string | number | boolean) => {
.styles {
width: 100%;
}
.desc-title {
font-size: 1.2rem;
color: #999;
}
</style>

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

@ -68,6 +68,7 @@ interface DefaultFooterNav {
general_safe_distance_value: string;
up_slide_logo: uploadList[];
up_slide_display: string;
up_slide_icon_color: string;
up_slide_background_color_list: color_list[];
up_slide_background_direction: string;
up_slide_background_img_style: string;
@ -190,6 +191,7 @@ const defaultFooterNav: DefaultFooterNav = {
// 上滑显示处理
up_slide_logo: [],
up_slide_display: '1',
up_slide_icon_color: '',
up_slide_background_color_list: [{ color: '#fff', color_percentage: undefined }],
up_slide_background_direction: '180deg',
up_slide_background_img_style: '2',