105 lines
2.4 KiB
Vue
105 lines
2.4 KiB
Vue
<template>
|
||
<div class="w100 h100 flex aic">
|
||
<div class="topLeft">
|
||
<div>
|
||
<el-date-picker v-model="value1" type="year" placeholder="选择年"> </el-date-picker>
|
||
</div>
|
||
<ul>
|
||
<li>
|
||
<img src="../img/output.png" alt="" />
|
||
<div class="topRit">
|
||
<!-- <p>农业总产值（亿元）</p>
|
||
<p style="color: #2effb7">1,000.00</p> -->
|
||
<p>农业人口(万人)</p>
|
||
<p style="color: #2effb7">20.49</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<img src="../img/level.png" alt="" />
|
||
<div class="topRit">
|
||
<!-- <p>产业园总产值（亿元）</p>
|
||
<p style="color: #ff6e6f">27.51</p> -->
|
||
<p>耕地面积(万亩)</p>
|
||
<p style="color: #ff6e6f">73.98</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<img src="../img/production.png" alt="" />
|
||
<div class="topRit">
|
||
<!-- <p>主导鸡肉产量（吨）</p>
|
||
<p style="color: #fcde1f">30,656.00</p> -->
|
||
<p>农业总产值(亿元)</p>
|
||
<p style="color: #fcde1f">104.17</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<img src="../img/123.png" alt="" />
|
||
<div class="topRit">
|
||
<p>人均增收(万元)</p>
|
||
<p style="color: #00f6ff">1.79</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="topRight" style="text-align: center;">
|
||
<img src="../img/3.png" alt="" style="width: 80%;height: 80%;margin: 0 auto;"/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'Map',
|
||
mixins: [],
|
||
components: {},
|
||
props: {},
|
||
data() {
|
||
return {
|
||
value1: '',
|
||
};
|
||
},
|
||
computed: {},
|
||
watch: {},
|
||
created() {},
|
||
mounted() {},
|
||
destroyed() {},
|
||
methods: {},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.topLeft {
|
||
width: 30%;
|
||
height: 100%;
|
||
::v-deep .el-input__inner {
|
||
background: #203c4966 !important;
|
||
border: none;
|
||
color: #fff;
|
||
}
|
||
ul {
|
||
padding-left: 0px;
|
||
}
|
||
ul li {
|
||
list-style: none;
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 20px 0;
|
||
img {
|
||
width: 112px;
|
||
height: 118px;
|
||
}
|
||
.topRit {
|
||
margin-left: 10px;
|
||
p:nth-child(1) {
|
||
color: #fff;
|
||
font-size: 16px;
|
||
margin-top: 20px;
|
||
}
|
||
p:nth-child(2) {
|
||
font-size: 30px;
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|