From 195486c7484f46077ece3801659f106c83d365cc Mon Sep 17 00:00:00 2001
From: pengda <1111@qq.com>
Date: Thu, 3 Jul 2025 17:29:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E8=AE=BE=E7=BD=AE=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/site/settingIcon.svg                    |   1 +
 src/components/PromptText.vue                      |  34 +-
 src/components/site/serviceSetting/domainSet.vue   |  26 +
 src/components/site/serviceSetting/linkSet.vue     |  58 +++
 .../site/serviceSetting/menuColorSet.vue           |  81 ++++
 src/components/site/serviceSetting/paymentSet.vue  |  43 ++
 src/components/site/serviceSetting/priceSet.vue    |  26 +
 .../site/serviceSetting/reportSeoSet.vue           |  62 +++
 src/components/site/serviceSetting/showSet.vue     | 154 ++++++
 .../site/serviceSetting/submitSeoSet.vue           |  63 +++
 src/store/index.js                                 |  69 +++
 src/views/agent/siteServiceEdit.vue                | 531 +++++++--------------
 src/views/elementGroups.vue                        |  14 +
 13 files changed, 777 insertions(+), 385 deletions(-)
 create mode 100644 src/assets/site/settingIcon.svg
 create mode 100644 src/components/site/serviceSetting/domainSet.vue
 create mode 100644 src/components/site/serviceSetting/linkSet.vue
 create mode 100644 src/components/site/serviceSetting/menuColorSet.vue
 create mode 100644 src/components/site/serviceSetting/paymentSet.vue
 create mode 100644 src/components/site/serviceSetting/priceSet.vue
 create mode 100644 src/components/site/serviceSetting/reportSeoSet.vue
 create mode 100644 src/components/site/serviceSetting/showSet.vue
 create mode 100644 src/components/site/serviceSetting/submitSeoSet.vue

