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
db2fdf817d
commit
b25a9d8742
8 changed files with 621 additions and 12 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/login.png
  2. BIN
      src/assets/img/start_trans.png
  3. 91
      src/components/charts/LowerTemperature.vue
  4. 2
      src/components/charts/UpperTemperature.vue
  5. 136
      src/components/charts/Vacua.vue
  6. 173
      src/components/operation/ExtractionVacuum.vue
  7. 184
      src/components/operation/StartHeating.vue
  8. 47
      src/components/operation/TransferLiquid.vue

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

Side by Side

After

Width: 444  |  Height: 359  |  Size: 17 KiB

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

Side by Side Swipe Overlay

Before

Width: 165  |  Height: 62  |  Size: 6.0 KiB

After

Width: 165  |  Height: 62  |  Size: 5.7 KiB

91
src/components/charts/LowerTemperature.vue
View File

@ -0,0 +1,91 @@
<template>
<div class="lower_temperature_container">
<div class="title_wrap">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="30"
height="30"
viewBox="0 0 30 30"
>
<g>
<g>
<path
d="M30,15C30,19.1421,28.3211,22.8921,25.6066,25.6066C22.8921,28.3211,19.1421,30,15,30C6.71573,30,0,23.2843,0,15C0,6.71573,6.71573,0,15,0C23.2843,0,30,6.71573,30,15Z"
fill="#FFFFFF"
fill-opacity="1"
/>
</g>
<g>
<path
d="M15.155750000000001,16.849040000000002L15.155750000000001,12.557269999999999C15.155750000000001,12.29636,14.94327,12.08388,14.68236,12.08388L14.644860000000001,12.08388C14.3902,12.08388,14.18553,12.29011,14.18553,12.54321L14.18553,16.849040000000002C13.47935,17.0537,12.962209999999999,17.6849,12.962209999999999,18.4379C12.962209999999999,19.3582,13.7262,20.1034,14.671420000000001,20.1034C15.615079999999999,20.1034,16.37906,19.3566,16.37906,18.4379C16.3775,17.6849,15.86036,17.055300000000003,15.155750000000001,16.849040000000002ZM17.66956,14.947659999999999C17.56332,14.86017,17.50083,14.741430000000001,17.50083,14.61957L17.50083,9.766919999999999C17.50083,8.2405,16.23064,7,14.66986,7C13.10907,7,11.83888,8.2405,11.83888,9.766919999999999L11.83888,14.48208C11.83888,14.68675,11.75452,14.87579,11.60922,14.999220000000001C10.58588,15.8632,10,17.117800000000003,10,18.439500000000002C10,20.9533,12.09511,23,14.671420000000001,23C17.24773,23,19.342840000000002,20.954900000000002,19.342840000000002,18.439500000000002C19.341279999999998,17.0865,18.73196,15.8132,17.66956,14.947659999999999ZM14.66986,21.5517C12.904399999999999,21.5517,11.47017,20.155,11.47017,18.4379C11.47017,17.3677,12.02949,16.38346,12.96534,15.80695L13.19188,15.6679C13.26531,15.6226,13.31061,15.54136,13.31061,15.45543L13.31061,9.766919999999999C13.31061,9.03886,13.92149,8.44673,14.671420000000001,8.44673C15.42135,8.44673,16.03222,9.03886,16.03222,9.766919999999999L16.03222,15.45542C16.03222,15.54135,16.07753,15.6226,16.15096,15.6679L16.3775,15.80695C17.31335,16.38346,17.87111,17.3662,17.87111,18.4379C17.86954,20.155,16.43375,21.5517,14.66986,21.5517Z"
fill="#13C3F4"
fill-opacity="1"
/>
</g>
</g>
</svg>
<p class="title">下仓温度</p>
</div>
<div class="temp_wrap">
<p class="num">-30</p>
<p class="unit">℃</p>
</div>
</div>
</template>
<script setup></script>
<style lang="scss" scoped>
.lower_temperature_container {
width: 350px;
height: 240px;
border-radius: 16px;
background: #13c3f4;
box-sizing: border-box;
padding: 10px;
.title_wrap {
padding: 7px 0 20px 7px;
box-sizing: border-box;
display: flex;
align-items: center;
.title {
font-family: Source Han Sans CN;
font-size: 24px;
font-weight: 500;
line-height: normal;
letter-spacing: 0.04em;
margin-left: 6px;
color: #ffffff;
}
}
.temp_wrap {
width: 330px;
height: 160px;
border-radius: 14px;
background: #10b3e1;
display: flex;
align-items: center;
justify-content: center;
.num {
font-family: Poppins;
font-size: 90px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.02em;
color: #ffffff;
margin-right: 10px;
}
.unit {
font-family: Source Han Sans CN;
font-size: 88px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.02em;
color: #ffffff;
}
}
}
</style>

