数据分析 页面修改

src/utils/axiosHttp.js

@@ -8,9 +8,9 @@
  */
 
 import service from "axios";
-import {
-  serialize
-} from '@/utils/util'
+// import {
+//   serialize
+// } from '@/utils/util'
 import {
   getToken
 } from '@/utils/auth'
@@ -48,7 +48,7 @@ service.interceptors.request.use(
     }
     //headers中配置serialize为true开启序列化
     if (response.method === 'post' && meta.isSerialize === true) {
-      response.data = serialize(response.data);
+      // response.data = serialize(response.data);
     }
     return response
   }, error => {

src/views/sjfx/components/topContent.vue

+<template>
+  <ul class="titleClass spaceBetween">
+    <li class="titleLi spaceBetween">
+      <div class="leftCon">
+        <p class="top01 ellipsis1">工作犬总数</p>
+        <p class="top02 ellipsis1">30000</p>
+        <p class="top03 ellipsis1">
+          <span class="span01 upColor">240</span>
+          <img
+            src="../images/up@2x.png"
+            class="img01"
+          />
+          <span class="span02">同比去年</span>
+        </p>
+      </div>
+      <div class="rightCon">
+        <img
+          src="../images/workDog@2x.png"
+          class="imgs"
+        />
+      </div>
+    </li>
+    <li class="titleLi spaceBetween">
+      <div class="leftCon">
+        <p class="top01 ellipsis1">退役犬数</p>
+        <p class="top02 ellipsis1">30000</p>
+        <p class="top03 ellipsis1">
+          <span class="span01 downColor">240</span>
+          <img
+            src="../images/down@2x.png"
+            class="img01"
+          />
+          <span class="span02">同比去年</span>
+        </p>
+      </div>
+      <div class="rightCon">
+        <img
+          src="../images/retireDog@2x.png"
+          class="imgs"
+        />
+      </div>
+    </li>
+    <li class="titleLi spaceBetween">
+      <div class="leftCon">
+        <p class="top01 ellipsis1">种犬总数</p>
+        <p class="top02 ellipsis1">30000</p>
+        <p class="top03 ellipsis1">
+          <span class="span01 downColor">240</span>
+          <img
+            src="../images/down@2x.png"
+            class="img01"
+          />
+          <span class="span02">同比去年</span>
+        </p>
+      </div>
+      <div class="rightCon">
+        <img
+          src="../images/breederDog@2x.png"
+          class="imgs"
+        />
+      </div>
+    </li>
+    <li class="titleLi spaceBetween">
+      <div class="leftCon">
+        <p class="top01 ellipsis1">技术人员总数</p>
+        <p class="top02 ellipsis1">30000</p>
+        <p class="top03 ellipsis1">
+          <span class="span01">240</span>
+          <img
+            src="../images/up@2x.png"
+            class="img01"
+          />
+          <span class="span02">同比去年</span>
+        </p>
+      </div>
+      <div class="rightCon">
+        <img
+          src="../images/person@2x.png"
+          class="imgs"
+        />
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+@import "../style/sjfxStyle.scss";
+</style>
\ No newline at end of file

src/views/sjfx/style/sjfxStyle.scss

+* {
+  box-sizing: border-box;
+}
+
+.spaceBetween {
+  display: flex;
+  justify-content: space-between;
+}
+
+.ellipsis1 {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.sjfxClass {
+  position: relative;
+  width: 100%;
+  padding: 20px;
+
+  .titleClass {
+    width: 100%;
+    height: 112px;
+
+    .titleLi {
+      width: 24%;
+      height: 100%;
+      background-color: #fff;
+      border-radius: 6px;
+      padding: 16px 12px 16px 20px;
+
+      .leftCon {
+        width: calc(100% - 86px);
+
+        .top01 {
+          font-size: 14px;
+          color: #383838;
+          font-weight: 400;
+          line-height: 14px;
+        }
+
+        .top02 {
+          font-size: 26px;
+          color: #242424;
+          font-family: DIN;
+          line-height: 30px;
+          margin: 10px 0;
+        }
+
+        .top03 {
+          height: 14px;
+          line-height: 14px;
+
+          .span01 {
+            font-size: 13px;
+            font-family: DIN;
+            font-weight: 400;
+          }
+
+          .upColor {
+            color: #E83334;
+          }
+
+          .downColor {
+            color: #30BE1A;
+          }
+
+          .span02 {
+            font-size: 12px;
+            color: #8B8B8B;
+            font-weight: 400;
+          }
+
+          .img01 {
+            width: 13px;
+            height: 13px;
+            margin: -3px 4px 0 1px;
+          }
+        }
+      }
+
+      .rightCon {
+        width: 86px;
+        height: 86px;
+
+        .imgs {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file