diff --git a/src/assets/site/settingIcon.svg b/src/assets/site/settingIcon.svg
new file mode 100644
index 0000000..ed04b20
--- /dev/null
+++ b/src/assets/site/settingIcon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><defs><clipPath id="master_svg0_618_004349"><rect x="0" y="0" width="16" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_618_004349)"><g><g><path d="M0.30000000000000004,3.7998290061950684L0.30000000000000004,6.599829006195068Q0.30000000000000004,6.690489006195069,0.32309699999999997,6.778159006195068Q0.346193,6.865829006195068,0.39086200000000004,6.9447190061950685Q0.43553,7.023609006195068,0.49882400000000005,7.088519006195068Q0.562117,7.1534290061950685,0.639858,7.200079006195068L1.129332,7.493759006195068Q1.877497,7.942669006195068,2.75,7.942669006195068Q3.62251,7.942669006195068,4.3706700000000005,7.493759006195068L4.5,7.416159006195068L4.62932,7.493759006195068Q5.37749,7.942669006195068,6.25,7.942669006195068Q7.12251,7.942669006195068,7.87067,7.493759006195068L8,7.416159006195068L8.12932,7.493759006195068Q8.87749,7.942669006195068,9.75,7.942669006195068Q10.62251,7.942669006195068,11.3707,7.493759006195068L11.5,7.416159006195068L11.6293,7.493759006195068Q12.3775,7.942669006195068,13.25,7.942669006195068Q14.1225,7.942669006195068,14.8707,7.493759006195068L15.3601,7.2000690061950685Q15.4379,7.1534290061950685,15.5012,7.088519006195068Q15.5645,7.023609006195068,15.6091,6.9447190061950685Q15.6538,6.865829006195068,15.6769,6.778159006195068Q15.7,6.690489006195069,15.7,6.599829006195068L15.7,3.7998290061950684Q15.7,3.7308850061950682,15.6865,3.6632660061950686Q15.6731,3.5956470061950685,15.6467,3.5319510061950683Q15.6203,3.4682550061950685,15.582,3.4109300061950685Q15.5437,3.3536050061950684,15.495,3.304854006195068Q15.4462,3.256104006195068,15.3889,3.2178000061950685Q15.3316,3.1794970061950685,15.2679,3.1531130061950683Q15.2042,3.1267300061950682,15.1366,3.1132790061950684Q15.0689,3.099829006195068,15,3.099829006195068L1,3.099829006195068Q0.931056,3.099829006195068,0.863437,3.1132790061950684Q0.795818,3.1267300061950682,0.7321219999999999,3.1531130061950683Q0.668426,3.1794970061950685,0.611101,3.2178000061950685Q0.553776,3.256104006195068,0.5050250000000001,3.304854006195068Q0.456275,3.3536050061950684,0.417971,3.4109300061950685Q0.379668,3.4682550061950685,0.35328400000000004,3.5319510061950683Q0.326901,3.5956470061950685,0.31345,3.6632660061950686Q0.30000000000000004,3.7308850061950682,0.30000000000000004,3.7998290061950684ZM1.7,6.203489006195069L1.8496380000000001,6.293269006195068Q2.2652799999999997,6.5426690061950685,2.75,6.5426690061950685Q3.23472,6.5426690061950685,3.65038,6.293269006195068L4.13985,5.999579006195068Q4.22145,5.950629006195069,4.31315,5.925229006195068Q4.40485,5.899829006195068,4.5,5.899829006195068Q4.59515,5.899829006195068,4.68685,5.925229006195068Q4.77855,5.950629006195069,4.86015,5.999579006195068L5.34963,6.293269006195068Q5.76528,6.5426690061950685,6.25,6.5426690061950685Q6.73472,6.5426690061950685,7.15038,6.293269006195068L7.63985,5.999579006195068Q7.72145,5.950629006195069,7.81315,5.925229006195068Q7.90485,5.899829006195068,8,5.899829006195068Q8.09515,5.899829006195068,8.18685,5.925229006195068Q8.27855,5.950629006195069,8.36015,5.999579006195068L8.84962,6.293269006195068Q9.26528,6.5426690061950685,9.75,6.5426690061950685Q10.23472,6.5426690061950685,10.65038,6.293269006195068L11.1399,5.999579006195068Q11.2214,5.950629006195069,11.3131,5.925229006195068Q11.4048,5.899829006195068,11.5,5.899829006195068Q11.5952,5.899829006195068,11.6869,5.925229006195068Q11.7786,5.950629006195069,11.8601,5.999579006195068L12.3496,6.293269006195068Q12.7653,6.5426690061950685,13.25,6.5426690061950685Q13.7347,6.5426690061950685,14.1504,6.293269006195068L14.3,6.203499006195068L14.3,4.4998290061950685L1.7,4.4998290061950685L1.7,6.203489006195069Z" fill-rule="evenodd" fill="#626573" fill-opacity="1"/></g><g><path d="M14.29453113079071,7.299999713897705L14.29453113079071,14.999999713897704Q14.29453113079071,15.068939713897706,14.28103113079071,15.136559713897705Q14.267631130790711,15.204179713897705,14.24123113079071,15.267879713897706Q14.21483113079071,15.331569713897705,14.17653113079071,15.388899713897706Q14.138231130790711,15.446219713897705,14.08953113079071,15.494969713897705Q14.04073113079071,15.543719713897705,13.983431130790711,15.582029713897706Q13.92613113079071,15.620329713897705,13.86243113079071,15.646709713897705Q13.79873113079071,15.673099713897706,13.731131130790711,15.686549713897705Q13.66343113079071,15.699999713897705,13.59453113079071,15.699999713897705L2.3945311307907104,15.699999713897705Q2.3255871307907103,15.699999713897705,2.2579681307907107,15.686549713897705Q2.1903491307907106,15.673099713897706,2.1266531307907104,15.646709713897705Q2.0629571307907106,15.620329713897705,2.0056321307907106,15.582029713897706Q1.9483071307907105,15.543719713897705,1.8995561307907105,15.494969713897705Q1.8508061307907104,15.446219713897705,1.8125021307907105,15.388899713897706Q1.7741991307907106,15.331569713897705,1.7478151307907104,15.267879713897706Q1.7214321307907103,15.204179713897705,1.7079811307907105,15.136559713897705Q1.6945311307907105,15.068939713897706,1.6945311307907105,14.999999713897704L1.6945311307907105,7.471114713897705Q1.6945311307907105,7.402170713897705,1.7079811307907105,7.334551513897705Q1.7214321307907103,7.266932313897705,1.7478151307907104,7.203236413897705Q1.7741991307907106,7.139540713897705,1.8125021307907105,7.082215713897705Q1.8508061307907104,7.0248907138977055,1.8995561307907105,6.976139713897705Q1.9483071307907105,6.927389713897705,2.0056321307907106,6.889085713897705Q2.0629571307907106,6.850782713897705,2.1266531307907104,6.824398713897705Q2.1903491307907106,6.798015713897705,2.2579681307907107,6.784564713897705Q2.3255871307907103,6.771114713897705,2.3945311307907104,6.771114713897705Q2.4634751307907106,6.771114713897705,2.53109413079071,6.784564713897705Q2.5987131307907103,6.798015713897705,2.6624091307907105,6.824398713897705Q2.7261051307907103,6.850782713897705,2.7834301307907103,6.889085713897705Q2.8407551307907104,6.927389713897705,2.8895061307907106,6.976139713897705Q2.9382561307907107,7.0248907138977055,2.9765601307907104,7.082215713897705Q3.0148631307907103,7.139540713897705,3.0412471307907105,7.203236313897705Q3.0676301307907106,7.266932313897705,3.0810811307907104,7.334551513897705Q3.0945311307907106,7.402170713897705,3.0945311307907106,7.471114713897705L3.0945311307907106,14.299999713897705L12.89453113079071,14.299999713897705L12.89453113079071,7.299999713897705Q12.89453113079071,7.231055713897705,12.907931130790711,7.163436713897705Q12.92143113079071,7.095817713897705,12.94783113079071,7.0321217138977055Q12.974231130790711,6.968425713897705,13.01253113079071,6.911100713897705Q13.05083113079071,6.853775713897705,13.09953113079071,6.805024713897705Q13.14833113079071,6.756274713897705,13.20563113079071,6.717970713897705Q13.26293113079071,6.679667713897705,13.32663113079071,6.6532837138977055Q13.39033113079071,6.626900713897705,13.45793113079071,6.613449713897705Q13.52563113079071,6.599999713897705,13.59453113079071,6.599999713897705Q13.66343113079071,6.599999713897705,13.731131130790711,6.613449713897705Q13.79873113079071,6.626900713897705,13.86243113079071,6.6532837138977055Q13.92613113079071,6.679667713897705,13.983431130790711,6.717970713897705Q14.04073113079071,6.756274713897705,14.08953113079071,6.805024713897705Q14.138231130790711,6.853775713897705,14.17653113079071,6.911100713897705Q14.21483113079071,6.968425713897705,14.24123113079071,7.0321217138977055Q14.267631130790711,7.095817713897705,14.28103113079071,7.163436713897705Q14.29453113079071,7.231055713897705,14.29453113079071,7.299999713897705Z" fill-rule="evenodd" fill="#626573" fill-opacity="1"/></g><g><path d="M12.89453113079071,1.7L12.89453113079071,3.8Q12.89453113079071,3.86894,12.907931130790711,3.93656Q12.92143113079071,4.00418,12.94783113079071,4.067880000000001Q12.974231130790711,4.13157,13.01253113079071,4.1889Q13.05083113079071,4.24622,13.09953113079071,4.29497Q13.14833113079071,4.343719999999999,13.20563113079071,4.38203Q13.26293113079071,4.42033,13.32663113079071,4.44672Q13.39033113079071,4.4731000000000005,13.45793113079071,4.486549999999999Q13.52563113079071,4.5,13.59453113079071,4.5Q13.66343113079071,4.5,13.731131130790711,4.486549999999999Q13.79873113079071,4.4731000000000005,13.86243113079071,4.44672Q13.92613113079071,4.42033,13.983431130790711,4.38203Q14.04073113079071,4.343719999999999,14.08953113079071,4.29497Q14.138231130790711,4.24622,14.17653113079071,4.1889Q14.21483113079071,4.13157,14.24123113079071,4.067880000000001Q14.267631130790711,4.00418,14.28103113079071,3.93656Q14.29453113079071,3.86894,14.29453113079071,3.8L14.29453113079071,1Q14.29453113079071,0.931056,14.28103113079071,0.863437Q14.267631130790711,0.795818,14.24123113079071,0.7321219999999999Q14.21483113079071,0.668426,14.17653113079071,0.611101Q14.138231130790711,0.553776,14.08953113079071,0.5050250000000001Q14.04073113079071,0.456275,13.983431130790711,0.417971Q13.92613113079071,0.379668,13.86243113079071,0.35328400000000004Q13.79873113079071,0.326901,13.731131130790711,0.31345Q13.66343113079071,0.30000000000000004,13.59453113079071,0.30000000000000004L2.3945311307907104,0.30000000000000004Q2.3255871307907103,0.30000000000000004,2.2579681307907107,0.31345Q2.1903491307907106,0.326901,2.1266531307907104,0.35328400000000004Q2.0629571307907106,0.379668,2.0056321307907106,0.417971Q1.9483071307907105,0.456275,1.8995561307907105,0.5050250000000001Q1.8508061307907104,0.553776,1.8125021307907105,0.611101Q1.7741991307907106,0.668426,1.7478151307907104,0.7321219999999999Q1.7214321307907103,0.795818,1.7079811307907105,0.863437Q1.6945311307907105,0.931056,1.6945311307907105,1L1.6945311307907105,3.73777Q1.6945311307907105,3.80671,1.7079811307907105,3.87433Q1.7214321307907103,3.94195,1.7478151307907104,4.00565Q1.7741991307907106,4.06934,1.8125021307907105,4.12667Q1.8508061307907104,4.18399,1.8995561307907105,4.23274Q1.9483071307907105,4.28149,2.0056321307907106,4.3198Q2.0629571307907106,4.3581,2.1266531307907104,4.3844899999999996Q2.1903491307907106,4.41087,2.2579681307907107,4.42432Q2.3255871307907103,4.43777,2.3945311307907104,4.43777Q2.4634751307907106,4.43777,2.53109413079071,4.42432Q2.5987131307907103,4.41087,2.6624091307907105,4.3844899999999996Q2.7261051307907103,4.3581,2.7834301307907103,4.3198Q2.8407551307907104,4.28149,2.8895061307907106,4.23274Q2.9382561307907107,4.18399,2.9765601307907104,4.12667Q3.0148631307907103,4.06934,3.0412471307907105,4.00565Q3.0676301307907106,3.94195,3.0810811307907104,3.87433Q3.0945311307907106,3.80671,3.0945311307907106,3.73777L3.0945311307907106,1.7L12.89453113079071,1.7Z" fill-rule="evenodd" fill="#626573" fill-opacity="1"/></g><g><path d="M5.55,14.999657821655273L5.55,10.799657821655273Q5.55,10.730713821655273,5.56345,10.663094821655273Q5.576901,10.595475821655274,5.603284,10.531779821655274Q5.629668,10.468083821655274,5.667971,10.410758821655273Q5.706275,10.353433821655273,5.755025,10.304682821655273Q5.803776,10.255932821655273,5.861101,10.217628821655273Q5.918426,10.179325821655274,5.982122,10.152941821655274Q6.045818,10.126558821655273,6.113437,10.113107821655273Q6.181056,10.099657821655274,6.25,10.099657821655274L9.75,10.099657821655274Q9.81894,10.099657821655274,9.88656,10.113107821655273Q9.954180000000001,10.126558821655273,10.01788,10.152941821655274Q10.08157,10.179325821655274,10.1389,10.217628821655273Q10.19622,10.255932821655273,10.24497,10.304682821655273Q10.29373,10.353433821655273,10.33203,10.410758821655273Q10.37033,10.468083821655274,10.39672,10.531779821655274Q10.4231,10.595475821655274,10.43655,10.663094821655273Q10.45,10.730713821655273,10.45,10.799657821655273L10.45,14.999657821655273Q10.45,15.068597821655274,10.43655,15.136217821655274Q10.4231,15.203837821655274,10.39672,15.267537821655274Q10.37033,15.331227821655274,10.33203,15.388557821655272Q10.29373,15.445877821655273,10.24497,15.494627821655273Q10.19622,15.543387821655273,10.1389,15.581687821655272Q10.08157,15.619987821655274,10.01788,15.646367821655273Q9.954180000000001,15.672757821655274,9.88656,15.686207821655273Q9.81894,15.699657821655274,9.75,15.699657821655274L6.25,15.699657821655274Q6.181056,15.699657821655274,6.113437,15.686207821655273Q6.045818,15.672757821655274,5.982122,15.646377821655275Q5.918426,15.619987821655274,5.861101,15.581687821655272Q5.803776,15.543387821655273,5.755025,15.494627821655273Q5.706275,15.445877821655273,5.667971,15.388557821655272Q5.629668,15.331227821655274,5.603284,15.267537821655274Q5.576901,15.203837821655274,5.56345,15.136217821655274Q5.55,15.068597821655274,5.55,14.999657821655273ZM6.95,11.499657821655273L6.95,14.299657821655273L9.05,14.299657821655273L9.05,11.499657821655273L6.95,11.499657821655273Z" fill="#626573" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/components/PromptText.vue b/src/components/PromptText.vue
index 2a52ca5..28f1a2c 100644
--- a/src/components/PromptText.vue
+++ b/src/components/PromptText.vue
@@ -1,7 +1,12 @@
 <template>
     <div class="prompt-text" :class="typeClass">