2
src/components/charts/UpperTemperature.vue
View File

@ -30,7 +30,7 @@
</g>
</g>
</svg>
<p class="title">上仓制冷温度</p>
<p class="title">上仓温度</p>
</div>
<div class="temp_wrap">
<p class="num">-30</p>

136
src/components/charts/Vacua.vue
View File

@ -0,0 +1,136 @@
<template>
<div class="vacua_container">
<div class="title_wrap">
<div class="left_title">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="30"
height="30"
viewBox="0 0 30 30"
>
<g>
<g>
<g>
<ellipse
cx="15"
cy="15"
rx="15"
ry="15"
fill="#FFFFFF"
fill-opacity="1"
/>
</g>
</g>
<g transform="matrix(0,-1,1,0,-12,34)">
<g>
<path
d="M11.441764384508133,25.129333972930908L26.30686438450813,25.129333972930908L26.30686438450813,29.258893972930906L11.441764384508133,29.258893972930906L11.441764384508133,25.129333972930908Z"
fill="#98CAFF"
fill-opacity="1"
/>
</g>
<g>
<path
d="M26.747,29.709686371421814L11,29.709686371421814L11,24.676836371421814L26.747,24.676836371421814L26.747,29.709686371421814ZM11.881858,28.806396371421812L25.865099999999998,28.806396371421812L25.865099999999998,25.580121371421814L11.881859,25.580121371421814L11.881858,28.806396371421812Z"
fill="#2E91FA"
fill-opacity="1"
/>
</g>
<g>
<path
d="M11.504228921167373,26.806514342269896C11.399118921167373,26.806514342269896,11.315386921167374,26.718924342269897,11.315386921167374,26.613084342269897L11.315386921167374,25.580235342269898C11.315386921167374,25.472571042269898,11.400900521167374,25.386804342269897,11.504228921167373,25.386804342269897L26.369386921167376,25.386804342269897C26.474486921167376,25.386804342269897,26.558186921167376,25.474395342269897,26.558186921167376,25.580235342269898L26.558186921167376,26.613084342269897C26.558186921167376,26.720744342269896,26.472686921167373,26.806514342269896,26.369386921167376,26.806514342269896L11.504228921167373,26.806514342269896Z"
fill="#FFFFFF"
fill-opacity="1"
/>
</g>
<g>
<path
d="M26.369455831933024,25.58006473399353L26.369455831933024,26.61291273399353L11.504340831933021,26.61291273399353L11.504340831933021,25.58006473399353L26.369455831933024,25.58006473399353ZM26.369455831933024,25.19320273399353L11.504340831933021,25.19320273399353C11.29590183193302,25.19320273399353,11.126655831933022,25.36656073399353,11.126655831933022,25.58006473399353L11.126655831933022,26.61291273399353C11.126655831933022,26.82641273399353,11.29590183193302,26.99977273399353,11.504340831933021,26.99977273399353L26.369455831933024,26.99977273399353C26.57785583193302,26.99977273399353,26.74715583193302,26.82641273399353,26.74715583193302,26.61291273399353L26.74715583193302,25.58006373399353C26.74715583193302,25.36655973399353,26.57785583193302,25.19320217710353,26.369455831933024,25.19320273399353Z"
fill="#6EB2FA"
fill-opacity="1"
/>
</g>
<g>
<path
d="M12.40563,31L11.106892,31C11.0481013,31,11,30.95073,11,30.89051L11,23.109489C11,23.0492703,11.0481013,23,11.106892,23L12.40563,23C12.46442,23,12.51252,23.0492703,12.51252,23.109489L12.51252,30.89051C12.51252,30.95073,12.46442,31,12.40563,31Z"
fill="#2E91FA"
fill-opacity="1"
/>
</g>
<g>
<path
d="M26.893108256225585,31L25.594370256225584,31C25.535579856225585,31,25.487478256225586,30.95073,25.487478256225586,30.89051L25.487478256225586,23.109489C25.487478256225586,23.0492703,25.535579856225585,23,25.594370256225584,23L26.893108256225585,23C26.951898256225586,23,26.999998256225584,23.0492703,26.999998256225584,23.109489L26.999998256225584,30.89051C26.999998256225584,30.95073,26.951898256225586,31,26.893108256225585,31Z"
fill="#2E91FA"
fill-opacity="1"
/>
</g>
</g>
</g>
</svg>
<p class="title">真空管</p>
</div>
<p class="number">64Pa</p>
</div>
<div class="tube_wrap">
<div class="tube"></div>
</div>
</div>
</template>
<script setup></script>
<style lang="scss" scoped>
.vacua_container {
width: 720px;
height: 240px;
border-radius: 16px;
background: #2e91fa;
box-sizing: border-box;
padding: 10px;
.title_wrap {
padding: 12px 21px 18px 8px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
.left_title {
display: flex;
align-items: center;
.title {
margin-left: 6px;
font-family: Source Han Sans CN;
font-size: 24px;
font-weight: 500;
line-height: normal;
letter-spacing: 0.04em;
color: #ffffff;
}
}
.number {
font-family: Poppins;
font-size: 24px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.04em;
color: #ffffff;
}
}
.tube_wrap {
width: 700px;
height: 160px;
border-radius: 7px;
background: #2981df;
padding: 10px;
box-sizing: border-box;
.tube {
width: 417px;
height: 140px;
border-radius: 6px;
background: #1fedf4;
}
}
}
</style>

