服务设置部分页面布局

src/components/PromptText.vue

@@ -1,8 +1,13 @@
 <template>
     <div class="prompt-text" :class="typeClass">
+        <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>

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>

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>

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>

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>

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>

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>

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>

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>

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: '支付授权',

src/views/agent/siteServiceEdit.vue

@@ -1,362 +1,214 @@
 <template>
     <div class="main-content12">
-        <div class="pageheader">
+        <!-- 参数 在子组件页面一样用 props接收 、ref绑定的组件示例 -->
-            <span class="pagetitle">基本设置</span>
+        <!-- 默认页面展示 的初始组件 Franchise-->
+        <component :is="componentsName ? componentsName : 'showSet'" ref="dynamicComponent"
+                   :someProp="payinfo"  @customEvent="handleComponentEvent"/>
     </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>
-    </div>
 </template>
 <script>
-
+import store from '@/store';
-import PaymentMethod from "@/components/paymentMethod.vue";
+import { mapState } from 'vuex';
-import GuipButton from "@/components/GuipButton.vue";
+import GuipSwitch from '@/components/GuipSwitch.vue';
-import GuipFormItem from "@/components/GuipFormItem.vue";
+import GuipButton from '@/components/GuipButton.vue';
-import GuipInput from "@/components/GuipInput.vue";
+import HoverButton from '@/components/HoverButton.vue'
-import HoverButton from "@/components/HoverButton.vue";
+import priceSet from '@/components/site/serviceSetting/priceSet.vue'
-import GuipSwitch from "@/components/GuipSwitch.vue";
+import paymentSet from '@/components/site/serviceSetting/paymentSet.vue'
-import PromptText from "@/components/PromptText.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,
+        HoverButton,
-        PromptText
+        priceSet,
+        paymentSet,
+        showSet,
+        menuColorSet,
+        submitSeoSet,
+        reportSeoSet,
+        domainSet,
+        linkSet,
     },
     data() {
         return {
             // AUTH
             token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
-
+            payinfo: [
-            uid:0,
+                {
-            type:0,
+                    type: 'a',
-            payList: [],
+                    name: '传递的参数'
-
+                }
-            //添加按钮样式
+            ],
-            saveBtnStyleObj: {
+            payType: -1,
-                width: '144px',
+            payStatus: -1,
-                height: '46px',
+            paySvg: '',
-                borderRadius: '4px',
+            confirmText: '保存',
-                background: '#006AFF',
-            },
         }
     },
     computed: {
+        ...mapState(['pageTitle', 'componentsName']), // 从Vuex映射showSidebar状态到组件的计算属性中
     },
     created() {
-        if(!this.$route.query.uid && !this.$route.query.type) {
+        store.commit('SET_CUSTOMIZE', true);
-            this.$message.error('非法请求');
+        store.commit('SET_SLIDER_MENU', 'siteServiceSettingData');
-            this.$router.push('/agent/siteList')
-        }
-        this.uid = this.$route.query.uid;
-        this.type = this.$route.query.type;
     },
     mounted() {
-        this.getPayList()
+        store.commit('SET_PAGETITLE', '支付授权');
     },
     methods: {
-        // 获取支付列表
+        handleComponentEvent(payload) {
-        getPayList() {
+            console.log('收到子组件事件:', payload);
-            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')
-            })
         },
-        confirmPayment(payList){
+        submitSave() {
-            this.payList = payList
+            // 逻辑示例
+            // 获取动态组件实例
+            const componentInstance = this.$refs.dynamicComponent;
+            console.log('当前组件实例:', componentInstance);
+
+            // 调用组件方法（如果存在）
+            if (componentInstance) {
+                console.log('获取到啦');
+                // 调用方法或者获取参数
+                componentInstance.showDomainModal && componentInstance.showDomainModal()
+            }
         },
     }
 }
 </script>
 <style lang="scss" scoped>
-.mb16{
+a {
-  margin-bottom: 16px;
+  text-decoration: none;
+  color: #006AFF;
 }
-.mb32{
+
-  margin-bottom: 32px;
+.gray {
+  color: #626573 !important;
 }
-.pageheader {
+
-    display: flex;
+.mt-18 {
+  margin-top: 18px;
+}
+
+.ml-23 {
+  margin-left: 23px;
+}
+
+.justify-content-space-between {
   justify-content: space-between;
-    /* 关键属性 */
-    align-items: center;
-    margin: 16px 0 16px 0;
 }
 
-.pagetitle {
+.beforeNotice {
-    font-size: 18px;
+
+  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;
+  /* middle/middle_grey_0 */
+  background: #FAFAFA;
+
+  div {
+    margin-top: 2px;
+    padding-left: 23px;
+
+    p {
+      color: #8A9099;
+    }
+
+  }
+
+  p {
+    color: #1E2226;
+
+    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;
+    }
+  }
+}
+
+
+.siteMessage {
+  border-radius: 4px;
+  transition: all .5s;
+  border: 1px solid transparent;
+}
+
+.siteMessage h3 {
+  font-size: 14px;
   font-weight: bold;
   line-height: normal;
   letter-spacing: 0.08em;
   color: #1E2226;
-    margin-top: 8px;
 }
-.flex-common{
+
-  margin-bottom: 12px;
+.site-setting-wrap {
+  width: 100%;
+}
+
+::v-deep .mb16{
+  margin-bottom: 16px;
 }
 
-.notice-text{
+::v-deep .pageheader {
   display: flex;
+  justify-content: space-between;
+  /* 关键属性 */
   align-items: center;
-  padding: 8px 13px;
+  margin-bottom: 24px;
-  align-self: stretch;
-  z-index: 1;
-  border-radius: 4px;
-  background: #F2F7FF;
-  border: 1px solid #BFDAFF;
-  margin-bottom: 32px;
-  .notice-icon{
-    width: 16px;
-    height: 16px;;
-    margin-right: 8px;
-  }
-  span{
-    color: #1E2226;
-    letter-spacing: 0.08em;
-  }
 }
 
-::v-deep .payment-item{
+::v-deep .pagetitle {
-  width: 540px;
+  font-size: 18px;
-  height: 95px;
+  font-weight: bold;
-  padding: 0 24px;
+  line-height: normal;
-  background: #FAFAFA;
+  letter-spacing: 0.08em;
-  border-radius: 4px;
+  color: #1E2226;
-  border: none;
+  margin-top: 8px;
-  margin-bottom: 12px;
 }
 
-.save-button{
+::v-deep .save-button{
   position: fixed;
   left: 0;
   bottom: 0;
@@ -369,61 +221,4 @@ export default {
   padding: 16px 0;
 }
 
-
-.warning-text{
-  display: flex;
-  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;
-  }
-}
-
-::v-deep .form-item-bottom{
-  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>

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">