feat:首页开发完成

@@ -35,6 +35,7 @@
       }
 
       li {
+        cursor: pointer;
         line-height: 36px;
         background-color: rgb(235, 235, 235);
         margin-top: 10px;
@@ -42,6 +43,7 @@
         border-radius: 2px;
         box-sizing: border-box;
         border: 1px solid rgb(235, 235, 235);
+        transition: all 0.3s;
 
         &:hover {
           background-color: $light-blue;
@@ -52,8 +54,12 @@
   }
 
   .ywsq-right {
-    width: calc(75% - 20px);
-    margin-left: 20px;
+    width: calc(75% - 10px);
+    margin-left: 10px;
+
+    .right-type {
+      margin-bottom: 20px;
+    }
 
     .right-title {
       font-size: 18px;
@@ -61,9 +67,70 @@
       padding: 20px;
       border-bottom: 1px solid $borderColor;
 
-      .type-content {
+    }
+
+    .cactive {
+      background-color: $green;
+      color: $menuText;
+    }
+
+    .type-content {
+      @include flex;
+      justify-content: space-between;
+      padding: 0 20px;
+      margin: 50px 0;
+
+      li {
+        width: 23.5%;
+        height: 50px;
+        line-height: 50px;
+        border: 1px solid $borderColor;
+        border-radius: 5px;
+        box-sizing: border-box;
+        padding-left: 10px;
+        cursor: pointer;
+        transition: all 0.3s;
+      }
+    }
+
+    .right-situation {
+      ul {
         padding: 20px;
         @include flex;
+        flex-wrap: wrap;
+        margin-left: -20px;
+
+        li {
+          width: 31%;
+          height: 50px;
+          border: 1px solid $borderColor;
+          @include flex;
+          justify-content: space-between;
+          margin-left: 20px;
+
+          p {
+            @include flex-center;
+          }
+
+
+
+          p:nth-child(1) {
+            flex: 1;
+            width: 100%;
+            padding: 3px;
+          }
+
+          p:nth-child(2) {
+            width: 50px;
+            height: 50px;
+            border-left: 1px solid $borderColor;
+            cursor: pointer;
+          }
+
+          i {
+            font-size: 24px;
+          }
+        }
       }
     }
   }

@@ -5,7 +5,7 @@
         <el-collapse-item :title="item.title" :name="index + 1" v-for="(item, index) in leftList" :key="index">
           <ul class="item-list">
             <li v-for="(obj, key) in item.list" :key="key" @click="handleList(item.list, obj)"
-              :class="obj.select ? 'active' : ''">{{ obj.name }}</li>
+              :class="obj.check ? 'active' : ''">{{ obj.name }}</li>
           </ul>
         </el-collapse-item>
       </el-collapse>
@@ -16,15 +16,20 @@
       <div class="right-type el-card box-card is-always-shadow">
         <div class="right-title">登记类型</div>
         <ul class="type-content">
-          <li v-for="(item, index) in typeList" :key="index">{{ item.name }}</li>
+          <li :class="item.select ? 'cactive' : ''" @click="handleTypeSelect(item)" v-for="(item, index) in typeList"
+            :key="index">{{ item.name }}</li>
         </ul>
       </div>
       <div class="right-situation el-card box-card is-always-shadow">
         <div class="right-title">业务列表</div>
         <ul>
-          <li>
-            国有建设用地使用权 || 首次登记+ 以出让方式取得
-            <i class="el-icon-star-off"></i>
+          <li @click="handleCollection(item)" v-for="(item, index) in busList" :key="index">
+            <p>
+              {{ item.name }}
+            </p>
+            <p :class="item.select ? 'cactive' : ''">
+              <i class="el-icon-star-off" :class="item.select ? 'cactive' : ''"></i>
+            </p>
           </li>
         </ul>
       </div>
@@ -42,7 +47,6 @@ export default {
           list: [
             {
               name: '国有建设用地使用权',
-              select: false
             }
           ]
         },
@@ -51,11 +55,6 @@ export default {
           list: [
             {
               name: '国有建设用地使用权',
-              select: false
-            },
-            {
-              name: '国有建设用地使用权/房屋所有权',
-              select: false
             }
           ]
         },
@@ -64,27 +63,21 @@ export default {
           list: [
             {
               name: '国有建设用地使用权',
-              select: false
             },
             {
               name: '国有建设用地使用权/房屋所有权',
-              select: false
             },
             {
               name: '宅基地使用权',
-              select: false
             },
             {
               name: '宅基地使用权/房屋所有权',
-              select: false
             },
             {
               name: '集体建设用地使用权',
-              select: false
             },
             {
               name: '集体建设用地使用权/房屋所有权',
-              select: false
             }
           ]
         }
@@ -119,22 +112,39 @@ export default {
         {
           name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
         }
+      ],
+      busList: [
+        {
+          name: '国有建设用地使用权 || 首次登记+ 以出让方式取得',
+          select: false
+        },
+        {
+          name: '国有建设用地使用权 || 首次登记+ 以出让方式取得',
+          select: false
+        },
+        {
+          name: '国有建设用地使用权 || 首次登记+ 以出让方式取得',
+          select: false
+        }
       ]
     }
   },
   methods: {
     handleList (list, obj) {
       list.forEach(item => {
-        item.select = false
-      });
-      obj.select = true
-    },
-    handleTitle (obj) {
-      this.leftList.forEach(item => {
-        item.open = false
+        if (item.check) item.check = false
       })
-      obj.open = true
+      this.$set(obj, 'check', true)
     },
+    handleCollection (item) {
+      item.select = !item.select
+    },
+    handleTypeSelect (item) {
+      this.typeList.forEach(item => {
+        if (item.select) item.select = false
+      })
+      this.$set(item, 'select', true)
+    }
   }
 }
 </script>