diff --git a/package-lock.json b/package-lock.json
index b769f9c..cabf19f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1860,6 +1860,29 @@
         "webpack-merge": "^5.7.3",
         "webpack-virtual-modules": "^0.4.2",
         "whatwg-fetch": "^3.6.2"
+      },
+      "dependencies": {
+        "@vue/vue-loader-v15": {
+          "version": "npm:vue-loader@15.10.1",
+          "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.1.tgz",
+          "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
+          "dev": true,
+          "requires": {
+            "@vue/component-compiler-utils": "^3.1.0",
+            "hash-sum": "^1.0.2",
+            "loader-utils": "^1.1.0",
+            "vue-hot-reload-api": "^2.3.0",
+            "vue-style-loader": "^4.1.0"
+          },
+          "dependencies": {
+            "hash-sum": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
+              "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+              "dev": true
+            }
+          }
+        }
       }
     },
     "@vue/cli-shared-utils": {
@@ -2009,27 +2032,6 @@
         }
       }
     },
-    "@vue/vue-loader-v15": {
-      "version": "npm:vue-loader@15.10.1",
-      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.1.tgz",
-      "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
-      "dev": true,
-      "requires": {
-        "@vue/component-compiler-utils": "^3.1.0",
-        "hash-sum": "^1.0.2",
-        "loader-utils": "^1.1.0",
-        "vue-hot-reload-api": "^2.3.0",
-        "vue-style-loader": "^4.1.0"
-      },
-      "dependencies": {
-        "hash-sum": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
-          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
-          "dev": true
-        }
-      }
-    },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
diff --git a/src/assets/images/content-icon1.png b/src/assets/images/content-icon1.png
new file mode 100644
index 0000000..2ea5648
Binary files /dev/null and b/src/assets/images/content-icon1.png differ
diff --git a/src/assets/images/content-icon2.png b/src/assets/images/content-icon2.png
new file mode 100644
index 0000000..82e3893
Binary files /dev/null and b/src/assets/images/content-icon2.png differ
diff --git a/src/assets/images/content-icon3.png b/src/assets/images/content-icon3.png
new file mode 100644
index 0000000..148f93b
Binary files /dev/null and b/src/assets/images/content-icon3.png differ
diff --git a/src/assets/images/content-icon4.png b/src/assets/images/content-icon4.png
new file mode 100644
index 0000000..3e9f7ee
Binary files /dev/null and b/src/assets/images/content-icon4.png differ
diff --git a/src/assets/images/content-icon5.png b/src/assets/images/content-icon5.png
new file mode 100644
index 0000000..092962c
Binary files /dev/null and b/src/assets/images/content-icon5.png differ
diff --git a/src/assets/images/default-font.png b/src/assets/images/default-font.png
new file mode 100644
index 0000000..17b25f5
Binary files /dev/null and b/src/assets/images/default-font.png differ
diff --git a/src/assets/images/select-font.png b/src/assets/images/select-font.png
new file mode 100644
index 0000000..8725547
Binary files /dev/null and b/src/assets/images/select-font.png differ
diff --git a/src/view/index.vue b/src/view/index.vue
index 609a1b9..8f65488 100644
--- a/src/view/index.vue
+++ b/src/view/index.vue
@@ -21,13 +21,8 @@
         <div class="hall-line">
           <div class="hall-title">
             <div>
-              <span
-                style="font-family: 'maleGod'"
-                :text="s"
-                v-for="(s, i) in hallTitle"
-                :class="'span' + i"
-              >
-                {{ s }}
+              <span style="font-family: 'maleGod'"  v-for="(s, i) in hallTitle" :class="'span' + i">
+                
               </span>
             </div>
             <div class="hall-icon">
@@ -60,9 +55,7 @@
           <div class="flow-right">
             <ul>
               <li class="flow-item" v-for="(val, i) in flowList">
-                <span :class="'up' + i"
-                  ><i :class="'rect' + i"></i>{{ val.value }}</span
-                >
+                <span :class="'up' + i"><i :class="'rect' + i"></i>{{ val.value }}</span>
                 <span>{{ val.text }}</span>
               </li>
             </ul>
@@ -102,64 +95,35 @@
           </p>
         </div>
         <div class="paymentContent">
-          <div
-            class="paymentList"
-            v-for="(item, index) in paymentList"
-            :key="index"
-          >
+          <div class="paymentList" v-for="(item, index) in paymentList" :key="index">
             <div class="listOne">
