From 7eca93ad671bce77df0b488f38c43b3e048ac0e5 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, 29 Nov 2024 17:38:43 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=95=B0=E6=8D=AE=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-search/index.vue         |  4 +-
 .../model-search/model-search-styles.vue      |  3 +
 src/components/page-settings/index.vue        | 66 +++++++++++++++----
 src/components/page-settings/page-content.vue |  3 +
 src/components/page-settings/page-setting.vue | 34 +++++++++-
 src/components/page-settings/page-styles.vue  | 61 ++++++++++++++++-
 src/config/const/header-nav.ts                | 50 +++++++++++++-
 src/config/const/search.ts                    |  2 +
 8 files changed, 201 insertions(+), 22 deletions(-)

diff --git a/src/components/model-search/index.vue b/src/components/model-search/index.vue
index a5c1f9f2..503051cf 100644
--- a/src/components/model-search/index.vue
+++ b/src/components/model-search/index.vue
@@ -81,6 +81,8 @@ const box_style = computed(() => {
     let style = `background: ${ new_style.value.search_bg_color };border: 1px solid ${ new_style.value.search_border }; ${ radius_computer(new_style.value.search_border_radius) };`;
     if (form.value.is_center == '1') {
         style += `justify-content: center;`;
+    } else {
+        style += `padding-left: ${ new_style.value.search_padding_left }px;`;
     }
     return style;
 });
