多数据视图快速分组组件样式调整 --fix5

src/components/app-quick-group-tab/app-quick-group-tab.less

@@ -7,17 +7,6 @@
 	justify-content: space-around;
 	align-items: center;
 	font-size: 13px;
-	position: relative;
-	.badge {
-		--padding-bottom:0;
-		--padding-end:5px;
-		--padding-start:5px;
-		--padding-top:0;
-		position: relative;
-		top: -5px;
-		left: 5px;
-		background-color: red;
-	}
 	.quick-group-tab {
 		flex: 1;
 		height: 30px;
@@ -26,6 +15,24 @@
 		align-items: center;
 		border: 1px solid #a8a8a8;
 		margin: 0 0 -1px -1px;
+		z-index: 9999;
+		background-color: white;
+		position: relative;
+		.badge {
+			--padding-bottom:0;
+			--padding-end:3px;
+			--padding-start:3px;
+			--padding-top:1px;
+			position: absolute;
+			top: -5px;
+			left: 49px;
+			z-index: 99;
+			min-width: 15px;
+			height: 15px;
+			text-align: center;
+			line-height: 15px;
+			background-color: red;
+		}
 	}
 	.app-seleted-item {
 		background-color: #a8a8a8;

src/components/app-quick-group-tab/app-quick-group-tab.vue

@@ -25,6 +25,7 @@
       <ion-icon v-if="item.selected" style="margin-left:auto" name="checkbox-outline"></ion-icon>
     </div>
   </div>
+  <ion-backdrop style="height:100vh;z-index:99" v-show="subItems.length > 0" visible="true" tappable="true" @ionBackdropTap="closeBackdrop"></ion-backdrop>
 </div>
 </template>
 
@@ -41,7 +42,6 @@ import {
   components: {},
 })
 export default class AppQuickGroupTab extends Vue {
-  public test($event: any) {}
 
   /**
    * 快速分组代码表
@@ -190,6 +190,17 @@ export default class AppQuickGroupTab extends Vue {
     }
     this.$forceUpdate();
   }
+
+  /**
+   * 关闭遮罩层
+   *
+   * @type {any[]}
+   * @memberof AppQuickGroup
+   */
+  public closeBackdrop () {
+    this.subItems.length = 0;
+    this.$forceUpdate();
+  }
 }
 </script>