maochaoying
/
disinfection_high_front_end
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页环境信息

master
maochaoying 2 years ago
parent
e58458dcca
commit
5831cde251
3 changed files with 184 additions and 4 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      src/components/Operator.vue
  2. 79
      src/components/info/DisinfectantLiquidInfo.vue
  3. 91
      src/components/info/EnvironmentInfo.vue

18
src/components/Operator.vue
View File

@ -2,10 +2,18 @@
<div class="operator_main_content">
<div class="left_contaienr">
<div class="info_cards">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card">
<DisinfectantLiquidInfo />
</div>
<div class="card">
<EnvironmentInfo />
</div>
<div class="card">
<EnvironmentInfo />
</div>
<div class="card">
<EnvironmentInfo />
</div>
</div>
<div class="warn_wrap">
<p class="warn_text">警报信息</p>
@ -36,6 +44,8 @@
<script setup>
import LogPicker from 'cpns/dialogs/LogPicker'
import WarnModal from 'cpns/dialogs/WarnModal'
import DisinfectantLiquidInfo from 'cpns/info/DisinfectantLiquidInfo'
import EnvironmentInfo from 'cpns/info/EnvironmentInfo'
import { ref } from 'vue'
const roomSize = ref(0)

79
src/components/info/DisinfectantLiquidInfo.vue
View File

@ -0,0 +1,79 @@
<template>
<div class="disinfectant_liquid_container">
<div class="top_progress">
<svg
class="icon"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="28"
height="28.00116729736328"
viewBox="0 0 28 28.00116729736328"
>
<g>
<path
d="M13.9994,0C6.26711,0,0,6.26827,0,14.0012C0,21.7329,6.26711,28.0012,13.9994,28.0012C21.7329,28.0012,28,21.7323,28,14.0012C28,6.26711,21.7329,0,13.9994,0ZM13.3306,2.65913L15.1107,2.65913L15.1107,6.15243L13.3306,6.15243L13.3306,2.65913ZM8.00532,9.19343L5.53538,6.72291L6.79393,5.46437L9.26387,7.93489L8.00532,9.19343ZM8.88432,3.93979L10.4945,3.18886L11.9713,6.35385L10.3594,7.10595L8.88432,3.93979ZM14.2445,24.2046C12.6966,24.2046,11.4433,22.9495,11.4433,21.4034C11.4433,20.1938,12.2088,19.1681,13.2828,18.7751L13.2828,10.7838L15.0612,10.7838L15.0612,18.7227C16.2091,19.0714,17.0462,20.139,17.0462,21.404C17.0462,22.9495,15.7923,24.2046,14.2445,24.2046ZM16.3302,6.35035L17.8071,3.1842L19.419,3.93688L17.9439,7.10304L16.3302,6.35035ZM20.2421,9.19343L18.9835,7.93489L21.4535,5.46437L22.712,6.72291L20.2421,9.19343Z"
fill="#FFFFFF"
fill-opacity="1"
/>
</g>
</svg>
消毒液
<div class="progress"></div>
</div>
<div class="bottom">500 (g)</div>
</div>
</template>
<script setup></script>
<style lang="scss" scoped>
.disinfectant_liquid_container {
width: 353px;
height: 225px;
box-sizing: border-box;
border-radius: 17.5px;
overflow: hidden;
.top_progress {
display: flex;
align-items: center;
justify-content: center;
position: relative;
font-family: Source Han Sans CN;
font-size: 40px;
font-weight: bold;
letter-spacing: 0.1em;
color: #ffffff;
width: 353px;
height: 141px;
box-sizing: border-box;
.icon {
top: 15px;
left: 15px;
position: absolute;
}
.progress {
top: 19px;
right: 29px;
position: absolute;
width: 6px;
height: 100px;
border-radius: 3px;
background: #1f6397;
}
}
.bottom {
display: flex;
align-items: center;
justify-content: center;
background: #1f6397;
font-family: Source Han Sans CN;
font-size: 20px;
font-weight: bold;
letter-spacing: 0.06em;
color: #ffffff;
height: 84px;
}
}
</style>

91
src/components/info/EnvironmentInfo.vue
View File

@ -0,0 +1,91 @@
<template>
<div class="environment_container">
<div class="top_title">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="27.99883270263672"
height="28"
viewBox="0 0 27.99883270263672 28"
>
<g>
<path
d="M13.9988,0C6.26685,0,0,6.26801,0,14.0006C0,21.732,6.26685,28,13.9988,28C21.732,28,27.9988,21.7314,27.9988,14.0006C27.9988,6.26685,21.732,0,13.9988,0ZM13.33,2.65902L15.1101,2.65902L15.1101,6.15218L13.33,6.15218L13.33,2.65902ZM8.00499,9.19305L5.53515,6.72263L6.79364,5.46414L9.26348,7.93456L8.00499,9.19305ZM8.88395,3.93963L10.494,3.18872L11.9708,6.35358L10.359,7.10565L8.88395,3.93963ZM14.2439,24.2036C12.6961,24.2036,11.4428,22.9486,11.4428,21.4025C11.4428,20.1929,12.2083,19.1673,13.2823,18.7744L13.2823,10.7833L15.0606,10.7833L15.0606,18.722C16.2085,19.0706,17.0455,20.1382,17.0455,21.4031C17.0455,22.9486,15.7917,24.2036,14.2439,24.2036ZM16.3295,6.35009L17.8063,3.18407L19.4182,3.93672L17.9431,7.10274L16.3295,6.35009ZM20.2412,9.19305L18.9827,7.93456L21.4526,5.46414L22.7111,6.72263L20.2412,9.19305Z"
fill="#FFFFFF"
fill-opacity="1"
/>
</g>
</svg>
<p class="title">仓内</p>
</div>
<div class="content">
<div class="line">
<p class="title">仓内温度</p>
<p class="num">000℃</p>
</div>
<div class="line">
<p class="title">仓内湿度</p>
<p class="num">000℃</p>
</div>
<div class="line">
<p class="title">仓内过氧化氢浓度</p>
<p class="num">1000 PPM</p>
</div>
</div>
</div>
</template>
<script setup></script>
<style lang="scss" scoped>
.environment_container {
width: 353px;
height: 225px;
box-sizing: border-box;
overflow: hidden;
border-radius: 17.5px;
.top_title {
padding: 15px 16px;
display: flex;
align-items: center;
.title {
font-family: Source Han Sans CN;
font-size: 24px;
font-weight: 500;
letter-spacing: 0.1em;
margin-left: 8px;
color: #ffffff;
}
}
.content {
.line {
padding: 14px 26px;
width: 353px;
height: 56px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
&:nth-child(odd) {
background: #1f6397;
}
.title {
font-family: Source Han Sans CN;
font-size: 16px;
font-weight: normal;
letter-spacing: 0.06em;
color: #ffffff;
}
.num {
font-family: Source Han Sans CN;
font-size: 20px;
font-weight: bold;
letter-spacing: 0.06em;
color: #ffffff;
}
}
}
}
</style>
Write Preview
Loading…
Cancel
Save