From 93415ce16fdf4824b2d2e550088796ae3cc24c35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Wed, 9 Oct 2024 16:44:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/common-styles/index.vue |  6 ++--
 .../components/tabs-styles.vue                |  6 ++--
 .../model-notice/model-notice-styles.vue      |  6 ++--
 .../model-search/model-search-styles.vue      |  6 ++--
 .../model-seckill/model-seckill-styles.vue    |  6 ++--
 src/components/page-settings/index.vue        | 30 ++++++++++++++++
 src/components/page-settings/page-setting.vue |  2 ++
 src/components/page-settings/page-styles.vue  | 36 +++++++++++++++++--
 src/config/const/header-nav.ts                |  8 +++++
 src/views/layout/components/main/index.vue    |  8 +++--
 10 files changed, 94 insertions(+), 20 deletions(-)

diff --git a/src/components/common/common-styles/index.vue b/src/components/common/common-styles/index.vue
index 8cb99d85..3bd09c52 100644
--- a/src/components/common/common-styles/index.vue
+++ b/src/components/common/common-styles/index.vue
@@ -12,13 +12,13 @@
                             <div class="size-12">背景图</div>
                             <el-radio-group v-model="form.background_img_style" is-button @change="background_img_style_change">
                                 <el-tooltip content="单张" placement="top" effect="light">
-                                    <el-radio-button value="0"><icon name="single-sheet"></icon></el-radio-button>
+                                    <el-radio-button :value="0"><icon name="single-sheet"></icon></el-radio-button>
                                 </el-tooltip>
                                 <el-tooltip content="平铺" placement="top" effect="light">
-                                    <el-radio-button value="1"><icon name="tile"></icon></el-radio-button>
+                                    <el-radio-button :value="1"><icon name="tile"></icon></el-radio-button>
                                 </el-tooltip>
                                 <el-tooltip content="铺满" placement="top" effect="light">
-                                    <el-radio-button value="2"><icon name="spread-over"></icon></el-radio-button>
+                                    <el-radio-button :value="2"><icon name="spread-over"></icon></el-radio-button>
                                 </el-tooltip>
                             </el-radio-group>
                         </div>
diff --git a/src/components/model-data-magic/components/tabs-styles.vue b/src/components/model-data-magic/components/tabs-styles.vue
index c36708ad..8c6a6105 100644
--- a/src/components/model-data-magic/components/tabs-styles.vue
+++ b/src/components/model-data-magic/components/tabs-styles.vue
@@ -8,13 +8,13 @@
                     <div class="size-12">背景图</div>
                     <el-radio-group v-model="form.background_img_style" is-button>
                         <el-tooltip content="单张" placement="top" effect="light">
-                            <el-radio-button value="0"><icon name="single-sheet"></icon></el-radio-button>
+                            <el-radio-button :value="0"><icon name="single-sheet"></icon></el-radio-button>
                         </el-tooltip>
                         <el-tooltip content="平铺" placement="top" effect="light">
-                            <el-radio-button value="1"><icon name="tile"></icon></el-radio-button>
+                            <el-radio-button :value="1"><icon name="tile"></icon></el-radio-button>
                         </el-tooltip>
                         <el-tooltip content="铺满" placement="top" effect="light">
-                            <el-radio-button value="2"><icon name="spread-over"></icon></el-radio-button>
+                            <el-radio-button :value="2"><icon name="spread-over"></icon></el-radio-button>
                         </el-tooltip>
                     </el-radio-group>
                 </div>
diff --git a/src/components/model-notice/model-notice-styles.vue b/src/components/model-notice/model-notice-styles.vue
index e293bb78..ca0f2ae7 100644
--- a/src/components/model-notice/model-notice-styles.vue
+++ b/src/components/model-notice/model-notice-styles.vue
@@ -60,13 +60,13 @@
                             <div class="size-12">背景图</div>
                             <el-radio-group v-model="form.container_background_img_style" is-button>
                                 <el-tooltip content="单张" placement="top" effect="light">
