应用管理样式优化

src/components/app-list/app-card.vue

@@ -61,7 +61,6 @@ export default {
 
 <style scoped>
 .app_card {
-  width: calc(20% - 36px);
   background-image: url(../../assets/imgs/bg_block.png);
   background-size: 100% 100%;
   padding: 33px 25px 34px;

src/components/app-list/app-list.vue

 <template>
-  <div class="app_list">
+  <div class="app_list" ref="container">
     <app-card
       v-for="(item, index) in data"
       :key="'app_card_' + index"
@@ -8,6 +8,7 @@
       @deployment-action="deploymentAction"
       @delete-action="deleteAction"
       :details-url="detailsUrl"
+      :style="{ width: 'calc(100% / ' + rowNum + ' - 36px)' }"
     ></app-card>
   </div>
 </template>
@@ -33,6 +34,9 @@ export default {
       default: 0,
     },
   },
+  data: () => ({
+    rowNum: 5,
+  }),
   methods: {
     deploymentAction(item) {
       this.$emit("deployment-action", item);
@@ -40,6 +44,16 @@ export default {
     deleteAction(item) {
       this.$emit("delete-action", item);
     },
+    pageResize() {
+      let listWidth = this.$refs.container.clientWidth;
+      this.rowNum = Math.floor(listWidth / 310);
+    },
+  },
+  mounted() {
+    this.pageResize();
+    window.onresize = () => {
+      this.pageResize();
+    };
   },
 };
 </script>

src/pages/authority/organization.vue

@@ -213,7 +213,7 @@ export default {
   overflow: auto;
 }
 .main_container {
-  min-height: calc(100% - 74px);
+  min-height: calc(100% - 84px);
   padding: 15px 20px;
   border-radius: 10px;
   background-color: #fff;

src/pages/workbench/yygl/yyglList.vue

@@ -531,16 +531,17 @@ export default {
 
 <style scoped>
 .list_container {
-  min-height: 100%;
+  height: 100%;
   padding: 0 20px;
   overflow: auto;
 }
 .main_container {
-  min-height: calc(100% - 75px);
+  min-height: calc(100% - 84px);
   padding: 15px 20px;
   border-radius: 10px;
   overflow: hidden;
   background-color: #fff;
+  margin-bottom: 42px;
 }
 .main_container.card {
   display: flex;