173
src/components/operation/ExtractionVacuum.vue
View File

@ -1,8 +1,48 @@
<template>
<div class="extraction_vacuum_container"></div>
<div class="extraction_vacuum_container">
<div class="title_wrap">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="30"
height="30"
viewBox="0 0 30 30"
>
<g>
<path
d="M0.0282397,18.0005C0.659907,21.0473,2.21692,23.7884,4.52941,25.9259C4.83807,26.2117,5.26304,26.343,5.68283,26.2824C6.10292,26.2221,6.47186,25.9766,6.68442,25.6159L8.49036,22.5458C8.79194,22.0326,8.72173,21.3871,8.31659,20.948C7.37248,19.9224,6.68418,18.6955,6.30603,17.364C6.13904,16.7733,5.59146,16.3645,4.96732,16.3645L1.3891,16.3645C0.972064,16.3643,0.577098,16.5484,0.313663,16.8657C0.0493008,17.1825,-0.0555478,17.5993,0.0282397,18.0005ZM18.4044,24.3116C18.1027,23.7966,17.4957,23.5329,16.9045,23.6601C15.4084,23.9818,13.8532,23.9211,12.3879,23.4839C11.7695,23.2995,11.1032,23.5574,10.7796,24.1065L9.00669,27.1225C8.80232,27.4705,8.76465,27.8892,8.90373,28.267C9.04239,28.6451,9.34445,28.9435,9.72872,29.0821C11.4082,29.6911,13.1823,30,14.9995,30C16.502,30,17.9854,29.787,19.4073,29.3661C19.8132,29.2455,20.141,28.9499,20.2978,28.5631C20.4542,28.1757,20.4213,27.7394,20.2088,27.3787L18.4044,24.3116ZM24.7879,3.48287C24.5385,3.27825,24.2237,3.16611,23.8987,3.16603C23.8181,3.16603,23.736,3.17435,23.6554,3.18799C23.2521,3.25874,22.9012,3.50063,22.6966,3.84896L20.9197,6.86723C20.5973,7.41693,20.7027,8.11221,21.1743,8.54587C22.3831,9.65389,23.2549,11.0694,23.6927,12.6349C23.8587,13.227,24.4071,13.6373,25.0327,13.6374L28.6114,13.6374C29.0276,13.6371,29.4218,13.4537,29.6855,13.1377C29.9501,12.8214,30.0553,12.405,29.972,12.004C29.2891,8.68212,27.4482,5.65574,24.7879,3.48287ZM20.2978,1.43835C20.1414,1.05124,19.8134,0.755451,19.4073,0.63517C17.9776,0.213004,16.4925,-0.00099699,14.9995,0.00000317715C13.1823,0.00000317715,11.4082,0.308738,9.72872,0.917681C8.92141,1.21126,8.57699,2.14697,9.00669,2.87926L10.7796,5.89476C11.1032,6.44385,11.7695,6.70179,12.3879,6.51735C13.2345,6.26416,14.1147,6.13575,14.9997,6.13633C15.6355,6.13633,16.2769,6.20456,16.9045,6.33995C17.4953,6.4668,18.1018,6.2039,18.4044,5.68986L20.209,2.62234C20.4215,2.26177,20.4542,1.82558,20.2978,1.43835ZM28.6114,16.3643L25.0327,16.3643C24.407,16.3639,23.8583,16.7743,23.6927,17.3666C23.2547,18.9321,22.3829,20.3476,21.1743,21.4558C20.7026,21.8887,20.5971,22.5837,20.9197,23.1328L22.6966,26.1523C22.901,26.5009,23.252,26.7429,23.6554,26.8135C23.736,26.8271,23.8181,26.834,23.8987,26.834C24.2236,26.8344,24.5383,26.7228,24.7879,26.5186C27.4482,24.3443,29.2891,21.3192,29.972,17.9977C30.0554,17.5967,29.9502,17.1803,29.6855,16.864C29.4221,16.5475,29.0277,16.364,28.6114,16.3643ZM0.313446,13.136C0.576764,13.4532,0.971693,13.6372,1.38889,13.6372L4.96754,13.6372C5.59184,13.637,6.13939,13.2282,6.30625,12.6377C6.68424,11.3058,7.37255,10.0784,8.31681,9.05247C8.72199,8.61388,8.79222,7.96863,8.49058,7.45592L6.68464,4.38584C6.47177,4.02516,6.10308,3.77935,5.68305,3.71805C5.61622,3.70868,5.54877,3.70412,5.48126,3.7044C5.13067,3.7044,4.78833,3.83553,4.52963,4.07582C2.21692,6.21309,0.659907,8.95397,0.0282397,12.001C-0.0554526,12.4022,0.0492956,12.819,0.313446,13.136Z"
fill="#9395A0"
fill-opacity="1"
/>
</g>
</svg>
<p class="title">操作运行状态</p>
</div>
<Vacua />
<div class="btns">
<div class="disable_wrap">
<div class="real_btn">
<img :src="StopIcon" class="icon" alt="" />
<p class="text">暂停抽取</p>
</div>
</div>
<div class="start_wrap">
<div class="real_btn">
<img :src="StartIcon" class="icon" alt="" />
<p class="text">抽取真空</p>
</div>
</div>
</div>
</div>
</template>
<script setup></script>
<script setup>
import Vacua from 'cpns/charts/Vacua'
import StartIcon from '@/assets/img/start.png'
import StopIcon from '@/assets/img/stop.png'
</script>
<style lang="scss" scoped>
.extraction_vacuum_container {
@ -13,5 +53,134 @@
margin: 20px 0;
box-sizing: border-box;
padding: 20px;
.title_wrap {
width: 720px;
height: 62px;
border-radius: 16px;
background: #ffffff;
padding: 0 20px;
display: flex;
align-items: center;
margin-bottom: 20px;
box-sizing: border-box;
.title {
margin-left: 17px;
font-family: Source Han Sans CN;
font-size: 24px;
font-weight: 500;
line-height: normal;
letter-spacing: 0.04em;
color: #9395a0;
}
.active {
color: #08092c;
}
}
.btns {
display: flex;
align-items: center;
box-sizing: border-box;
margin-top: 20px;
.disable_wrap {
display: flex;
align-items: center;
justify-content: center;
width: 350px;
height: 108px;
border-radius: 54px;
margin-right: 20px;
background: rgba(199, 204, 208, 0.2);
.real_btn {
width: 330px;
height: 88px;
border-radius: 44px;
background: #d8d8d8;
box-sizing: border-box;
border: 2px solid #c4c4c4;
display: flex;
align-items: center;
justify-content: center;
.icon {
width: 40px;
height: 40px;
margin-right: 13px;
}
.text {
font-family: Source Han Sans CN;
font-size: 36px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.04em;
color: #ffffff;
}
}
}
.start_wrap {
display: flex;
align-items: center;
justify-content: center;
width: 350px;
height: 108px;
border-radius: 54px;
background: rgba(23, 241, 121, 0.2);
.real_btn {
width: 330px;
height: 88px;
border-radius: 44px;
background: #17f179;
box-sizing: border-box;
border: 2px solid #1ad66e;
display: flex;
align-items: center;
justify-content: center;
.icon {
width: 40px;
height: 40px;
margin-right: 13px;
}
.text {
font-family: Source Han Sans CN;
font-size: 36px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.04em;
color: #ffffff;
}
}
}
.stop_wrap {
display: flex;
align-items: center;
justify-content: center;
width: 350px;
height: 108px;
border-radius: 54px;
background: rgba(250, 28, 28, 0.2);
.real_btn {
width: 330px;
height: 88px;
border-radius: 44px;
background: #fa1c1c;
box-sizing: border-box;
border: 2px solid #b71212;
display: flex;
align-items: center;
justify-content: center;
.icon {
width: 40px;
height: 40px;
margin-right: 13px;
}
.text {
font-family: Source Han Sans CN;
font-size: 36px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.04em;
color: #ffffff;
}
}
}
}
}
</style>

