From db33e34e73802dc575f779b392864d4f2f9be593 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 15:22:08 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=A0=87=E9=A2=98=E5=92=8C?=
 =?UTF-8?q?=E5=AE=9A=E4=BD=8D=E4=B8=8A=E6=BB=91=E5=8F=98=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/color-text-size-group/index.vue    | 29 +++++++++++----
 src/components/page-settings/index.vue        | 36 +++++++++++++++----
 src/components/page-settings/page-styles.vue  | 23 +++++++++---
 src/config/const/header-nav.ts                |  6 ++++
 4 files changed, 77 insertions(+), 17 deletions(-)

diff --git a/src/components/common/color-text-size-group/index.vue b/src/components/common/color-text-size-group/index.vue
index f8cbf847..7f85235d 100644
--- a/src/components/common/color-text-size-group/index.vue
+++ b/src/components/common/color-text-size-group/index.vue
@@ -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>
diff --git a/src/components/page-settings/index.vue b/src/components/page-settings/index.vue
index 099767b7..31ea27fc 100644
--- a/src/components/page-settings/index.vue
+++ b/src/components/page-settings/index.vue
@@ -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 = ``;
diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue
index eb696c6e..252b65da 100644
--- a/src/components/page-settings/page-styles.vue
+++ b/src/components/page-settings/page-styles.vue
@@ -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>
diff --git a/src/config/const/header-nav.ts b/src/config/const/header-nav.ts
index 2967d686..d6afd4d2 100644
--- a/src/config/const/header-nav.ts
+++ b/src/config/const/header-nav.ts
@@ -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',