From d03d28bec8b3c6c81138b23df9928033e65b0bf1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Fri, 16 May 2025 11:07:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=9B=BE=E6=A0=87=E4=B8=8A?=
 =?UTF-8?q?=E6=BB=91=E8=83=8C=E6=99=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/page-settings/index.vue       | 18 ++++++++++++++++--
 src/components/page-settings/page-styles.vue |  9 ++++++++-
 src/config/const/header-nav.ts               |  2 ++
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/page-settings/index.vue b/src/components/page-settings/index.vue
index c57fb03d..099767b7 100644
--- a/src/components/page-settings/index.vue
+++ b/src/components/page-settings/index.vue
@@ -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 = ``;
diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue
index edca9007..eb696c6e 100644
--- a/src/components/page-settings/page-styles.vue
+++ b/src/components/page-settings/page-styles.vue
@@ -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>
diff --git a/src/config/const/header-nav.ts b/src/config/const/header-nav.ts
index 3880228b..2967d686 100644
--- a/src/config/const/header-nav.ts
+++ b/src/config/const/header-nav.ts
@@ -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',