82 lines
1.8 KiB
Vue
82 lines
1.8 KiB
Vue
<!--空气质量指数-->
|
|
<template>
|
|
<div class="air-quality-content">
|
|
<secondary-title :title="title"/>
|
|
<div class="air-data">
|
|
<div class="excellent-rate">
|
|
<div class="_title">空气质量</div>
|
|
<div class="_title">优良率</div>
|
|
<div class="num-bg">
|
|
90%
|
|
</div>
|
|
</div>
|
|
<div class="air-quality-trend"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "AirQuality",
|
|
data() {
|
|
return {
|
|
title: '空气质量指数'
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import "assets/styles/mixin";
|
|
|
|
.air-quality-content {
|
|
width: 100%;
|
|
height: 601px;
|
|
background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
|
|
/* border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
|
|
border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *!
|
|
border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
|
|
.flex-column;
|
|
|
|
.air-data {
|
|
flex: 1;
|
|
.flex-row;
|
|
|
|
.excellent-rate {
|
|
width: 346px;
|
|
height: 100%;
|
|
.flex-column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
._title {
|
|
font-family: MicrosoftYaHei;
|
|
font-size: 34.25px;
|
|
color: #6AC4FF;
|
|
letter-spacing: 2.25px;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.num-bg {
|
|
width: 239px;
|
|
height: 270px;
|
|
background: url("assets/peakCoalImages/left/air-excellent-rate-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
font-family: YouSheBiaoTiHei;
|
|
font-size: 85.62px;
|
|
color: #FFFFFF;
|
|
letter-spacing: 5.63px;
|
|
font-weight: 700;
|
|
line-height: 200px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.air-quality-trend {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
</style>
|