From fa10cedb9e09970f7a78c43f89f9ad0389eb3ad9 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, 21 Jan 2025 11:26:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=90=9C=E7=B4=A2=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-search/index.vue         | 32 +++++++++++--------
 src/components/page-settings/index.vue        |  4 +--
 src/components/page-settings/page-setting.vue |  6 ++--
 src/config/const/header-nav.ts                |  6 ++--
 src/config/const/search.ts                    |  6 ++--
 5 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/components/model-search/index.vue b/src/components/model-search/index.vue
index 55bcbab3..890abc2e 100644
--- a/src/components/model-search/index.vue
+++ b/src/components/model-search/index.vue
@@ -37,18 +37,18 @@
                         </template>
                     </div>
                 </div>
-                <div class="flex-row align-c abs search-botton oh" :style="`border-radius: 0px ${ new_style.search_button_radius?.radius_top_right || 0 }px ${ new_style.search_button_radius?.radius_bottom_right || 0 }px 0px;`">
+                <div class="flex-row align-c abs search-botton oh" :style="`border-radius: 0px ${ new_style.search_border_radius?.radius_top_right || 0 }px ${ new_style.search_border_radius?.radius_bottom_right || 0 }px 0px;`">
                     <template v-if="form.is_right_icon_show == '1' && (form.right_icon_img.length > 0 || !isEmpty(form.right_icon_class))">
                         <template v-if="form.right_icon_img.length > 0">
-                            <div class="img-box mr-10">
-                                <image-empty v-model="form.right_icon_img[0]" class="img" fit="contain" error-img-style="width: 4rem;height: 2.5rem;" />
+                            <div class="img-box mr-10 flex-row align-c">
+                                <image-empty v-model="form.right_icon_img[0]" class="img right_icon_height" fit="contain" error-img-style="width: 4rem;height: 2.5rem;" />
                             </div>
                         </template>
                         <template v-else-if="!isEmpty(form.right_icon_class)">
-                            <el-icon :class="`iconfont ${ 'icon-' + form.right_icon_class } size-14 mr-10`" :style="`color:${new_style.right_icon_color};`" />
+                            <el-icon :class="`iconfont ${ 'icon-' + form.right_icon_class } size-14 mr-10 right_icon_height flex-row align-c`" :style="`color:${new_style.right_icon_color};`" />
                         </template>
                     </template>
-                    <div v-if="form.is_search_show == '1'" class="h flex align-c jc-c" :style="search_button_style">
+                    <div v-if="form.is_search_show == '1'" class="h flex align-c jc-c oh" :style="search_button_style">
                         <div class="oh" :style="search_button_img_style">
                             <template v-if="form.search_type === 'text'">
                                 <div class="size-12">{{ form.search_tips }}</div>