-        <img class="prompt-icon" :src="typeIcon" alt="">
-        <span class="prompt-desc">{{text}}</span>
+        <div class="flex-text">
+            <img class="prompt-icon" :src="typeIcon" alt="">
+            <span class="prompt-desc">{{text}}</span>
+        </div>
+        <div class="prompt-extra">
+            <slot name="desc" />
+        </div>
     </div>
 </template>
 <script>
@@ -47,33 +52,25 @@ export default {
 }
 </script>
 <style scoped lang="scss">
-.info{
+.prompt-text{
+  padding: 8px 13px;
+  border-radius: 4px;
+}
+.flex-text{
   display: flex;
   align-items: center;
-  padding: 8px 13px;
   align-self: stretch;
   z-index: 1;
-  border-radius: 4px;
+}
+.info{
   background: #F2F7FF;
   border: 1px solid #BFDAFF;
 }
 .notice{
-  display: flex;
-  align-items: center;
-  padding: 8px 13px;
-  align-self: stretch;
-  z-index: 1;
-  border-radius: 4px;
   background: #FEFCE8;
   border: 1px solid rgba(255, 140, 0, 0.3);
 }
 .warning{
-  display: flex;
-  align-items: center;
-  padding: 8px 13px;
-  align-self: stretch;
-  z-index: 1;
-  border-radius: 4px;
   background: #FFF1F0;
   border: 1px solid #FFA39E;
 }
@@ -87,4 +84,7 @@ export default {
   color: #1E2226;
   letter-spacing: 0.08em;
 }
+.prompt-extra{
+
+}
 </style>
\ No newline at end of file
diff --git a/src/components/site/serviceSetting/domainSet.vue b/src/components/site/serviceSetting/domainSet.vue
new file mode 100644
index 0000000..b9b3a55
--- /dev/null
+++ b/src/components/site/serviceSetting/domainSet.vue
@@ -0,0 +1,26 @@
+<template>
+    <div>
+
+    </div>
+</template>
+<script>
+
+export default {
+  name: '',
+  props:[],
+  components: {
+
+  },
+  data(){
+    return {
+
+    }
+  },
+  methods:{
+
+  }
+}
+</script>
+<style lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/components/site/serviceSetting/linkSet.vue b/src/components/site/serviceSetting/linkSet.vue
new file mode 100644
index 0000000..20e6cbc
--- /dev/null
+++ b/src/components/site/serviceSetting/linkSet.vue
@@ -0,0 +1,58 @@
+<template>
+    <div class="main-content12">
+        <div class="pageheader">
+            <span class="pagetitle">基本设置</span>
+        </div>
+
+        <div class="flex-common">
+            <el-form ref="formRef">
+                <div class="flex-wrap">
+                    <div class="flex-left">
+                        <GuipFormItem column="column" label="首页链接">
+                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
+                                       placeholder="请输入首页链接" desc="您希望用户能找到服务的首页或您自建站点页面">
+                            </GuipInput>
+                            <el-checkbox slot="formDom">同步到本站的其他检测首页项上</el-checkbox>
+                        </GuipFormItem>
+                    </div>
+                    <div class="flex-line "></div>
+                    <div class="flex-right">
+                        <GuipFormItem column="column" label="检测服务链接">
+                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
+                                       placeholder="请输入检测服务链接" desc="方便用户快速找到再次检测入口">
+                            </GuipInput>
+                            <el-checkbox slot="formDom">同步到本站的其他检测首页项上</el-checkbox>
+                        </GuipFormItem>
+                    </div>
+                </div>
+            </el-form>
+        </div>
+
+        <div class="save-button">
+            <GuipButton type="primary" :btnstyle="saveBtnStyleObj">保存</GuipButton>
+        </div>
+    </div>
+</template>
+<script>
+
+import GuipFormItem from "@/components/GuipFormItem.vue";
+import GuipButton from "@/components/GuipButton.vue";
+import GuipInput from "@/components/GuipInput.vue";
+
+export default {
+    name: '',
+    props:[],
+    components: {
+        GuipInput,
+        GuipButton, GuipFormItem
+
+    },
+    data(){
+        return {}
+    },
+    methods: {}
+}
+</script>
+<style lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/components/site/serviceSetting/menuColorSet.vue b/src/components/site/serviceSetting/menuColorSet.vue
new file mode 100644
index 0000000..f1ad2bb
--- /dev/null
+++ b/src/components/site/serviceSetting/menuColorSet.vue
@@ -0,0 +1,81 @@
+<template>
+    <div class="main-content12">
+        <div class="pageheader">
+            <span class="pagetitle">基本设置</span>
+        </div>
+
+        <div class="flex-common">
+            <h3>PC端页面品牌</h3>
+            <el-form ref="formRef">
+                <div class="flex-wrap">
+                    <div class="flex-left">
+                        <GuipFormItem column="column" label="提交页Logo上传">
+                            <hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
+                                          :hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
+                                          hover-text-color="#006AFF"/>
+                        </GuipFormItem>
+                        <div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div>
+                    </div>
+                    <div class="flex-line "></div>
+                    <div class="flex-right">
+                        <GuipFormItem column="column" label="报告页Logo上传">
+                            <hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
+                                          :hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
+                                          hover-text-color="#006AFF"/>
+                        </GuipFormItem>
+                        <div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div>
+                    </div>
+                </div>
+            </el-form>
+        </div>
+
+        <div class="flex-common">
+            <h3 class="mb16">页面色彩</h3>
+
+            <PromptText text='操作说明：点击色块可打开调色盘改色，也可直接更改6位色值数据进行改色' :type="1" class="mb32"/>
+
+            <el-form ref="formRef">
+                <div class="flex-wrap">
+                    <div class="flex-left">
+                        aaa
+                    </div>
+                    <div class="flex-line "></div>
+                    <div class="flex-right">
+                        bbb
+                    </div>
+                </div>
+            </el-form>
+        </div>
+
+        <div class="save-button">
+            <GuipButton type="primary" :btnstyle="saveBtnStyleObj">保存</GuipButton>
+        </div>
+    </div>
+</template>
+<script>
+
+import HoverButton from "@/components/HoverButton.vue";
+import GuipFormItem from "@/components/GuipFormItem.vue";
+import PromptText from "@/components/PromptText.vue";
+import GuipButton from "@/components/GuipButton.vue";
+
+export default {
+  name: '',
+  props:[],
+  components: {
+      GuipButton, PromptText, GuipFormItem, HoverButton
+
+  },
+  data(){
+    return {
+
+    }
+  },
+  methods:{
+
+  }
+}
+</script>
+<style lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/components/site/serviceSetting/paymentSet.vue b/src/components/site/serviceSetting/paymentSet.vue
new file mode 100644
index 0000000..ad61572
--- /dev/null
+++ b/src/components/site/serviceSetting/paymentSet.vue
@@ -0,0 +1,43 @@
+<template>
+    <div class="main-content12">
+        <div class="pageheader">
+            <span class="pagetitle">收款设置</span>
+        </div>
+
+        <div class="flex-common payment-area">
+            <PromptText text="按住左侧图标，上下拖动可进行排序，平台卡券只能放到最后。" :type="1" class="mb32"/>
+            <PaymentMethod :paymentList="payList" @confirm="confirmPayment"/>
+        </div>
+
+        <div class="save-button">
+            <GuipButton type="primary" :btnstyle="saveBtnStyleObj">保存</GuipButton>
+        </div>
+    </div>
+</template>
+<script>
+
+import PaymentMethod from "@/components/paymentMethod.vue";
+import PromptText from "@/components/PromptText.vue";
+import GuipButton from "@/components/GuipButton.vue";
+
+export default {
+  name: '',
+  props:[],
+  components: {
+      GuipButton,
+      PromptText, PaymentMethod
+
+  },
+  data(){
+    return {
+
+    }
+  },
+  methods:{
+
+  }
+}
+</script>
+<style lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/components/site/serviceSetting/priceSet.vue b/src/components/site/serviceSetting/priceSet.vue
new file mode 100644
index 0000000..b9b3a55
--- /dev/null
+++ b/src/components/site/serviceSetting/priceSet.vue
@@ -0,0 +1,26 @@
+<template>
+    <div>
+
+    </div>
+</template>
+<script>
+
+export default {
+  name: '',
+  props:[],
+  components: {
+
+  },
+  data(){
+    return {
+
+    }
+  },
+  methods:{
+
+  }
+}
+</script>
+<style lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/components/site/serviceSetting/reportSeoSet.vue b/src/components/site/serviceSetting/reportSeoSet.vue
new file mode 100644
index 0000000..395cf25
--- /dev/null
+++ b/src/components/site/serviceSetting/reportSeoSet.vue
@@ -0,0 +1,62 @@
+<template>
+    <div class="main-content12">
+        <div class="pageheader">
+            <span class="pagetitle">基本设置</span>
+        </div>
+
+        <div class="flex-common">
+            <PromptText text="温馨提示：报告页标题不允许使用“知网”、“pmlc”、“amlc”和“smlc”等关键词。" :type="2" class="mb16"/>
+
+            <el-form ref="formRef">
+                <div class="flex-wrap">
+                    <div class="flex-left">
+                        <GuipFormItem column="column" class="mb24" label="报告页标题（T：title）">
+                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
+                                       placeholder="建议80字内">
+                            </GuipInput>
+                        </GuipFormItem>
+                        <GuipFormItem column="column" label="报告页关键词（K：keyword）">
+                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="68px" type="textarea">
+                            </GuipInput>
+                        </GuipFormItem>
+                    </div>
+                    <div class="flex-line "></div>
+                    <div class="flex-right">
+                        <GuipFormItem column="column" label="报告页描述（D：description）">
+                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea">
+                            </GuipInput>
+                        </GuipFormItem>
+                    </div>
+                </div>
+            </el-form>
+        </div>
+
+        <div class="save-button">
+            <GuipButton type="primary" :btnstyle="saveBtnStyleObj">保存</GuipButton>
+        </div>
+    </div>
+</template>
+<script>
+
+import GuipFormItem from "@/components/GuipFormItem.vue";
+import PromptText from "@/components/PromptText.vue";
+import GuipButton from "@/components/GuipButton.vue";
+import GuipInput from "@/components/GuipInput.vue";
+
+export default {
+    name: '',
+    props:[],
+    components: {
+        GuipInput,
+        GuipButton, PromptText, GuipFormItem
+
+    },
+    data(){
+        return {}
+    },
+    methods: {}
+}
+</script>
+<style lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/components/site/serviceSetting/showSet.vue b/src/components/site/serviceSetting/showSet.vue
new file mode 100644
index 0000000..3dba776
--- /dev/null
+++ b/src/components/site/serviceSetting/showSet.vue
@@ -0,0 +1,154 @@
+<template>
+    <div class="main-content12">
+        <div class="pageheader">
+            <span class="pagetitle">基本设置</span>
+        </div>
+
+        <div class="flex-common">
+            <h3 class="mb16">基础信息</h3>
+
+            <PromptText text='温馨提示：服务别名、首页服务广告词和首页服务描述不允许使用"知网"、"pmlc"、"amlc"和"smlc"等关键词。' :type="2" class="mb32"/>
+
+            <el-form ref="formRef">
+                <div class="flex-wrap">
+                    <div class="flex-left">
+                        <GuipFormItem column="column" label="服务别名">
+                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
+                                       placeholder="建议80字内" desc="展示在用户端的服务名称">
+                            </GuipInput>
+                        </GuipFormItem>
+                        <GuipFormItem column="column" label="服务广告词">
+                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
+                                       placeholder="建议20字内" desc="用来简短概括的解释服务">
+                            </GuipInput>
+                        </GuipFormItem>
+                        <GuipFormItem column="column" label="服务描述">
+                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea"
+                                       desc="用来详细的解释服务">
+                            </GuipInput>
+                        </GuipFormItem>
+                    </div>
+                    <div class="flex-line "></div>
+                    <div class="flex-right">
+                        <GuipFormItem column="column" label="服务Logo">
+                            <hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
+                                          :hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
+                                          hover-text-color="#006AFF"/>
+                        </GuipFormItem>
+                        <div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div>
+                    </div>
+                </div>
+            </el-form>
+        </div>
+
+        <div class="flex-common">
+            <h3>展示开关</h3>
+            <el-form ref="formRef">
+                <div class="flex-wrap">
+                    <div class="flex-left">
+                        <div class="card-item">
+                            <div class="card-info">
+                                <p class="card-name">首页服务显示</p>
+                                <p class="card-desc">控制首页是否显示本服务</p>
+                            </div>
+                            <el-form>
+                                <GuipSwitch active-value="1" inactive-value="0" activeText="开启" inactiveText="关闭">
+                                </GuipSwitch>
+                            </el-form>
+                        </div>
+                        <div class="card-item">
+                            <div class="card-info">
+                                <p class="card-name">检测页价格展示</p>
+                                <p class="card-desc">本服务检测页面是否展示价格</p>
+                            </div>
+                            <el-form>
+                                <GuipSwitch active-value="1" inactive-value="0" activeText="开启" inactiveText="关闭">
+                                </GuipSwitch>
+                            </el-form>
+                        </div>
+                    </div>
+                    <div class="flex-line "></div>
+                    <div class="flex-right">
+                        <div class="card-item">
+                            <div class="card-info">
+                                <p class="card-name">首页推荐位</p>
+                                <p class="card-desc">开启即上推荐位</p>
+                            </div>
+                            <el-form>
+                                <GuipSwitch active-value="1" inactive-value="0" activeText="开启" inactiveText="关闭">
+                                </GuipSwitch>
+                            </el-form>
+                        </div>
+                    </div>
+                </div>
+            </el-form>
+        </div>
+
+        <div class="save-button">
+            <GuipButton type="primary" :btnstyle="saveBtnStyleObj">保存</GuipButton>
+        </div>
+    </div>
+</template>
+<script>
+
+import HoverButton from "@/components/HoverButton.vue";
+import GuipFormItem from "@/components/GuipFormItem.vue";
+import GuipSwitch from "@/components/GuipSwitch.vue";
+import PromptText from "@/components/PromptText.vue";
+import GuipInput from "@/components/GuipInput.vue";
+import GuipButton from "@/components/GuipButton.vue";
+
+export default {
+  name: '',
+  props:[],
+  components: {
+      GuipButton,
+      GuipInput, PromptText, GuipSwitch, GuipFormItem, HoverButton
+
+  },
+  data(){
+    return {
+
+    }
+  },
+  methods:{
+
+  }
+}
+</script>
+<style lang="scss">
+.flex-right{
+  text-align: left;
+}
+.card-item{
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #FAFAFA;
+  border-radius: 4px;
+  border: none;
+  margin-bottom: 12px;
+  .card-info{
+    text-align: left;
+    margin-left: 12px;
+    font-variation-settings: "opsz" auto;
+    letter-spacing: 0.08em;
+    .card-name{
+      font-size: 14px;
+      line-height: 18px;
+      color: #1E2226;
+    }
+    .card-desc{
+      font-size: 12px;
+      line-height: 13px;
+      margin-top: 12px;
+      color: #8A9099;
+    }
+  }
+
+  .el-form-item{
+    margin: 0;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/site/serviceSetting/submitSeoSet.vue b/src/components/site/serviceSetting/submitSeoSet.vue
new file mode 100644
index 0000000..03f760f
--- /dev/null
+++ b/src/components/site/serviceSetting/submitSeoSet.vue
@@ -0,0 +1,63 @@
+<template>
+    <div class="main-content12">
+        <div class="pageheader">
+            <span class="pagetitle">基本设置</span>
+        </div>
+
+        <div class="flex-common">
+            <PromptText text="温馨提示：提交页标题不允许使用“知网”、“pmlc”、“amlc”和“smlc”等关键词。" :type="2" class="mb16"/>
+
+            <el-form ref="formRef">
+                <div class="flex-wrap">
+                    <div class="flex-left">
+                        <GuipFormItem column="column" class="mb24" label="提交页标题（T：title）">
+                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
+                                       placeholder="建议80字内">
+                            </GuipInput>
+
+                        </GuipFormItem>
+                        <GuipFormItem column="column" label="提交页关键词（K：keyword）">
+                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="68px" type="textarea">
+                            </GuipInput>
+                        </GuipFormItem>
+                    </div>
+                    <div class="flex-line "></div>
+                    <div class="flex-right">
+                        <GuipFormItem column="column" label="提交页描述（D：description）">
+                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea">
+                            </GuipInput>
+                        </GuipFormItem>
+                    </div>
+                </div>
+            </el-form>
+        </div>
+
+        <div class="save-button">
+            <GuipButton type="primary" :btnstyle="saveBtnStyleObj">保存</GuipButton>
+        </div>
+    </div>
+</template>
+<script>
+
+import GuipFormItem from "@/components/GuipFormItem.vue";
+import PromptText from "@/components/PromptText.vue";
+import GuipButton from "@/components/GuipButton.vue";
+import GuipInput from "@/components/GuipInput.vue";
+
+export default {
+    name: '',
+    props:[],
+    components: {
+        GuipInput,
+        GuipButton, PromptText, GuipFormItem
+
+    },
+    data(){
+        return {}
+    },
+    methods: {}
+}
+</script>
+<style lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index ec0c052..46afb71 100755
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -316,6 +316,75 @@ export default new Vuex.Store({
         ]
       }
     ],
+    siteServiceSettingData:[
+      {
+        name: '服务设置',
+        path: '',//设置为空
+        img:'site/settingIcon.svg',
+        noToPath:true,
+        imgActive: require('@/assets/site/sitebase_active.svg'),
+        list: [
+          {
+            name: '价格设置',
+            desc: 'priceSet',//和组件名称、componentsName 一致
+            componentsName:'priceSet'//和页面内引入的组件名称 、及上面desc 一致
+          },
+          {
+            name: '收款设置',
+            desc: 'paymentSet',
+            componentsName:'paymentSet'
+          },
+          {
+            name: '展示设置',
+            desc: 'showSet',
+            componentsName:'showSet'
+          },
+          {
+            name: '页面品牌与色彩',
+            desc: 'menuColorSet',
+            componentsName:'menuColorSet'
+          }
+        ]
+      },
+      {
+        name: 'SEO优化',
+        path: '',
+        img: 'site/sitesem.svg',
+        noToPath:true,
+        imgActive: require('@/assets/site/sitebase_active.svg'),
+        list: [
+          {
+            name: '提交页SEO',
+            desc: 'submitSeoSet',
+            componentsName:'submitSeoSet'
+          },
+          {
+            name: '报告页SEO',
+            desc: 'reportSeoSet',
+            componentsName:'reportSeoSet'
+          },
+        ]
+      },
+      {
+        name: '域名与链接',
+        path: '',
+        img: 'site/form_link.svg',
+        noToPath:true,
+        imgActive: require('@/assets/site/sitebase_active.svg'),
+        list: [
+          {
+            name: '独立域名',
+            desc: 'domainSet',
+            componentsName:'domainSet'
+          },
+          {
+            name: '自定义导航',
+            desc: 'linkSet',
+            componentsName:'linkSet'
+          },
+        ]
+      }
+    ],
     demoPageData:[
       {
         name: '支付授权',
diff --git a/src/views/agent/siteServiceEdit.vue b/src/views/agent/siteServiceEdit.vue
index bc17814..fafba3f 100644
--- a/src/views/agent/siteServiceEdit.vue
+++ b/src/views/agent/siteServiceEdit.vue
@@ -1,429 +1,224 @@
 <template>
     <div class="main-content12">
-        <div class="pageheader">
-            <span class="pagetitle">基本设置</span>
-        </div>
-
-<!--        收款方式-->
-        <div class="flex-common payment-area">
-            <PromptText text="按住左侧图标，上下拖动可进行排序，平台卡券只能放到最后。" :type="1" class="mb32"/>
-            <PaymentMethod :paymentList="payList" @confirm="confirmPayment"/>
-        </div>
-
-<!--        提交页seo-->
-        <div class="flex-common">
-            <PromptText text="温馨提示：提交页标题不允许使用“知网”、“pmlc”、“amlc”和“smlc”等关键词。" :type="2" class="mb16"/>
-
-            <el-form ref="formRef">
-                <div class="flex-wrap">
-                    <div class="flex-left">
-                        <GuipFormItem column="column" class="mb24" label="提交页标题（T：title）">
-                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
-                                       placeholder="建议80字内">
-                            </GuipInput>
-
-                        </GuipFormItem>
-                        <GuipFormItem column="column" label="提交页关键词（K：keyword）">
-                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="68px" type="textarea">
-                            </GuipInput>
-                        </GuipFormItem>
-                    </div>
-                    <div class="flex-line "></div>
-                    <div class="flex-right">
-                        <GuipFormItem column="column" label="提交页描述（D：description）">
-                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea">
-                            </GuipInput>
-                        </GuipFormItem>
-                    </div>
-                </div>
-            </el-form>
-        </div>
-
-<!--        报告页seo-->
-        <div class="flex-common">
-            <PromptText text="温馨提示：报告页标题不允许使用“知网”、“pmlc”、“amlc”和“smlc”等关键词。" :type="2" class="mb16"/>
-
-            <el-form ref="formRef">
-                <div class="flex-wrap">
-                    <div class="flex-left">
-                        <GuipFormItem column="column" class="mb24" label="报告页标题（T：title）">
-                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
-                                       placeholder="建议80字内">
-                            </GuipInput>
-                        </GuipFormItem>
-                        <GuipFormItem column="column" label="报告页关键词（K：keyword）">
-                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="68px" type="textarea">
-                            </GuipInput>
-                        </GuipFormItem>
-                    </div>
-                    <div class="flex-line "></div>
-                    <div class="flex-right">
-                        <GuipFormItem column="column" label="报告页描述（D：description）">
-                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea">
-                            </GuipInput>
-                        </GuipFormItem>
-                    </div>
-                </div>
-            </el-form>
-        </div>
-
-<!--        展示设置-->
-        <div class="flex-common">
-            <h3 class="mb16">基础信息</h3>
-
-            <PromptText text='温馨提示：服务别名、首页服务广告词和首页服务描述不允许使用"知网"、"pmlc"、"amlc"和"smlc"等关键词。' :type="2" class="mb32"/>
-
-            <el-form ref="formRef">
-                <div class="flex-wrap">
-                    <div class="flex-left">
-                        <GuipFormItem column="column" label="服务别名">
-                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
-                                       placeholder="建议80字内" desc="展示在用户端的服务名称">
-                            </GuipInput>
-                        </GuipFormItem>
-                        <GuipFormItem column="column" label="服务广告词">
-                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
-                                       placeholder="建议20字内" desc="用来简短概括的解释服务">
-                            </GuipInput>
-                        </GuipFormItem>
-                        <GuipFormItem column="column" label="服务描述">
-                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea"
-                                       desc="用来详细的解释服务">
-                            </GuipInput>
-                        </GuipFormItem>
-                    </div>
-                    <div class="flex-line "></div>
-                    <div class="flex-right">
-                        <GuipFormItem column="column" label="服务Logo">
-                            <hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
-                                          :hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
-                                          hover-text-color="#006AFF"/>
-                        </GuipFormItem>
-                    </div>
-                </div>
-            </el-form>
-        </div>
-
-        <div class="flex-common">
-            <h3>展示开关</h3>
-            <el-form ref="formRef">
-                <div class="flex-wrap">
-                    <div class="flex-left">
-                        <div class="card-item">
-                            <div class="card-info">
-                                <p class="card-name">首页服务显示</p>
-                                <p class="card-desc">控制首页是否显示本服务</p>
-                            </div>
-                            <el-form>
-                                <GuipSwitch active-value="1" inactive-value="0" activeText="开启" inactiveText="关闭">
-                                </GuipSwitch>
-                            </el-form>
-                        </div>
-                        <div class="card-item">
-                            <div class="card-info">
-                                <p class="card-name">检测页价格展示</p>
-                                <p class="card-desc">本服务检测页面是否展示价格</p>
-                            </div>
-                            <el-form>
-                                <GuipSwitch active-value="1" inactive-value="0" activeText="开启" inactiveText="关闭">
-                                </GuipSwitch>
-                            </el-form>
-                        </div>
-                    </div>
-                    <div class="flex-line "></div>
-                    <div class="flex-right">
-                        <div class="card-item">
-                            <div class="card-info">
-                                <p class="card-name">首页推荐位</p>
-                                <p class="card-desc">开启即上推荐位</p>
-                            </div>
-                            <el-form>
-                                <GuipSwitch active-value="1" inactive-value="0" activeText="开启" inactiveText="关闭">
-                                </GuipSwitch>
-                            </el-form>
-                        </div>
-                    </div>
-                </div>
-            </el-form>
-        </div>
-
-<!--        页面品牌和颜色-->
-        <div class="flex-common">
-            <h3>PC端页面品牌</h3>
-            <el-form ref="formRef">
-                <div class="flex-wrap">
-                    <div class="flex-left">
-                        <GuipFormItem column="column" label="提交页Logo上传">
-                            <hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
-                              :hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
-                              hover-text-color="#006AFF"/>
-                        </GuipFormItem>
-                    </div>
-                    <div class="flex-line "></div>
-                    <div class="flex-right">
-                        <GuipFormItem column="column" label="报告页Logo上传">
-                            <hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
-                              :hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
-                              hover-text-color="#006AFF"/>
-                        </GuipFormItem>
-                    </div>
-                </div>
-            </el-form>
-        </div>
-
-        <div class="flex-common">
-            <h3 class="mb16">页面色彩</h3>
-
-            <PromptText text='操作说明：点击色块可打开调色盘改色，也可直接更改6位色值数据进行改色' :type="1" class="mb32"/>
-
-            <el-form ref="formRef">
-                <div class="flex-wrap">
-                    <div class="flex-left">
-                        aaa
-                    </div>
-                    <div class="flex-line "></div>
-                    <div class="flex-right">
-                        bbb
-                    </div>
-                </div>
-            </el-form>
-        </div>
-
-<!--        自定义导航-->
-        <div class="flex-common">
-            <el-form ref="formRef">
-                <div class="flex-wrap">
-                    <div class="flex-left">
-                        <GuipFormItem column="column" label="首页链接">
-                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
-                                       placeholder="请输入首页链接" desc="您希望用户能找到服务的首页或您自建站点页面">
-                            </GuipInput>
-                            <el-checkbox slot="formDom">同步到本站的其他检测首页项上</el-checkbox>
-                        </GuipFormItem>
-                    </div>
-                    <div class="flex-line "></div>
-                    <div class="flex-right">
-                        <GuipFormItem column="column" label="检测服务链接">
-                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
-                                       placeholder="请输入检测服务链接" desc="方便用户快速找到再次检测入口">
-                            </GuipInput>
-                            <el-checkbox slot="formDom">同步到本站的其他检测首页项上</el-checkbox>
-                        </GuipFormItem>
-                    </div>
-                </div>
-            </el-form>
-        </div>
-
-        <div class="save-button">
-            <GuipButton type="primary" :btnstyle="saveBtnStyleObj">保存</GuipButton>
-        </div>
+        <!-- 参数 在子组件页面一样用 props接收 、ref绑定的组件示例 -->
+        <!-- 默认页面展示 的初始组件 Franchise-->
+        <component :is="componentsName ? componentsName : 'showSet'" ref="dynamicComponent"
+                   :someProp="payinfo"  @customEvent="handleComponentEvent"/>
     </div>
+
 </template>
 <script>
-
-import PaymentMethod from "@/components/paymentMethod.vue";
-import GuipButton from "@/components/GuipButton.vue";
-import GuipFormItem from "@/components/GuipFormItem.vue";
-import GuipInput from "@/components/GuipInput.vue";
-import HoverButton from "@/components/HoverButton.vue";
-import GuipSwitch from "@/components/GuipSwitch.vue";
-import PromptText from "@/components/PromptText.vue";
+import store from '@/store';
+import { mapState } from 'vuex';
+import GuipSwitch from '@/components/GuipSwitch.vue';
+import GuipButton from '@/components/GuipButton.vue';
+import HoverButton from '@/components/HoverButton.vue'
+import priceSet from '@/components/site/serviceSetting/priceSet.vue'
+import paymentSet from '@/components/site/serviceSetting/paymentSet.vue'
+import showSet from '@/components/site/serviceSetting/showSet.vue'
+import menuColorSet from '@/components/site/serviceSetting/menuColorSet.vue'
+import submitSeoSet from '@/components/site/serviceSetting/submitSeoSet.vue'
+import reportSeoSet from '@/components/site/serviceSetting/reportSeoSet.vue'
+import domainSet from '@/components/site/serviceSetting/domainSet.vue'
+import linkSet from '@/components/site/serviceSetting/linkSet.vue'
 
 export default {
-    // 站点设置
-    name: '',
+    // 服务个性化设置
+    name: 'siteServiceEdit',
     props: [''],
     components: {
         GuipSwitch,
-        HoverButton,
-        GuipInput, GuipFormItem,
         GuipButton,
-        PaymentMethod,
-        PromptText
+        HoverButton,
+        priceSet,
+        paymentSet,
+        showSet,
+        menuColorSet,
+        submitSeoSet,
+        reportSeoSet,
+        domainSet,
+        linkSet,
     },
     data() {
         return {
             // AUTH
             token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
-
-            uid:0,
-            type:0,
-            payList: [],
-
-            //添加按钮样式
-            saveBtnStyleObj: {
-                width: '144px',
-                height: '46px',
-                borderRadius: '4px',
-                background: '#006AFF',
-            },
+            payinfo: [
+                {
+                    type: 'a',
+                    name: '传递的参数'
+                }
+            ],
+            payType: -1,
+            payStatus: -1,
+            paySvg: '',
+            confirmText: '保存',
         }
     },
     computed: {
+        ...mapState(['pageTitle', 'componentsName']), // 从Vuex映射showSidebar状态到组件的计算属性中
     },
     created() {
-        if(!this.$route.query.uid && !this.$route.query.type) {
-            this.$message.error('非法请求');
-            this.$router.push('/agent/siteList')
-        }
-        this.uid = this.$route.query.uid;
-        this.type = this.$route.query.type;
+        store.commit('SET_CUSTOMIZE', true);
+        store.commit('SET_SLIDER_MENU', 'siteServiceSettingData');
     },
     mounted() {
-        this.getPayList()
+        store.commit('SET_PAGETITLE', '支付授权');
     },
     methods: {
-        // 获取支付列表
-        getPayList() {
-            const that = this
-            that.payList = []
-            this.$http('POST', '/agentnew/ajax_get_service_pay_list', {
-                uid: that.uid,
-                type: that.type,
-            },{
-                headers:{
-                    'Auth': this.token
-                }
-            }).then(response => {
-                this.$nextTick(() => {
-                    that.payList = response.data.paylist
-                })
-            }).catch(error => {
-                console.error(error, 'error')
-            })
+        handleComponentEvent(payload) {
+            console.log('收到子组件事件:', payload);
         },
-        confirmPayment(payList){
-            this.payList = payList
+        submitSave() {
+            // 逻辑示例
+            // 获取动态组件实例
+            const componentInstance = this.$refs.dynamicComponent;
+            console.log('当前组件实例:', componentInstance);
+
+            // 调用组件方法（如果存在）
+            if (componentInstance) {
+                console.log('获取到啦');
+                // 调用方法或者获取参数
+                componentInstance.showDomainModal && componentInstance.showDomainModal()
+            }
         },
     }
 }
 </script>
 <style lang="scss" scoped>
-.mb16{
-  margin-bottom: 16px;
+a {
+  text-decoration: none;
+  color: #006AFF;
 }
-.mb32{
-  margin-bottom: 32px;
+
+.gray {
+  color: #626573 !important;
 }
-.pageheader {
-    display: flex;
-    justify-content: space-between;
-    /* 关键属性 */
-    align-items: center;
-    margin: 16px 0 16px 0;
+
+.mt-18 {
+  margin-top: 18px;
 }
 
-.pagetitle {
-    font-size: 18px;
-    font-weight: bold;
-    line-height: normal;
-    letter-spacing: 0.08em;
-    color: #1E2226;
-    margin-top: 8px;
+.ml-23 {
+  margin-left: 23px;
 }
-.flex-common{
-  margin-bottom: 12px;
+
+.justify-content-space-between {
+  justify-content: space-between;
 }
 
-.notice-text{
-  display: flex;
-  align-items: center;
-  padding: 8px 13px;
-  align-self: stretch;
-  z-index: 1;
+.beforeNotice {
+
+  h4 {
+    margin: 0;
+    gap: 8px;
+    justify-content: space-between;
+  }
+
+  margin-bottom: 18px;
+  text-align: left;
+  box-sizing: border-box;
+  padding: 20px 14px;
   border-radius: 4px;
-  background: #F2F7FF;
-  border: 1px solid #BFDAFF;
-  margin-bottom: 32px;
-  .notice-icon{
-    width: 16px;
-    height: 16px;;
-    margin-right: 8px;
+  /* middle/middle_grey_0 */
+  background: #FAFAFA;
+
+  div {
+    margin-top: 2px;
+    padding-left: 23px;
+
+    p {
+      color: #8A9099;
+    }
+
   }
-  span{
+
+  p {
     color: #1E2226;
-    letter-spacing: 0.08em;
+
+    i {
+      font-style: normal;
+    }
+
+    &:last-child {
+      display: flex;
+      align-items: stretch;
+
+      b {
+        font-weight: normal;
+        color: #8A9099;
+        display: inline-flex;
+
+        img {
+          margin-left: 4px;
+        }
+      }
+    }
+  }
+
+  a {
+    text-decoration: none;
+    color: #006AFF;
+    margin-right: 10px;
+
+    img {
+      margin-left: 5px;
+      margin-right: 5px;
+    }
   }
 }
 
-::v-deep .payment-item{
-  width: 540px;
-  height: 95px;
-  padding: 0 24px;
-  background: #FAFAFA;
+
+.siteMessage {
   border-radius: 4px;
-  border: none;
-  margin-bottom: 12px;
+  transition: all .5s;
+  border: 1px solid transparent;
 }
 
-.save-button{
-  position: fixed;
-  left: 0;
-  bottom: 0;
+.siteMessage h3 {
+  font-size: 14px;
+  font-weight: bold;
+  line-height: normal;
+  letter-spacing: 0.08em;
+  color: #1E2226;
+}
+
+.site-setting-wrap {
   width: 100%;
-  background: #fff;
-  box-shadow: 0 4px 16px 0 rgba(17, 55, 143, 0.12);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 16px 0;
 }
 
+::v-deep .mb16{
+  margin-bottom: 16px;
+}
 
-.warning-text{
+::v-deep .pageheader {
   display: flex;
+  justify-content: space-between;
+  /* 关键属性 */
   align-items: center;
-  padding: 8px 13px;
-  align-self: stretch;
-  z-index: 1;
-  border-radius: 4px;
-  background: #FFF1F0;
-  border: 1px solid #FFA39E;
-  margin-bottom: 32px;
-  .warning-icon{
-    width: 16px;
-    height: 16px;;
-    margin-right: 8px;
-  }
-  span{
-    color: #1E2226;
-    letter-spacing: 0.08em;
-  }
+  margin-bottom: 24px;
 }
 
-::v-deep .form-item-bottom{
-  text-align: left;
+::v-deep .pagetitle {
+  font-size: 18px;
+  font-weight: bold;
+  line-height: normal;
+  letter-spacing: 0.08em;
+  color: #1E2226;
+  margin-top: 8px;
 }
 
-.card-item{
-  padding: 24px;
+::v-deep .save-button{
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  background: #fff;
+  box-shadow: 0 4px 16px 0 rgba(17, 55, 143, 0.12);
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  background: #FAFAFA;
-  border-radius: 4px;
-  border: none;
-  margin-bottom: 12px;
-  .card-info{
-    text-align: left;
-    margin-left: 12px;
-    font-variation-settings: "opsz" auto;
-    letter-spacing: 0.08em;
-    .card-name{
-      font-size: 14px;
-      line-height: 18px;
-      color: #1E2226;
-    }
-    .card-desc{
-      font-size: 12px;
-      line-height: 13px;
-      margin-top: 12px;
-      color: #8A9099;
-    }
-  }
-
-  .el-form-item{
-    margin: 0;
-  }
+  justify-content: center;
+  padding: 16px 0;
 }
+
 </style>
\ No newline at end of file
diff --git a/src/views/elementGroups.vue b/src/views/elementGroups.vue
index 28e52b7..151fd18 100644
--- a/src/views/elementGroups.vue
+++ b/src/views/elementGroups.vue
@@ -4,6 +4,20 @@
             <PromptText text='这是一个提示框' :type="1"/>
             <PromptText text='这是一个提示框' :type="2"/>
             <PromptText text='这是一个提示框' :type="3"/>
+            <PromptText text="前期准备事项" :type="1" class="beforeNotice">
+                <template #desc>
+                    <p class="mt12 flex">
+                        1. <a href="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F"
+                              class="flex" target="_blank">
+                        <img src="@/assets/site/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台
+                    </p>
+                    <p class="mt10 flex">
+                        2. <a href="https://dianjing.e.360.cn/ocpc/list" class="flex" target="_blank">
+                        <img src="@/assets/site/form_linkActive.svg"
+                             alt="">前往ocpc设置页</a>＞点击“添加OCPC投放包”按钮。注意转换类型只能选择“订单”，其他的根据表单提示填写。
+                    </p>
+                </template>
+            </PromptText>
 
             <!-- 以 ele-item 为类名的这种div、 label 、 h3 仅在此页面进行布局使用，复制时无需复制此元素 -->
             <el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef">