发起受理

@@ -16,17 +16,43 @@
       </ul>
     </div>
     <div class="tabsList">
-      <p v-show="issplitScreen" class="splitScreen tabsList-title">材料信息</p>
+      <div class="tabsList-left"  >
+        <div class="map-drawer-click" 
+              v-if='isShowdrawer'
+              @click=" () => {
+                this.isShowdrawer = !this.isShowdrawer;}">
+              </div>
+        <div class="map-drawer-expand" 
+              v-else
+              @click=" () => {
+                  this.isShowdrawer = !this.isShowdrawer;}">
+              </div>
+        <ul v-if='this.isShowdrawer'>
+          <p>受理单元列表(3)</p>
+          <li>610100102104GB00004W00000000</li>
+          <div class="xian"></div>
+          <li>610100102104GB00004W00000000</li>
+          <div class="xian"></div>
+          <li>610100102104GB00004W00000000</li>
+          <div class="xian"></div>
+        </ul>
+      </div>
+      <div class="tabsList-right" >  
+        <div class="fenpin" v-show="issplitScreen">
+          <p class="splitScreen tabsList-title">材料信息</p>
+          <div class="splitScreen" ></div>
+        </div>
         <el-tabs v-model="activeName">
           <el-tab-pane :label="item.name" :name="index + 1 + ''" v-for="(item, index) in tabList" :key="index">
-        </el-tab-pane>
-      </el-tabs>
-    </div>
-
             <div class="splitScreen-con">
-      <div class="splitScreen" v-show="issplitScreen"></div>
               <component :is="editItem" :flag="flag" :key="key" />
             </div>
+          </el-tab-pane>
+        </el-tabs></div>
+    
+    </div>
+
+    
   </div>
 </template>
 <script>
@@ -36,6 +62,7 @@ export default {
   components: {},
   data () {
     return {
+      isShowdrawer: true,
       key: 0,
       flag: false,
       headerleftList: [
@@ -165,18 +192,14 @@ export default {
 .fqsq {
   width: 100%;
   height: 100%;
-  padding: 0 3%;
+  padding: 0;
   box-sizing: border-box;
   background-color: #ffffff;
 
-  .splitScreen-con {
-    display: flex;
-  }
+
 
   .splitScreen {
     min-width: 50%;
-    width: 50%;
-    border-right: 1px solid $borderColor;
   }
 
   &-header {
@@ -216,6 +239,31 @@ export default {
       }
     }
   }
+  .map-drawer-expand {
+                width: 20px;
+                height: 77px;
+                background: url('../../../image/right.png');
+                background-size: cover;
+                position: absolute;
+                left: 0%;
+                top: 30%;
+                z-index: 999;
+                cursor: pointer;
+            }
+            .map-drawer-click {
+                width: 20px;
+                height: 77px;
+                background: url('../../../image/left.png');
+                background-size: cover;
+                position: absolute;
+                right: -8%;
+                top: 30%;
+                z-index: 999;
+                cursor: pointer;
+            }
+            .hide {
+                display: none;
+            }
        
   .tabsList {
     width: 100%;
@@ -224,6 +272,43 @@ export default {
     background-color: #ffffff;
     z-index: 100;
     @include flex;
+    .tabsList-left{
+      border-right: 1px solid #EBEEF5;
+      position: relative;
+
+         ul{
+           position: relative;
+    
+           .xian{
+             background: #F2F2F2;
+             padding: 2px;
+           }
+           p{
+       padding: 20px;
+    text-align: center;
+           }
+            li{
+              padding: 10px;
+              font-size: 14px;
+               color: #606266;
+
+            }
+            li:hover{
+              color: #0F93F6;
+              cursor:pointer
+            }
+         }
+    }
+    .tabsList-right{
+      .fenpin{
+        min-width: 50%;
+        border-right: 1px solid #EBEEF5;
+      }
+    width: 100%;
+    background-color: #ffffff;
+    z-index: 100;
+    @include flex;
+    }
   }
 
   .tabsList-title {