184
src/components/operation/StartHeating.vue
View File

@ -1,8 +1,52 @@
<template>
<div class="start_heating_container"></div>
<div class="start_heating_container">
<div class="title_wrap">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="30"
height="30"
viewBox="0 0 30 30"
>
<g>
<path
d="M0.0282397,18.0005C0.659907,21.0473,2.21692,23.7884,4.52941,25.9259C4.83807,26.2117,5.26304,26.343,5.68283,26.2824C6.10292,26.2221,6.47186,25.9766,6.68442,25.6159L8.49036,22.5458C8.79194,22.0326,8.72173,21.3871,8.31659,20.948C7.37248,19.9224,6.68418,18.6955,6.30603,17.364C6.13904,16.7733,5.59146,16.3645,4.96732,16.3645L1.3891,16.3645C0.972064,16.3643,0.577098,16.5484,0.313663,16.8657C0.0493008,17.1825,-0.0555478,17.5993,0.0282397,18.0005ZM18.4044,24.3116C18.1027,23.7966,17.4957,23.5329,16.9045,23.6601C15.4084,23.9818,13.8532,23.9211,12.3879,23.4839C11.7695,23.2995,11.1032,23.5574,10.7796,24.1065L9.00669,27.1225C8.80232,27.4705,8.76465,27.8892,8.90373,28.267C9.04239,28.6451,9.34445,28.9435,9.72872,29.0821C11.4082,29.6911,13.1823,30,14.9995,30C16.502,30,17.9854,29.787,19.4073,29.3661C19.8132,29.2455,20.141,28.9499,20.2978,28.5631C20.4542,28.1757,20.4213,27.7394,20.2088,27.3787L18.4044,24.3116ZM24.7879,3.48287C24.5385,3.27825,24.2237,3.16611,23.8987,3.16603C23.8181,3.16603,23.736,3.17435,23.6554,3.18799C23.2521,3.25874,22.9012,3.50063,22.6966,3.84896L20.9197,6.86723C20.5973,7.41693,20.7027,8.11221,21.1743,8.54587C22.3831,9.65389,23.2549,11.0694,23.6927,12.6349C23.8587,13.227,24.4071,13.6373,25.0327,13.6374L28.6114,13.6374C29.0276,13.6371,29.4218,13.4537,29.6855,13.1377C29.9501,12.8214,30.0553,12.405,29.972,12.004C29.2891,8.68212,27.4482,5.65574,24.7879,3.48287ZM20.2978,1.43835C20.1414,1.05124,19.8134,0.755451,19.4073,0.63517C17.9776,0.213004,16.4925,-0.00099699,14.9995,0.00000317715C13.1823,0.00000317715,11.4082,0.308738,9.72872,0.917681C8.92141,1.21126,8.57699,2.14697,9.00669,2.87926L10.7796,5.89476C11.1032,6.44385,11.7695,6.70179,12.3879,6.51735C13.2345,6.26416,14.1147,6.13575,14.9997,6.13633C15.6355,6.13633,16.2769,6.20456,16.9045,6.33995C17.4953,6.4668,18.1018,6.2039,18.4044,5.68986L20.209,2.62234C20.4215,2.26177,20.4542,1.82558,20.2978,1.43835ZM28.6114,16.3643L25.0327,16.3643C24.407,16.3639,23.8583,16.7743,23.6927,17.3666C23.2547,18.9321,22.3829,20.3476,21.1743,21.4558C20.7026,21.8887,20.5971,22.5837,20.9197,23.1328L22.6966,26.1523C22.901,26.5009,23.252,26.7429,23.6554,26.8135C23.736,26.8271,23.8181,26.834,23.8987,26.834C24.2236,26.8344,24.5383,26.7228,24.7879,26.5186C27.4482,24.3443,29.2891,21.3192,29.972,17.9977C30.0554,17.5967,29.9502,17.1803,29.6855,16.864C29.4221,16.5475,29.0277,16.364,28.6114,16.3643ZM0.313446,13.136C0.576764,13.4532,0.971693,13.6372,1.38889,13.6372L4.96754,13.6372C5.59184,13.637,6.13939,13.2282,6.30625,12.6377C6.68424,11.3058,7.37255,10.0784,8.31681,9.05247C8.72199,8.61388,8.79222,7.96863,8.49058,7.45592L6.68464,4.38584C6.47177,4.02516,6.10308,3.77935,5.68305,3.71805C5.61622,3.70868,5.54877,3.70412,5.48126,3.7044C5.13067,3.7044,4.78833,3.83553,4.52963,4.07582C2.21692,6.21309,0.659907,8.95397,0.0282397,12.001C-0.0554526,12.4022,0.0492956,12.819,0.313446,13.136Z"
fill="#9395A0"
fill-opacity="1"
/>
</g>
</svg>
<p class="title">操作运行状态</p>
</div>
<div class="chart_container">
<UpperTemperature />
<LowerTemperature />
</div>
<div class="btns">
<div class="disable_wrap">
<div class="real_btn">
<img :src="StopIcon" class="icon" alt="" />
<p class="text">暂停加热</p>
</div>
</div>
<div class="start_wrap">
<div class="real_btn">
<img :src="StartIcon" class="icon" alt="" />
<p class="text">开始加热</p>
</div>
</div>
</div>
</div>
</template>
<script setup></script>
<script setup>
import StartIcon from '@/assets/img/start.png'
import StopIcon from '@/assets/img/stop.png'
import UpperTemperature from 'cpns/charts/UpperTemperature'
import LowerTemperature from 'cpns/charts/LowerTemperature'
</script>
<style lang="scss" scoped>
.start_heating_container {
@ -13,5 +57,141 @@
margin: 20px 0;
box-sizing: border-box;
padding: 20px;
.title_wrap {
width: 720px;
height: 62px;
border-radius: 16px;
background: #ffffff;
padding: 0 20px;
display: flex;
align-items: center;
margin-bottom: 20px;
box-sizing: border-box;
.title {
margin-left: 17px;
font-family: Source Han Sans CN;
font-size: 24px;
font-weight: 500;
line-height: normal;
letter-spacing: 0.04em;
color: #9395a0;
}
.active {
color: #08092c;
}
}
.chart_container {
width: 720px;
height: 240px;
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 20px;
margin-bottom: 20px;
}
.btns {
display: flex;
align-items: center;
box-sizing: border-box;
.disable_wrap {
display: flex;
align-items: center;
justify-content: center;
width: 350px;
height: 108px;
border-radius: 54px;
margin-right: 20px;
background: rgba(199, 204, 208, 0.2);
.real_btn {
width: 330px;
height: 88px;
border-radius: 44px;
background: #d8d8d8;
box-sizing: border-box;
border: 2px solid #c4c4c4;
display: flex;
align-items: center;
justify-content: center;
.icon {
width: 40px;
height: 40px;
margin-right: 13px;
}
.text {
font-family: Source Han Sans CN;
font-size: 36px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.04em;
color: #ffffff;
}
}
}
.start_wrap {
display: flex;
align-items: center;
justify-content: center;
width: 350px;
height: 108px;
border-radius: 54px;
background: rgba(23, 241, 121, 0.2);
.real_btn {
width: 330px;
height: 88px;
border-radius: 44px;
background: #17f179;
box-sizing: border-box;
border: 2px solid #1ad66e;
display: flex;
align-items: center;
justify-content: center;
.icon {
width: 40px;
height: 40px;
margin-right: 13px;
}
.text {
font-family: Source Han Sans CN;
font-size: 36px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.04em;
color: #ffffff;
}
}
}
.stop_wrap {
display: flex;
align-items: center;
justify-content: center;
width: 350px;
height: 108px;
border-radius: 54px;
background: rgba(250, 28, 28, 0.2);
.real_btn {
width: 330px;
height: 88px;
border-radius: 44px;
background: #fa1c1c;
box-sizing: border-box;
border: 2px solid #b71212;
display: flex;
align-items: center;
justify-content: center;
.icon {
width: 40px;
height: 40px;
margin-right: 13px;
}
.text {
font-family: Source Han Sans CN;
font-size: 36px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.04em;
color: #ffffff;
}
}
}
}
}
</style>

