<template>
|
<div class="project-category">
|
<div class="content">
|
<div
|
:class="'rank' + i"
|
class="rank"
|
v-for="(item, i) in datalist.slice(0, 8)"
|
:key="item.projtype"
|
>
|
<div class="num">{{ item.count }}个</div>
|
<div class="name">{{ item.projtype }}</div>
|
<div class="bar"></div>
|
</div>
|
|
<!-- <div class="rank rank2">
|
<div class="num">2个</div>
|
<div class="name">储气库工程</div>
|
<div class="bar">
|
<img src="~@/assets/img/Screen/leftBar.png" alt="">
|
</div>
|
</div>
|
<div class="rank rank3">
|
<div class="num">2个</div>
|
<div class="name">储气库工程</div>
|
<div class="bar">
|
<img src="~@/assets/img/Screen/leftBar.png" alt="">
|
</div>
|
</div>
|
<div class="rank rank4">
|
<div class="num">2个</div>
|
<div class="name">储气库工程</div>
|
<div class="bar">
|
<img src="~@/assets/img/Screen/leftBar.png" alt="">
|
</div>
|
</div>
|
<div class="rank rank1">
|
<div class="num">2个</div>
|
<div class="name">储气库工程</div>
|
<div class="bar">
|
<img src="~@/assets/img/Screen/leftBar.png" alt="">
|
</div>
|
</div>
|
<div class="rank rank2">
|
<div class="num">2个</div>
|
<div class="name">储气库工程</div>
|
<div class="bar">
|
<img src="~@/assets/img/Screen/leftBar.png" alt="">
|
</div>
|
</div> -->
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { countProjectCategory } from "@/api/screen.js"
|
export default {
|
data() {
|
return {
|
datalist: [],
|
}
|
},
|
created() {
|
this.initData()
|
},
|
methods: {
|
async initData() {
|
const res = await countProjectCategory()
|
if (res.code == 200) {
|
this.datalist = res.result
|
}
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.project-category {
|
position: relative;
|
width: 100%;
|
height: calc(100% - 30px);
|
background: url("~@/assets/img/Screen/projectBg.png") center center;
|
background-size: 100% 100%;
|
|
.content {
|
display: flex;
|
flex-direction: row;
|
flex-wrap: wrap;
|
align-items: center;
|
justify-content: space-between;
|
width: 100%;
|
// height: 85%;
|
height: 100%;
|
|
.rank {
|
width: 35%;
|
display: flex;
|
flex-direction: column;
|
div {
|
margin: 2px 0px;
|
}
|
.num {
|
color: #839ecb;
|
font-size: 12px;
|
}
|
.name {
|
color: #fff;
|
font-size: 12px;
|
}
|
|
.bar {
|
width: 61px;
|
height: 3px;
|
background-image: url(../../assets/img/Screen/leftBar.png);
|
background-size: 100% 100%;
|
}
|
}
|
|
.rank0,
|
.rank6 {
|
width: 35%;
|
display: flex;
|
flex-direction: column;
|
align-items: flex-end;
|
text-align: right;
|
}
|
|
.rank1,
|
.rank7 {
|
width: 35%;
|
display: flex;
|
flex-direction: column;
|
align-items: flex-start;
|
text-align: left;
|
}
|
|
.rank2,
|
.rank4 {
|
width: 35%;
|
display: flex;
|
flex-direction: column;
|
justify-items: flex-end;
|
|
div {
|
width: 80%;
|
display: flex;
|
justify-content: flex-end;
|
align-items: flex-end;
|
}
|
.bar {
|
margin-left: calc(80% - 61px);
|
}
|
}
|
|
.rank3,
|
.rank5 {
|
width: 35%;
|
display: flex;
|
flex-direction: column;
|
justify-items: flex-end;
|
|
div {
|
margin-left: 20%;
|
width: 80%;
|
align-items: flex-end;
|
text-align: left;
|
|
.bar {
|
display: flex;
|
align-items: center;
|
justify-items: flex-end;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
