代码提交

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
+              <span style="font-family: 'maleGod'"  v-for="(s, i) in hallTitle" :class="'span' + i">
-                style="font-family: 'maleGod'"
+                
-                :text="s"
-                v-for="(s, i) in hallTitle"
-                :class="'span' + i"
-              >
-                {{ s }}
               </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"
+                <span :class="'up' + i"><i :class="'rect' + i"></i>{{ val.value }}</span>
-                  ><i :class="'rect' + i"></i>{{ val.value }}</span
-                >
                 <span>{{ val.text }}</span>
               </li>
             </ul>
@@ -102,64 +95,35 @@
           </p>
         </div>
         <div class="paymentContent">
-          <div
+          <div class="paymentList" v-for="(item, index) in paymentList" :key="index">
-            class="paymentList"
-            v-for="(item, index) in paymentList"
-            :key="index"
-          >
             <div class="listOne">
-              <img
+              <img src="../assets/images/paymentYuan.png" style="width: 18px; height: 18px" />
-                src="../assets/images/paymentYuan.png"
+              <div style="margin-left: 5%; color: #ffffff; font-family: 'maleGod'">
-                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
+              <div :style="{ color: item.color }" style="font-family: 'maleGod'">
-                :style="{ color: item.color }"
-                style="font-family: 'maleGod'"
-              >
                 {{ item.per }}
               </div>
               <img :src="item.icon" />
             </div>
           </div>
           <div class="twoTitle">
-            <p
+            <p class="titleText" text="缴费情况分布" style="font-family: 'maleGod'">
-              class="titleText"
-              text="缴费情况分布"
-              style="font-family: 'maleGod'"
-            >
               缴费情况分布
             </p>
             <div class="titleIcon">
-              <img
+              <img src="../assets/images/xianxing.png" style="width: 17px; height: 14px" @click="handelXian" />
-                src="../assets/images/xianxing.png"
+              <img src="../assets/images/bingzhuang.png" style="width: 16px; height: 16px" @click="handelBing" />
-                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
+            <div v-for="(item, index) in paymentTypeList" :key="index" class="typeName"
-              v-for="(item, index) in paymentTypeList"
+              :class="{ typeNameAction: typeActive == index }" @click="paymentType(index)">
-              :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
+            <img src="../assets/images/xianxing.png" style="width: 17px; height: 14px" @click="businessXian" />
-              src="../assets/images/xianxing.png"
+            <img src="../assets/images/bingzhuang.png" style="width: 16px; height: 16px" @click="businessBing" />
-              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
+          <div class="businessList" v-for="(item, index) in businessList" :key="index">
-            class="businessList"
-            v-for="(item, index) in businessList"
-            :key="index"
-          >
             <div class="listOne">
-              <img
+              <img src="../assets/images/paymentYuan.png" style="width: 18px; height: 18px" />
-                src="../assets/images/paymentYuan.png"
+              <div style="margin-left: 5%; color: #ffffff; font-family: 'maleGod'">
-                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
+              <div :style="{ color: item.color }" style="font-family: 'maleGod'">
-                :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
+            <div v-for="(item, idnex) in serviceList" :key="index" class="serviceList">
-              v-for="(item, idnex) in serviceList"
-              :key="index"
-              class="serviceList"
-            >
               <div style="color: rgb(182, 182, 190)">{{ item.name }}</div>
-              <div
+              <div style="
-                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
+            <div v-for="(item, index) in serviceTypeList" :key="index" class="typeName"
-              v-for="(item, index) in serviceTypeList"
+              :class="{ serveiceAction: serviceTypeActive == index }" @click="serviceType(index)">
-              :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() {
@@ -1599,6 +1566,7 @@ export default {
   display: flex;
   justify-content: space-around;
 }
+
 .left-content,
 .right-content {
   position: absolute;
@@ -1607,6 +1575,7 @@ export default {
   height: 100%;
   /* background-color: aqua; */
 }
+
 .middle-content {
   position: absolute;
   width: calc(100% - 41.2%);
@@ -1614,10 +1583,10 @@ export default {
   height: 100%;
   border: 1px solid red;
   position: relative;
-    .middleBottom{
 
+  .middleBottom {}
 }
-}
+
 /* 内容板块背景 */
 .left-content>div,
 .right-content>div {
@@ -1651,8 +1620,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%;
 
@@ -1841,6 +1822,7 @@ export default {
       .flow-item span:nth-child(1) {
         font-family: maleGod;
         font-size: 20px;
+
         // margin-top: 3px;
         i {
           width: 9px;
@@ -1849,12 +1831,15 @@ export default {
           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);
         }
@@ -1891,12 +1876,15 @@ export default {
 
     .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;
@@ -1936,9 +1924,11 @@ export default {
 
 .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>