-                                    <el-radio-button value="0"><icon name="single-sheet"></icon></el-radio-button>
+                                    <el-radio-button :value="0"><icon name="single-sheet"></icon></el-radio-button>
                                 </el-tooltip>
                                 <el-tooltip content="平铺" placement="top" effect="light">
-                                    <el-radio-button value="1"><icon name="tile"></icon></el-radio-button>
+                                    <el-radio-button :value="1"><icon name="tile"></icon></el-radio-button>
                                 </el-tooltip>
                                 <el-tooltip content="铺满" placement="top" effect="light">
-                                    <el-radio-button value="2"><icon name="spread-over"></icon></el-radio-button>
+                                    <el-radio-button :value="2"><icon name="spread-over"></icon></el-radio-button>
                                 </el-tooltip>
                             </el-radio-group>
                         </div>
diff --git a/src/components/model-search/model-search-styles.vue b/src/components/model-search/model-search-styles.vue
index 78223bec..8aa3442c 100644
--- a/src/components/model-search/model-search-styles.vue
+++ b/src/components/model-search/model-search-styles.vue
@@ -24,13 +24,13 @@
                                 <div class="size-12">背景图</div>
                                 <el-radio-group v-model="form.search_botton_background_img_style" is-button>
                                     <el-tooltip content="单张" placement="top" effect="light">
-                                        <el-radio-button value="0"><icon name="single-sheet"></icon></el-radio-button>
+                                        <el-radio-button :value="0"><icon name="single-sheet"></icon></el-radio-button>
                                     </el-tooltip>
                                     <el-tooltip content="平铺" placement="top" effect="light">
-                                        <el-radio-button value="1"><icon name="tile"></icon></el-radio-button>
+                                        <el-radio-button :value="1"><icon name="tile"></icon></el-radio-button>
                                     </el-tooltip>
                                     <el-tooltip content="铺满" placement="top" effect="light">
-                                        <el-radio-button value="2"><icon name="spread-over"></icon></el-radio-button>
+                                        <el-radio-button :value="2"><icon name="spread-over"></icon></el-radio-button>
                                     </el-tooltip>
                                 </el-radio-group>
                             </div>
diff --git a/src/components/model-seckill/model-seckill-styles.vue b/src/components/model-seckill/model-seckill-styles.vue
index 7a35a71b..23d56ecf 100644
--- a/src/components/model-seckill/model-seckill-styles.vue
+++ b/src/components/model-seckill/model-seckill-styles.vue
@@ -27,17 +27,17 @@
                                 <div class="size-12">背景图</div>
                                 <el-radio-group v-model="form.header_background_img_style" is-button>
                                     <el-tooltip content="单张" placement="top" effect="light">
-                                        <el-radio-button value="0">
+                                        <el-radio-button :value="0">
                                             <icon name="single-sheet"></icon>
                                         </el-radio-button>
                                     </el-tooltip>
                                     <el-tooltip content="平铺" placement="top" effect="light">
-                                        <el-radio-button value="1">
+                                        <el-radio-button :value="1">
                                             <icon name="tile"></icon>
                                         </el-radio-button>
                                     </el-tooltip>
                                     <el-tooltip content="铺满" placement="top" effect="light">
-                                        <el-radio-button value="2">
+                                        <el-radio-button :value="2">
                                             <icon name="spread-over"></icon>
                                         </el-radio-button>
                                     </el-tooltip>
diff --git a/src/components/page-settings/index.vue b/src/components/page-settings/index.vue
index ef0c4b1f..743390e2 100644
--- a/src/components/page-settings/index.vue
+++ b/src/components/page-settings/index.vue
@@ -1,6 +1,9 @@
 <template>
     <div class="model-top">
         <div :class="['roll', { 'page-settings-border': showPage }]" :style="roll_style" @click="page_settings">
+            <div class="w h abs up_slide_bg" :style="up_slide_style">
+                <div class="w h" :style="up_slide_img_style"></div>
+            </div>
             <div class="pt-15 pl-18 pr-22 w pb-6">
                 <img class="img" :style="`Filter: brightness(${new_style.function_buttons_type == 'black' ? 0 : 100})`" src="@/assets/images/layout/main/main-top.png" />
             </div>