-              <img
-                src="../assets/images/paymentYuan.png"
-                style="width: 18px; height: 18px"
-              />
-              <div
-                style="margin-left: 5%; color: #ffffff; font-family: 'maleGod'"
-              >
+              <img src="../assets/images/paymentYuan.png" style="width: 18px; height: 18px" />
+              <div style="margin-left: 5%; color: #ffffff; font-family: 'maleGod'">
                 {{ item.count }}
               </div>
             </div>
             <div class="listTwo">
               <div style="color: rgb(186, 186, 192)">{{ item.name }}</div>
-              <div
-                :style="{ color: item.color }"
-                style="font-family: 'maleGod'"
-              >
+              <div :style="{ color: item.color }" style="font-family: 'maleGod'">
                 {{ item.per }}
               </div>
               <img :src="item.icon" />
             </div>
           </div>
           <div class="twoTitle">
-            <p
-              class="titleText"
-              text="缴费情况分布"
-              style="font-family: 'maleGod'"
-            >
+            <p class="titleText" text="缴费情况分布" style="font-family: 'maleGod'">
               缴费情况分布
             </p>
             <div class="titleIcon">
-              <img
-                src="../assets/images/xianxing.png"
-                style="width: 17px; height: 14px"
-                @click="handelXian"
-              />
-              <img
-                src="../assets/images/bingzhuang.png"
-                style="width: 16px; height: 16px"
-                @click="handelBing"
-              />
+              <img src="../assets/images/xianxing.png" style="width: 17px; height: 14px" @click="handelXian" />
+              <img src="../assets/images/bingzhuang.png" style="width: 16px; height: 16px" @click="handelBing" />
             </div>
           </div>
           <div id="rightOneXian" v-show="payOneShow"></div>
           <div id="rightOneBing" v-show="!payOneShow"></div>
           <div class="selectType">
-            <div
-              v-for="(item, index) in paymentTypeList"
-              :key="index"
-              class="typeName"
-              :class="{ typeNameAction: typeActive == index }"
-              @click="paymentType(index)"
-            >
+            <div v-for="(item, index) in paymentTypeList" :key="index" class="typeName"
+              :class="{ typeNameAction: typeActive == index }" @click="paymentType(index)">
               <div>{{ item.name }}</div>
             </div>
           </div>
@@ -172,41 +136,21 @@
             业务受理
           </p>
           <div class="titleIcon">
-            <img
-              src="../assets/images/xianxing.png"
-              style="width: 17px; height: 14px"
-              @click="businessXian"
-            />
-            <img
-              src="../assets/images/bingzhuang.png"
-              style="width: 16px; height: 16px"
-              @click="businessBing"
-            />
+            <img src="../assets/images/xianxing.png" style="width: 17px; height: 14px" @click="businessXian" />
+            <img src="../assets/images/bingzhuang.png" style="width: 16px; height: 16px" @click="businessBing" />
           </div>
         </div>
         <div class="businessContent">
-          <div
-            class="businessList"
-            v-for="(item, index) in businessList"
-            :key="index"
-          >
+          <div class="businessList" v-for="(item, index) in businessList" :key="index">
             <div class="listOne">
-              <img
-                src="../assets/images/paymentYuan.png"
-                style="width: 18px; height: 18px"
-              />
-              <div
-                style="margin-left: 5%; color: #ffffff; font-family: 'maleGod'"
-              >
+              <img src="../assets/images/paymentYuan.png" style="width: 18px; height: 18px" />
+              <div style="margin-left: 5%; color: #ffffff; font-family: 'maleGod'">
                 {{ item.count }}
               </div>
             </div>
             <div class="listTwo">
               <div style="color: rgb(186, 186, 192)">{{ item.name }}</div>
-              <div
-                :style="{ color: item.color }"
-                style="font-family: 'maleGod'"
-              >
+              <div :style="{ color: item.color }" style="font-family: 'maleGod'">
                 {{ item.per }}
               </div>
               <img :src="item.icon" />
@@ -228,32 +172,21 @@
         </div>
         <div class="serviceContent">
           <div class="serviceOne">
-            <div
-              v-for="(item, idnex) in serviceList"
-              :key="index"
-              class="serviceList"
-            >
+            <div v-for="(item, idnex) in serviceList" :key="index" class="serviceList">
               <div style="color: rgb(182, 182, 190)">{{ item.name }}</div>
