仓库概况卡片样式

src/views/stock/survey/index.vue

@@ -78,17 +78,9 @@
       </div>
 
       <div class="stock-survey clear">
-        <el-row
-          :gutter="24"
-          v-for="item in stock_list"
-          :key="item.id"
-          style="float: left"
-        >
-          <el-col :span="24">
-            <el-card
-              shadow="always"
-              style="width: 200px; height: 115px; flex: 1 1 auto; margin: 10px"
-            >
+        <el-row v-for="item in stock_list" :key="item.id" style="float: left">
+          <el-col :span="24" class="card">
+            <el-card shadow="always">
               <i :class="item.icon" class="icon"></i>
               <p>{{ item.label }}</p>
             </el-card>
@@ -499,16 +491,30 @@ export default {
 </script>
    <style lang="scss" scoped>
 @import "~@/styles/index.scss";
+.card {
+  width: 200px;
+  height: 115px;
+  flex: 1;
+}
+@media screen and (max-width: 1500px) {
+  .card {
+    width: 160px;
+  }
+}
+@media screen and (max-width: 1350px) {
+  .card {
+    width: 130px;
+  }
+}
+
 .stock-survey {
   width: 100%;
   padding: 30px auto;
   display: flex;
-  border: 1px solid red;
-  box-sizing: border-box;
   // position: relative;
-  justify-content: center;
+  justify-content: space-around;
   overflow: hidden;
-  padding: 0 0 0 10px;
+  padding: 20px 0 0 10px;
   text-align: center;
   .icon {
     font-size: 40px;