代码提交

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",

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,6 +194,15 @@
       </div>
     </div>
     <div class="middle-content">
+      <!-- 内容头部 -->
+      <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 class="menuBtn"  :class="{'menuBtn1' : menuAc == index}" v-for="(item,index) in menu" :key="index" @click="handelBtn(index)">
           <img :src="item.icon"/>
@@ -278,7 +220,6 @@ export default {
   name: "index",
   data() {
     return {
-      menuAc:0,
       hallList: [
         {
           font: "平均办理时长",
@@ -406,6 +347,29 @@ export default {
           name: "排名",
         },
       ],
+      // 内容头部
+      middleTopList: [
+        {
+          name: '工单总数',
+          num: 1311
+        },
+        {
+          name: '已归档',
+          num: 1076
+        },
+        {
+          name: '代办工单',
+          num: 24
+        },
+        {
+          name: '预受理信息预警',
+          num: 0
+        },
+        {
+          name: '柜台状态',
+          num: '在线'
+        }
+      ],
       menu:[
         {
           icon: require("@/assets/images/zongti.png")
@@ -546,7 +510,7 @@ export default {
                   show: true, //开启显示
                   color: "#d8d4d7",
                   position: "top", //在上方显示
-                  formatter: function (res) {},
+                  formatter: function (res) { },
                 },
               },
             },
@@ -672,7 +636,7 @@ export default {
                   show: true, //开启显示
                   color: "#d8d4d7",
                   position: "top", //在上方显示
-                  formatter: function (res) {},
+                  formatter: function (res) { },
                 },
               },
             },
@@ -1637,15 +1601,16 @@ 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{
+
+.middle-content {
   position: absolute;
     width: calc(100% - 41.2%);
     top: 0;
@@ -1681,6 +1646,7 @@ export default {
           bottom: -37px; 
     }
 }
+
 /* 内容板块背景 */
 .left-content>div,
 .right-content>div {
@@ -1714,8 +1680,20 @@ export default {
         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%;
 
@@ -1763,7 +1741,7 @@ export default {
     z-index: 10;
     bottom: 0;
     color: rgb(163, 227, 245);
-        -webkit-mask: linear-gradient(to top, rgba(163, 227, 245,0.7), transparent);
+    -webkit-mask: linear-gradient(to top, rgba(163, 227, 245, 0.7), transparent);
   }
 
 
@@ -1904,21 +1882,25 @@ export default {
       .flow-item span:nth-child(1) {
         font-family: maleGod;
         font-size: 20px;
+
         // margin-top: 3px;
-                i{
+        i {
           width: 9px;
           height: 8px;
           background-size: 100% 100%;
           display: inline-block;
           margin-right: 5px;
         }
-                .rect0{
+
+        .rect0 {
           background-image: url(../assets/images/rect-icon1.png);
         }
-                .rect1{
+
+        .rect1 {
           background-image: url(../assets/images/rect-icon2.png);
         }
-                .rect2{
+
+        .rect2 {
           background-image: url(../assets/images/rect-icon2.png);
         }
       }
@@ -1954,12 +1936,15 @@ export default {
 
     .stat-item {
       width: 33%;
-            .img2{
+
+      .img2 {
         background-image: url(../assets/images/people-icon.png)
       }
-            .img1{
-                background-image:url(../assets/images/paizi.png)
+
+      .img1 {
+        background-image: url(../assets/images/paizi.png)
       }
+
       // display: flex;
       section {
         width: 83px;
@@ -1990,7 +1975,7 @@ export default {
     font-size: 20px;
     font-family: 'maleGod';
     // display: inline-block;
-        margin: 4px ;
+    margin: 4px;
     position: relative;
     // top: 4px;
   }
@@ -1999,9 +1984,11 @@ export default {
 
 .right-content .payment {
   height: 38.3%;
+
   .paymentContent {
     height: calc(100% - 30px);
     position: relative;
+
     .paymentList {
       width: 100%;
       height: 13.5%;
@@ -2012,12 +1999,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;
@@ -2025,6 +2014,7 @@ export default {
         align-items: center;
       }
     }
+
     .twoTitle {
       width: 100%;
       height: 13.5%;
@@ -2032,31 +2022,36 @@ 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%;
-      height: 6.5%;
+      height: 8.5%;
       top: 42%;
       display: flex;
       justify-content: space-between;
+
       .typeName {
         color: #fff;
-        font-size: 12px;
       }
+
       .typeNameAction {
         color: rgb(29, 147, 208);
         // text-decoration: underline;
@@ -2069,10 +2064,12 @@ export default {
 
 .right-content .business-acceptance {
   height: 30%;
+
   .title {
     width: 100%;
     display: flex;
     justify-content: space-between;
+
     .titleIcon {
       width: 15%;
       display: flex;
@@ -2080,8 +2077,10 @@ export default {
       margin-bottom: 1%;
     }
   }
+
   .businessContent {
     height: calc(100% - 30px);
+
     .businessList {
       width: 100%;
       height: 18%;
@@ -2092,12 +2091,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;
@@ -2105,18 +2106,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%;
@@ -2127,15 +2132,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%;
@@ -2147,25 +2155,28 @@ export default {
         justify-content: space-evenly;
       }
     }
+
     #serviceTwo {
       height: calc(100% - 31%);
       width: 100%;
     }
+
     .selectType {
       position: absolute;
       width: 48%;
-      height: 10%;
+      height: 12%;
       top: 33%;
       display: flex;
       justify-content: space-between;
+
       .typeName {
         color: #fff;
-        font-size: 12px;
       }
+
       .serveiceAction {
         color: rgb(29, 147, 208);
         // text-decoration: underline;
-        padding-bottom: 1px;
+        padding-bottom: 3px;
         border-bottom: 1px solid rgb(29, 147, 208);
       }
     }
@@ -2179,4 +2190,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>