Compare commits

...

2 Commits

5 changed files with 214 additions and 64 deletions

View File

@ -48,6 +48,23 @@
}
</script>
<style lang='less' scoped>
@keyframes turn {
0% {
border-image: linear-gradient(to right, #003194, #00ffea) 1;
}
25% {
border-image: linear-gradient(to bottom, #003194, #00ffea) 1;
}
50% {
border-image: linear-gradient(to left, #003194, #00ffea) 1;
}
75% {
border-image: linear-gradient(to top, #003194, #00ffea) 1;
}
100% {
border-image: linear-gradient(to right, #003194, #00ffea) 1;
}
}
.top5-content::-webkit-scrollbar {
width: 6px;
/*height: 4px;*/
@ -91,7 +108,7 @@
transition: all 100ms ease-out;
.top {
font-size: 24px;
background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
background: url('~@/assets/capabilityCloud/infrastructure_title.png') no-repeat;
background-size: 100% 100%;
text-align: center;
@ -125,6 +142,10 @@
}
}
}
.platform-overview-bottom:hover {
border: 2px solid;
animation: turn 5s linear infinite;
}
}
</style>

View File

@ -171,6 +171,24 @@ export default {
color: #f4fcfe; border-color: #107bb0;
box-shadow: 1px 1px 5px 1px RGB(16, 123, 176, 0.8) inset
}
@keyframes turn {
0% {
border-image: linear-gradient(to right, #003194, #00ffea) 1;
}
25% {
border-image: linear-gradient(to bottom, #003194, #00ffea) 1;
}
50% {
border-image: linear-gradient(to left, #003194, #00ffea) 1;
}
75% {
border-image: linear-gradient(to top, #003194, #00ffea) 1;
}
100% {
border-image: linear-gradient(to right, #003194, #00ffea) 1;
}
}
.reservoir-survey {
@ -181,7 +199,7 @@ export default {
display: flex;
flex-direction: column;
.platform-overview-top {
width: 100%;
height: 3.8rem;
@ -195,7 +213,7 @@ export default {
transition: all 100ms ease-out;
.top {
font-size: 24px;
background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
background: url('~@/assets/capabilityCloud/infrastructure_title.png') no-repeat;
background-size: 100% 100%;
text-align: center;
}
@ -261,6 +279,13 @@ export default {
}
}
}
.item:hover {
background: linear-gradient(
to bottom,
rgba(33, 54, 88, 0.7),
rgba(33, 54, 88, 0.9)
);
}
.item:nth-of-type(1) {
margin-top: 10px;
.img {
@ -283,6 +308,10 @@ export default {
}
}
}
.platform-overview-top:hover {
border: 2px solid;
animation: turn 5s linear infinite;
}
.platform-overview-mid {
margin-top:20px;
width: 100%;
@ -297,7 +326,7 @@ export default {
transition: all 100ms ease-out;
.top {
font-size: 24px;
background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
background: url('~@/assets/capabilityCloud/infrastructure_title.png') no-repeat;
background-size: 100% 100%;
text-align: center;
margin-bottom: 8px;
@ -334,22 +363,26 @@ export default {
text-align: center;
}
& > span:nth-child(2) {
width: 1.47rem;
width: 1.57rem;
padding-left: 0.05rem;
//text-align: center;
}
& > span:nth-child(3) {
width: 1.47rem;
padding-left: 0.05rem;
// text-align: center;
}
& > span:nth-child(4) {
width: 0.5rem;
padding-left: 0.05rem;
text-align: center;
}
& > span:last-child {
width: 0.8rem;
width: 0.7rem;
color: #1ffefd;
text-align: center;
border-right: 0;
text-align: center;
}
}
& > div:first-child {
@ -360,6 +393,10 @@ export default {
}
}
.platform-overview-mid:hover {
border: 2px solid;
animation: turn 5s linear infinite;
}
.platform-overview-bottom {
margin-top:20px;
width: 100%;
@ -374,7 +411,7 @@ export default {
transition: all 100ms ease-out;
.top {
font-size: 24px;
background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
background: url('~@/assets/capabilityCloud/infrastructure_title.png') no-repeat;
background-size: 100% 100%;
text-align: center;
}
@ -407,6 +444,10 @@ export default {
}
}
.platform-overview-bottom:hover {
border: 2px solid;
animation: turn 5s linear infinite;
}
}
</style>

View File

@ -12,8 +12,8 @@
<div class="left-list">
<div class="left-list1">排行</div>
<div class="left-list2">部门名称</div>
<div class="left-list1">提供资源</div>
<div class="left-list1" style="color: #1ffefd">贡献总量</div>
<div class="left-list1">应用数</div>
<div class="left-list1" style="color: #1ffefd">贡献金额</div>
</div>
<div class="left-list" v-for="(item, index) in top5DistrictList">
<div class="left-list1" v-if="item.img">
@ -31,6 +31,60 @@
</div>
</div>
</div>
<!-- <div class="bottom-item">
<div class="inner-title">
<p style="width: 220px">市级部门审评节省资金排行</p>
</div>
<div class="left-list">
<div class="left-list1">排行</div>
<div class="left-list2">部门名称</div>
<div class="left-list1">应用数</div>
<div class="left-list1" style="color: #1ffefd">贡献金额</div>
</div>
<div class="left-list" v-for="(item, index) in top5DeptFundList">
<div class="left-list1" v-if="item.img">
<img :src="item.img" />
</div>
<div class="left-list1" v-else>{{ index + 1 }}</div>
<a-tooltip>
<template #title>{{ item.deptName }}</template>
<div class="left-list2">{{ item.deptName }}</div>
</a-tooltip>
<div class="left-list1">{{ item.applyCount }}</div>
<div class="left-list1" style="color: #1ffefd">
{{ item.applyPrice }}
</div>
</div>
</div> -->
</div>
<div class="bottom1">
<!-- <div class="bottom-item">
<div class="inner-title">
<p style="width: 220px">市级部门共享贡献资金排行</p>
</div>
<div class="left-list">
<div class="left-list1">排行</div>
<div class="left-list2">部门名称</div>
<div class="left-list1">应用数</div>
<div class="left-list1" style="color: #1ffefd">贡献金额</div>
</div>
<div class="left-list" v-for="(item, index) in top5DistrictList">
<div class="left-list1" v-if="item.img">
<img :src="item.img" />
</div>
<div class="left-list1" v-else>{{ index + 1 }}</div>
<a-tooltip>
<template #title>{{ item.deptName }}</template>
<div class="left-list2">{{ item.deptName }}</div>
</a-tooltip>
<div class="left-list1">{{ item.resourceCount }}</div>
<div class="left-list1" style="color: #1ffefd">
{{ item.applyPrice }}
</div>
</div>
</div> -->
<div class="bottom-item">
<div class="inner-title">
<p style="width: 220px">市级部门审评节省资金排行</p>
@ -38,8 +92,8 @@
<div class="left-list">
<div class="left-list1">排行</div>
<div class="left-list2">部门名称</div>
<div class="left-list1">提供资源</div>
<div class="left-list1" style="color: #1ffefd">贡献总量</div>
<div class="left-list1">应用数</div>
<div class="left-list1" style="color: #1ffefd">贡献金额</div>
</div>
<div class="left-list" v-for="(item, index) in top5DeptFundList">
<div class="left-list1" v-if="item.img">
@ -66,8 +120,8 @@
<div class="left-list">
<div class="left-list1">序号</div>
<div class="left-list2">部门名称</div>
<div class="left-list1">提供资源</div>
<div class="left-list1" style="color: #1ffefd">贡献总量</div>
<div class="left-list1">应用数</div>
<div class="left-list1" style="color: #1ffefd">贡献金额</div>
</div>
<div style="height: 300px; overfolw-y: auto">
<div
@ -97,8 +151,8 @@
<div class="left-list">
<div class="left-list1">序号</div>
<div class="left-list2">部门名称</div>
<div class="left-list1">提供资源</div>
<div class="left-list1" style="color: #1ffefd">贡献总量</div>
<div class="left-list1">应用数</div>
<div class="left-list1" style="color: #1ffefd">贡献金额</div>
</div>
<div style="height: 200px; overfolw-y: auto">
<div
@ -261,6 +315,23 @@ export default {
}
</script>
<style lang='less' scoped>
@keyframes turn {
0% {
border-image: linear-gradient(to right, #003194, #00ffea) 1;
}
25% {
border-image: linear-gradient(to bottom, #003194, #00ffea) 1;
}
50% {
border-image: linear-gradient(to left, #003194, #00ffea) 1;
}
75% {
border-image: linear-gradient(to top, #003194, #00ffea) 1;
}
100% {
border-image: linear-gradient(to right, #003194, #00ffea) 1;
}
}
.top5-content::-webkit-scrollbar {
width: 6px;
/*height: 4px;*/
@ -302,18 +373,20 @@ export default {
transition: all 100ms ease-out;
.top {
font-size: 24px;
background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
background: url('~@/assets/capabilityCloud/infrastructure_title.png') no-repeat;
background-size: 100% 100%;
text-align: center;
}
.bottom1 {
margin-top: 10px;
// margin-top:10px;
width: 100%;
display: table;
justify-content: space-between;
align-items: center;
height: 3.5rem;
height: 1.8rem;
.bottom-item {
width: 98%;
}
}
.bottom2 {
margin-top: 10px;
@ -322,7 +395,10 @@ export default {
display: table;
justify-content: space-between;
align-items: center;
height: 5.6rem;
height: 4.0rem;
.bottom-item {
width: 48%;
}
}
:hover.bottom-item {
@ -331,10 +407,11 @@ export default {
.bottom-item {
height: 100%;
overflow-y: auto;
background: rgba(0, 108, 188, 0.4);
background: rgba(0, 108, 188, 0.2);
border-radius: 2px;
margin: 5px 5px;
width: 48%;
margin: 2px 5px;
border: 1px solid #10496f;
.inner-title {
margin-top: 10px;
margin-bottom: 10px;
@ -362,12 +439,12 @@ export default {
text-align: center;
color: #fff;
width: 100%;
height: 40px;
height: 26px;
margin-right: 10px;
margin-top: 5px;
font-size: 14px;
font-size: 16px;
.left-list1 {
font-size: 14x;
font-size: 16x;
float: left;
width: 22%;
height: 0.32rem;
@ -389,7 +466,7 @@ export default {
-webkit-box-orient: vertical;
word-break: break-all;
cursor: pointer;
font-size: 14px;
font-size: 16px;
float: left;
width: 30%;
&:hover {
@ -408,6 +485,10 @@ export default {
}
}
}
.platform-overview-top:hover {
border: 2px solid;
animation: turn 5s linear infinite;
}
.platform-overview-bottom {
margin-top: 20px;
width: 100%;
@ -422,7 +503,7 @@ export default {
transition: all 100ms ease-out;
.top {
font-size: 24px;
background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
background: url('~@/assets/capabilityCloud/infrastructure_title.png') no-repeat;
background-size: 100% 100%;
text-align: center;
}
@ -454,5 +535,9 @@ export default {
}
}
}
.platform-overview-bottom:hover {
border: 2px solid;
animation: turn 5s linear infinite;
}
}
</style>

View File

@ -362,8 +362,8 @@ export default {
background-size: 100% 100%;
.city-map-content-echarts {
width: 10rem;
height: 8rem;
top: 0px;
height: 7.9rem;
top: 10px;
left: 500px;
bottom: 2rem;
position: absolute;

View File

@ -8,7 +8,7 @@
<span class="title" @click="goHome">城市云脑通用能力服务平台</span>
</div>
<div class="header1">
<div style=" color:#bed1df; font-size: 26px">累计节省财政资金</div>
<div style=" color:#bed1df; font-size: 32px">累计节省财政资金</div>
<div class="area-right">
<!-- <div class="mianJi">累计节省财政资金</div> -->
<template v-for="(item, index) in saveMonmy">
@ -150,40 +150,7 @@ export default {
background: url('~@/assets/capabilityCloud/bg.png') no-repeat;
background-size: 100% 100%;
overflow: hidden;
.area-right {
display: flex;
align-items: center;
justify-items: flex-end;
padding-right: 20px;
color: #bed1df;
margin-left: 100px;
span {
width: 28px;
height: 40px;
line-height: 40px;
background: url("~@/assets/capabilityCloud/num_bg.png")
100% 100%;
background-size: 100%;
text-align: center;
font-size: 28px;
margin-right: 3px;
color: #fff;
font-family: DinPro-Bold;
}
.mianJi {
margin-top: 6px;;
margin-right: 3px;
font-size: 22px;
float:right;
}
p {
height: 34px;
display: flex;
align-items: flex-end;
justify-items: center;
font-size: 30px;
}
}
& > .header {
height: 1.04rem;
text-align: center;
@ -209,6 +176,42 @@ export default {
align-items: center;
z-index: 1004;
text-align: center;
.area-right {
display: flex;
align-items: center;
justify-items: flex-end;
padding-right: 20px;
color: #bed1df;
margin-left: 100px;
span {
width: 36px;
// height: 45px;
// line-height: 45px;
color: #fed93f;
font-weight: bold;
background: url("~@/assets/capabilityCloud/num_bg.png")
100% 100% no-repeat;
background-size: 100%;
text-align: center;
font-size: 34px;
margin-right: 3px;
font-family: DinPro-Bold;
}
.mianJi {
margin-top: 6px;;
margin-right: 3px;
font-size: 22px;
float:right;
}
p {
height: 44px;
display: flex;
align-items: flex-end;
justify-items: center;
font-size: 34px;
}
}
}
//position: relative;