首页修改

@@ -14,17 +14,17 @@
 /* fade-transform */
 /* fade-transform */
 .fade-transform-leave-active,
 .fade-transform-leave-active,
 .fade-transform-enter-active {
 .fade-transform-enter-active {
-  transition: all .5s;
+  transition: all .12s;
 }
 }
 
 
 .fade-transform-enter {
 .fade-transform-enter {
   opacity: 0;
   opacity: 0;
-  transform: translateX(-30px);
+  transform: translateX(-5px);
 }
 }
 
 
 .fade-transform-leave-to {
 .fade-transform-leave-to {
   opacity: 0;
   opacity: 0;
-  transform: translateX(30px);
+  transform: translateX(5px);
 }
 }
 
 
 /* breadcrumb transition */
 /* breadcrumb transition */
@@ -45,4 +45,4 @@
 
 
 .breadcrumb-leave-active {
 .breadcrumb-leave-active {
   position: absolute;
   position: absolute;
-}
+}
\ No newline at end of file

 .ywsq {
 .ywsq {
   display: flex;
   display: flex;
 
 
-  /deep/.el-card__body {
-    padding: 0 !important;
+  /deep/.el-collapse-item__header {
+    padding-left: 20px;
+    font-weight: 700;
+    font-size: 16px;
   }
   }
 
 
   .ywsq-left {
   .ywsq-left {
@@ -25,8 +27,7 @@
     }
     }
 
 
     .item-list {
     .item-list {
-      padding: 0 20px 25px 20px;
-      margin-top: -5px;
+      padding: 0 20px 0 20px;
 
 
       .active {
       .active {
         background-color: $light-blue;
         background-color: $light-blue;
@@ -51,8 +52,8 @@
   }
   }
 
 
   .ywsq-right {
   .ywsq-right {
-    width: 65%;
-    margin-left: 30px;
+    width: calc(75% - 20px);
+    margin-left: 20px;
 
 
     .right-title {
     .right-title {
       font-size: 18px;
       font-size: 18px;

 <template>
 <template>
   <div class="ywsq">
   <div class="ywsq">
     <div class="ywsq-left">
     <div class="ywsq-left">
-      <el-card class="box-card" v-for="(item, index) in leftList" :key="index">
-        <div class="item-title" @click="handleTitle(item)">{{ item.title }}</div>
-        <el-collapse-transition>
-          <ul class="item-list" v-show="item.open">
+      <el-collapse v-model="activeNames" accordion>
+        <el-collapse-item :title="item.title" :name="index + 1" v-for="(item, index) in leftList">
+          <ul class="item-list">
             <li v-for="(obj, key) in item.list" :key="key" @click="handleList(item.list, obj)"
             <li v-for="(obj, key) in item.list" :key="key" @click="handleList(item.list, obj)"
               :class="obj.select ? 'active' : ''">{{ obj.name }}</li>
               :class="obj.select ? 'active' : ''">{{ obj.name }}</li>
           </ul>
           </ul>
-        </el-collapse-transition>
-      </el-card>
+        </el-collapse-item>
+      </el-collapse>
     </div>
     </div>
 
 
     <!-- right -->
     <!-- right -->
@@ -30,10 +29,10 @@
 export default {
 export default {
   data () {
   data () {
     return {
     return {
+      activeNames: [1],
       leftList: [
       leftList: [
         {
         {
           title: '常办业务',
           title: '常办业务',
-          open: true,
           list: [
           list: [
             {
             {
               name: '国有建设用地使用权',
               name: '国有建设用地使用权',
@@ -43,7 +42,6 @@ export default {
         },
         },
         {
         {
           title: '一并申请',
           title: '一并申请',
-          open: false,
           list: [
           list: [
             {
             {
               name: '国有建设用地使用权',
               name: '国有建设用地使用权',
@@ -57,7 +55,6 @@ export default {
         },
         },
         {
         {
           title: '业务申请',
           title: '业务申请',
-          open: false,
           list: [
           list: [
             {
             {
               name: '国有建设用地使用权',
               name: '国有建设用地使用权',
@@ -137,5 +134,5 @@ export default {
 </script>
 </script>
 <style scoped lang='scss'>
 <style scoped lang='scss'>
 @import "~@/styles/mixin.scss";
 @import "~@/styles/mixin.scss";
-@import './index.scss';
+@import './ywsq.scss';
 </style>
 </style>
\ No newline at end of file