<template>
|
<div class="sunshine">
|
<div class="title">
|
<span>阳关三农</span>
|
<img src="../../../assets/img/zonlan (9).png" alt="" />
|
</div>
|
<div class="content">
|
<div class="top">
|
<ul>
|
<li v-for="item in listData">
|
<p class="title">{{ item.name }}</p>
|
<p class="msg">
|
本年度:{{ item.total }} 累计:{{ item.thisyear }}
|
</p>
|
</li>
|
</ul>
|
</div>
|
<div class="bottom">
|
<ul>
|
<li v-for="item in listbottom">
|
<p class="title">{{ item.name }}</p>
|
<p class="msg">
|
本年度:{{ item.total }}  累计:{{ item.thisyear }}
|
</p>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
data() {
|
//这里存放数据
|
return {
|
listData: [],
|
listbottom: [],
|
};
|
},
|
//方法集合
|
created() {},
|
mounted() {
|
this.drawline();
|
},
|
methods: {
|
async drawline() {
|
var value1 = [];
|
var value2 = [];
|
const { data: dt } = await this.$http.get(
|
"/jeecg-boot/agriculture/agriculture/queryall"
|
);
|
var valueData = dt.result;
|
for (var i in valueData) {
|
if (
|
valueData[i].name == "补贴项目" ||
|
valueData[i].name == "发放人次" ||
|
valueData[i].name == "发放金额"
|
) {
|
value1.push(valueData[i]);
|
} else {
|
value2.push(valueData[i]);
|
}
|
}
|
this.listData = value1;
|
this.listbottom = value2;
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.sunshine {
|
// height: 30%;
|
overflow: hidden;
|
padding: 50px;
|
margin-top: 30px;
|
box-sizing: border-box;
|
background: rgba(8, 32, 58, 0.7);
|
.title {
|
width: 100%;
|
position: relative;
|
img {
|
width: 100%;
|
}
|
span {
|
font-size: 78px;
|
font-weight: 400;
|
color: #ffe86b;
|
background: linear-gradient(0deg, #bce7ff 0%, #69efff 98.6572265625%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
position: absolute;
|
left: 50%;
|
top: 0;
|
transform: translateX(-50%);
|
}
|
}
|
.content {
|
padding-top: 100px;
|
.top {
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
li {
|
float: left;
|
list-style: none;
|
margin-right: 10px;
|
min-width: 400px;
|
min-height: 139px;
|
background: rgba(0, 186, 255, 0.26);
|
text-align: center;
|
padding: 18px 0;
|
.title {
|
font-size: 42px;
|
font-weight: bold;
|
color: #ffffff;
|
text-align: center;
|
padding-bottom: 26px;
|
}
|
.msg {
|
font-size: 20px;
|
font-weight: 400;
|
color: #ffffff;
|
text-align: center;
|
}
|
}
|
.list {
|
width: 561px;
|
height: 139px;
|
background: rgba(0, 186, 255, 0.26);
|
padding: 18px 0;
|
.title {
|
font-size: 30px;
|
font-weight: bold;
|
color: #ffffff;
|
text-align: center;
|
padding-bottom: 26px;
|
}
|
.msg {
|
font-size: 15px;
|
font-weight: 400;
|
color: #ffffff;
|
text-align: center;
|
}
|
}
|
// .list:nth-child(3) {
|
// width: 989px;
|
// }
|
}
|
.bottom {
|
padding-top: 55px;
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
li {
|
float: left;
|
list-style: none;
|
margin-right: 10px;
|
min-width: 450px;
|
min-height: 139px;
|
text-align: center;
|
background: rgba(255, 124, 0, 0.26);
|
padding: 18px 0;
|
.title {
|
font-size: 42px;
|
font-weight: bold;
|
color: #ffffff;
|
text-align: center;
|
padding-bottom: 26px;
|
}
|
.msg {
|
font-size: 20px;
|
font-weight: 400;
|
color: #ffffff;
|
text-align: center;
|
}
|
}
|
.list {
|
width: 520px;
|
height: 139px;
|
background: rgba(255, 124, 0, 0.26);
|
padding: 18px 0;
|
.title {
|
font-size: 42px;
|
font-weight: bold;
|
color: #ffffff;
|
text-align: center;
|
padding-bottom: 26px;
|
}
|
.msg {
|
font-size: 20px;
|
font-weight: 400;
|
color: #ffffff;
|
text-align: center;
|
}
|
}
|
}
|
}
|
}
|
@media only screen and (max-width: 2560px) {
|
.sunshine {
|
height: auto;
|
overflow: visible;
|
background: transparent;
|
.content {
|
.top {
|
li {
|
float: left;
|
list-style: none;
|
}
|
// .list {
|
// width: calc(561px * 2);
|
// height: calc(139px * 3);
|
|
// .title {
|
// padding-bottom: calc(26px * 2);
|
// }
|
// }
|
// .list:nth-child(3) {
|
// width: calc(989px * 2);
|
// }
|
}
|
.bottom {
|
.list {
|
width: calc(520px * 2);
|
height: calc(139px * 3);
|
|
.title {
|
padding-bottom: calc(26px * 2);
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