@@ -129,7 +129,7 @@ const box_style = computed(() => {
 });
 const search_button_style = computed(() => {
     let style = radius_computer(new_style.value.search_button_radius);
-    const { search_botton_color_list, search_botton_direction, search_botton_background_img_style, search_botton_background_img, search_botton_margin = old_margin, search_botton_border_show = '0', search_botton_border_size = old_padding, search_botton_border_style = 'solid', search_botton_border_color = '' } = new_style.value;
+    const { search_botton_color_list, search_botton_direction, search_botton_background_img_style, search_botton_background_img, search_botton_margin = old_margin, search_botton_border_size = old_padding, search_botton_border_style = 'solid', search_botton_border_color = '' } = new_style.value;
     if (form.value.search_type != 'img') {
         const data = {
             color_list: search_botton_color_list,
@@ -143,13 +143,13 @@ const search_button_style = computed(() => {
     if (new_style.value.search_botton_border_show == '1') {
         border += `border-width: ${search_botton_border_size.padding_top}px ${search_botton_border_size.padding_right}px ${search_botton_border_size.padding_bottom}px ${search_botton_border_size.padding_left}px;border-style: ${ search_botton_border_style };border-color: ${search_botton_border_color};`
     }
-    const height = 28 - search_botton_margin.margin_top - search_botton_margin.margin_bottom;
-    return style + border + `height: ${height}px;line-height: ${height}px;`;
+    const height = 32 - search_botton_margin.margin_top - search_botton_margin.margin_bottom - search_botton_border_size.padding_top - search_botton_border_size.padding_bottom;
+    return style + border + `height: ${height > 0 ? height : 0}px;line-height: ${height > 0 ? height : 0}px;`;
 })
 const search_button_height = computed(() => {
     const { search_botton_border_size = old_padding, search_botton_padding } = new_style.value;
-    const height = 28 - search_botton_border_size.padding_top - search_botton_border_size.padding_bottom - search_botton_padding.padding_top - search_botton_padding.padding_bottom;
-    return `height: ${height}px !important;line-height: ${height}px;`;
+    const height = 32 - search_botton_border_size.padding_top - search_botton_border_size.padding_bottom - search_botton_padding.padding_top - search_botton_padding.padding_bottom;
+    return `height: ${height > 0 ? height : 0}px !important;line-height: ${height > 0 ? height : 0}px;`;
 });
 // 搜索按钮圆角
 const search_button_img_style = computed(() => {
@@ -202,17 +202,21 @@ watchEffect(() => {
     // .box {
     //     padding: 0.6rem 1.5rem 0.6rem 0;
     // }
+    .right_icon_height {
+        position: relative;
+        height: 2.8rem !important;
+    }
     .img-box {
         height: 100%;
         min-width: 2rem;
         max-width: 6rem;
     }
     .search-botton {
-        height: 2.8rem;
-        top: 0.2rem;
-        right: 0.2rem;
+        height: 3.2rem;
+        top: 0rem;
+        right: 0rem;
         .img {
-            height: 2.8rem;
+            height: 3.2rem;
             min-width: 3rem;
             max-width: 10rem;
         }
diff --git a/src/components/page-settings/index.vue b/src/components/page-settings/index.vue
index f3d4bec5..c57fb03d 100644
--- a/src/components/page-settings/index.vue
+++ b/src/components/page-settings/index.vue
@@ -178,7 +178,7 @@ const style_location_container = computed(() => {
         direction: location_direction,
     }
     const height = 32 - location_margin.margin_top - location_margin.margin_bottom;
-    return gradient_computer(style) + margin_computer(location_margin) + radius_computer(location_radius) + `color: ${new_style.value.location_color};height: ${height}px;line-height: ${height}px;`;
+    return gradient_computer(style) + margin_computer(location_margin) + radius_computer(location_radius) + `color: ${new_style.value.location_color};height: ${height > 0 ? height : 0}px;line-height: ${height > 0 ? height : 0}px;`;
 });
 // 背景图片
 const style_location_img_container = computed(() => {
@@ -192,7 +192,7 @@ const style_location_img_container = computed(() => {
         border += `border-width: ${location_border_size.padding_top}px ${location_border_size.padding_right}px ${location_border_size.padding_bottom}px ${location_border_size.padding_left}px;border-style: ${ location_border_style };border-color: ${location_border_color};`
     }
     const height = 32 - location_margin.margin_top - location_margin.margin_bottom;
-    return background_computer(style) + padding_computer(location_padding) + radius_computer(new_style.value.location_radius) + border + `height: ${height}px;line-height: ${height}px;`;
+    return background_computer(style) + padding_computer(location_padding) + radius_computer(new_style.value.location_radius) + border + `height: ${height > 0 ? height : 0 }px;line-height: ${height > 0 ? height : 0}px;`;
 });
 
 const location_name_style = computed(() => {
diff --git a/src/components/page-settings/page-setting.vue b/src/components/page-settings/page-setting.vue
index 4a878c8b..d047a3ac 100644
--- a/src/components/page-settings/page-setting.vue
+++ b/src/components/page-settings/page-setting.vue
@@ -134,9 +134,9 @@ const default_data = {
         },
         search_botton_margin: {
             margin: 0,
-            margin_top: 0,
-            margin_right: 0,
-            margin_bottom: 0,
+            margin_top: 2,
+            margin_right: 2,
+            margin_bottom: 2,
             margin_left: 0,
         },
         search_botton_border_size: {
diff --git a/src/config/const/header-nav.ts b/src/config/const/header-nav.ts
index ad273995..9a7eb291 100644
--- a/src/config/const/header-nav.ts
+++ b/src/config/const/header-nav.ts
@@ -263,9 +263,9 @@ const defaultFooterNav: DefaultFooterNav = {
         },
         search_botton_margin: {
             margin: 0,
-            margin_top: 0,
-            margin_right: 0,
-            margin_bottom: 0,
+            margin_top: 2,
+            margin_right: 2,
+            margin_bottom: 2,
             margin_left: 0,
         },
         search_botton_border_size: {
diff --git a/src/config/const/search.ts b/src/config/const/search.ts
index daa6b032..cc292acf 100644
--- a/src/config/const/search.ts
+++ b/src/config/const/search.ts
@@ -111,9 +111,9 @@ const defaultSearch: defaultSearch = {
         },
         search_botton_margin: {
             margin: 0,
-            margin_top: 0,
-            margin_right: 0,
-            margin_bottom: 0,
+            margin_top: 2,
+            margin_right: 2,
+            margin_bottom: 2,
             margin_left: 0,
         },
         search_botton_border_size: {