Compare commits
No commits in common. "bd7259b9f7ac52d17e999c85583659b4c2d077b6" and "b0782aae97087a15ceba61ade46e9c14107e39d3" have entirely different histories.
bd7259b9f7
...
b0782aae97
|
|
@ -1860,29 +1860,6 @@
|
|||
"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": {
|
||||
|
|
@ -2032,6 +2009,27 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"@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",
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 995 B |
|
|
@ -21,8 +21,13 @@
|
|||
<div class="hall-line">
|
||||
<div class="hall-title">
|
||||
<div>
|
||||
<span style="font-family: 'maleGod'" v-for="(s, i) in hallTitle" :class="'span' + i">
|
||||
|
||||
<span
|
||||
style="font-family: 'maleGod'"
|
||||
:text="s"
|
||||
v-for="(s, i) in hallTitle"
|
||||
:class="'span' + i"
|
||||
>
|
||||
{{ s }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="hall-icon">
|
||||
|
|
@ -55,7 +60,9 @@
|
|||
<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>
|
||||
|
|
@ -95,35 +102,64 @@
|
|||
</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>
|
||||
|
|
@ -136,21 +172,41 @@
|
|||
业务受理
|
||||
</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" />
|
||||
|
|
@ -172,21 +228,32 @@
|
|||
</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>
|
||||
|
|
@ -194,15 +261,6 @@
|
|||
</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"/>
|
||||
|
|
@ -220,6 +278,7 @@ export default {
|
|||
name: "index",
|
||||
data() {
|
||||
return {
|
||||
menuAc:0,
|
||||
hallList: [
|
||||
{
|
||||
font: "平均办理时长",
|
||||
|
|
@ -347,29 +406,6 @@ 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")
|
||||
|
|
@ -1601,15 +1637,14 @@ 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%);
|
||||
|
|
@ -1646,7 +1681,6 @@ export default {
|
|||
bottom: -37px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 内容板块背景 */
|
||||
.left-content>div,
|
||||
.right-content>div {
|
||||
|
|
@ -1680,20 +1714,8 @@ 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%;
|
||||
|
||||
|
|
@ -1882,7 +1904,6 @@ export default {
|
|||
.flow-item span:nth-child(1) {
|
||||
font-family: maleGod;
|
||||
font-size: 20px;
|
||||
|
||||
// margin-top: 3px;
|
||||
i{
|
||||
width: 9px;
|
||||
|
|
@ -1891,15 +1912,12 @@ 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);
|
||||
}
|
||||
|
|
@ -1936,15 +1954,12 @@ 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;
|
||||
|
|
@ -1984,11 +1999,9 @@ export default {
|
|||
|
||||
.right-content .payment {
|
||||
height: 38.3%;
|
||||
|
||||
.paymentContent {
|
||||
height: calc(100% - 30px);
|
||||
position: relative;
|
||||
|
||||
.paymentList {
|
||||
width: 100%;
|
||||
height: 13.5%;
|
||||
|
|
@ -1999,14 +2012,12 @@ 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;
|
||||
|
|
@ -2014,7 +2025,6 @@ export default {
|
|||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.twoTitle {
|
||||
width: 100%;
|
||||
height: 13.5%;
|
||||
|
|
@ -2022,36 +2032,31 @@ 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: 8.5%;
|
||||
height: 6.5%;
|
||||
top: 42%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.typeName {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.typeNameAction {
|
||||
color: rgb(29, 147, 208);
|
||||
// text-decoration: underline;
|
||||
|
|
@ -2064,12 +2069,10 @@ export default {
|
|||
|
||||
.right-content .business-acceptance {
|
||||
height: 30%;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.titleIcon {
|
||||
width: 15%;
|
||||
display: flex;
|
||||
|
|
@ -2077,10 +2080,8 @@ export default {
|
|||
margin-bottom: 1%;
|
||||
}
|
||||
}
|
||||
|
||||
.businessContent {
|
||||
height: calc(100% - 30px);
|
||||
|
||||
.businessList {
|
||||
width: 100%;
|
||||
height: 18%;
|
||||
|
|
@ -2091,14 +2092,12 @@ 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;
|
||||
|
|
@ -2106,22 +2105,18 @@ 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%;
|
||||
|
|
@ -2132,18 +2127,15 @@ 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%;
|
||||
|
|
@ -2155,28 +2147,25 @@ export default {
|
|||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
#serviceTwo {
|
||||
height: calc(100% - 31%);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.selectType {
|
||||
position: absolute;
|
||||
width: 48%;
|
||||
height: 12%;
|
||||
height: 10%;
|
||||
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: 3px;
|
||||
padding-bottom: 1px;
|
||||
border-bottom: 1px solid rgb(29, 147, 208);
|
||||
}
|
||||
}
|
||||
|
|
@ -2190,63 +2179,4 @@ 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>
|
||||
Loading…
Reference in New Issue