47
src/components/operation/TransferLiquid.vue
View File

@ -24,17 +24,17 @@
<img :src="startTrans" class="img_btn" alt="" />
</div>
<div class="double_chart">
<LowerTank />
<UpperTank />
<LowerTank />
</div>
<div class="btns">
<div class="start_wrap" style="margin-right: 20px">
<div class="upper_wrap" style="margin-right: 20px">
<div class="real_btn">
<img :src="StartIcon" class="icon" alt="" />
<p class="text">注入上仓液氮</p>
</div>
</div>
<div class="start_wrap">
<div class="lower_wrap">
<div class="real_btn">
<img :src="StartIcon" class="icon" alt="" />
<p class="text">注入下仓液氮</p>
@ -105,21 +105,54 @@ import UpperTank from 'cpns/charts/UpperTank'
display: flex;
align-items: center;
box-sizing: border-box;
.start_wrap {
.upper_wrap {
display: flex;
align-items: center;
justify-content: center;
width: 350px;
height: 108px;
border-radius: 54px;
background: rgba(19, 195, 244, 0.2);
.real_btn {
width: 330px;
height: 88px;
border-radius: 44px;
background: #13c3f4;
box-sizing: border-box;
border: 2px solid #10b3e1;
display: flex;
align-items: center;
justify-content: center;
.icon {
width: 40px;
height: 40px;
margin-right: 13px;
}
.text {
font-family: Source Han Sans CN;
font-size: 36px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.04em;
color: #ffffff;
}
}
}
.lower_wrap {
display: flex;
align-items: center;
justify-content: center;
width: 350px;
height: 108px;
border-radius: 54px;
background: rgba(23, 241, 121, 0.2);
background: rgba(86, 94, 228, 0.2);
.real_btn {
width: 330px;
height: 88px;
border-radius: 44px;
background: #17f179;
background: #565ee4;
box-sizing: border-box;
border: 2px solid #1ad66e;
border: 2px solid #4d54d0;
display: flex;
align-items: center;
justify-content: center;

Write Preview
Loading…
Cancel
Save