352 lines
9.9 KiB
Vue
352 lines
9.9 KiB
Vue
|
|
||
|
|
<template>
|
||
|
|
<div class="right-survey">
|
||
|
|
<!--最上面 部门排行榜-->
|
||
|
|
<div class="platform-overview-top">
|
||
|
|
<div class="top"><span class="title">部门排行榜</span></div>
|
||
|
|
<div class="bottom">
|
||
|
|
<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">贡献总量</div>
|
||
|
|
</div>
|
||
|
|
<div class="left-list" v-for="item in top5AreaList">
|
||
|
|
<div class="left-list1" v-if="item.img">
|
||
|
|
<img :src="item.img" />
|
||
|
|
</div>
|
||
|
|
<div class="left-list1" v-else>{{ item.name }}</div>
|
||
|
|
<div
|
||
|
|
:class="selectArea === item.areaId ? 'active-item' : 'left-list2'"
|
||
|
|
@click="chooseSelectArea(item)"
|
||
|
|
>
|
||
|
|
{{ item.areaName }}
|
||
|
|
</div>
|
||
|
|
<div class="left-list1">{{ item.num }}</div>
|
||
|
|
<div class="left-list1">{{ item.num }}</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">贡献总量</div>
|
||
|
|
</div>
|
||
|
|
<div class="left-list" v-for="item in top5AreaList">
|
||
|
|
<div class="left-list1" v-if="item.img">
|
||
|
|
<img :src="item.img" />
|
||
|
|
</div>
|
||
|
|
<div class="left-list1" v-else>{{ item.name }}</div>
|
||
|
|
<div
|
||
|
|
:class="selectArea === item.areaId ? 'active-item' : 'left-list2'"
|
||
|
|
@click="chooseSelectArea(item)"
|
||
|
|
>
|
||
|
|
{{ item.areaName }}
|
||
|
|
</div>
|
||
|
|
<div class="left-list1">{{ item.num }}</div>
|
||
|
|
<div class="left-list1">{{ item.num }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bottom">
|
||
|
|
<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">贡献总量</div>
|
||
|
|
</div>
|
||
|
|
<div class="left-list" v-for="item in top5AreaList">
|
||
|
|
<div class="left-list1" v-if="item.img">
|
||
|
|
<img :src="item.img" />
|
||
|
|
</div>
|
||
|
|
<div class="left-list1" v-else>{{ item.name }}</div>
|
||
|
|
<div
|
||
|
|
:class="selectArea === item.areaId ? 'active-item' : 'left-list2'"
|
||
|
|
@click="chooseSelectArea(item)"
|
||
|
|
>
|
||
|
|
{{ item.areaName }}
|
||
|
|
</div>
|
||
|
|
<div class="left-list1">{{ item.num }}</div>
|
||
|
|
<div class="left-list1">{{ item.num }}</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">贡献总量</div>
|
||
|
|
</div>
|
||
|
|
<div class="left-list" v-for="item in top5AreaList">
|
||
|
|
<div class="left-list1" v-if="item.img">
|
||
|
|
<img :src="item.img" />
|
||
|
|
</div>
|
||
|
|
<div class="left-list1" v-else>{{ item.name }}</div>
|
||
|
|
<div
|
||
|
|
:class="selectArea === item.areaId ? 'active-item' : 'left-list2'"
|
||
|
|
@click="chooseSelectArea(item)"
|
||
|
|
>
|
||
|
|
{{ item.areaName }}
|
||
|
|
</div>
|
||
|
|
<div class="left-list1">{{ item.num }}</div>
|
||
|
|
<div class="left-list1">{{ item.num }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="platform-overview-bottom">
|
||
|
|
<div class="top"><span class="title">资源汇聚总量</span></div>
|
||
|
|
<div class="bottom">
|
||
|
|
<div
|
||
|
|
v-for="(item, index) in servicesSnum"
|
||
|
|
:key="index"
|
||
|
|
class="component-services-content-right-left-content-son"
|
||
|
|
>
|
||
|
|
<p>{{ item.type }}</p>
|
||
|
|
<p class="num">{{ item.amount }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
//import引入的组件需要注入到对象中才能使用
|
||
|
|
components: {},
|
||
|
|
created() {},
|
||
|
|
destroyed() {},
|
||
|
|
|
||
|
|
mounted() {},
|
||
|
|
data() {
|
||
|
|
//这里存放数据
|
||
|
|
return {
|
||
|
|
top5AreaList: [
|
||
|
|
{
|
||
|
|
title: 'TOP1',
|
||
|
|
img: require('../image/one.png'),
|
||
|
|
areaName: '台东商圈',
|
||
|
|
areaId: '1',
|
||
|
|
num: '12',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'TOP2',
|
||
|
|
img: require('../image/two.png'),
|
||
|
|
areaName: '李村商圈',
|
||
|
|
areaId: '2',
|
||
|
|
num: '8',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'TOP3',
|
||
|
|
img: require('../image/three.png'),
|
||
|
|
areaName: '五四广场',
|
||
|
|
areaId: '3',
|
||
|
|
num: '7',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '4',
|
||
|
|
img: require('../image/four.png'),
|
||
|
|
areaName: '第一海水浴场',
|
||
|
|
areaId: '4',
|
||
|
|
num: '5',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '5',
|
||
|
|
img: require('../image/five.png'),
|
||
|
|
areaName: '石老人海水浴场',
|
||
|
|
areaId: '5',
|
||
|
|
num: '4',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
servicesSnum: [
|
||
|
|
{ type: '组件服务', amount: 124 },
|
||
|
|
{ type: '应用资源', amount: 34244 },
|
||
|
|
{ type: '基础设施', amount: 125555 },
|
||
|
|
{ type: '数据资源', amount: 5555 },
|
||
|
|
],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang='less' scoped>
|
||
|
|
.top5-content::-webkit-scrollbar {
|
||
|
|
width: 6px;
|
||
|
|
/*height: 4px;*/
|
||
|
|
}
|
||
|
|
|
||
|
|
.top5-content::-webkit-scrollbar-thumb {
|
||
|
|
background-color: #00deff;
|
||
|
|
}
|
||
|
|
.map-search-result::-webkit-scrollbar-track,
|
||
|
|
.top5-content::-webkit-scrollbar-track {
|
||
|
|
background-color: #424748;
|
||
|
|
}
|
||
|
|
@keyframes topup50 {
|
||
|
|
from {
|
||
|
|
top: 50%;
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
top: -100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.right-survey {
|
||
|
|
width: 620px;
|
||
|
|
height: 100%;
|
||
|
|
color: #f0fafa;
|
||
|
|
font-size: 18px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
.platform-overview-top {
|
||
|
|
width: 100%;
|
||
|
|
height: 7rem;
|
||
|
|
background: rgba(0, 108, 188, 0.2);
|
||
|
|
border-radius: 2px;
|
||
|
|
border: 1px solid rgba(0, 108, 188, 0.7);
|
||
|
|
text-decoration: none;
|
||
|
|
outline: none;
|
||
|
|
-webkit-transition: all 100ms ease-out;
|
||
|
|
-moz-transition: all 100ms ease-out;
|
||
|
|
transition: all 100ms ease-out;
|
||
|
|
.top {
|
||
|
|
font-size: 24px;
|
||
|
|
background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.bottom {
|
||
|
|
margin-top: 20px;
|
||
|
|
// margin-top:10px;
|
||
|
|
width: 100%;
|
||
|
|
display: table;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.bottom-item {
|
||
|
|
border:1px solid;
|
||
|
|
.inner-title {
|
||
|
|
margin-top: 10px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
margin-left: 4px;
|
||
|
|
|
||
|
|
font-weight: bold;
|
||
|
|
color: #ffffff;
|
||
|
|
p {
|
||
|
|
font-size: 16px;
|
||
|
|
line-height: 27px;
|
||
|
|
background: linear-gradient(
|
||
|
|
90deg,
|
||
|
|
#0873c1 0,
|
||
|
|
rgba(8, 115, 193, 0) 100%
|
||
|
|
);
|
||
|
|
color: #1ffefd;
|
||
|
|
width: auto;
|
||
|
|
padding-left: 5px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
text-align: center;
|
||
|
|
display: table-cell;
|
||
|
|
width: 50%;
|
||
|
|
height: 3rem;
|
||
|
|
.left-list {
|
||
|
|
text-align: center;
|
||
|
|
color: #fff;
|
||
|
|
width: 100%;
|
||
|
|
height: 24px;
|
||
|
|
margin-left: 4px;
|
||
|
|
margin-top: 5px;
|
||
|
|
font-size: 14px;
|
||
|
|
.left-list1 {
|
||
|
|
font-size: 14x;
|
||
|
|
float: left;
|
||
|
|
width: 20%;
|
||
|
|
}
|
||
|
|
.left-list2 {
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 14px;
|
||
|
|
float: left;
|
||
|
|
width: 40%;
|
||
|
|
&:hover {
|
||
|
|
color: rgb(0 255 255);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.active-item {
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 14px;
|
||
|
|
float: left;
|
||
|
|
width: 40%;
|
||
|
|
color: rgb(0 255 255);
|
||
|
|
font-weight: bold;
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.platform-overview-bottom {
|
||
|
|
margin-top: 20px;
|
||
|
|
width: 100%;
|
||
|
|
height: 2rem;
|
||
|
|
background: rgba(0, 108, 188, 0.2);
|
||
|
|
border-radius: 2px;
|
||
|
|
border: 1px solid rgba(0, 108, 188, 0.7);
|
||
|
|
text-decoration: none;
|
||
|
|
outline: none;
|
||
|
|
-webkit-transition: all 100ms ease-out;
|
||
|
|
-moz-transition: all 100ms ease-out;
|
||
|
|
transition: all 100ms ease-out;
|
||
|
|
.top {
|
||
|
|
font-size: 24px;
|
||
|
|
background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.bottom {
|
||
|
|
margin-top: 20px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0.2rem;
|
||
|
|
.component-services-content-right-left-content-son {
|
||
|
|
background: url('~@/assets/capabilityCloud/Component_services_snum.png')
|
||
|
|
no-repeat;
|
||
|
|
background-size: 1.1rem 0.59rem;
|
||
|
|
background-position: center;
|
||
|
|
text-align: center;
|
||
|
|
& > p:first-child {
|
||
|
|
color: #ffffff;
|
||
|
|
font-size: 0.16rem;
|
||
|
|
line-height: 0.16rem;
|
||
|
|
margin-bottom: 0.12rem;
|
||
|
|
}
|
||
|
|
& > p:last-child {
|
||
|
|
color: #1ef6f5;
|
||
|
|
font-size: 0.28rem;
|
||
|
|
line-height: 0.28rem;
|
||
|
|
padding-bottom: 0.24rem;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|