109 lines
2.5 KiB
Vue
109 lines
2.5 KiB
Vue
<!--能源使用情况-->
|
|
<template>
|
|
<div class="energy-use">
|
|
<secondary-title :title="title">
|
|
<template>
|
|
<div class="right-tip">
|
|
</div>
|
|
</template>
|
|
</secondary-title>
|
|
<div class="energy-use-info">
|
|
<div class="electricity-water-usage">
|
|
<div class="electricity-usage">
|
|
<div class="electricity-icon"></div>
|
|
<div class="electricity-info">
|
|
<div class="_title">今日用电[kwh]</div>
|
|
<div class="_value">1244</div>
|
|
</div>
|
|
</div>
|
|
<div class="water-usage">
|
|
<div class="water-icon"></div>
|
|
<div class="water-info">
|
|
<div class="_title">今日用水[m³]</div>
|
|
<div class="_value">185</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "EnergyUse",
|
|
data() {
|
|
return {
|
|
title: '能源使用情况'
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import "assets/styles/mixin";
|
|
|
|
.energy-use {
|
|
height: 777px;
|
|
width: 100%;
|
|
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;
|
|
|
|
.energy-use-info {
|
|
flex: 1;
|
|
height: 0;
|
|
padding: 0 50px;
|
|
|
|
.electricity-water-usage {
|
|
height: 247px;
|
|
.flex-row;
|
|
justify-content: space-between;
|
|
|
|
.electricity-usage {
|
|
.flex-row;
|
|
|
|
.electricity-icon {
|
|
width: 132px;
|
|
height: 159px;
|
|
background: url("assets/peakCoalImages/right/electricity-icon.png") no-repeat;
|
|
}
|
|
.electricity-info{
|
|
padding-left: 20px;
|
|
}
|
|
}
|
|
|
|
.water-usage{
|
|
.flex-row;
|
|
|
|
.water-icon {
|
|
width: 132px;
|
|
height: 159px;
|
|
background: url("assets/peakCoalImages/right/water-icon.png") no-repeat;
|
|
}
|
|
.water-info{
|
|
padding-left: 20px;
|
|
}
|
|
}
|
|
|
|
._title {
|
|
font-family: MicrosoftYaHei;
|
|
font-size: 34.3px;
|
|
color: #6AC4FF;
|
|
letter-spacing: 2.26px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
._value {
|
|
font-family: YouSheBiaoTiHei;
|
|
font-size: 85.76px;
|
|
color: #FFFFFF;
|
|
letter-spacing: 5.64px;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|