From 87daf436aeb019dba92acace0f80878b554e3e52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Tue, 29 Oct 2024 16:42:24 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E8=AE=BE=E7=BD=AE=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E4=B8=8A=E6=BB=91=E6=98=BE=E7=A4=BAlogo=E6=9B=B4?=
 =?UTF-8?q?=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/page-settings/index.vue        | 32 +++++++++++++++----
 src/components/page-settings/page-setting.vue |  1 +
 src/components/page-settings/page-styles.vue  |  4 +++
 src/config/const/header-nav.ts                |  2 ++
 4 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/components/page-settings/index.vue b/src/components/page-settings/index.vue
index e92c49ed..7e621701 100644
--- a/src/components/page-settings/index.vue
+++ b/src/components/page-settings/index.vue
@@ -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);
diff --git a/src/components/page-settings/page-setting.vue b/src/components/page-settings/page-setting.vue
index ce6fad49..d0b06fc2 100644
--- a/src/components/page-settings/page-setting.vue
+++ b/src/components/page-settings/page-setting.vue
@@ -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',
diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue
index cd52e640..fd09fb88 100644
--- a/src/components/page-settings/page-styles.vue
+++ b/src/components/page-settings/page-styles.vue
@@ -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({
diff --git a/src/config/const/header-nav.ts b/src/config/const/header-nav.ts
index 8424e450..cdf2eb13 100644
--- a/src/config/const/header-nav.ts
+++ b/src/config/const/header-nav.ts
@@ -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',