@@ -48,10 +51,12 @@ import { isEmpty } from 'lodash';
 interface Props {
     pageData: any;
     showPage: boolean;
+    scollTop: number;
 }
 const props = withDefaults(defineProps<Props>(), {
     pageData: () => ({}),
     showPage: true,
+    scollTop: 0
 });
 const emits = defineEmits(['page_settings']);
 const page_settings = () => {
@@ -75,6 +80,28 @@ const roll_style = computed(() => {
     return style;
 });
 
+const up_slide_style = computed(() => {
+    let style = ``;
+    if (props.scollTop > 0) {
+        const { up_slide_background_color_list,  up_slide_background_direction } = new_style.value;
+        // 渐变
+        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 };`
+    }
+    return style;
+});
+
+const up_slide_img_style = computed(() => {
+    let style = ``;
+    if (props.scollTop > 0) {
+        const { up_slide_background_img,  up_slide_background_img_style } = new_style.value;
+        // 背景图
+        const back = { background_img: up_slide_background_img, background_img_style: up_slide_background_img_style };
+        style += background_computer(back);
+    }
+    return style;
+});
+
 const text_style = computed(() => `font-weight:${new_style.value.header_background_title_typeface}; font-size: ${new_style.value.header_background_title_size}px; color: ${new_style.value.header_background_title_color};`);
 const position_class = computed(() => (form.value?.indicator_location == 'center' ? `indicator-center` : ''));
 </script>
@@ -136,4 +163,7 @@ const position_class = computed(() => (form.value?.indicator_location == 'center
     text-align: center;
     top: 0;
 }
+.up_slide_bg {
+    z-index: -1;
+}
 </style>
diff --git a/src/components/page-settings/page-setting.vue b/src/components/page-settings/page-setting.vue
index ea4ced02..338731a9 100644
--- a/src/components/page-settings/page-setting.vue
+++ b/src/components/page-settings/page-setting.vue
@@ -38,6 +38,8 @@ const default_data = {
         function_buttons_type: 'black',
         immersive_style: '0',
         up_slide_display: '1',
+        up_slide_background_color_list: [{ color: '#fff', color_percentage: undefined }],
+        up_slide_background_direction: '180deg',
         icon_color: '#ccc',
         button_inner_color: '#fff',
         search_botton_color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],
diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue
index 37c27c8b..4dc7f51b 100644
--- a/src/components/page-settings/page-styles.vue
+++ b/src/components/page-settings/page-styles.vue
@@ -15,17 +15,17 @@
                                 <div class="size-12">背景图</div>
                                 <el-radio-group v-model="form.header_background_img_style" is-button>
                                     <el-tooltip content="单张" placement="top" effect="light">
-                                        <el-radio-button value="0">
+                                        <el-radio-button :value="0">
                                             <icon name="single-sheet"></icon>
                                         </el-radio-button>
                                     </el-tooltip>
                                     <el-tooltip content="平铺" placement="top" effect="light">
-                                        <el-radio-button value="1">
+                                        <el-radio-button :value="1">
                                             <icon name="tile"></icon>
                                         </el-radio-button>
                                     </el-tooltip>
                                     <el-tooltip content="铺满" placement="top" effect="light">
-                                        <el-radio-button value="2">
+                                        <el-radio-button :value="2">
                                             <icon name="spread-over"></icon>
                                         </el-radio-button>
                                     </el-tooltip>
@@ -55,6 +55,32 @@
                 <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 label="上滑背景">
+                    <div class="flex-col gap-10">
+                        <mult-color-picker :value="form.up_slide_background_color_list" :type="form.up_slide_background_direction" @update:value="up_slide_mult_color_picker_event"></mult-color-picker>
+                        <div class="flex-row jc-sb align-c">
+                            <div class="size-12">背景图</div>
+                            <el-radio-group v-model="form.up_slide_background_img_style" is-button>
+                                <el-tooltip content="单张" placement="top" effect="light">
+                                    <el-radio-button :value="0">
+                                        <icon name="single-sheet"></icon>
+                                    </el-radio-button>
+                                </el-tooltip>
+                                <el-tooltip content="平铺" placement="top" effect="light">
+                                    <el-radio-button :value="1">
+                                        <icon name="tile"></icon>
+                                    </el-radio-button>
+                                </el-tooltip>
+                                <el-tooltip content="铺满" placement="top" effect="light">
+                                    <el-radio-button :value="2">
+                                        <icon name="spread-over"></icon>
+                                    </el-radio-button>
+                                </el-tooltip>
+                            </el-radio-group>
+                        </div>
+                        <upload v-model="form.up_slide_background_img" :limit="1"></upload>
+                    </div>
+                </el-form-item>
             </card-container>
             <div class="bg-f5 divider-line" />
             <card-container>
@@ -130,6 +156,10 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
     form.value.header_background_color_list = arry;
     form.value.header_background_direction = type.toString();
 };
+const up_slide_mult_color_picker_event = (arry: color_list[], type: number) => {
+    form.value.up_slide_background_color_list = arry;
+    form.value.up_slide_background_direction = type.toString();
+}
 const change_immersive_style = (val: string | number | boolean) => {
     if (val === '0') {
         common_store.set_is_immersion_model(false);
diff --git a/src/config/const/header-nav.ts b/src/config/const/header-nav.ts
index 2048f96e..dc296dd7 100644
--- a/src/config/const/header-nav.ts
+++ b/src/config/const/header-nav.ts
@@ -42,6 +42,10 @@ interface DefaultFooterNav {
         function_buttons_type: string;
         immersive_style: string;
         up_slide_display: string;
+        up_slide_background_color_list: color_list[];
+        up_slide_background_direction: string;
+        up_slide_background_img_style: number;
+        up_slide_background_img: uploadList[];
         icon_color: string;
         button_inner_color: string;
         search_botton_color_list: color_list[];
@@ -97,6 +101,10 @@ const defaultFooterNav: DefaultFooterNav = {
         function_buttons_type: 'black',
         immersive_style: '0',
         up_slide_display: '1',
+        up_slide_background_color_list: [{ color: '#fff', color_percentage: undefined }],
+        up_slide_background_direction: '180deg',
+        up_slide_background_img_style: 2,
+        up_slide_background_img: [],
         icon_color: '#ccc',
         button_inner_color: '#fff',
         search_botton_color_list: [
diff --git a/src/views/layout/components/main/index.vue b/src/views/layout/components/main/index.vue
index c9412927..f63b356c 100644
--- a/src/views/layout/components/main/index.vue
+++ b/src/views/layout/components/main/index.vue
@@ -62,9 +62,9 @@
                     <el-button size="large" @click="clear_click">清空</el-button>
                 </div>
                 <!-- 拖拽区 -->
-                <div ref="scrollTop" class="model-drag">
+                <div ref="scrollTop" class="model-drag" @scroll="on_scroll_event">
                     <!-- 页面设置 -->
-                    <page-settings :show-page="page_data.show_tabs == '1'" :page-data="page_data" @page_settings="page_settings"></page-settings>
+                    <page-settings :show-page="page_data.show_tabs == '1'" :page-data="page_data" :scoll-top="scoll_top" @page_settings="page_settings"></page-settings>
                     <div class="model-wall" :style="content_style">
                         <div class="model-wall-content" :style="`padding-top:${top_padding}px; margin-top: ${top_margin}px;padding-bottom:${bottom_navigation_show ? footer_nav_counter_store.padding_footer : 0}px;`">
                             <div-content :diy-data="tabs_data" :show-model-border="show_model_border" :is-tabs="true" :main-content-style="main_content_style" @on_choose="set_tabs_event(true)" @del="del"></div-content>
@@ -423,6 +423,10 @@ const scroll = () => {
         }
     });
 };
+const scoll_top = ref(0);
+const on_scroll_event = (e: any) => {
+    scoll_top.value = e.target.scrollTop;
+}
 //#endregion
 //#region 页面设置 导出 导入
 // 在组件挂载时默认执行