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
7b075b01a0
commit
b3f5ae963d
1 changed files with 171 additions and 2 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. 173
      src/components/operation/AirCharge.vue

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

@ -1,8 +1,48 @@
<template>
<div class="air_charge_container"></div>
<div class="air_charge_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>
.air_charge_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>
Write Preview
Loading…
Cancel
Save