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

---
 src/components/page-settings/index.vue           | 13 ++++++++-----
 src/components/page-settings/page-content.vue    | 16 ++++++++++++++++
 src/components/page-settings/page-styles.vue     |  2 +-
 src/layout/components/main/default/header-nav.ts |  4 ++++
 4 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/components/page-settings/index.vue b/src/components/page-settings/index.vue
index 2aca4f63..6f9fe17c 100644
--- a/src/components/page-settings/index.vue
+++ b/src/components/page-settings/index.vue
@@ -1,11 +1,11 @@
 <template>
     <div class="model-top">
         <div :class="['roll', { 'page-settings-border': showPage }]" :style="roll_style" @click="page_settings">
-            <div class="pt-15 pb-10 pl-25 pr-25 w">
+            <div class="pb-10 pl-6 pr-13 w">
                 <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">
-                <div class="flex align-c jc-c w h">
+                <div class="flex align-c jc-c w h" :style="[{ 'justify-content': form?.indicator_location || 'center', 'padding-right': form?.indicator_location == 'flex-end' ? '90px' : '0'}, text_style]">
                     {{ props.pageData.com_data?.content?.title || '新建页面' }}
                 </div>
                 <div class="model-head-icon">
@@ -46,6 +46,7 @@ const url_computer = (name: string) => {
     const new_url = ref(new URL(`../../assets/images/layout/main/${name}.png`, import.meta.url).href).value;
     return new_url;
 };
+const text_style = computed(() => `font-weight:${ new_style.value.background_title_typeface }; font-size: ${ new_style.value.background_title_size }px; color: ${ new_style.value.background_title_color };`);
 </script>
 <style lang="scss" scoped>
 .model-top {
@@ -56,6 +57,7 @@ const url_computer = (name: string) => {
     transform: translateX(-50%);
     .roll {
         width: 39rem;
+        padding: 1.5rem 1.2rem 0.9rem 1.2rem;
         margin: 0 auto;
         cursor: pointer;
     }
@@ -64,12 +66,13 @@ const url_computer = (name: string) => {
     }
 }
 .model-head {
-    height: 4.3rem;
+    height: 3.2rem;
+    overflow: hidden;
 }
 .model-head-icon {
     position: absolute;
-    right: 1.2rem;
-    bottom: 0.6rem;
+    right: 0;
+    bottom: 0;
     height: 3.2rem;
     .function-icon {
         height: 3.2rem;
diff --git a/src/components/page-settings/page-content.vue b/src/components/page-settings/page-content.vue
index 8452ced1..2e0b4f17 100644
--- a/src/components/page-settings/page-content.vue
+++ b/src/components/page-settings/page-content.vue
@@ -9,6 +9,22 @@
                     <el-form-item label="页面标题">
                         <el-input v-model="form.title" placeholder="请输入标题名称"></el-input>
                     </el-form-item>
+                    <el-form-item label="链接地址">
+                        <url-value v-model="form.link"></url-value>
+                    </el-form-item>
+                    <el-form-item label="展示位置">
+                        <el-radio-group v-model="form.indicator_location" is-button>
+                            <el-tooltip content="左对齐" placement="top" effect="light">
+                                <el-radio-button value="flex-start"><icon name="iconfont icon-left"></icon></el-radio-button>
+                            </el-tooltip>
+                            <el-tooltip content="居中" placement="top" effect="light">
+                                <el-radio-button value="center"><icon name="iconfont icon-center"></icon></el-radio-button>
+                            </el-tooltip>
+                            <el-tooltip content="右对齐" placement="top" effect="light">
+                                <el-radio-button value="flex-end"><icon name="iconfont icon-right"></icon></el-radio-button>
+                            </el-tooltip>
+                        </el-radio-group>
+                    </el-form-item>
                 </template>
             </card-container>
             <div class="bg-f5 divider-line" />
diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue
index d0ef97c6..387fa152 100644
--- a/src/components/page-settings/page-styles.vue
+++ b/src/components/page-settings/page-styles.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="w h">
-        <el-form :model="form" label-width="70" class="m-h">
+        <el-form :model="form" label-width="70">
             <card-container>
                 <div class="mb-12">头部样式</div>
                 <el-form-item label="顶部背景">
diff --git a/src/layout/components/main/default/header-nav.ts b/src/layout/components/main/default/header-nav.ts
index 91d69cbe..7ffc6adf 100644
--- a/src/layout/components/main/default/header-nav.ts
+++ b/src/layout/components/main/default/header-nav.ts
@@ -4,6 +4,8 @@ interface DefaultFooterNav {
     content: {
         theme: string;
         title: string;
+        link: object;
+        indicator_location: string;
         bottom_navigation_show: string;
     };
     style: {
@@ -25,6 +27,8 @@ const defaultFooterNav: DefaultFooterNav = {
     content: {
         theme: '1',
         title: '',
+        link: {},
+        indicator_location: 'center',
         bottom_navigation_show: '1'
     },
     style: {