<template>
|
<div class="project-category">
|
<div class="content">
|
|
<div
|
:class="i % 2 ? 'rank2' : 'rank1'"
|
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">
|
<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 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: 100%;
|
background: url("~@/assets/img/Screen/projectBg.png") center center;
|
background-size: 330px 227px;
|
.content {
|
position: relative;
|
display: flex;
|
flex-wrap: wrap;
|
margin: 0 auto;
|
height: 90%;
|
justify-content: space-between;
|
.rank1, .rank2 {
|
// box-sizing: border-box;
|
// display: flex;
|
// flex-direction: column;
|
// width: 160px;
|
// flex: 1;
|
height: 25px;
|
// align-items: end;
|
|
.num {
|
color: #839ecb;
|
}
|
.name {
|
// margin: 6px;
|
color: #fff;
|
}
|
.bar {
|
width: 61px;
|
height: 3px;
|
// background: url("~@/assets/img/Screen/leftBar.png");
|
// background-size: 100% 100%;
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
.rank1 {
|
width: 35%;
|
display: flex;
|
flex-direction: column;
|
align-items: end;
|
text-align: right;
|
}
|
.rank2 {
|
width: 35%;
|
display: flex;
|
flex-direction: column;
|
align-items: start;
|
text-align: left;
|
}
|
}
|
}
|
</style>
|
