maochaoying
/
soil
generated from maochaoying/dreamworks-frontend-template
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

上仓下仓

master
maochaoying 2 years ago
parent
4938a62451
commit
80f598be94
5 changed files with 237 additions and 1 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. BIN
      src/assets/img/lower_water.png
  2. BIN
      src/assets/img/upper_water.png
  3. 98
      src/components/charts/LowerTank.vue
  4. 98
      src/components/charts/UpperTank.vue
  5. 42
      src/components/modals/EjectLiquid.vue

BIN
src/assets/img/lower_water.png
View File

Side by Side

After

Width: 14  |  Height: 11  |  Size: 362 B

BIN
src/assets/img/upper_water.png
View File

Side by Side

After

Width: 14  |  Height: 11  |  Size: 352 B

98
src/components/charts/LowerTank.vue
View File

@ -0,0 +1,98 @@
<template>
<div class="lower_tank_container">
<div class="title_wrap">
<div class="left_wrap">
<div class="icon_wrap">
<img :src="LowerWater" class="icon" alt="" />
</div>
<p class="text">下仓液氮液位</p>
</div>
<div class="right_wrap">2/3</div>
</div>
<div class="grid_water">
<div class="default"></div>
<div class="default active"></div>
<div class="default active"></div>
</div>
</div>
</template>
<script setup>
import LowerWater from '@/assets/img/lower_water.png'
</script>
<style lang="scss" scoped>
.lower_tank_container {
width: 100%;
height: 100%;
border-radius: 16px;
background: #565ee4;
box-sizing: border-box;
padding: 10px;
display: flex;
flex-direction: column;
.title_wrap {
box-sizing: border-box;
padding: 9px 5px 21px 7px;
display: flex;
align-items: center;
justify-content: space-between;
.left_wrap {
display: flex;
align-items: center;
.icon_wrap {
width: 30px;
height: 30px;
background: #ffffff;
margin-right: 6px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
.icon {
width: 14px;
height: 11px;
}
}
.text {
font-family: Source Han Sans CN;
font-size: 20px;
font-weight: 500;
line-height: normal;
letter-spacing: 0.04em;
color: #ffffff;
}
}
.right_wrap {
width: 68px;
height: 28px;
border-radius: 14px;
background: #4d54d0;
display: flex;
align-items: center;
justify-content: center;
font-family: Source Han Sans CN;
font-size: 22px;
font-weight: 500;
line-height: normal;
letter-spacing: 0.04em;
color: #ffffff;
}
}
.grid_water {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.default {
border-radius: 7px;
height: 47px;
width: 100%;
background: #4d54d0;
}
.active {
background: #849dff;
}
}
}
</style>

98
src/components/charts/UpperTank.vue
View File

@ -0,0 +1,98 @@
<template>
<div class="upper_tank_container">
<div class="title_wrap">
<div class="left_wrap">
<div class="icon_wrap">
<img :src="UpperWater" class="icon" alt="" />
</div>
<p class="text">上仓液氮液位</p>
</div>
<div class="right_wrap">1/3</div>
</div>
<div class="grid_water">
<div class="default"></div>
<div class="default"></div>
<div class="default active"></div>
</div>
</div>
</template>
<script setup>
import UpperWater from '@/assets/img/upper_water.png'
</script>
<style lang="scss" scoped>
.upper_tank_container {
width: 100%;
height: 100%;
border-radius: 16px;
background: #13c3f4;
box-sizing: border-box;
padding: 10px;
display: flex;
flex-direction: column;
.title_wrap {
box-sizing: border-box;
padding: 9px 5px 21px 7px;
display: flex;
align-items: center;
justify-content: space-between;
.left_wrap {
display: flex;
align-items: center;
.icon_wrap {
width: 30px;
height: 30px;
background: #ffffff;
margin-right: 6px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
.icon {
width: 14px;
height: 11px;
}
}
.text {
font-family: Source Han Sans CN;
font-size: 20px;
font-weight: 500;
line-height: normal;
letter-spacing: 0.04em;
color: #ffffff;
}
}
.right_wrap {
width: 68px;
height: 28px;
border-radius: 14px;
background: #10b3e1;
display: flex;
align-items: center;
justify-content: center;
font-family: Source Han Sans CN;
font-size: 22px;
font-weight: 500;
line-height: normal;
letter-spacing: 0.04em;
color: #ffffff;
}
}
.grid_water {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.default {
border-radius: 7px;
height: 47px;
width: 100%;
background: #10b3e1;
}
.active {
background: #1fedf4;
}
}
}
</style>

42
src/components/modals/EjectLiquid.vue
View File

@ -5,7 +5,16 @@
<p class="title">排液氮</p>
<img :src="Close" alt="关闭" class="close_img" />
</div>
<div class="chart_container"></div>
<div class="chart_container">
<div class="title_wrap">
<img class="water_icon" :src="Water" alt="" />
<p class="info">正在注入液氮</p>
</div>
<div class="double_chart">
<UpperTank />
<LowerTank />
</div>
</div>
<div class="btns">
<div class="stop_wrap">
<div class="stop_btn">
@ -26,8 +35,11 @@
<script setup>
import Close from '@/assets/img/close.png'
import Water from '@/assets/img/water.png'
import StartIcon from '@/assets/img/start.png'
import StopIcon from '@/assets/img/stop.png'
import LowerTank from 'cpns/charts/LowerTank'
import UpperTank from 'cpns/charts/UpperTank'
</script>
<style lang="scss" scoped>
@ -78,6 +90,34 @@ import StopIcon from '@/assets/img/stop.png'
border-radius: 16px;
background: #f0f6fb;
margin: 20px 20px 17px 20px;
box-sizing: border-box;
padding: 20px;
.title_wrap {
padding: 2px 0 21px 12px;
box-sizing: border-box;
display: flex;
align-items: center;
.water_icon {
width: 47px;
height: 35px;
margin-right: 15px;
}
.info {
font-family: Source Han Sans CN;
font-size: 24px;
font-weight: 500;
line-height: normal;
letter-spacing: 0.04em;
color: #3d3d3d;
}
}
.double_chart {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 620px;
height: 240px;
column-gap: 20px;
}
}
.btns {
display: flex;

Write Preview
Loading…
Cancel
Save