分类样式调整

src/views/Poice/children/work.vue

@@ -16,17 +16,19 @@
       <span slot="title4">县级</span>
       <span slot="titlecount4" class="count">1</span>
     </work-item>
+
     <work-item>
       <span slot="title">一级分类</span>
-      <span slot="countsum" class="count">1</span>
+      <span slot="countsum" class="count">{{classifylist.length}}</span>
 
-      <div class="second" v-for="(item, index) in classifylist" :key="index">
-        <div>
-          <span slot="title4">{{ item.name }}</span>
-          <span slot="titlecount4" class="count">{{ item.quantity }}</span>
+      <div class="second-context">
+        <div class="second" v-for="(item, index) in classifylist" :key="index">
+          <div>
+            <span slot="title4">{{ item.name }}</span>
+            <span slot="titlecount4" class="count">{{ item.quantity }}</span>
+          </div>
         </div>
       </div>
-      <span></span>
     </work-item>
   </div>
 </template>
@@ -52,6 +54,11 @@ export default {
 </script>
 
 <style scoped>
+.second-context {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+}
 .title-ba {
   display: flex;
 }
@@ -60,6 +67,8 @@ export default {
   justify-content: space-around;
   line-height: 15vw;
   height: auto;
+  margin-right: 1vw;
+  margin-left: 4vw;
 }
 .count {
   width: 5vw;
@@ -70,5 +79,6 @@ export default {
   padding-right: 1vw;
   color: #fff;
   margin-left: 1vw;
+  margin-right: 0vw;
 }
 </style>

src/views/Poice/children/workItem.vue

@@ -8,7 +8,7 @@
       <div><slot name="title1"></slot> <slot name="titlecount1"></slot></div>
       <div><slot name="title2"></slot><slot name="titlecount2"></slot></div>
       <div><slot name="title3"></slot><slot name="titlecount3"></slot></div>
-            <div><slot name="title4"></slot><slot name="titlecount4"></slot></div>
+      <div><slot name="title4"></slot><slot name="titlecount4"></slot></div>
     </div>
     <slot></slot>
   </div>