You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
165 lines
3.8 KiB
165 lines
3.8 KiB
<template>
|
|
<div class="progress_container">
|
|
<div class="header_wrap">
|
|
<div class="left_progress">
|
|
<div class="left_time_tag">剩余时间</div>
|
|
<p class="time">1000:00:00</p>
|
|
<div class="progress_bg"></div>
|
|
</div>
|
|
<div class="right_btns">
|
|
<div class="btn active">暂停消毒</div>
|
|
<div class="btn ml">继续消毒</div>
|
|
</div>
|
|
</div>
|
|
<div class="echarts_wrap">
|
|
<div class="single_wrap">
|
|
<p class="title">设备温度/湿度/过氧化氢浓度</p>
|
|
<div class="echarts_box"></div>
|
|
</div>
|
|
<div class="single_wrap">
|
|
<p class="title">环境1/湿度/过氧化氢浓度</p>
|
|
<div class="echarts_box"></div>
|
|
</div>
|
|
<div class="single_wrap">
|
|
<p class="title">环境2/湿度/过氧化氢浓度</p>
|
|
<div class="echarts_box"></div>
|
|
</div>
|
|
</div>
|
|
<div class="detail_wrap">
|
|
<div class="detail">详情</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup></script>
|
|
|
|
<style lang="scss" scoped>
|
|
.progress_container {
|
|
margin-bottom: 30px;
|
|
height: 580px;
|
|
box-sizing: border-box;
|
|
background: #ffffff;
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
padding-bottom: 30px;
|
|
.header_wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 49px;
|
|
.left_progress {
|
|
width: 860px;
|
|
height: 80px;
|
|
border-radius: 14px;
|
|
background: #f6f6f6;
|
|
box-sizing: border-box;
|
|
padding: 0 23px;
|
|
display: flex;
|
|
align-items: center;
|
|
.left_time_tag {
|
|
width: 158.66px;
|
|
height: 45px;
|
|
border-radius: 23px;
|
|
opacity: 1;
|
|
background: #06518b;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: Source Han Sans CN;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
letter-spacing: 0.1em;
|
|
color: #ffffff;
|
|
margin-right: 73px;
|
|
}
|
|
.time {
|
|
width: 90px;
|
|
height: 20px;
|
|
font-family: Source Han Sans CN;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.1em;
|
|
color: #000000;
|
|
margin-right: 85px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.progress_bg {
|
|
width: 396px;
|
|
height: 14px;
|
|
border-radius: 7px;
|
|
background: #ffffff;
|
|
}
|
|
}
|
|
.right_btns {
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
margin-left: 20px;
|
|
.btn {
|
|
width: 140px;
|
|
height: 45px;
|
|
border-radius: 23px;
|
|
background: #f6f6f6;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: Source Han Sans CN;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
letter-spacing: 0.1em;
|
|
color: #d8d8d8;
|
|
}
|
|
.active {
|
|
color: #ffffff;
|
|
background: #06518b;
|
|
}
|
|
.ml {
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
}
|
|
.echarts_wrap {
|
|
height: 351px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 19px;
|
|
.single_wrap {
|
|
flex: 1;
|
|
height: 351px;
|
|
.title {
|
|
font-family: Source Han Sans CN;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.1em;
|
|
color: #000000;
|
|
margin-bottom: 24px;
|
|
padding-left: 11px;
|
|
}
|
|
.echarts_box {
|
|
width: 380px;
|
|
height: 308px;
|
|
}
|
|
}
|
|
}
|
|
.detail_wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding-right: 16px;
|
|
.detail {
|
|
width: 105px;
|
|
height: 31px;
|
|
border-radius: 16px;
|
|
background: #06518b;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: Source Han Sans CN;
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
letter-spacing: 0.1em;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|