-              <div
-                style="
+              <div style="
                   color: rgb(75, 190, 221);
                   font-family: 'maleGod';
                   font-size: 25px;
-                "
-              >
+                ">
                 {{ item.count }}
               </div>
             </div>
           </div>
           <div id="serviceTwo"></div>
           <div class="selectType">
-            <div
-              v-for="(item, index) in serviceTypeList"
-              :key="index"
-              class="typeName"
-              :class="{ serveiceAction: serviceTypeActive == index }"
-              @click="serviceType(index)"
-            >
+            <div v-for="(item, index) in serviceTypeList" :key="index" class="typeName"
+              :class="{ serveiceAction: serviceTypeActive == index }" @click="serviceType(index)">
               <div>{{ item.name }}</div>
             </div>
           </div>
@@ -261,7 +194,18 @@
       </div>
     </div>
     <div class="middle-content">
-      <div class="middleBottom"></div>
+      <!-- 内容头部 -->
+      <div class="middleTop">
+        <div :class="'top-item' + i" v-for="(n, i) in middleTopList" :key="i">
+          <div style="width:100%;text-align:center;padding-left:61px;box-sizing: border-box;margin-top: 14px;">
+            <p class="item-name">{{ n.name }}</p>
+            <p :class="'item-value' + i">{{ n.num }}</p>
+          </div>
+        </div>
+      </div>
+      <div class="middleBottom">
+
+      </div>
     </div>
   </div>
 </template>
@@ -398,6 +342,29 @@ export default {
           name: "排名",
         },
       ],
+      // 内容头部
+      middleTopList: [
+        {
+          name: '工单总数',
+          num: 1311
+        },
+        {
+          name: '已归档',
+          num: 1076
+        },
+        {
+          name: '代办工单',
+          num: 24
+        },
+        {
+          name: '预受理信息预警',
+          num: 0
+        },
+        {
+          name: '柜台状态',
+          num: '在线'
+        }
+      ]
     };
   },
   mounted() {
@@ -508,7 +475,7 @@ export default {
                   show: true, //开启显示
                   color: "#d8d4d7",
                   position: "top", //在上方显示
-                  formatter: function (res) {},
+                  formatter: function (res) { },
                 },
               },
             },
@@ -634,7 +601,7 @@ export default {
                   show: true, //开启显示
                   color: "#d8d4d7",
                   position: "top", //在上方显示
-                  formatter: function (res) {},
+                  formatter: function (res) { },
                 },
               },
             },
@@ -1599,346 +1566,369 @@ export default {
   display: flex;
   justify-content: space-around;
 }
+
 .left-content,
 .right-content {
-    position: absolute;
-    width: 20.6%;
-    top: 0;
-    height: 100%;
-    /* background-color: aqua; */
-}
-.middle-content{
   position: absolute;
-    width: calc(100% - 41.2%);
-    top: 0;
-    height: 100%;
-    border: 1px solid red;
-    position: relative;
-    .middleBottom{
-      
-    }
+  width: 20.6%;
+  top: 0;
+  height: 100%;
+  /* background-color: aqua; */
 }
