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

页面设置新增上滑显示logo更换

v1.1.0
于肖磊 2024-10-29 16:42:24 +08:00
parent f8298e896d
commit 87daf436ae
4 changed files with 32 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,8 +14,11 @@
<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]">
<template v-if="['2', '3'].includes(form.theme) && form.logo.length > 0">
<div class="logo-outer-style">
<img class="logo-style" :src="form.logo[0].url" />
<div class="logo-outer-style re">
<img class="logo-style" :style="up_slide_old_logo_style" :src="form.logo[0].url" />
<template v-if="new_style.up_slide_logo && new_style.up_slide_logo.length > 0">
<img class="logo-style abs left-0" :style="'opacity:0;' + up_slide_opacity" :src="new_style.up_slide_logo[0].url" />
</template>
</div>
</template>
<div v-if="['1', '2'].includes(form.theme)">{{ form.title }}</div>
@ -123,22 +126,37 @@ const roll_img_style = computed(() => {
}
return style;
});
const up_slide_opacity = computed(() => {
let opacity = '1';
if (props.scollTop > 20 && new_style.value.up_slide_display == '1') {
opacity = `opacity: ${(props.scollTop - 20) / 90 > 1 ? 1 : ((props.scollTop - 20) / 90).toFixed(2)};`;
}
return opacity;
});
// 上滑时原logo 隐藏效果
const up_slide_old_logo_style = computed(() => {
let style = ``;
if (props.scollTop > 5 && new_style.value.up_slide_display == '1') {
style += `opacity: ${(props.scollTop - 5) / 90 > 1 ? 0 : (1 - (props.scollTop - 5) / 90).toFixed(2)};`;
}
return style;
});
// 上滑显示渐变效果
const up_slide_style = computed(() => {
let style = ``;
if (props.scollTop > 20) {
const { up_slide_background_color_list, up_slide_background_direction } = new_style.value;
const { up_slide_background_color_list, up_slide_background_direction, up_slide_display } = new_style.value;
if (props.scollTop > 20 && up_slide_display == '1') {
// 渐变
const gradient = { color_list: up_slide_background_color_list, direction: up_slide_background_direction };
style += gradient_computer(gradient) + `opacity: ${(props.scollTop - 20) / 90 > 1 ? 1 : ((props.scollTop - 20) / 90).toFixed(2)};`;
style += gradient_computer(gradient) + up_slide_opacity.value;
}
return style;
});
// 上滑显示图片效果
const up_slide_img_style = computed(() => {
let style = ``;
if (props.scollTop > 20) {
const { up_slide_background_img = '', up_slide_background_img_style = '' } = new_style.value;
const { up_slide_background_img = '', up_slide_background_img_style = '', up_slide_display } = new_style.value;
if (props.scollTop > 20 && up_slide_display == '1') {
// 背景图
const back = { background_img: up_slide_background_img, background_img_style: up_slide_background_img_style };
style += background_computer(back);

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

@ -49,6 +49,7 @@ const default_data = {
data_alone_row_space: 5,
function_buttons_type: '0',
immersive_style: '0',
up_slide_logo: [],
up_slide_display: '1',
up_slide_background_color_list: [{ color: '#fff', color_percentage: undefined }],
up_slide_background_direction: '180deg',

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

@ -50,6 +50,9 @@
<el-form-item label="上滑展示">
<el-switch v-model="form.up_slide_display" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
<el-form-item v-if="['2', '3'].includes(page_content.theme) && !isEmpty(page_content.logo)" label="上滑logo">
<upload v-model="form.up_slide_logo" :limit="1"></upload>
</el-form-item>
<el-form-item label="上滑背景">
<div class="w h flex-col gap-10">
<mult-color-picker :value="form?.up_slide_background_color_list || []" :type="form?.up_slide_background_direction || '180deg'" @update:value="up_slide_mult_color_picker_event"></mult-color-picker>
@ -101,6 +104,7 @@
</div>
</template>
<script setup lang="ts">
import { isEmpty } from "lodash";
import { commonStore } from '@/store';
const common_store = commonStore();
const props = defineProps({

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

@ -58,6 +58,7 @@ interface DefaultFooterNav {
data_alone_row_space: number;
immersive_style: string;
general_safe_distance_value: string;
up_slide_logo: uploadList[];
up_slide_display: string;
up_slide_background_color_list: color_list[];
up_slide_background_direction: string;
@ -148,6 +149,7 @@ const defaultFooterNav: DefaultFooterNav = {
// 安全距离
general_safe_distance_value: '0',
// 上滑显示处理
up_slide_logo: [],
up_slide_display: '1',
up_slide_background_color_list: [{ color: '#fff', color_percentage: undefined }],
up_slide_background_direction: '180deg',