diff --git a/src/App.vue b/src/App.vue
index 17c3dbd..fbc3784 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,7 +15,7 @@
         <el-container>
            <!-- 面包屑导航 -->
           <Breadcrumb />
-          <el-main>
+          <el-main >
             <router-view/>
           </el-main>
           <!-- <el-footer v-if="showFooter">
diff --git a/src/assets/site/form_qua_ic.svg b/src/assets/site/form_qua_ic.svg
new file mode 100644
index 0000000..5831ba3
--- /dev/null
+++ b/src/assets/site/form_qua_ic.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="14.000000953674316" height="14.000114440917969" viewBox="0 0 14.000000953674316 14.000114440917969"><g><path d="M6.99997,0C3.13397,0,0,3.13402,0,7.00003C0,10.8661,3.13397,14.0001,6.99997,14.0001C10.866,14.0001,14,10.8661,14,7.00006C14,3.13405,10.8661,0,6.99997,0ZM7.67931,11.0393C7.67931,11.2326,7.52265,11.3894,7.32932,11.3894L6.27931,11.3894C6.08606,11.3894,5.92934,11.2326,5.92934,11.0393L5.92934,9.98936C5.92934,9.79601,6.08606,9.63931,6.27931,9.63931L7.32932,9.63931C7.52264,9.63931,7.67931,9.79599,7.67931,9.98936L7.67931,11.0393ZM9.41428,6.22158C9.2736,6.42218,8.95427,6.67778,8.5545,6.98942L8.11148,7.29514C7.89631,7.46204,7.70548,7.65635,7.63491,7.87882C7.61079,7.95462,7.59272,8.07919,7.58056,8.21373C7.57443,8.28143,7.51387,8.41954,7.37231,8.41954L6.2329,8.41954C6.0477,8.41954,6.01462,8.27448,6.01771,8.20352C6.03821,7.73845,6.08083,7.32557,6.27031,7.10329Q6.65395,6.65348,7.52686,6.0936C7.65976,5.99331,7.76736,5.88429,7.84873,5.76547C7.99666,5.5615,8.11939,5.33749,8.11939,5.09263C8.11939,4.8112,8.03711,4.55467,7.87201,4.32247C7.70748,4.09118,7.4061,3.97531,6.96939,3.97531C6.53948,3.97531,6.23474,4.118,6.05511,4.40325C5.9224,4.614,5.83885,4.80778,5.80426,5.01862C5.79195,5.09324,5.7441,5.25041,5.5846,5.25041L4.47332,5.25041C4.2367,5.25041,4.1846,5.09707,4.19143,5.02315C4.27709,4.09158,4.64113,3.45509,5.28481,3.04639C5.7225,2.765,6.26099,2.62379,6.89974,2.62379C7.73906,2.62379,8.43578,2.82387,8.99123,3.2246C9.5457,3.62477,9.82373,4.21775,9.82373,5.004C9.82378,5.48549,9.65479,5.89152,9.41428,6.22158L9.41428,6.22158Z" fill="#8A9099" fill-opacity="1"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/site/kefuTem.png b/src/assets/site/kefuTem.png
new file mode 100644
index 0000000..3201040
Binary files /dev/null and b/src/assets/site/kefuTem.png differ
diff --git a/src/components/GuipSwitch.vue b/src/components/GuipSwitch.vue
index 691c778..5852152 100644
--- a/src/components/GuipSwitch.vue
+++ b/src/components/GuipSwitch.vue
@@ -1,22 +1,19 @@
 <template>
-    <el-form-item >
-    <div class="flex switchWrap">
-        <span class="switchDesc" v-if="activeText || inactiveText">{{ internalValue ? activeText : inactiveText }}</span>
-        <el-switch 
-            v-model="internalValue" 
-            :active-color="activeColor" 
-            :inactive-color="inactiveColor"
-            :disabled="disabled || loading"
-            @change="handleChange">
-            <!-- 自定义开启时的图标 -->
-            <template #active-icon>
-            </template>
-            <!-- 自定义关闭时的图标 -->
-            <template #inactive-icon>
-            </template>
-        </el-switch>
-    </div>
-  </el-form-item>
+    <el-form-item>
+        <div class="flex switchWrap">
+            <span class="switchDesc" v-if="activeText || inactiveText">{{ internalValue ? activeText : inactiveText
+                }}</span>
+            <el-switch v-model="internalValue" :active-color="activeColor" :inactive-color="inactiveColor"
+                :disabled="disabled || loading" @change="handleChange">
+                <!-- 自定义开启时的图标 -->
+                <template #active-icon>
+                </template>
+                <!-- 自定义关闭时的图标 -->
+                <template #inactive-icon>
+                </template>
+            </el-switch>
+        </div>
+    </el-form-item>
 
 </template>
 <!-- 他这个描述文案不太符合当前使用暂且不用 -->
