62 lines
1.5 KiB
Vue
62 lines
1.5 KiB
Vue
<template>
|
|
<div style="height:150px" class="box">
|
|
<div class="boxDiv">
|
|
<div style="color: #07ccca">300</div>
|
|
<img src="@/assets/imgs/ditu.png" />
|
|
<div class="mt10 divBot">总数</div>
|
|
</div>
|
|
<div class="boxDiv">
|
|
<div style="color: #339900">250</div>
|
|
<img src="@/assets/imgs/ditu.png" />
|
|
<div class="mt10 divBot">在运</div>
|
|
</div>
|
|
<div class="boxDiv">
|
|
<div style="color: #cc0000">50</div>
|
|
<img src="@/assets/imgs/ditu.png" />
|
|
<div class="mt10 divBot">停运</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import MyEChart from '@/components/echarts/MyEchart.vue'
|
|
import { mainHeight } from '@/utils/layout'
|
|
import { color } from '@/components/echarts/color'
|
|
const height = mainHeight(330, 3)
|
|
|
|
const info = () => {}
|
|
onMounted(() => {
|
|
info()
|
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.box {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.boxDiv {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
margin-top: 20px;
|
|
img {
|
|
width: 80%;
|
|
}
|
|
div:nth-child(1) {
|
|
position: absolute;
|
|
font-size: 30px;
|
|
top: -10px;
|
|
font-weight: 700;
|
|
}
|
|
.divBot {
|
|
font-size: 16px;
|
|
position: absolute;
|
|
top: -45px;
|
|
}
|
|
color: #fff;
|
|
}
|
|
}
|
|
</style>
|