diff --git a/src/assets/changeFlase.png b/src/assets/changeFlase.png
new file mode 100644
index 0000000..ecc7dfc
Binary files /dev/null and b/src/assets/changeFlase.png differ
diff --git a/src/assets/changeTrue.png b/src/assets/changeTrue.png
new file mode 100644
index 0000000..85ab057
Binary files /dev/null and b/src/assets/changeTrue.png differ
diff --git a/src/components/GuipSwitch.vue b/src/components/GuipSwitch.vue
index dfad417..691c778 100644
--- a/src/components/GuipSwitch.vue
+++ b/src/components/GuipSwitch.vue
@@ -1,4 +1,5 @@
 <template>
+    <el-form-item >
     <div class="flex switchWrap">
         <span class="switchDesc" v-if="activeText || inactiveText">{{ internalValue ? activeText : inactiveText }}</span>
         <el-switch 
@@ -15,6 +16,8 @@
             </template>
         </el-switch>
     </div>
+  </el-form-item>
+
 </template>
 <!-- 他这个描述文案不太符合当前使用暂且不用 -->
 <!-- :active-text="activeText" 
@@ -57,11 +60,20 @@ export default {
             loading: false, // 加载状态
         };
     },
+    // watch: {
+    //     modelValue(newVal) {
+    //         console.log(newVal,'newVal---');
+    //         this.internalValue = newVal;
+    //     },
+    // },
     watch: {
-        modelValue(newVal) {
-            this.internalValue = newVal;
-        },
+    value(newVal) {
+      this.internalValue = newVal;
+    },
+    internalValue(newVal) {
+      this.$emit('input', newVal);
     },
+  },
     methods: {
         // 处理 switch 状态变化
         async handleChange(value) {
diff --git a/src/components/PageTitle.vue b/src/components/PageTitle.vue
index f02722c..ad2d462 100644
--- a/src/components/PageTitle.vue
+++ b/src/components/PageTitle.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="page-title-wrap min-flex">
-        <b>{{ pageTitle }}</b>
+        <b >{{ pageTitle }}</b>
     </div>
 </template>
 <script>
diff --git a/src/store/index.js b/src/store/index.js
index 19066f6..5bff9b4 100755
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -11,7 +11,7 @@ export default new Vuex.Store({
     menuList:[],//目录菜单
     showBreadcrumb:false,//是否展示面包屑
     pageTitle:'一般新文献',//页面标题
-    addServiceList:[]
+    addServiceList:[]//选中的服务
   },
   actions: {
     SET_HEADER({ commit }) {
diff --git a/src/style/theme/common.scss b/src/style/theme/common.scss
index cc25d31..1c2300d 100644
--- a/src/style/theme/common.scss
+++ b/src/style/theme/common.scss
@@ -10,7 +10,10 @@ body {
         padding: 0;
     }
 }
-
+.column{
+    display: flex;
+    flex-direction: column;
+}
 .mb24{
     margin-bottom: 24px;
 }
diff --git a/src/views/ConfigureServicePrices.vue b/src/views/ConfigureServicePrices.vue
index 7c10802..34d1e48 100644
--- a/src/views/ConfigureServicePrices.vue
+++ b/src/views/ConfigureServicePrices.vue
@@ -1,11 +1,23 @@
 <template>
+    <div class="column">
     <!-- 配置服务价格页面 -->
     <div class="config-service-price min-width">
         <div class="config-service-left">
-
+            <div class="left-menu-wrap" v-for="(item,index) in addServiceList" :key="index">
+                <div class="menu-top flex">
+                    <img class="menu-top-img" :src="addImgList[item.name]" alt="">
+                    <span>{{ item.name }}</span>
+                </div>
+                <div v-for="(item1,index1) in item.list" :key="item1.name" :class="['menu-item flex-between',(item1.name == activeService) ? 'menu-active':'']"
+                  @click="goToCurService(item1,index1)">
+                    <span>{{ item1.name }}</span>
+                    <img class="menu-item-name" v-if="item1.checkFlag" src="@/assets/changeTrue.png" alt="">
+                    <img class="menu-item-name" v-else src="@/assets/changeFlase.png" alt="">
+                </div>
+            </div>
         </div>
         <div class="config-service-right">
-            <el-form>
+            <el-form ref="ruleFormRef" :model="form">
 
                 <!-- 面包屑导航 start -->
                 <!-- 面包屑导航 end -->
@@ -31,7 +43,7 @@
                                     <div class="left-pay-item ">
                                         <div class="flex-between">
                                             <span>微信收款</span>
-                                            <GuipSwitch :modelValue="form.weixinFlag" activeText="开启" inactiveText="关闭"
+                                            <GuipSwitch v-model="form.weixinFlag" activeText="开启" inactiveText="关闭"
                                                 @change="onSwitchChange">
                                             </GuipSwitch>
                                         </div>
@@ -40,7 +52,7 @@
                                     <div class="left-pay-item ">
                                         <div class="flex-between">
                                             <span>支付宝收款</span>
-                                            <GuipSwitch :modelValue="form.zhifubaoFlag" activeText="开启"
+                                            <GuipSwitch v-model="form.zhifubaoFlag" activeText="开启"
                                                 inactiveText="关闭" @change="onSwitchChange">
                                             </GuipSwitch>
                                         </div>
@@ -78,7 +90,7 @@
                                     <div class="left-pay-item ">
                                         <div class="flex-between">
                                             <span>淘宝收款</span>
-                                            <GuipSwitch :modelValue="form.weixinFlag" activeText="开启" inactiveText="关闭"
+                                            <GuipSwitch v-model="form.weixinFlag" activeText="开启" inactiveText="关闭"
                                                 @change="onSwitchChange">
                                             </GuipSwitch>
                                         </div>
@@ -143,7 +155,12 @@
             <Footer></Footer>
 
         </div>
+       
     </div>
+    <div class="pageFooter flex">
+            <GuipButton type="primary" @click="submitFun">保存</GuipButton>
+        </div>
+        </div>
 </template>
 <script>
 import PageTitle from '@/components/PageTitle.vue';
@@ -152,17 +169,18 @@ import { mapState } from 'vuex';
 import GuipFormItem from '@/components/GuipFormItem.vue';
 import GuipInput from '@/components/GuipInput.vue';
 import GuipSelect from '@/components/GuipSelect.vue';
+import GuipButton from '@/components/GuipButton.vue';
 import Footer from '@/components/Footer.vue';
 import GuipSwitch from '@/components/GuipSwitch.vue';
+import store from '../store';
 
 export default {
     // 站点设置
     name: '',
     props: [''],
     components: {
-        // GuipInput,
         PageTitle,
-        // GuipButton,
+        GuipButton,
         GuipFormItem,
         GuipInput,
         GuipSelect,
@@ -171,6 +189,12 @@ export default {
     },
     data() {
         return {
+            activeService:'一般新文献',
+            addImgList: {
+                '万方': require('@/assets/register/wanfang.png'),
+                '维普': require('@/assets/register/weipu.svg'),
+                '学术不端': require('@/assets/register/xueshubuduan.svg'),
+            },
             options_payword: [
                 {
                     label: '按篇', value: '0'
@@ -193,9 +217,26 @@ export default {
     computed: {
         ...mapState(['pageTitle', 'addServiceList']) // 从Vuex映射showSidebar状态到组件的计算属性中
     },
+    mounted(){
+        console.log(this.$route.query,'888');
+        if(Object.keys(this.$route.query).length > 0){
+            this.activeService = this.$route.query.index
+        }
+        // addServiceList 这个数据 如果可以走接口不错 放在store中，会刷新导致数据丢失；放在本地的话，似乎也可以，木有尝试过
+        console.log(this.activeService,'addServiceList-----');
+    },
     methods: {
         onSwitchChange(data) {
-            console.log(data, '---');
+            
+            console.log(data,this.form.zhifubaoFlag, '---');
+        },
+        goToCurService(data){
+            store.commit('SET_PAGETITLE', data.name);
+            this.activeService = data.name;
+            this.$refs.ruleFormRef.resetFields()
+            // 这样子会重复跳转
+            // this.$router.push('/settingServicePrice?name='+data.name)
+            // this.$router.push('/settingServicePrice?index='+index)
         },
         deleteFunc() {
 
@@ -203,23 +244,60 @@ export default {
         collectFunc() {
 
         },
+        // 保存提交
+        submitFun(){
+            console.log(this.form,'====this.form');
+            // 获取form数据
+        },
     }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
+.alias-wrap ::v-deep .el-form-item {
+    margin-bottom: 0;
+}
 .config-service-price {
     display: flex;
-
     .config-service-left {
-        width: 158px;
-        height: 100%;
-        background: #eee;
+        align-items: stretch;
+        background: #fff;
+        width: 120px;
+        transition: all .5s;
+        padding: 21px 26px 21px 12px;
+        .menu-top{
+            color: #1E2226;
+            padding: 11px 0;
+        }
+        .menu-top-img{
+            width: 18px;
+        }
+        .menu-item-name{
+            width: 20px;
+            height: 14px;
+        }
+        .menu-item{
+            letter-spacing: 0.08em;
+            color: #8A9099;
+            padding: 9px 0px;
+            span{
+                max-width: 89px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+            }
+        }
+        .menu-active{
+            color: #006AFF;
+        }
     }
 
     .config-service-right {
+        align-items: stretch;
         width: calc(100% - 158px);
     }
-
+    .content1{
+        margin: 12px 0;
+    }
     .alias-wrap {
         width: 100%;
         display: flex;
@@ -347,11 +425,18 @@ export default {
         }
     }
 }
-
-.alias-wrap ::v-deep .el-form-item {
-    margin-bottom: 0;
+@media screen and (min-width: 1441px) {
+    .config-service-right{ 
+        width: calc(100% - 218px);
+    }
+    .config-service-price .config-service-left{
+        width: 188px !important;
+        transition: all .5s;
+    }
 }
 
+
+
 .info-error {
     color: #FF4D4F;
     letter-spacing: 0.08em;
@@ -368,4 +453,13 @@ export default {
     width: 97.6%;
     margin: 0 auto;
 }
+.pageFooter{
+    justify-content: center;
+    width: 100%;
+    padding: 16px 0px;
+    opacity: 1;
+    background: #FFFFFF;
+    /* 蓝色阴影_常规 */
+    box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12);
+}
 </style>
\ No newline at end of file
diff --git a/src/views/Register.vue b/src/views/Register.vue
index 4b94757..351f764 100755
--- a/src/views/Register.vue
+++ b/src/views/Register.vue
@@ -19,14 +19,16 @@
             <span>基础信息</span>
           </div>
           <div :class="['step-line', activeStep > 1 ? 'step_active-line' : '']"></div>
-          <div :class="['step-item', activeStep == 2 ? 'checked' : activeStep > 2 ? 'success' : '']" @click="goCurActiveStep(2)">
+          <div :class="['step-item', activeStep == 2 ? 'checked' : activeStep > 2 ? 'success' : '']"
+            @click="goCurActiveStep(2)">
             <img v-if="activeStep == 1" src="@/assets/register/step2_null.svg" alt="" class="custom-icon">
             <img v-if="activeStep == 2" src="@/assets/register/step2_ing.svg" alt="" class="custom-icon">
             <img v-if="activeStep > 2" src="@/assets/register/step_success.svg" alt="" class="custom-icon">
             <span>收款方式</span>
           </div>
           <div :class="['step-line', activeStep > 2 ? 'step_active-line' : '']"></div>
-          <div :class="['step-item', activeStep == 3 ? 'checked' : activeStep > 2 ? 'success' : '']" @click="goCurActiveStep(3)">
+          <div :class="['step-item', activeStep == 3 ? 'checked' : activeStep > 2 ? 'success' : '']"
+            @click="goCurActiveStep(3)">
             <img v-if="activeStep != 3" src="@/assets/register/step3_null.svg" alt="" class="custom-icon">
             <img v-if="activeStep == 3" src="@/assets/register/step3_ing.svg" alt="" class="custom-icon">
             <!-- <img v-if="activeStep >2" src="@/assets/register/step_success.svg" alt=""> -->
@@ -342,7 +344,7 @@
                 <template slot-scope="scope">
                   <div class="flex">
                     <span :class="(scope.row.type == 'a' ? 'green' : 'blue')">{{ scope.row.type == 'a' ? '查重服务' : '写作辅助'
-                      }}</span>
+                    }}</span>
                     <span class="">{{ scope.row.name }}</span>
                   </div>
                 </template>
@@ -465,7 +467,8 @@
       <DomainModal />
     </GuipDialog>
 
-    <el-dialog :visible.sync="dialogVisibleAdd" ref="addDialog" width="1011px" class="addDialog-wrap" :show-close="false" >
+    <el-dialog :visible.sync="dialogVisibleAdd" ref="addDialog" width="1011px" class="addDialog-wrap"
+      :show-close="false">
       <div class="addService_wrap">
         <div class="addServicetop">
           <div class="flex">
@@ -489,15 +492,11 @@
             <h3 class="flex"><img :src="addImgList[category.name]" alt="">{{ category.name }}</h3>
             <p class="service-desc">{{ category.desc }}</p>
             <ul>
-              <li v-for="item in category.list" :key="item.name" :class="item.checked ? 'service-active' :''">
+              <li v-for="item in category.list" :key="item.name" :class="item.checked ? 'service-active' : ''">
                 <div class="service-name-item flex-between">
                   <span>{{ item.name }}</span>
-                  <input
-                    type="checkbox"
-                    :id="`item-${item.id}`"
-                    v-model="item.checked"
-                    @change="updateSelectedCount(item)"
-                  />
+                  <input type="checkbox" :id="`item-${item.id}`" v-model="item.checked"
+                    @change="updateSelectedCount(item)" />
                 </div>
                 <p class="service-desc-item">{{ item.desc }}</p>
                 <p class="service-price-item"><i>¥</i><span>{{ item.price }}</span> / {{ item.word }}</p>
@@ -553,10 +552,10 @@ export default {
   data() {
     return {
       btnstyleObj1: {
-                width: '137px',
-                height: '38px',
-            },
-      serviceTotal:0,
+        width: '137px',
+        height: '38px',
+      },
+      serviceTotal: 0,
       activeCategory: 0,
       addlist: [
         {
@@ -568,34 +567,36 @@ export default {
               desc: '适用于所有未正式发表的文献类型。',
               price: '2.4',
               word: '1000字符',
-              checked:false
+              checked: false,
+              checkFlag: true
             },
             {
               name: '本科论文',
               desc: '适用于在校大学生毕业论文。',
               price: '2.4',
               word: '1000字符',
-              checked:false
+              checked: false,
+              checkFlag: false
             },
             {
               name: '说博士论文',
               desc: '适用于应届高校硕博士研究生论文检测。',
               price: '2.4',
-              checked:false,
+              checked: false,
               word: '1000字符'
             },
             {
               name: '高职高专',
               desc: '适用于高等职业学院和高等专科学校论文检测。',
               price: '2.4',
-              checked:false,
+              checked: false,
               word: '1000字符'
             },
             {
               name: '一般新文献1name',
               desc: '适用于所有未正式发表的文献类型。',
               price: '2.4',
-              checked:false,
+              checked: false,
               word: '1000字符'
             },
           ]
@@ -608,63 +609,64 @@ export default {
               name: '一般新文献222',
               desc: '适用于所有未正式发表的文献类型。',
               price: '2.4',
-              checked:false,
+              checked: false,
+              checkFlag: true,
               word: '1000字符'
             },
             {
               name: '本科论文222',
               desc: '适用于在校大学生毕业论文。',
               price: '2.4',
-              checked:false,
+              checked: false,
               word: '1000字符'
             },
             {
               name: '说博士论文222',
               desc: '适用于应届高校硕博士研究生论文检测。',
               price: '2.4',
-              checked:false,
+              checked: false,
               word: '1000字符'
             },
             {
               name: '高职高专222',
               desc: '适用于高等职业学院和高等专科学校论文检测。',
               price: '2.4',
-              checked:false,
+              checked: false,
               word: '1000字符'
             },
             {
               name: '一般新文献2222',
               desc: '适用于所有未正式发表的文献类型。',
               price: '2.4',
-              checked:false,
+              checked: false,
               word: '1000字符'
             },
             {
               name: '高职高专2224',
               desc: '适用于高等职业学院和高等专科学校论文检测。',
               price: '2.4',
-              checked:false,
+              checked: false,
               word: '1000字符'
             },
             {
               name: '一般新文献2222221',
               desc: '适用于所有未正式发表的文献类型。',
               price: '2.4',
-              checked:false,
+              checked: false,
               word: '1000字符'
             },
             {
               name: '高职高专22242',
               desc: '适用于高等职业学院和高等专科学校论文检测。',
               price: '2.4',
-              checked:false,
+              checked: false,
               word: '1000字符'
             },
             {
               name: '一般新文献22222211',
               desc: '适用于所有未正式发表的文献类型。',
               price: '2.4',
-              checked:false,
+              checked: false,
               word: '1000字符'
             },
           ]
@@ -677,35 +679,35 @@ export default {
               name: '一般新文献333',
               desc: '适用于所有未正式发表的文献类型。',
               price: '2.4',
-              checked:false,
+              checked: false,
               word: '1000字符'
             },
             {
               name: '本科论文33',
               desc: '适用于在校大学生毕业论文。',
               price: '2.4',
-              checked:false,
+              checked: false,
               word: '1000字符'
             },
             {
               name: '说博士论文333',
               desc: '适用于应届高校硕博士研究生论文检测。',
               price: '2.4',
-              checked:false,
+              checked: false,
               word: '1000字符'
             },
             {
               name: '高职高专333',
               desc: '适用于高等职业学院和高等专科学校论文检测。',
               price: '2.4',
-              checked:false,
+              checked: false,
               word: '1000字符'
             },
             {
               name: '一般新文献3332',
               desc: '适用于所有未正式发表的文献类型。',
               price: '2.4',
-              checked:false,
+              checked: false,
               word: '1000字符'
             },
           ]
@@ -759,7 +761,7 @@ export default {
       dialogVisible: false,//是否展示弹框
       showCancelButton: true, // 控制是否显示取消按钮
       showCloseButton: true, // 控制是否显示关闭按钮
-      activeStep: 2,//当前步骤条
+      activeStep: 3,//当前步骤条
       has_store: '1',//是否是初次授权 还是已有店铺 大于0 已有店铺
       distribution_channel: '0',//销售渠道 是否为电商 0 非电商 >0 电商
       payment_method_list: [//收款方式
@@ -855,28 +857,38 @@ export default {
   computed: {
     // 计算选中的总数
     selectedCount() {
+      const newaddlist = JSON.parse(JSON.stringify(this.addlist))
       let list = []
-      let list1=[]
-      this.addlist.forEach(item=>{
-        list1=[]
+      let listTotal = []
+      newaddlist.forEach(item => {
+        let item2 = JSON.parse(JSON.stringify(item));
+        item2.list = [];
         item.list.forEach((item1) => {
-          if(item.checked){
-            list.push(item)
-            list1.push(item1)
-            list.list = list1
+          if (item1.checked) {
+            // list1.push(item1)
+            listTotal.push(item1)
+            if (item2.list.length == 0) {
+              item2.list = [item1]
+            } else {
+              item2.list.push(item1)
+            }
           }
         })
+        if (item2.list.length > 0) {
+          list.push(item2)
+        }
       })
-      store.commit('SET_ADDSERVICELIST', list); 
-      return list1.length;
+      console.log(list, 'list----', this.addlist);
+      store.commit('SET_ADDSERVICELIST', list);
+      return listTotal.length;
     },
   },
   methods: {
-    nextGoSettingPrice(){
+    nextGoSettingPrice() {
       this.$router.push('/settingServicePrice')
     },
-    goCurActiveStep(step){
-      if(step < this.activeStep){
+    goCurActiveStep(step) {
+      if (step < this.activeStep) {
         this.activeStep = step
       }
     },
@@ -1090,26 +1102,26 @@ export default {
     // 处理滚动事件
     handleScroll() {
       const scrollPosition = this.$refs.content.scrollTop;
-      console.log(this.activeCategory,scrollPosition,'this.activeCategory');
+      // console.log(this.activeCategory,scrollPosition,'this.activeCategory');
       this.addlist.forEach((category, index) => {
         const element = this.$refs[`category-${index}`][0];
         const elementTop = Math.round(element.offsetTop - 70);
         const elementBottom = elementTop + element.offsetHeight;
-
-        console.log('进来了',scrollPosition,elementTop,elementBottom,index,scrollPosition >= elementTop && scrollPosition < elementBottom);
+        // console.log('进来了',scrollPosition,elementTop,elementBottom,index,scrollPosition >= elementTop && scrollPosition < elementBottom);
         if (scrollPosition >= elementTop && scrollPosition < elementBottom) {
           this.activeCategory = index;
         }
       });
     },
     updateSelectedCount(item) {
-      this.serviceTotal =  this.selectedCount;
-      this.$set(this.addlist,item)
-      // console.log('选中总数已更新：',item, this.selectedCount,this.addlist);
+      this.serviceTotal = this.selectedCount;
+      console.log(item, 'item----');
+      // this.$set(this.addlist,item)
+      console.log('选中总数已更新：', this.addlist);
     },
 
   },
- 
+
 };
 </script>
 <style lang="scss" scoped>
@@ -1443,25 +1455,30 @@ export default {
     padding-left: 36px;
   }
 }
+
 ::v-deep .addDialog-wrap .el-dialog {
   background: #F6F7FA;
   height: 546px;
   border-radius: 8px;
 }
+
 ::v-deep .addDialog-wrap .el-dialog .el-dialog__body {
- padding: 0 24px 0;
+  padding: 0 24px 0;
 }
+
 ::v-deep .addDialog-wrap .el-dialog__header {
   background: #F6F7FA;
   border-radius: 8px;
-  
+
 }
-.addDialog-wrap{
-  .bottom{
+
+.addDialog-wrap {
+  .bottom {
     margin-top: 24px;
     justify-content: flex-end;
     align-items: center;
-    span{
+
+    span {
       font-size: 14px;
       font-weight: normal;
       line-height: normal;
@@ -1474,9 +1491,11 @@ export default {
     }
   }
 }
+
 .addService_wrap {
   text-align: left;
   background-color: #fff;
+
   // display: ;
   .addServicetop {
     display: flex;
@@ -1486,7 +1505,8 @@ export default {
     top: 12px;
     left: 24px;
     width: 963.43px;
-    b{
+
+    b {
       font-size: 20px;
       font-weight: bold;
       line-height: 26px;
@@ -1494,9 +1514,11 @@ export default {
       font-variation-settings: "opsz" auto;
       color: #1E2226;
     }
+
     ul {
       display: flex;
       padding-left: 20px;
+
       li {
         cursor: pointer;
         list-style-type: none;
@@ -1514,7 +1536,8 @@ export default {
         letter-spacing: 0.08em;
         color: #8A9099;
         border: 1px solid transparent;
-        img{
+
+        img {
           width: 18px;
           height: 18px;
           margin-right: 4px;
@@ -1528,21 +1551,24 @@ export default {
       }
     }
   }
-  .addServicebot{
+
+  .addServicebot {
     overflow-y: auto;
     max-height: 380px;
     margin-top: 24px;
-    ul{
+
+    ul {
       // display: flex;
       // flex-wrap: wrap;
       // justify-content: space-between;
       display: grid;
-      grid-gap:14px;
+      grid-gap: 14px;
       grid-template-columns: repeat(auto-fit, 220px);
       // grid-auto-rows: 50px;
       padding-left: 0;
-      margin: 20px 0 0 ;
-      li{
+      margin: 20px 0 0;
+
+      li {
         list-style-type: none;
         width: 220px;
         height: 126px;
@@ -1555,15 +1581,18 @@ export default {
         cursor: pointer;
         transition: all .3s;
       }
-      li:hover{
+
+      li:hover {
         background: #F6F7FA;
         transition: all .3s;
       }
     }
-    .service-active{
+
+    .service-active {
       border: 1px solid #006AFF;
     }
-    .service-desc{
+
+    .service-desc {
       font-size: 14px;
       font-weight: normal;
       letter-spacing: 0.08em;
@@ -1571,12 +1600,14 @@ export default {
       color: #8A8C99;
       margin: 6px 0 8px;
     }
-    .service-name-item{
+
+    .service-name-item {
       font-size: 14px;
       letter-spacing: 0.08em;
       color: #1E2226;
     }
-    .service-desc-item{
+
+    .service-desc-item {
       font-size: 12px;
       font-weight: normal;
       line-height: 17px;
@@ -1585,46 +1616,53 @@ export default {
       color: #8A9099;
       margin: 14px 0 12px;
       display: -webkit-box;
-      -webkit-line-clamp: 2; /* 注意：这不是一个标准的CSS属性，仅在WebKit浏览器中有效 */
+      -webkit-line-clamp: 2;
+      /* 注意：这不是一个标准的CSS属性，仅在WebKit浏览器中有效 */
       -webkit-box-orient: vertical;
       overflow: hidden;
       text-overflow: ellipsis;
       height: 34px;
     }
-    .service-price-item{
+
+    .service-price-item {
       font-size: 12px;
       line-height: 16px;
       letter-spacing: 0.08em;
       font-variation-settings: "opsz" auto;
       color: #8A9099;
-      i{
+
+      i {
         font-style: normal;
         color: #1E2226;
 
       }
-      span{
+
+      span {
         color: #1E2226;
         font-size: 20px;
         font-weight: normal;
         line-height: 20px;
       }
     }
-    .category-section{
+
+    .category-section {
       padding: 20px;
-      h3{
+
+      h3 {
         margin: 0;
         font-size: 16px;
         font-weight: normal;
         letter-spacing: 0.08em;
         color: #1E2226;
-        img{
+
+        img {
           width: 30px;
           height: 30px;
           margin-right: 8px;
         }
       }
     }
-   
+
   }
 }
 </style>
diff --git a/src/views/elementGroups.vue b/src/views/elementGroups.vue
index 571a8bc..5d15116 100644
--- a/src/views/elementGroups.vue
+++ b/src/views/elementGroups.vue
@@ -206,6 +206,12 @@
                     <PhoneCode slot="formDom"></PhoneCode>
                 </GuipFormItem>
             </div>
+
+            <div class="ele-item">
+            <label for="">开关L</label>
+            <GuipSwitch v-model="switchValue" activeText="开启" inactiveText="关闭" @change="onSwitchChange">
+            </GuipSwitch>
+        </div>
             <el-button type="primary" @click="submitForm">表单Submit</el-button>
 
         </el-form>
@@ -259,11 +265,7 @@
             active-text="按月付费" inactive-text="按年付费">
         </el-switch> -->
 
-        <div class="ele-item">
-            <label for="">开关L</label>
-            <GuipSwitch :modelValue="switchValue" activeText="开启" inactiveText="关闭" @change="onSwitchChange">
-            </GuipSwitch>
-        </div>
+       
     </div>
 </template>
 
@@ -518,7 +520,8 @@ export default {
             return randomNumber
         },
         onSwitchChange(value) {
-            console.log('Switch 状态变化:', value);
+            
+            console.log('Switch 状态变化:',this.switchValue, value);
         },
         // 弹框相关方法---start
         openDialog() {