@@ -140,7 +142,7 @@ watchEffect(() => {
 .search {
     height: 3.2rem;
     .box {
-        padding: 0.6rem 1.5rem;
+        padding: 0.6rem 1.5rem 0.6rem 0;
     }
     .img-box {
         height: 100%;
diff --git a/src/components/model-search/model-search-styles.vue b/src/components/model-search/model-search-styles.vue
index 07ceb761..545892cc 100644
--- a/src/components/model-search/model-search-styles.vue
+++ b/src/components/model-search/model-search-styles.vue
@@ -38,6 +38,9 @@
                 <el-form-item v-if="search_content.is_tips_show" label="提示文字">
                     <color-picker v-model="form.tips_color" default-color="#CCCCCC"></color-picker>
                 </el-form-item>
+                <el-form-item label="左边距">
+                    <slider v-model="form.search_padding_left" :min="1" :max="200"></slider>
+                </el-form-item>
                 <el-form-item label="搜索框线">
                     <color-picker v-model="form.search_border" default-color="#fff"></color-picker>
                 </el-form-item>
diff --git a/src/components/page-settings/index.vue b/src/components/page-settings/index.vue
index 061892ec..e8abaf26 100644
--- a/src/components/page-settings/index.vue
+++ b/src/components/page-settings/index.vue
@@ -34,17 +34,19 @@
                                     </template>
                                 </div>
                             </div>
-                            <div v-else-if="['4', '5'].includes(form.theme)" class="flex-1 flex-row align-c h gap-10">
-                                <div class="model-head-location flex-row gap-2 align-c" :style="'color:' + new_style.position_color">
-                                    <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>
-                                        <icon v-else :name="form.location_left_icon" size="12"></icon>
-                                    </template>
-                                    <span class="location-name size-14 text-line-1">{{ form.positioning_name }}</span>
-                                    <template v-if="form.is_location_right_icon_show == '1'">
-                                        <image-empty v-if="form.location_right_img.length > 0" v-model="form.location_right_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty>
-                                        <icon v-else :name="form.location_right_icon" size="12"></icon>
-                                    </template>
+                            <div v-else-if="['4', '5'].includes(form.theme)" class="flex-1 flex-row align-c h gap-10 re">
+                                <div :class="['model-head-location oh', form.positioning_name_float == '1' ? 'abs z-i' : '' ]" :style="style_location_container">
+                                    <div class="flex-row gap-2 align-c h 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>
+                                            <icon v-else :name="form.location_left_icon" size="12"></icon>
+                                        </template>
+                                        <span class="location-name size-14 text-line-1">{{ form.positioning_name }}</span>
+                                        <template v-if="form.is_location_right_icon_show == '1'">
+                                            <image-empty v-if="form.location_right_img.length > 0" v-model="form.location_right_img[0]" fit="contain" :error-img-style="'width: 12px; height:12px'"></image-empty>
+                                            <icon v-else :name="form.location_right_icon" size="12"></icon>
+                                        </template>
+                                    </div>
                                 </div>
                                 <template v-if="['5'].includes(form.theme) && !is_search_alone_row">
                                     <div class="flex-1">
@@ -79,7 +81,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { background_computer, gradient_computer } from '@/utils';
+import { background_computer, gradient_computer, margin_computer, padding_computer, radius_computer } from '@/utils';
 import { isEmpty } from 'lodash';
 import { commonStore } from '@/store';
 const common_store = commonStore();
@@ -168,6 +170,41 @@ const up_slide_img_style = computed(() => {
     }
     return style;
 });
+const location_height = computed(() => { 
+    const { location_margin } = new_style.value;
+    return 32 - location_margin.margin_top - location_margin.margin_bottom + 'px'; 
+});
+const img_height = computed(() => { 
+    const { location_margin } = new_style.value;
+    const height = 32 - location_margin.margin_top - location_margin.margin_bottom;
+    return height > 28 ? '28px' : height + 'px';
+});
+// 定位设置
+const style_location_container = computed(() => {
+    const style = {
+        color_list: new_style.value.location_color_list,
+        direction: new_style.value.location_direction,
+    }
+    return gradient_computer(style) + margin_computer(new_style.value.location_margin) + radius_computer(new_style.value.location_radius) + `color: ${new_style.value.location_color};`;
+});
+// 背景图片
+const style_location_img_container = computed(() => {
+    const { location_background_img, location_background_img_style, location_padding, location_border_direction, location_border_size, location_border_color } = new_style.value;
+    const style = {
+        background_img: location_background_img,
+        background_img_style: location_background_img_style,
+    }
+    let border = ``;
+    if (new_style.value.location_border_show == '1') {
+        // 边框
+        if (location_border_direction == 'all') {
+            border += `border: ${location_border_size}px solid ${location_border_color};`;
+        } else {
+            border += `border-${location_border_direction}: ${location_border_size}px solid ${location_border_color};`;
+        }
+    }
+    return background_computer(style) + padding_computer(location_padding) + border;
+});
 // 文字样式
 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` : ''));
@@ -199,16 +236,17 @@ const position_class = computed(() => (form.value?.indicator_location == 'center
     .model-head-content {
         height: 3.2rem;
         .location-name {
-            line-height: 3.2rem;
+            // line-height: 100%;
             max-width: 15rem;
             width: 100%;
             flex-basis: content;
             flex-shrink: 1;
         }
         .model-head-location {
+            height: v-bind(location_height);
             :deep(.el-image) {
                 width: 100%;
-                height: 2.8rem;
+                height: v-bind(img_height);
                 flex-basis: content;
                 flex-shrink: 1;
             }
diff --git a/src/components/page-settings/page-content.vue b/src/components/page-settings/page-content.vue
index 5c12eb61..1bb80b63 100644
--- a/src/components/page-settings/page-content.vue
+++ b/src/components/page-settings/page-content.vue
@@ -46,6 +46,9 @@
                     <el-form-item label="定位名称">
                         <el-input v-model="form.positioning_name" placeholder="请输入默认定位名称" clearable></el-input>
                     </el-form-item>
+                    <el-form-item label="定位浮起">
+                        <el-switch v-model="form.positioning_name_float" active-value="1" inactive-value="0"></el-switch>
+                    </el-form-item>
                 </template>
                 <el-form-item label="数据换行">
                     <el-checkbox-group v-model="form.data_alone_row_value">
diff --git a/src/components/page-settings/page-setting.vue b/src/components/page-settings/page-setting.vue
index 51dccac5..b772463f 100644
--- a/src/components/page-settings/page-setting.vue
+++ b/src/components/page-settings/page-setting.vue
@@ -30,6 +30,7 @@ const default_data = {
         icon_setting: [
             { id: get_math(), img: [], icon: 'bell', link: {} },
         ],
+        positioning_name_float: '0',
         is_location_left_icon_show: '1',
         location_left_img: [],
         location_left_icon: 'location',
@@ -71,7 +72,37 @@ const default_data = {
             radius_bottom_left: 16,
             radius_bottom_right: 16,
         },
-        position_color: '#333',
+        // 定位设置
+        location_direction: '90deg',
+        location_color_list: [{ color: '', color_percentage: undefined }],
+        location_background_img_style: '0',
+        location_background_img: [],
+        location_color: '#333',
+        location_border_show: '0',
+        location_border_color: 'FF3F3F',
+        location_border_direction:  'all',
+        location_border_size: 1,
+        location_radius: {
+            radius: 0,
+            radius_top_left: 0,
+            radius_top_right: 0,
+            radius_bottom_left: 0,
+            radius_bottom_right: 0,
+        },
+        location_padding: {
+            padding: 0,
+            padding_top: 0,
+            padding_right: 0,
+            padding_bottom: 0,
+            padding_left: 0,
+        },
+        location_margin: {
+            margin: 0,
+            margin_top: 0,
+            margin_right: 0,
+            margin_bottom: 0,
+            margin_left: 0,
+        },
         img_size: '23',
         img_space: '15',
         img_color: '#666',
@@ -86,6 +117,7 @@ const default_data = {
             radius_bottom_left: 16,
             radius_bottom_right: 16,
         },
+        search_padding_left: 15,
     }
 }
 const common_config = computed(() => {
diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue
index c93b12e6..b7269e38 100644
--- a/src/components/page-settings/page-styles.vue
+++ b/src/components/page-settings/page-styles.vue
@@ -28,9 +28,6 @@
                 <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>
                 </el-form-item>
-                <el-form-item v-if="['4', '5'].includes(page_content.theme)" label="定位颜色">
-                    <color-picker v-model="form.position_color" default-color="#333"></color-picker>
-                </el-form-item>
                 <el-form-item v-if="form.header_background_type == 'transparent'" label="沉浸样式">
                     <div class="flex-row align-c gap-10">
                         <el-switch v-model="form.immersive_style" active-value="1" inactive-value="0" :disabled="is_have_tabs" @change="change_immersive_style"></el-switch>
@@ -75,6 +72,54 @@
                     <slider v-model="form.data_alone_row_space" :max="100"></slider>
                 </el-form-item>
             </card-container>
+            <template v-if="['4', '5'].includes(page_content.theme)">
+                <card-container>
+                    <div class="mb-12">定位设置</div>
+                    <el-form-item label="定位背景">
+                        <div class="flex-col gap-10 w">
+                            <div class="size-12">背景色</div>
+                            <mult-color-picker :value="form.location_color_list" :type="form.location_direction" @update:value="location_mult_color_picker_event"></mult-color-picker>
+                            <div class="flex-row jc-sb align-c">
+                                <div class="size-12">背景图</div>
+                                <bg-btn-style v-model="form.location_background_img_style"></bg-btn-style>
+                            </div>
+                            <upload v-model="form.location_background_img" :limit="1" @update:model-value="location_background_img_change"></upload>
+                        </div>
+                    </el-form-item>
+                    <el-form-item v-if="['4', '5'].includes(page_content.theme)" label="定位颜色">
+                        <color-picker v-model="form.location_color" default-color="#333"></color-picker>
+                    </el-form-item>
+                    <el-form-item label="圆角">
+                        <radius :value="form.location_radius"></radius>
+                    </el-form-item>
+                    <el-form-item label="内间距">
+                        <padding :value="form.location_padding"></padding>
+                    </el-form-item>
+                    <el-form-item label="外边距">
+                        <margin :value="form.location_margin"></margin>
+                    </el-form-item>
+                    <el-form-item label="边框">
+                        <el-switch v-model="form.location_border_show" active-value="1" inactive-value="0" />
+                    </el-form-item>
+                    <template v-if="form.location_border_show == '1'">
+                        <el-form-item label="边框颜色">
+                            <color-picker v-model="form.location_border_color" default-color="#FF3F3F"></color-picker>
+                        </el-form-item>
+                        <el-form-item label="边框位置">
+                            <el-radio-group v-model="form.location_border_direction">
+                                <el-radio value="all">全部</el-radio>
+                                <el-radio value="left">左侧</el-radio>
+                                <el-radio value="right">右侧</el-radio>
+                                <el-radio value="top">上边框</el-radio>
+                                <el-radio value="bottom">下边框</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                        <el-form-item label="边框粗细">
+                            <slider v-model="form.location_border_size" :max="100"></slider>
+                        </el-form-item>
+                    </template>
+                </card-container>
+            </template>
             <div class="bg-f5 divider-line" />
             <card-container>
                 <div class="mb-12">右侧图标设置</div>
@@ -164,6 +209,16 @@ 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 location_mult_color_picker_event = (arry: color_list[], type: number) => {
+    form.value.location_color_list = arry;
+    form.value.location_direction = type.toString();
+};
+// 定位背景图片处理
+const location_background_img_change = (val: uploadList[]) => {
+    form.value.location_background_img = val;
+};
+
 const change_immersive_style = (val: string | number | boolean) => {
     if (val === '0') {
         // 沉浸模式关闭的时候，安全距离关闭
diff --git a/src/config/const/header-nav.ts b/src/config/const/header-nav.ts
index f4f78132..c96c63fe 100644
--- a/src/config/const/header-nav.ts
+++ b/src/config/const/header-nav.ts
@@ -24,6 +24,7 @@ interface DefaultFooterNav {
         indicator_location: string;
         bottom_navigation_show: string;
         positioning_name: string;
+        positioning_name_float: string;
         icon_setting: { id: string; img: uploadList[]; link: object; icon: string }[];
         is_location_left_icon_show: string;
         location_left_img: uploadList[];
@@ -72,7 +73,18 @@ interface DefaultFooterNav {
         search_botton_background_img_style: string;
         search_botton_background_img: uploadList[];
         search_button_radius: object;
-        position_color: string;
+        location_direction: string;
+        location_color_list: color_list[],
+        location_background_img_style: string,
+        location_background_img: string[],
+        location_color: string;
+        location_border_show: string;
+        location_border_color: string;
+        location_border_direction:  string;
+        location_border_size: number;
+        location_radius: radiusStyle;
+        location_padding: paddingStyle;
+        location_margin: marginStyle;
         img_size: string;
         img_space: string;
         img_color: string;
@@ -81,6 +93,7 @@ interface DefaultFooterNav {
         search_border: string;
         search_bg_color: string;
         search_border_radius: object;
+        search_padding_left: number,
         common_style: object;
     };
 }
@@ -105,6 +118,7 @@ const defaultFooterNav: DefaultFooterNav = {
         location_left_icon: 'location',
         // 定位内容
         positioning_name: '未选择位置',
+        positioning_name_float: '0',
         // 定位右侧图标内容
         is_location_right_icon_show: '1',
         location_right_img: [],
@@ -158,8 +172,37 @@ const defaultFooterNav: DefaultFooterNav = {
         // 左侧返回按钮颜色
         left_back_btn_color: '#333',
         icon_color: '#ccc',
-        // 定位颜色
-        position_color: '#333',
+        // 定位设置
+        location_direction: '90deg',
+        location_color_list: [{ color: '', color_percentage: undefined }],
+        location_background_img_style: '0',
+        location_background_img: [],
+        location_color: '#333',
+        location_border_show: '0',
+        location_border_color: 'FF3F3F',
+        location_border_direction:  'all',
+        location_border_size: 1,
+        location_radius: {
+            radius: 0,
+            radius_top_left: 0,
+            radius_top_right: 0,
+            radius_bottom_left: 0,
+            radius_bottom_right: 0,
+        },
+        location_padding: {
+            padding: 0,
+            padding_top: 0,
+            padding_right: 0,
+            padding_bottom: 0,
+            padding_left: 0,
+        },
+        location_margin: {
+            margin: 0,
+            margin_top: 0,
+            margin_right: 0,
+            margin_bottom: 0,
+            margin_left: 0,
+        },
         // 右侧图标大小和间距
         img_size: '23',
         img_space: '15',
@@ -195,6 +238,7 @@ const defaultFooterNav: DefaultFooterNav = {
             radius_bottom_left: 16,
             radius_bottom_right: 16,
         },
+        search_padding_left: 15,
         common_style: {
             ...defaultCommon,
             color_list: [{ color: '#f5f5f5', color_percentage: undefined }],
diff --git a/src/config/const/search.ts b/src/config/const/search.ts
index 9948ed52..8f15f22e 100644
--- a/src/config/const/search.ts
+++ b/src/config/const/search.ts
@@ -30,6 +30,7 @@ interface defaultSearch {
         search_botton_background_img_style: string;
         search_botton_background_img: uploadList[];
         search_button_radius: object;
+        search_padding_left: number;
         tips_color: string;
         hot_words_color: string;
         search_border: string;
@@ -95,6 +96,7 @@ const defaultSearch: defaultSearch = {
             radius_bottom_left: 16,
             radius_bottom_right: 16,
         },
+        search_padding_left: 10,
         // 热词轮播
         is_roll: '1',
         interval_time: 3,