wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

大屏调整

This commit is contained in:
gongjiale 2022-11-28 17:28:05 +08:00
parent 827d871e8d
commit c7487a2442
5 changed files with 214 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
front/src/views/assertReport/components/ReservoirBottom.vue
View File

@ -48,6 +48,23 @@
} }
</script> </script>
<style lang='less' scoped> <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 { .top5-content::-webkit-scrollbar {
width: 6px; width: 6px;
/*height: 4px;*/ /*height: 4px;*/
@ -91,7 +108,7 @@
transition: all 100ms ease-out; transition: all 100ms ease-out;
.top { .top {
font-size: 24px; 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%; background-size: 100% 100%;
text-align: center; text-align: center;
@ -125,6 +142,10 @@
} }
} }
} }
.platform-overview-bottom:hover {
border: 2px solid;
animation: turn 5s linear infinite;
}
} }
</style> </style>

51
front/src/views/assertReport/components/ReservoirLeft.vue
View File

@ -171,6 +171,24 @@ export default {
color: #f4fcfe; border-color: #107bb0; color: #f4fcfe; border-color: #107bb0;
box-shadow: 1px 1px 5px 1px RGB(16, 123, 176, 0.8) inset 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 { .reservoir-survey {
@ -195,7 +213,7 @@ export default {
transition: all 100ms ease-out; transition: all 100ms ease-out;
.top { .top {
font-size: 24px; 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%; background-size: 100% 100%;
text-align: center; 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) { .item:nth-of-type(1) {
margin-top: 10px; margin-top: 10px;
.img { .img {
@ -283,6 +308,10 @@ export default {
} }
} }
} }
.platform-overview-top:hover {
border: 2px solid;
animation: turn 5s linear infinite;
}
.platform-overview-mid { .platform-overview-mid {
margin-top:20px; margin-top:20px;
width: 100%; width: 100%;
@ -297,7 +326,7 @@ export default {
transition: all 100ms ease-out; transition: all 100ms ease-out;
.top { .top {
font-size: 24px; 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%; background-size: 100% 100%;
text-align: center; text-align: center;
margin-bottom: 8px; margin-bottom: 8px;
@ -334,22 +363,26 @@ export default {
text-align: center; text-align: center;
} }
& > span:nth-child(2) { & > span:nth-child(2) {
width: 1.47rem; width: 1.57rem;
padding-left: 0.05rem; padding-left: 0.05rem;
//text-align: center;
} }
& > span:nth-child(3) { & > span:nth-child(3) {
width: 1.47rem; width: 1.47rem;
padding-left: 0.05rem; padding-left: 0.05rem;
// text-align: center;
} }
& > span:nth-child(4) { & > span:nth-child(4) {
width: 0.5rem; width: 0.5rem;
padding-left: 0.05rem; padding-left: 0.05rem;
text-align: center;
} }
& > span:last-child { & > span:last-child {
width: 0.8rem; width: 0.7rem;
color: #1ffefd; color: #1ffefd;
text-align: center; text-align: center;
border-right: 0; border-right: 0;
text-align: center;
} }
} }
& > div:first-child { & > div:first-child {
@ -360,6 +393,10 @@ export default {
} }
} }
.platform-overview-mid:hover {
border: 2px solid;
animation: turn 5s linear infinite;
}
.platform-overview-bottom { .platform-overview-bottom {
margin-top:20px; margin-top:20px;
width: 100%; width: 100%;
@ -374,7 +411,7 @@ export default {
transition: all 100ms ease-out; transition: all 100ms ease-out;
.top { .top {
font-size: 24px; 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%; background-size: 100% 100%;
text-align: center; text-align: center;
} }
@ -407,6 +444,10 @@ export default {
} }
} }
.platform-overview-bottom:hover {
border: 2px solid;
animation: turn 5s linear infinite;
}
} }
</style> </style>

125
front/src/views/assertReport/components/ReservoirRight.vue
View File

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

4
front/src/views/assertReport/components/ReservoirThumbnail.vue
View File

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

73
front/src/views/assertReport/index.vue
View File

@ -8,7 +8,7 @@
<span class="title" @click="goHome">城市云脑通用能力服务平台</span> <span class="title" @click="goHome">城市云脑通用能力服务平台</span>
</div> </div>
<div class="header1"> <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="area-right">
<!-- <div class="mianJi">累计节省财政资金</div> --> <!-- <div class="mianJi">累计节省财政资金</div> -->
<template v-for="(item, index) in saveMonmy"> <template v-for="(item, index) in saveMonmy">
@ -150,40 +150,7 @@ export default {
background: url('~@/assets/capabilityCloud/bg.png') no-repeat; background: url('~@/assets/capabilityCloud/bg.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
overflow: hidden; 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 { & > .header {
height: 1.04rem; height: 1.04rem;
text-align: center; text-align: center;
@ -209,6 +176,42 @@ export default {
align-items: center; align-items: center;
z-index: 1004; z-index: 1004;
text-align: center; 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; //position: relative;