From 93e3638be6846b4654d2a4a1735d03170036fc00 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Tue, 8 Oct 2024 14:45:31 +0800
Subject: [PATCH] =?UTF-8?q?1.head=E5=B1=85=E4=B8=AD=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/page-settings/index.vue       | 39 +++++++++++++-------
 src/components/page-settings/page-styles.vue | 10 ++++-
 2 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/components/page-settings/index.vue b/src/components/page-settings/index.vue
index fc7dffe2..ef0c4b1f 100644
--- a/src/components/page-settings/index.vue
+++ b/src/components/page-settings/index.vue
@@ -5,22 +5,24 @@
                 <img class="img" :style="`Filter: brightness(${new_style.function_buttons_type == 'black' ? 0 : 100})`" src="@/assets/images/layout/main/main-top.png" />
             </div>
             <div class="model-head tc re mlr-12 mt-6">
-                <div class="flex-row align-c jc-sb gap-16">
-                    <div v-if="['1', '2', '3'].includes(form.theme)" class="flex-1 flex-row align-c jc-c h gap-16" :style="[{ 'justify-content': form?.indicator_location || 'center' }, text_style]">
-                        <template v-if="['2', '3'].includes(form.theme)">
-                            <div class="logo-outer-style"><image-empty v-model="form.logo[0]" class="logo-style" error-img-style="width:2rem;height:2rem;"></image-empty></div>
-                        </template>
-                        <div v-if="['1', '2'].includes(form.theme)">{{ form.title }}</div>
-                        <template v-if="['3', '5'].includes(form.theme)">
-                            <div class="flex-1">
-                                <model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
-                            </div>
-                        </template>
+                <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-row align-c jc-c h gap-16" :class="position_class" :style="[{ 'justify-content': form?.indicator_location || 'center' }, text_style]">
+                            <template v-if="['2', '3'].includes(form.theme)">
+                                <div class="logo-outer-style"><image-empty v-model="form.logo[0]" class="logo-style" error-img-style="width:2rem;height:2rem;"></image-empty></div>
+                            </template>
+                            <div v-if="['1', '2'].includes(form.theme)">{{ form.title }}</div>
+                            <template v-if="['3', '5'].includes(form.theme)">
+                                <div class="flex-1">
+                                    <model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
+                                </div>
+                            </template>
+                        </div>
                     </div>
                     <div v-else-if="['4', '5'].includes(form.theme)" class="flex-1 flex-row align-c h gap-10">
                         <div class="flex-row gap-2">
-                            <icon name="position" size="12" color="0"></icon><span class="size-14 cr-3 text-line-1">{{ form.positioning_name }}</span
-                            ><icon v-if="form.is_arrows_show == '1'" name="arrow-right" size="12" color="0"></icon>
+                            <icon name="position" size="12" color="0"></icon><span class="size-14 cr-3 text-line-1">{{ form.positioning_name }}</span>
+                            <icon v-if="form.is_arrows_show == '1'" name="arrow-right" size="12" color="0"></icon>
                         </div>
                         <template v-if="['5'].includes(form.theme)">
                             <div class="flex-1">
@@ -74,6 +76,7 @@ const roll_style = computed(() => {
 });
 
 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>
 <style lang="scss" scoped>
 .model-top {
@@ -95,6 +98,9 @@ const text_style = computed(() => `font-weight:${new_style.value.header_backgrou
 .model-head {
     height: 3.2rem;
     overflow: hidden;
+    .model-head-content {
+        height: 3.2rem;
+    }
 }
 .model-head-icon {
     position: absolute;
@@ -123,4 +129,11 @@ const text_style = computed(() => `font-weight:${new_style.value.header_backgrou
         }
     }
 }
+.indicator-center {
+    position: absolute;
+    left: 0;
+    right: 0;
+    text-align: center;
+    top: 0;
+}
 </style>
diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue
index f016f2d7..c3b20e80 100644
--- a/src/components/page-settings/page-styles.vue
+++ b/src/components/page-settings/page-styles.vue
@@ -5,7 +5,7 @@
                 <div class="mb-12">头部样式</div>
                 <el-form-item label="顶部背景">
                     <div class="flex-col gap-10">
-                        <el-radio-group v-model="form.header_background_type">
+                        <el-radio-group v-model="form.header_background_type" @change="header_background_type_change_event">
                             <el-radio value="transparent">透明</el-radio>
                             <el-radio value="color_image">颜色/图片</el-radio>
                         </el-radio-group>
@@ -99,6 +99,14 @@ const state = reactive({
 // 如果需要解构，确保使用toRefs
 const { form, search_content } = toRefs(state);
 
+const header_background_type_change_event = (val: any) => {
+    if (val === 'color_image') {
+        form.value.immersive_style = '0';
+    } else {
+        form.value.immersive_style = '1';
+    }
+};
+
 const common_styles_update = (val: Object) => {
     form.value.common_style = val;
 };