@@ -67,13 +64,13 @@ export default {
     //     },
     // },
     watch: {
-    value(newVal) {
-      this.internalValue = newVal;
-    },
-    internalValue(newVal) {
-      this.$emit('input', newVal);
+        value(newVal) {
+            this.internalValue = newVal;
+        },
+        internalValue(newVal) {
+            this.$emit('input', newVal);
+        },
     },
-  },
     methods: {
         // 处理 switch 状态变化
         async handleChange(value) {
@@ -96,17 +93,18 @@ export default {
 };
 </script>
 <style scoped>
-.switchWrap{
+.switchWrap {
     align-items: center;
 }
-.switchDesc{
+
+.switchDesc {
     font-size: 12px;
     font-weight: normal;
     line-height: 13px;
     letter-spacing: 0.08em;
     font-variation-settings: "opsz" auto;
     /* text/text_3 */
-    color: #626573; 
+    color: #626573;
     display: inline-block;
     margin-right: 15px;
 }
diff --git a/src/components/SetLeftMenu.vue b/src/components/SetLeftMenu.vue
index df2afa4..893f1d6 100644
--- a/src/components/SetLeftMenu.vue
+++ b/src/components/SetLeftMenu.vue
@@ -1,13 +1,15 @@
 <template>
   <aside class="sidebar">
     <ul>
-      <li v-for="item in menuList" :key="item.path" >
-        <div :class="[$route.path == item.path ? 'active ceshi' : '', 'flex']" @click="gotoPath(item.path)">
+      <li v-for="(item, index) in menuList" :key="item.path">
+        <div :class="[$route.path == item.path ? 'active' : '', 'flex', $route.path == item.path ? curIndex = index : '']"
+          @click="gotoPath(item.path)">
           <img v-if="$route.path == item.path" :src="item.imgActive" alt="">
           <img v-else :src="item.img" alt="">
           {{ item.name }}
         </div>
-        <p :class="[$route.path != item.path ? 'not-point':'','flex']" v-for="item1 in item.list" :key="item1.name">{{ item1.name }}</p>
+        <p :class="[$route.path != item.path ? 'not-point' : '', 'flex', activeFloor == item1.desc ? 'curActive' : '']"
+          v-for="(item1) in item.list" @click="setActiveCur(item1.desc)" :key="item1.name">{{ item1.name }}</p>
 
       </li>
     </ul>
@@ -15,16 +17,29 @@
 </template>
 
 <script>
+// import {setHighActive} from '@/utils/common';
+
 export default {
   name: 'Sidebar',
   props: {
-    menuItems: {
-      type: Array,
-      required: true
-    }
+    // menuList: {
+    //   type: Array,
+    //   required: true
+    // },
+    // activeFloor:{
+    //   type:String
+    // },
+    // curIndex:{
+    //   type:Number
+    // }
+
+
   },
   data() {
     return {
+      activeFloor: null,
+      curIndex: 0,
+      scrollLock: false,
       menuList: [
         {
           name: '基本设置',
@@ -34,15 +49,15 @@ export default {
           list: [
             {
               name: '站点信息',
-              desc: ''
+              desc: 'siteMessage1'
             },
             {
               name: '域名设置',
-              desc: ''
+              desc: 'siteMessage2'
             },
             {
               name: '收款方式',
-              desc: ''
+              desc: 'siteMessage3'
             },
           ]
         },
@@ -54,23 +69,23 @@ export default {
           list: [
             {
               name: '网页模板',
-              desc: ''
+              desc: 'siteMessage4'
             },
             {
               name: '客服设置',
-              desc: ''
+              desc: 'siteMessage5'
             },
             {
               name: '功能显隐',
-              desc: ''
+              desc: 'siteMessage6'
             },
             {
               name: '安全提交',
-              desc: ''
+              desc: 'siteMessage7'
             },
             {
               name: '初始订单数',
-              desc: ''
+              desc: 'siteMessage8'
             },
           ]
         },
@@ -82,11 +97,11 @@ export default {
           list: [
             {
               name: '微信H5',
-              desc: ''
+              desc: 'siteMessage9'
             },
             {
               name: '小程序',
-              desc: ''
+              desc: 'siteMessage10'
             },
           ]
         },
@@ -98,15 +113,15 @@ export default {
           list: [
             {
               name: 'SEO设置',
-              desc: ''
+              desc: 'siteMessage11'
             },
             {
               name: 'SEM设置',
-              desc: ''
+              desc: 'siteMessage12'
             },
             {
               name: '访问统计',
-              desc: ''
+              desc: 'siteMessage13'
             },
           ]
         }
@@ -114,14 +129,63 @@ export default {
     }
   },
   mounted() {
-    console.log(this.$route.path, '---');
+    console.log(this.curIndex,'this.curIndex');
+    this.activeFloor = this.menuList[this.curIndex]['list'][0]['desc'];
+    this.calculateFloorOffsets();
+    this.$nextTick(() => {
+      // console.log(this.$parent.$refs.scrollContainer, 'this.$refs.scrollContainer--');
+    })
+    this.$parent.$refs.scrollContainer.addEventListener('scroll', this.handleScroll);
+  },
+  created() {
+    // console.log(this.$parent.$refs.scrollContainer,'this.$refs.sc--rollContainer--');
+  },
+  beforeDestroy() {
+    this.$parent.$refs.scrollContainer.removeEventListener('scroll', this.handleScroll);
   },
   methods: {
+    calculateFloorOffsets() {
+      this.menuList.forEach(item => {
+        item.list.forEach(every => {
+          const el = document.getElementById(every.desc);
+          if (el) {
+            every.offsetTop = el.offsetTop;
+          }
+        })
+      });
+    },
+    handleScroll() {
+      if (this.scrollLock) return
+      const scrollContainer = this.$parent.$refs.scrollContainer;
+      const scrollHeight = scrollContainer.scrollTop;
+      let activeFloor = this.menuList[this.curIndex]['list'][0]['desc'];
+      this.menuList[this.curIndex]['list'].forEach(item => {
+        if (scrollHeight + 72 >= item.offsetTop) {
+          activeFloor = item.desc; // 更新当前激活的楼层ID
+        } else {
+          return false; // 一旦找到第一个小于当前滚动位置的楼层，停止循环
+        }
+      });
+      this.activeFloor = activeFloor; // 更新数据以触发视图更新
+    },
+    setActiveCur(dom) {
+      this.activeFloor = dom;
+      this.setHighActive(dom)
+    },
     gotoPath(path) {
       this.$router.push(path)
     },
-    activeArea(type){
+    activeArea(type) {
       console.log(type);
+    },
+    setHighActive(dom) {
+      this.scrollLock = true
+      const ele = document.getElementById(dom)
+      ele.classList.add('ceshi')
+      ele.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      setTimeout(() => {
+        ele.classList.remove('ceshi')
+      }, 1000)
     }
   }
 }
@@ -135,17 +199,23 @@ export default {
   background: #FFFFFF;
   box-shadow: 0px 0px 11px 2px rgba(147, 147, 147, 0.11);
 }
-.ceshi{
-  animation: fadeInOut 2s infinite;
+
+.ceshi {
+  // animation: fadeInOut 2s infinite;
 }
+
 ul {
   list-style: none;
   padding: 0;
 }
-.not-point{
-    pointer-events: none; /* 阻止鼠标事件 */
-    opacity: 0.5; /* 可选，降低透明度以视觉上表示不可用 */
-    cursor: not-allowed; /* 改变鼠标光标样式，表示不可用 */
+
+.not-point {
+  pointer-events: none;
+  /* 阻止鼠标事件 */
+  opacity: 0.5;
+  /* 可选，降低透明度以视觉上表示不可用 */
+  cursor: not-allowed;
+  /* 改变鼠标光标样式，表示不可用 */
 }
 
 li {
@@ -156,7 +226,8 @@ li {
     color: #1E2226;
     margin: 11px 0;
     cursor: pointer;
-    img{
+
+    img {
       margin-right: 6px;
     }
   }
@@ -167,10 +238,15 @@ li {
     line-height: 18px;
     color: #8A9099;
     cursor: pointer;
-    &:hover{
+
+    &:hover {
       color: #006AFF;
     }
   }
+
+  .curActive {
+    color: #006AFF;
+  }
 }
 
 /* {
@@ -190,7 +266,8 @@ li {
   letter-spacing: 0.08em;
   color: #006AFF;
 }
-.item-active{
+
+.item-active {
   color: #006AFF;
 }
 
diff --git a/src/style/theme/common.scss b/src/style/theme/common.scss
index daaf7d7..ff80fa8 100644
--- a/src/style/theme/common.scss
+++ b/src/style/theme/common.scss
@@ -1,3 +1,6 @@
+html {
+    scroll-behavior: smooth; /* 使整个页面的滚动平滑 */
+  }
 body {
     font-family: Microsoft YaHei UI;
     font-size: 14px;
@@ -10,7 +13,14 @@ body {
         padding: 0;
     }
 }
-
+.ceshi{
+    transition: all .5s;
+    box-sizing: border-box;
+    /* main/main_stardard */
+    border: 1px solid #006AFF !important;
+    /* 蓝色阴影_常规 */
+    box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12);
+}
 @keyframes fadeInOut {
     0% {
       opacity: 0;
@@ -36,6 +46,9 @@ body {
 .mb24{
     margin-bottom: 24px;
 }
+.mt12{
+    margin-top: 12px;
+}
 .el-container {
     height: 100%;
 
@@ -70,7 +83,9 @@ body {
     /* text/text_4 */
     color: #8A9099;
 }
-
+.borderNone{
+    border: none !important;
+}
 .flex-common {
     padding: 32px 36px;
     background-color: #fff;
@@ -78,6 +93,13 @@ body {
     h3 {
         text-align: left;
         margin: 0 0 32px 0;
+        span{
+            margin-left: 12px;
+            font-size: 14px;
+            font-weight: normal;
+            letter-spacing: 0.08em;
+            color: #626573;
+        }
     }
 
     .flex-wrap {
diff --git a/src/utils/common.js b/src/utils/common.js
new file mode 100644
index 0000000..988f2b4
--- /dev/null
+++ b/src/utils/common.js
@@ -0,0 +1,9 @@
+// 设置页面元素对应高亮
+export function setHighActive(dom) {
+    const ele = document.getElementById(dom)
+    ele.classList.add('ceshi')
+    ele.scrollIntoView({behavior:'smooth',block:'start'})
+    setTimeout(()=>{
+        ele.classList.remove('ceshi')
+    },1000)
+}
diff --git a/src/views/ConfigureServicePrices.vue b/src/views/ConfigureServicePrices.vue
index caaaacd..0a1b0a4 100644
--- a/src/views/ConfigureServicePrices.vue
+++ b/src/views/ConfigureServicePrices.vue
@@ -258,6 +258,7 @@ export default {
 }
 .config-service-price {
     display: flex;
+    width: 100%;
     .config-service-left {
         align-items: stretch;
         background: #fff;
diff --git a/src/views/Register.vue b/src/views/Register.vue
index a2e3eb1..c3d0323 100755
--- a/src/views/Register.vue
+++ b/src/views/Register.vue
@@ -885,7 +885,7 @@ export default {
   },
   methods: {
     nextGoSettingPrice() {
-      this.$router.push('/settingServicePrice')
+      this.$router.push('/configureServicePrices')
     },
     goCurActiveStep(step) {
       if (step < this.activeStep) {
diff --git a/src/views/SiteBaseSetting.vue b/src/views/SiteBaseSetting.vue
index e61d581..424f48c 100644
--- a/src/views/SiteBaseSetting.vue
+++ b/src/views/SiteBaseSetting.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="site-setting-wrap min-flex">
-        <div class="siteMessage1 flex-common">
+        <div class="siteMessage flex-common" id="siteMessage1">
             <h3>站点信息</h3>
-            <el-form :model="siteForm" :rules="siteFormrules" ref="formRef">
+            <el-form :model="siteForm" :rules="siteFormrules" ref="siteForm">
                 <div class="flex-wrap">
                     <div class="flex-left">
                         <GuipInput ref="GuipInput" column="column" label="站点简称" :maxlength="10" :showWordLimit="true"
@@ -20,12 +20,12 @@
                     </div>
                 </div>
             </el-form>
-            <GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('siteForm')" />
+            <GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm')" />
 
         </div>
-        <div class="siteMessage2 flex-common">
+        <div class="siteMessage flex-common" id="siteMessage2">
             <h3>站点信息</h3>
-            <el-form :model="siteForm1" :rules="siteFormrules1" ref="formRef">
+            <el-form :model="siteForm1" :rules="siteFormrules1" ref="siteForm1">
                 <div class="flex-wrap">
                     <div class="flex-left">
                         <GuipFormItem column="column" class="mb24" label="域名来源" required="true">
@@ -43,10 +43,10 @@
                     </div>
                 </div>
             </el-form>
-            <GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('siteForm1')" />
+            <GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm1')" />
 
         </div>
-        <div class="siteMessage3 flex-common">
+        <div class="siteMessage flex-common" id="siteMessage3">
             <h3>店铺收款</h3>
             <el-form :model="siteForm2" ref="formRef">
                 <div class="flex-wrap">
@@ -151,7 +151,7 @@
                     </div>
                 </div>
             </el-form>
-            <GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('siteForm2')" />
+            <GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm2')" />
         </div>
     </div>
 </template>
@@ -165,7 +165,7 @@ import GuipRadio from '@/components/GuipRadio.vue';
 import CustomDropdown from '@/components/CustomDropdown.vue';
 import GuipButton from '@/components/GuipButton.vue';
 import GroupFormBtns from '@/components/GroupFormBtns.vue';
-
+// import {setHighActive} from '@/utils/common';
 export default {
     // 站点设置
     name: '',
@@ -246,9 +246,9 @@ export default {
             console.log(data, '---');
         },
         submitForm(form) {
-            console.log(form, '-----');
-            this.$refs.formRef.validate((valid) => {
-                console.log(this.form, '======formxinxi');
+            console.log(this.$refs[form], '-----');
+            this.$refs[form].validate((valid) => {
+                console.log(this[form], '======formxinxi');
                 if (valid) {
                     alert('提交成功!');
                 } else {
@@ -267,6 +267,11 @@ export default {
 }
 </script>
 <style lang="scss">
+.siteMessage{
+    border-radius: 4px;
+    transition: all .5s;
+    border: 1px solid transparent;
+}
 .addStore {
     margin-top: 12px;
     border-radius: 4px;
@@ -286,7 +291,7 @@ export default {
 .site-setting-wrap{
     width: 100%;
 }
-.siteMessage2{
+#siteMessage2{
     margin: 12px 0;
 }
 .domain-wrap {
diff --git a/src/views/SitePersonalization.vue b/src/views/SitePersonalization.vue
index 0fdb70d..e89eab1 100644
--- a/src/views/SitePersonalization.vue
+++ b/src/views/SitePersonalization.vue
@@ -1,52 +1,376 @@
 <template>
-    <div class="page-title-wrap min-flex">
+    <div class="site-personal-wrap min-flex">
+        <div class="siteMessage flex-common" id="siteMessage4">
+            <h3>网页模板</h3>
+            <el-form ref="formRef">
+                <div class="flex-wrap">
+                    <div class="flex-left">
+                        <div class="tem-home">
+                            <img class="tem-home-top" src="@/assets/register/tem-img-normal.png" alt="">
+                            <div class="tem-home-bottom">
+                                <b>经典深蓝模板（默认）</b>
+                                <div>
+                                    <div class="tem-look" @click="lookTemImg">
+                                        <img src="@/assets/register/look-tem.svg" alt="">
+                                        预览
+                                    </div>
+                                    <div @click="editTemImg">
+                                        <img src="@/assets/register/edit-tem.svg" alt="">
+                                        修改
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex-line borderNone"></div>
+                    <div class="flex-right"></div>
+                </div>
+            </el-form>
+            <GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('siteForm')" />
+        </div>
+        <div class="siteMessage flex-common mt12" id="siteMessage5">
+            <h3>在线客服</h3>
+            <el-form ref="formRef">
+                <el-tabs v-model="activeName" @tab-click="handleClick">
+                    <p class="flex siteMessage5_desc"> <img src="@/assets/site/info_filled.svg" alt="">
+                        展示在网站右侧悬浮栏的客服，请至少设置1个</p>
+                    <el-tab-pane label="网站客服" name="first">
+                        <div class="flex-wrap">
+                            <div class="flex-left">
+                                <p class="flex-left-desc">旺旺客服</p>
+                                <GuipInput ref="GuipInput" width="100%" v-model="personalForm8.checkNum"
+                                    placeholder="请输入数字">
+                                </GuipInput>
+                                <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
+                                    :show-file-list="false" :on-success="handleAvatarSuccess"
+                                    :before-upload="beforeAvatarUpload">
+                                    <GuipButton> <img src="@/assets/site/info_filled.svg" alt=""> 重新上传</GuipButton>
+                                </el-upload>
+                                <p class="avatar-desc">支持 jpg、png 格式，大小不超过 2MB </p>
+                            </div>
+                            <div class="flex-line"></div>
+                            <div class="flex-right">
+                                <p class="flex-left-desc">微信客服</p>
+                                <div class="flex">
+                                    <img v-if="imageUrl" :src="imageUrl" class="kefuImg">
+                                    <img e-else src="@/assets/site/kefuTem.png" alt="" class="kefuImg">
+                                    <div class="right">
+                                        <el-upload class="avatar-uploader"
+                                            action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
+                                            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
+                                            <GuipButton> <img src="" alt=""> 重新上传</GuipButton>
+                                        </el-upload>
+                                        <p class="avatar-desc">支持 jpg、png 格式，大小不超过 2MB </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </el-tab-pane>
+                    <el-tab-pane label="报告页客服" name="second">报告页客服</el-tab-pane>
+                    <el-tab-pane label="支付账单客服" name="third">支付账单客服</el-tab-pane>
+                </el-tabs>
+            
+
+            </el-form>
+            <GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('siteForm')" />
+        </div>
+        <div class="siteMessage flex-common mt12" id="siteMessage6">
+            <h3>功能显隐</h3>
+            <el-form :model="personalForm3" ref="formRef">
+                <div class="flex-wrap">
+                    <div class="flex-left">
+                        <p class="flex-left-desc">价格显隐</p>
+                        <div class="left-pay-list mb24">
+                            <div class="left-pay-item ">
+                                <div class="flex-between">
+                                    <span>服务列表页价格 <img src="@/assets/site/form_qua_ic.svg" alt=""></span>
+                                    <GuipSwitch :modelValue="personalForm3.weixinFlag1" activeText="显示"
+                                        inactiveText="隐藏" @change="onSwitchChange">
+                                    </GuipSwitch>
+                                </div>
+                            </div>
+                            <div class="left-pay-item ">
+                                <div class="flex-between">
+                                    <span>服务提交页价格 <img src="@/assets/site/form_qua_ic.svg" alt=""></span>
+                                    <GuipSwitch :modelValue="personalForm3.weixinFlag2" activeText="显示"
+                                        inactiveText="隐藏" @change="onSwitchChange">
+                                    </GuipSwitch>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex-line"></div>
+                    <div class="flex-right">
+                        <p class="flex-left-desc">报告与真伪查询</p>
+                        <div class="left-pay-list mb24">
+                            <div class="left-pay-item ">
+                                <div class="flex-between">
+                                    <span>服务列表页价格 <img src="@/assets/site/form_qua_ic.svg" alt=""></span>
+                                    <GuipSwitch :modelValue="personalForm3.weixinFlag3" activeText="显示"
+                                        inactiveText="隐藏" @change="onSwitchChange">
+                                    </GuipSwitch>
+                                </div>
+                            </div>
+                            <div class="left-pay-item ">
+                                <div class="flex-between">
+                                    <span>服务提交页价格 <img src="@/assets/site/form_qua_ic.svg" alt=""></span>
+                                    <GuipSwitch :modelValue="personalForm3.weixinFlag4" activeText="显示"
+                                        inactiveText="隐藏" @change="onSwitchChange">
+                                    </GuipSwitch>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </el-form>
+            <GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('personalForm3')" />
+        </div>
+        <div class="siteMessage flex-common mt12" id="siteMessage7">
+            <h3>安全提交</h3>
+            <el-form :model="personalForm7" ref="formRef">
+                <div class="flex-wrap">
+                    <div class="flex-left">
+                        <p class="flex-left-desc">查重服务</p>
+                        <div class="left-pay-list mb24">
+                            <div class="left-pay-item ">
+                                <div class="flex-between">
+                                    <span>60分钟内不可提交重复内容 <img src="@/assets/site/form_qua_ic.svg" alt=""></span>
+                                    <GuipSwitch :modelValue="personalForm3.weixinFlag1" activeText="显示"
+                                        inactiveText="隐藏" @change="onSwitchChange">
+                                    </GuipSwitch>
+                                </div>
+                                <el-checkbox-group v-model="checkList" class="checkboxGroup">
+                                    <el-checkbox label="识别重复标题"></el-checkbox>
+                                    <el-checkbox label="识别重复作者"></el-checkbox>
+                                    <el-checkbox label="识别重复正文"></el-checkbox>
+                                </el-checkbox-group>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex-line"></div>
+                    <div class="flex-right">
+                        <p class="flex-left-desc">AI服务</p>
+                        <div class="left-pay-list mb24">
+                            <div class="left-pay-item ">
+                                <div class="flex-between">
+                                    <span>3分钟内不可提交重复内容 <img src="@/assets/site/form_qua_ic.svg" alt=""></span>
+                                    <GuipSwitch :modelValue="personalForm3.weixinFlag3" activeText="显示"
+                                        inactiveText="隐藏" @change="onSwitchChange">
+                                    </GuipSwitch>
+                                </div>
+                                <el-checkbox-group v-model="checkList1" class="checkboxGroup">
+                                    <el-checkbox label="识别重复标题"></el-checkbox>
+                                    <el-checkbox label="识别重复辅助信息"></el-checkbox>
+                                </el-checkbox-group>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </el-form>
+            <GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('personalForm7')" />
+        </div>
+        <div class="siteMessage flex-common mt12" id="siteMessage8">
+            <h3>初始订单数 <span>设定检测基数，首页显示检测数量时，显示三个月内实际数值+该数值</span></h3>
+            <el-form :model="personalForm8" ref="formRef">
+                <div class="flex-wrap">
+                    <div class="flex-left">
+                        <p class="flex-left-desc">检测篇数基数</p>
+                        <GuipInput ref="GuipInput" width="100%" v-model="personalForm8.checkNum" placeholder="请输入数字">
+                        </GuipInput>
+                    </div>
+                    <div class="flex-line borderNone"></div>
+                    <div class="flex-right"></div>
+                </div>
+            </el-form>
+            <GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('personalForm8')" />
+        </div>
     </div>
 </template>
 <script>
-// import GuipInput from '@/components/GuipInput.vue';
+import GuipInput from '@/components/GuipInput.vue';
 import { mapState } from 'vuex';
+import store from '../store';
+import GuipSwitch from '@/components/GuipSwitch.vue';
+import GuipButton from '@/components/GuipButton.vue';
+import GroupFormBtns from '@/components/GroupFormBtns.vue';
+
 export default {
     // 站点设置
     name: '',
     props: [''],
     components: {
-        // GuipInput,
-
+        GuipInput,
+        GuipButton,
+        GuipSwitch,
+        GroupFormBtns
     },
     data() {
         return {
-
+            activeName: 'first',
+            imageUrl: '',
+            checkList1: ['识别重复辅助信息'],
+            checkList: ['识别重复正文'],
+            // 在线客服
+            personalForm3: {
+                weixinFlag1: false,
+                weixinFlag2: true,
+                weixinFlag3: true,
+                weixinFlag4: false
+            },
+            personalForm7: {
+                weixinFlag3: true,
+                weixinFlag4: true,
+            },
+            personalForm8: {
+                checkNum: 0,
+            }
         }
     },
     computed: {
         ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
     },
+    mounted() {
+        store.commit('SET_PAGETITLE', '个性化设置');
+    },
     methods: {
+        handleTabClick(tab, event) {
+            console.log(tab, event);
+        },
+        lookTemImg() {
+
+        },
+        editTemImg() {
+
+        },
+        onSwitchChange(data) {
+            console.log(data, '---');
+        },
+        cancelClick() {
+            console.log('quxiao');
+        },
+        confirmClick(type) {
+            console.log(type, '确认');
+        },
+        // 上传图片
+        handleAvatarSuccess(res, file) {
+            this.imageUrl = URL.createObjectURL(file.raw);
+        },
+        beforeAvatarUpload(file) {
+            const isJPG = file.type === 'image/jpeg';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isJPG) {
+                this.$message.error('上传头像图片只能是 JPG 格式!');
+            }
+            if (!isLt2M) {
+                this.$message.error('上传头像图片大小不能超过 2MB!');
+            }
+            return isJPG && isLt2M;
+        }
     }
 }
 </script>
-<style lang="scss">
-.page-title-wrap {
+<style lang="scss" scoped>
+.site-personal-wrap {
     width: 100%;
-    height: 72px;
-    /* 自动布局 */
-    display: flex;
-    flex-direction: column;
-    padding: 24px 12px;
-    box-sizing: border-box;
-
-    b {
-        /* headline/haeadline_3_bold */
-        font-family: Microsoft YaHei UI;
-        font-size: 18px;
-        font-weight: bold;
-        line-height: 24px;
-        letter-spacing: 0.06em;
-        font-variation-settings: "opsz" auto;
-        /* text/text_1 */
-        color: #1E2226;
-        display: inline-block;
-        text-align: left;
+
+    .siteMessage {
+        border-radius: 4px;
+        transition: all .5s;
+        border: 1px solid transparent;
+    }
+
+    .siteMessage5_desc {}
+
+    .checkboxGroup {
+        display: flex;
+        justify-content: flex-start;
+        margin-top: 18px;
+        padding: 10px 0;
+    }
+
+    .tem-home {
+        width: 100%;
+        border-radius: 4px;
+        opacity: 1;
+        background: #FFFFFF;
+        /* middle/middle_line_1 */
+        border: 1px solid #DFE2E6;
+
+        .tem-home-top {
+            width: 100%;
+        }
+
+        .tem-home-bottom {
+            display: flex;
+            align-items: center;
+            padding: 22px 32px;
+            justify-content: space-between;
+
+            .tem-look {
+                margin-right: 36px;
+            }
+
+            div {
+                display: flex;
+                align-items: center;
+
+                img {
+                    margin-right: 6px;
+                }
+            }
+        }
+    }
+
+    .left-pay-list {
+        width: 100%;
+        border-radius: 4px;
+        opacity: 1;
+
+        /* middle/middle_grey_0 */
+        // span{
+        //     color: #23242B;
+        // }
+        .left-pay-item {
+            padding: 24px;
+            color: #23242B;
+            background: #FAFAFA;
+            margin-top: 12px;
+
+            p {
+                text-align: left;
+                margin-top: 9px;
+                /* caption/caption_regular */
+                font-size: 12px;
+                font-weight: normal;
+                line-height: 13px;
+                letter-spacing: 0.08em;
+                color: #626573;
+            }
+
+            .el-form-item {
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    .kefuImg {
+        width: 120px;
+        height: 120px;
+    }
+
+    .avatar-desc {
+        /* regular/body3-Regular */
+        /* 样式描述：辅助文字 */
+        font-family: Inter;
+        font-size: 12px;
+        font-weight: normal;
+        line-height: 20px;
+        letter-spacing: normal;
+        font-variation-settings: "wght" 400;
+        /* Light/中性色 Neutral/Text/Regular */
+        color: var(--el-color-text-regular);
+        /* #606266 */
     }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/SiteSetting.vue b/src/views/SiteSetting.vue
index 310c2d2..fdec73e 100644
--- a/src/views/SiteSetting.vue
+++ b/src/views/SiteSetting.vue
@@ -1,9 +1,9 @@
 <template>
     <div class="siteSetting-wrap">
-        <SetLeftMenu :menu-items="menuItems" />
-
+        <SetLeftMenu />
+        <!--:menuList="menuList" :activeFloor="activeFloor" :curIndex="curIndex" -->
         <!-- 主内容区域 -->
-        <main class="main-content">
+        <main class="main-content" ref="scrollContainer">
             <!-- 面包屑 位置 -->
 
             <PageTitle />
@@ -29,13 +29,12 @@ export default {
         // SiteBaseSetting
     },
     data() {
-        return {
-            menuItems: [
-                { title: '页面1', path: '/siteSetting/siteBaseSetting' },
-                { title: '页面2', path: '/siteSetting/sitePersonalization' },
-                { title: '页面3', path: 'page3' }
-            ]
-        }
+        return {}
+    },
+    mounted(){
+        this.$refs.scrollContainer.scrollTo(0)
+    },
+    methods: {
     }
 }
 </script>