+
+.middle-content {
+  position: absolute;
+  width: calc(100% - 41.2%);
+  top: 0;
+  height: 100%;
+  border: 1px solid red;
+  position: relative;
+
+  .middleBottom {}
+}
+
 /* 内容板块背景 */
 .left-content>div,
 .right-content>div {
-    background-image: url(../assets/images/border.png);
-    background-size: 100% 100%;
-    margin-bottom: 5px;
-    padding: 13px;
-    box-sizing: border-box;
+  background-image: url(../assets/images/border.png);
+  background-size: 100% 100%;
+  margin-bottom: 5px;
+  padding: 13px;
+  box-sizing: border-box;
 
-    .hall-box {
-        width: 100%;
-        height: 18.6%;
-        display: flex;
-        margin-bottom: 10px;
-        justify-content: space-between;
-    }
+  .hall-box {
+    width: 100%;
+    height: 18.6%;
+    display: flex;
+    margin-bottom: 10px;
+    justify-content: space-between;
+  }
 
-    .hall-chart {
-        width: 100%;
-        height: 47%;
-    }
+  .hall-chart {
+    width: 100%;
+    height: 47%;
+  }
 
-    .hall-line {
-        .hall-title {
-            display: flex;
-            justify-content: space-between;
-            margin-bottom: 8px;
+  .hall-line {
+    .hall-title {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 8px;
 
-            .span0,
-            .span1 {
-                position: relative;
-                color: #fff;
-                font-size: 14px;
-            }
-
-            .hall-icon span {
-                background-size: 100% 100%;
-
-                display: inline-block;
-            }
-
-            .hall-icon span:nth-child(1) {
-                background-image: url(../assets/images/line-icon.png);
-                width: 17px;
-                height: 14px;
-            }
-
-            .hall-icon span:nth-child(2) {
-                background-image: url(../assets/images/pie-icon.png);
-                width: 16px;
-                height: 16px;
-                margin-left: 7px;
-            }
-
-
-        }
-
-    }
-
-    .chart-title {
-        margin-bottom: 6px;
-    }
-
-    .chart-title span {
-        font-size: 12px;
-        color: #fff;
-        margin-left: 18px;
-    }
-
-    .chart-title span:nth-child(1) {
-        margin-left: 0;
-        color: #1e96d5;
-        border-bottom: 1px solid #1e96d5;
-        // text-decoration: underline;
-    }
-
-    .hall-line span::before {
-        content: attr(text);
-        position: absolute;
-        z-index: 10;
-        bottom: 0;
-        color: rgb(163, 227, 245);
-        -webkit-mask: linear-gradient(to top, rgba(163, 227, 245,0.7), transparent);
-    }
-
-
-    .hall-box .item {
-        width: 48.5%;
-        height: 100%;
-        // background-color: aqua;
-        background-image: url(../assets/images/hall-box.png);
-        padding: 8px 10px 8px;
-        box-sizing: border-box;
+      .span0,
+      .span1 {
         position: relative;
+        color: #fff;
+        font-size: 14px;
+        width: 102px;
+        height: 16px;
+        display: inline-block;
+        
+      }
+      .span0{
+        background-image: url(../assets/images/select-font.png);
+        background-size: 100% 100%;
+      }
+      .span1{
+        background-image: url(../assets/images/default-font.png);
+        background-size: 100% 100%;
+        margin-left: 6px;
+      }
+      .hall-icon span {
+        background-size: 100% 100%;
 
-        .font {
-            font-size: 12px;
-            color: #a5a5af;
-            margin-bottom: 3px;
-        }
+        display: inline-block;
+      }
 
-        .hall-time1,
-        .hall-time0 {
-            font-family: 'maleGod';
-            font-size: 25px;
-            text-align: center;
-            position: absolute;
-            bottom: 5px;
-            width: calc(100% - 16px);
-        }
+      .hall-icon span:nth-child(1) {
+        background-image: url(../assets/images/line-icon.png);
+        width: 17px;
+        height: 14px;
+      }
+
+      .hall-icon span:nth-child(2) {
+        background-image: url(../assets/images/pie-icon.png);
+        width: 16px;
+        height: 16px;
+        margin-left: 7px;
+      }
 
-        .hall-time1 {
-            color: #dfcc4d !important;
-        }
 
-        .hall-time0 {
-            color: #4bbfde;
-        }
     }
+
+  }
+
+  .chart-title {
+    margin-bottom: 6px;
+  }
+
+  .chart-title span {
+    font-size: 12px;
+    color: #fff;
+    margin-left: 18px;
+  }
+
+  .chart-title span:nth-child(1) {
+    margin-left: 0;
+    color: #1e96d5;
+    border-bottom: 1px solid #1e96d5;
+    // text-decoration: underline;
+  }
+
+  .hall-line span::before {
+    content: attr(text);
+    position: absolute;
+    z-index: 10;
+    bottom: 0;
+    color: rgb(163, 227, 245);
+    -webkit-mask: linear-gradient(to top, rgba(163, 227, 245, 0.7), transparent);
+  }
+
+
+  .hall-box .item {
+    width: 48.5%;
+    height: 100%;
+    // background-color: aqua;
+    background-image: url(../assets/images/hall-box.png);
+    padding: 8px 10px 8px;
+    box-sizing: border-box;
+    position: relative;
+
+    .font {
+      font-size: 12px;
+      color: #a5a5af;
+      margin-bottom: 3px;
+    }
+
+    .hall-time1,
+    .hall-time0 {
+      font-family: 'maleGod';
+      font-size: 25px;
+      text-align: center;
+      position: absolute;
+      bottom: 5px;
+      width: calc(100% - 16px);
+    }
+
+    .hall-time1 {
+      color: #dfcc4d !important;
+    }
+
+    .hall-time0 {
+      color: #4bbfde;
+    }
+  }
 }
 
 /* 标题的样式 */
 .left-content>div>.title,
 .right-content>div>.title {
-    width: 100%;
-    background-image: url(../assets/images/border-title.png);
-    height: 30px;
-    background-size: 100% 100%;
-    display: flex;
-    padding-left: 8%;
-    box-sizing: border-box;
-    color: #fff;
-    font-family: 'maleGod';
-    align-items: center;
-    letter-spacing: 1px;
-    margin-bottom: 10px;
+  width: 100%;
+  background-image: url(../assets/images/border-title.png);
+  height: 30px;
+  background-size: 100% 100%;
+  display: flex;
+  padding-left: 8%;
+  box-sizing: border-box;
+  color: #fff;
+  font-family: 'maleGod';
+  align-items: center;
+  letter-spacing: 1px;
+  margin-bottom: 10px;
 }
 
 .titleText:before {
-    content: attr(text);
-    position: absolute;
-    z-index: 10;
-    color: rgb(163, 227, 245);
-    -webkit-mask: linear-gradient(to top, rgb(163, 227, 245), transparent);
+  content: attr(text);
+  position: absolute;
+  z-index: 10;
+  color: rgb(163, 227, 245);
+  -webkit-mask: linear-gradient(to top, rgb(163, 227, 245), transparent);
 }
 
 .left-content .business-hall {
-    height: 38.2%;
+  height: 38.2%;
 
 }
 
 .left-content .passenger-flow {
-    height: 39.7%;
+  height: 39.7%;
+
+  // 客流量图表
+  .flow-chart {
+    width: 100%;
+    height: 50%;
+  }
+
+  .flow-box {
+    height: 25%;
+    width: 100%;
+    background-image: url(../assets/images/flow-box.png);
+    background-size: 100% 100%;
+    padding: 8px 15px 8px;
+    box-sizing: border-box;
+    display: flex;
+    margin-bottom: 10px;
+
+    .flow-left {
+      width: 44%;
+      text-align: center;
+
+      .flow-total {
+        color: #c0c0c4;
+        font-size: 13px;
+        text-align: left;
+      }
+
+      .flow-value {
+        display: inline-block;
+        margin-top: 10px;
+        font-family: maleGod;
+        font-size: 25px;
+        color: #4bbfde;
+      }
+
 
-    // 客流量图表
-    .flow-chart {
-        width: 100%;
-        height: 50%;
     }
 
-    .flow-box {
-        height: 25%;
-        width: 100%;
-        background-image: url(../assets/images/flow-box.png);
-        background-size: 100% 100%;
-        padding: 8px 15px 8px;
-        box-sizing: border-box;
+
+
+    .flow-right {
+      width: 56%;
+      height: 100%;
+      margin-bottom: 10px;
+
+      ul {
+        height: 100%;
+      }
+
+      .flow-item {
+        justify-content: space-between;
         display: flex;
-        margin-bottom: 10px;
+      }
 
-        .flow-left {
-            width: 44%;
-            text-align: center;
+      .up0 {
+        color: #36904c;
+        margin-top: 0 !important;
+      }
 
-            .flow-total {
-                color: #c0c0c4;
-                font-size: 13px;
-                text-align: left;
-            }
+      .up1 {
+        color: #3bbabc;
+      }
 
-            .flow-value {
-                display: inline-block;
-                margin-top: 10px;
-                font-family: maleGod;
-                font-size: 25px;
-                color: #4bbfde;
-            }
+      .up2 {
+        color: #1d62a3;
+      }
 
+      .flow-item span:nth-child(1) {
+        font-family: maleGod;
+        font-size: 20px;
 
+        // margin-top: 3px;
+        i {
+          width: 9px;
+          height: 8px;
+          background-size: 100% 100%;
+          display: inline-block;
+          margin-right: 5px;
         }
 
-
-
-        .flow-right {
-            width: 56%;
-            height: 100%;
-            margin-bottom: 10px;
-
-            ul {
-                height: 100%;
-            }
-
-            .flow-item {
-                justify-content: space-between;
-                display: flex;
-            }
-
-            .up0 {
-                color: #36904c;
-                margin-top: 0 !important;
-            }
-
-            .up1 {
-                color: #3bbabc;
-            }
-
-            .up2 {
-                color: #1d62a3;
-            }
-
-            .flow-item span:nth-child(1) {
-                font-family: maleGod;
-                font-size: 20px;
-                // margin-top: 3px;
-                i{
-                    width: 9px;
-                    height: 8px;
-                    background-size: 100% 100%;
-                    display: inline-block;
-                    margin-right: 5px;
-                }
-                .rect0{
-                    background-image: url(../assets/images/rect-icon1.png);
-                }
-                .rect1{
-                    background-image: url(../assets/images/rect-icon2.png);
-                }
-                .rect2{
-                    background-image: url(../assets/images/rect-icon2.png);
-                }
-            }
-
-            .flow-item {
-                height: 33%;
-            }
-
-            .flow-item span {
-                height: 100%;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                
-
-            }
-
-            .flow-item span:nth-child(2) {
-                font-size: 13px;
-                color: #c0c0c4;
-            }
+        .rect0 {
+          background-image: url(../assets/images/rect-icon1.png);
         }
 
+        .rect1 {
+          background-image: url(../assets/images/rect-icon2.png);
+        }
+
+        .rect2 {
+          background-image: url(../assets/images/rect-icon2.png);
+        }
+      }
+
+      .flow-item {
+        height: 33%;
+      }
+
+      .flow-item span {
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+
+      }
+
+      .flow-item span:nth-child(2) {
+        font-size: 13px;
+        color: #c0c0c4;
+      }
     }
+
+  }
 }
 
 .left-content .hall-statistics {
-    height: 20.4%;
+  height: 20.4%;
 
-    .stat {
-        width: 100%;
-        display: flex;
+  .stat {
+    width: 100%;
+    display: flex;
 
-        .stat-item {
-            width: 33%;
-            .img2{
-                background-image: url(../assets/images/people-icon.png)
-            }
-            .img1{
-                background-image:url(../assets/images/paizi.png)
-            }
-            // display: flex;
-            section {
-                width: 83px;
-                height: 76px;
-                margin: 0 auto;
-                background-image: url(../assets/images/stat-icon.png);
-                background-size: 100% 100%;
-            }
+    .stat-item {
+      width: 33%;
 
-            p {
-                text-align: center;
-                color: #fff;
-            }
+      .img2 {
+        background-image: url(../assets/images/people-icon.png)
+      }
 
-            .stat-num {
-                font-family: 'maleGod';
-                color: #4bbfde !important;
-                font-size: 20px;
-                
-            }
-        }
+      .img1 {
+        background-image: url(../assets/images/paizi.png)
+      }
 
+      // display: flex;
+      section {
+        width: 83px;
+        height: 76px;
+        margin: 0 auto;
+        background-image: url(../assets/images/stat-icon.png);
+        background-size: 100% 100%;
+      }
+
+      p {
+        text-align: center;
+        color: #fff;
+      }
+
+      .stat-num {
+        font-family: 'maleGod';
+        color: #4bbfde !important;
+        font-size: 20px;
+
+      }
     }
+
+  }
 }
 
 @media screen and (min-height:980px) {
-    .stat-num {
-        font-size: 20px;
-        font-family: 'maleGod';
-        // display: inline-block;
-        margin: 4px ;
-        position: relative;
-        // top: 4px;
-    }
+  .stat-num {
+    font-size: 20px;
+    font-family: 'maleGod';
+    // display: inline-block;
+    margin: 4px;
+    position: relative;
+    // top: 4px;
+  }
 }
 
 
 .right-content .payment {
   height: 38.3%;
+
   .paymentContent {
     height: calc(100% - 30px);
     position: relative;
+
     .paymentList {
       width: 100%;
       height: 13.5%;
@@ -1949,12 +1939,14 @@ export default {
       padding-left: 2%;
       box-sizing: border-box;
       margin-top: 2%;
+
       .listOne {
         width: 45%;
         display: flex;
         align-items: center;
         justify-content: flex-start;
       }
+
       .listTwo {
         width: 55%;
         display: flex;
@@ -1962,6 +1954,7 @@ export default {
         align-items: center;
       }
     }
+
     .twoTitle {
       width: 100%;
       height: 13.5%;
@@ -1969,20 +1962,24 @@ export default {
       justify-content: space-between;
       align-items: center;
       color: #fff;
+
       .titleIcon {
         width: 15%;
         display: flex;
         justify-content: space-evenly;
       }
     }
+
     #rightOneXian {
       width: 100%;
       height: calc(100% - 41%);
     }
+
     #rightOneBing {
       width: 100%;
       height: calc(100% - 41%);
     }
+
     .selectType {
       position: absolute;
       width: 48%;
@@ -1990,9 +1987,11 @@ export default {
       top: 42%;
       display: flex;
       justify-content: space-between;
+
       .typeName {
         color: #fff;
       }
+
       .typeNameAction {
         color: rgb(29, 147, 208);
         // text-decoration: underline;
@@ -2005,10 +2004,12 @@ export default {
 
 .right-content .business-acceptance {
   height: 30%;
+
   .title {
     width: 100%;
     display: flex;
     justify-content: space-between;
+
     .titleIcon {
       width: 15%;
       display: flex;
@@ -2016,8 +2017,10 @@ export default {
       margin-bottom: 1%;
     }
   }
+
   .businessContent {
     height: calc(100% - 30px);
+
     .businessList {
       width: 100%;
       height: 18%;
@@ -2028,12 +2031,14 @@ export default {
       padding-left: 2%;
       box-sizing: border-box;
       margin-top: 2%;
+
       .listOne {
         width: 45%;
         display: flex;
         align-items: center;
         justify-content: flex-start;
       }
+
       .listTwo {
         width: 55%;
         display: flex;
@@ -2041,18 +2046,22 @@ export default {
         align-items: center;
       }
     }
+
     .businessChart {
       height: calc(100% - 18%);
       width: 100%;
       display: flex;
+
       #rightBusinessOne {
         width: 100%;
         height: 100%;
       }
+
       #rightBusinessTwo {
         width: 100%;
         height: 100%;
       }
+
       //   .rightBusinessOneList {
       //     width: 50%;
       //     height: 100%;
@@ -2063,15 +2072,18 @@ export default {
 
 .right-content .service {
   height: 30%;
+
   .serviceContent {
     height: calc(100% - 30px);
     width: 100%;
     position: relative;
+
     .serviceOne {
       height: 31%;
       width: 100%;
       display: flex;
       justify-content: space-between;
+
       .serviceList {
         height: 100%;
         width: 31%;
@@ -2083,10 +2095,12 @@ export default {
         justify-content: space-evenly;
       }
     }
+
     #serviceTwo {
       height: calc(100% - 31%);
       width: 100%;
     }
+
     .selectType {
       position: absolute;
       width: 48%;
@@ -2094,9 +2108,11 @@ export default {
       top: 33%;
       display: flex;
       justify-content: space-between;
+
       .typeName {
         color: #fff;
       }
+
       .serveiceAction {
         color: rgb(29, 147, 208);
         // text-decoration: underline;
@@ -2114,4 +2130,63 @@ export default {
 .left-content {
   left: 0;
 }
+
+// 内容头部
+.middleTop {
+  width: 100%;
+  height: 70px;
+  margin-top: 45px;
+  display: flex;
+  justify-content: space-around;
+
+  // background-color: #1d62a3;
+  div {
+    width: 186px;
+    height: 70px;
+    background-size: 100% 100%;
+
+    .item-name {
+      color: #fff;
+      font-family: maleGod;
+      font-size: 14px;
+    }
+
+    .item-value0,
+    .item-value1,
+    .item-value2,
+    .item-value3,
+    .item-value4 {
+      font-size: 25px;
+      font-family: maleGod;
+      margin-top: 7px;
+      color: #4bbfde
+    }
+    .item-value3{
+      color: #ebad22;
+    }
+    .item-value4{
+      color:#2c6e43
+    }
+  }
+
+  .top-item0 {
+    background-image: url(../assets/images/content-icon1.png);
+  }
+
+  .top-item1 {
+    background-image: url(../assets/images/content-icon2.png);
+  }
+
+  .top-item2 {
+    background-image: url(../assets/images/content-icon3.png);
+  }
+
+  .top-item3 {
+    background-image: url(../assets/images/content-icon4.png);
+  }
+
+  .top-item4 {
+    background-image: url(../assets/images/content-icon5.png);
+  }
+}
 </style>
\ No newline at end of file