|
|
|
@ -0,0 +1,118 @@ |
|
|
|
<template> |
|
|
|
<div class="leak_rate_container"> |
|
|
|
<div class="modal_content"> |
|
|
|
<div class="modal_header"> |
|
|
|
<p class="title">查询所有漏率</p> |
|
|
|
<img :src="Close" alt="关闭" class="close_img" /> |
|
|
|
</div> |
|
|
|
<div class="modal_info"> |
|
|
|
<div class="info_wrap" v-for="item in 50" :key="item"> |
|
|
|
<img class="info_img" :src="Ok" alt="正确" /> |
|
|
|
<p class="info_text">{{ `A-${formatTubeNumber(item)}` }}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="modal_bottom"> |
|
|
|
<div class="btn">确认</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup> |
|
|
|
import Close from '@/assets/img/close.png' |
|
|
|
import Error from '@/assets/img/error.png' |
|
|
|
import Ok from '@/assets/img/ok.png' |
|
|
|
import { formatTubeNumber } from '@/utils' |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.leak_rate_container { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
background: rgba(5, 14, 42, 0.7); |
|
|
|
z-index: 2; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
.modal_content { |
|
|
|
width: 760px; |
|
|
|
height: 680px; |
|
|
|
border-radius: 20px; |
|
|
|
background: #ffffff; |
|
|
|
box-sizing: border-box; |
|
|
|
overflow: hidden; |
|
|
|
.modal_header { |
|
|
|
width: 760px; |
|
|
|
height: 90.88px; |
|
|
|
box-sizing: border-box; |
|
|
|
border-radius: 20px 20px 0px 0px; |
|
|
|
background: #f6f8fa; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 0 41px; |
|
|
|
.title { |
|
|
|
font-family: Source Han Sans CN; |
|
|
|
font-size: 26px; |
|
|
|
font-weight: 500; |
|
|
|
line-height: normal; |
|
|
|
letter-spacing: 0.04em; |
|
|
|
color: #9395a0; |
|
|
|
} |
|
|
|
.close_img { |
|
|
|
width: 36px; |
|
|
|
height: 36px; |
|
|
|
} |
|
|
|
} |
|
|
|
.modal_info { |
|
|
|
padding: 43px 56px; |
|
|
|
box-sizing: border-box; |
|
|
|
display: grid; |
|
|
|
grid-template-columns: repeat(5, 1fr); |
|
|
|
grid-template-rows: repeat(10, 1fr); |
|
|
|
column-gap: 53px; |
|
|
|
row-gap: 15px; |
|
|
|
.info_wrap { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
.info_img { |
|
|
|
width: 28px; |
|
|
|
height: 28px; |
|
|
|
margin-right: 5px; |
|
|
|
} |
|
|
|
.info_text { |
|
|
|
font-family: Poppins; |
|
|
|
font-size: 18px; |
|
|
|
font-weight: 500; |
|
|
|
line-height: normal; |
|
|
|
letter-spacing: 0.02em; |
|
|
|
color: #17191c; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.modal_bottom { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
padding-bottom: 20px; |
|
|
|
.btn { |
|
|
|
width: 720px; |
|
|
|
height: 70px; |
|
|
|
border-radius: 8px; |
|
|
|
background: #565ee4; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
font-family: Source Han Sans CN; |
|
|
|
font-size: 26px; |
|
|
|
font-weight: 500; |
|
|
|
line-height: normal; |
|
|
|
letter-spacing: 1em; |
|
|
|
color: #ffffff; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
maochaoying
2 years ago
