maochaoying
/
ecmo-frontend
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
7ed4e92921
commit
68def05105
3 changed files with 238 additions and 0 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. 134
      src/components/AlarmCard.vue
  2. 4
      src/components/SettingCard.vue
  3. 100
      src/components/SingleColumnSelect.vue

134
src/components/AlarmCard.vue
View File

@ -0,0 +1,134 @@
<template>
<div class="alarm_card_container">
<div class="type_box">流量上限报警</div>
<div class="forbidden_box">禁用</div>
<p class="or">或</p>
<div class="number_box">
<p class="number">8.2 LPM</p>
<div class="oper_wrap">
<div class="top">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="10"
height="6"
viewBox="0 0 10 6"
>
<g>
<path
d="M8.25717,5.699L5.00531,2.45252L1.75345,5.699Q1.60468,5.8495,1.41339,5.92475Q1.2221,6,1.0255,6Q0.828905,6,0.642933,5.92475Q0.456961,5.8495,0.308183,5.699Q0,5.398,0,4.97876Q0,4.55951,0.308183,4.25851L4.21892,0.334784Q4.36769,0.184285,4.57492,0.0982851Q4.78215,0.0122857,4.99469,0.00153571Q5.20723,-0.00921425,5.40383,0.0552853Q5.60043,0.119785,5.72795,0.270284L9.70244,4.25851Q10,4.55951,10,4.97876Q10,5.398,9.70244,5.699Q9.55367,5.8495,9.36238,5.92475Q9.17109,6,8.9745,6Q8.7779,6,8.59192,5.92475Q8.40595,5.8495,8.25717,5.699Z"
fill="#E7E7E7"
fill-opacity="1"
/>
</g>
</svg>
</div>
<div class="bottom">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="10"
height="6"
viewBox="0 0 10 6"
>
<g transform="matrix(-1,0,0,-1,20,12)">
<path
d="M18.257170000000002,11.699L15.00531,8.45252L11.75345,11.699Q11.60468,11.849499999999999,11.41339,11.92475Q11.2221,12,11.025500000000001,12Q10.828905,12,10.642933,11.92475Q10.456961,11.849499999999999,10.308183,11.699Q10,11.398,10,10.978760000000001Q10,10.55951,10.308183,10.258510000000001L14.21892,6.334784Q14.36769,6.184285,14.574919999999999,6.0982851Q14.78215,6.0122857,14.99469,6.00153571Q15.20723,5.99078575,15.40383,6.0552853Q15.60043,6.119785,15.72795,6.270284L19.70244,10.258510000000001Q20,10.55951,20,10.978760000000001Q20,11.398,19.70244,11.699Q19.55367,11.849499999999999,19.36238,11.92475Q19.17109,12,18.9745,12Q18.777900000000002,12,18.591920000000002,11.92475Q18.40595,11.849499999999999,18.257170000000002,11.699Z"
fill="#E7E7E7"
fill-opacity="1"
/>
</g>
</svg>
</div>
</div>
</div>
</div>
</template>
<script setup></script>
<style lang="scss" scoped>
.alarm_card_container {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
.type_box {
width: 157px;
height: 38px;
border-radius: 10px;
background: #5f6f8a;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 350;
line-height: 22px;
color: #dcdcdc;
margin-right: 7px;
}
.forbidden_box {
width: 56px;
height: 38px;
border-radius: 10px;
background: #9dabc2;
font-size: 18px;
font-weight: 500;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
margin-right: 6px;
}
.or {
font-size: 18px;
font-weight: 350;
color: #dcdcdc;
margin-right: 6px;
}
.number_box {
padding-left: 20px;
width: 146px;
height: 38px;
border-radius: 10px;
box-sizing: border-box;
background: rgba(220, 221, 221, 0.16);
display: flex;
align-items: center;
justify-content: space-between;
overflow: hidden;
.number {
font-size: 18px;
font-weight: 350;
line-height: 22px;
color: #15d0a1;
}
.oper_wrap {
height: 100%;
width: 19px;
background: #d8d8d8;
display: flex;
flex-direction: column;
align-items: center;
.top {
flex: 1;
width: 19px;
display: flex;
align-items: center;
justify-content: center;
}
.bottom {
width: 19px;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
</style>

4
src/components/SettingCard.vue
View File

@ -9,6 +9,8 @@
<WarnCard />
</div>
<div v-else class="info_card_list">
<AlarmCard />
<SingleColumnSelect />
<Tab />
</div>
</div>
@ -16,6 +18,8 @@
<script setup>
import WarnCard from 'cpns/WarnCard'
import AlarmCard from 'cpns/AlarmCard'
import SingleColumnSelect from 'cpns/SingleColumnSelect'
import Tab from 'cpns/Tab'
const props = defineProps({
title: {

100
src/components/SingleColumnSelect.vue
View File

@ -0,0 +1,100 @@
<template>
<div class="single_column_select_container">
<div class="desc_box">
<p class="title">屏幕亮度设置：</p>
<p class="content">300 nit</p>
</div>
<div class="oper_wrap">
<div class="top">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="10"
height="6"
viewBox="0 0 10 6"
>
<g>
<path
d="M8.25717,5.699L5.00531,2.45252L1.75345,5.699Q1.60468,5.8495,1.41339,5.92475Q1.2221,6,1.0255,6Q0.828905,6,0.642933,5.92475Q0.456961,5.8495,0.308183,5.699Q0,5.398,0,4.97876Q0,4.55951,0.308183,4.25851L4.21892,0.334784Q4.36769,0.184285,4.57492,0.0982851Q4.78215,0.0122857,4.99469,0.00153571Q5.20723,-0.00921425,5.40383,0.0552853Q5.60043,0.119785,5.72795,0.270284L9.70244,4.25851Q10,4.55951,10,4.97876Q10,5.398,9.70244,5.699Q9.55367,5.8495,9.36238,5.92475Q9.17109,6,8.9745,6Q8.7779,6,8.59192,5.92475Q8.40595,5.8495,8.25717,5.699Z"
fill="#E7E7E7"
fill-opacity="1"
/>
</g>
</svg>
</div>
<div class="bottom">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="10"
height="6"
viewBox="0 0 10 6"
>
<g transform="matrix(-1,0,0,-1,20,12)">
<path
d="M18.257170000000002,11.699L15.00531,8.45252L11.75345,11.699Q11.60468,11.849499999999999,11.41339,11.92475Q11.2221,12,11.025500000000001,12Q10.828905,12,10.642933,11.92475Q10.456961,11.849499999999999,10.308183,11.699Q10,11.398,10,10.978760000000001Q10,10.55951,10.308183,10.258510000000001L14.21892,6.334784Q14.36769,6.184285,14.574919999999999,6.0982851Q14.78215,6.0122857,14.99469,6.00153571Q15.20723,5.99078575,15.40383,6.0552853Q15.60043,6.119785,15.72795,6.270284L19.70244,10.258510000000001Q20,10.55951,20,10.978760000000001Q20,11.398,19.70244,11.699Q19.55367,11.849499999999999,19.36238,11.92475Q19.17109,12,18.9745,12Q18.777900000000002,12,18.591920000000002,11.92475Q18.40595,11.849499999999999,18.257170000000002,11.699Z"
fill="#E7E7E7"
fill-opacity="1"
/>
</g>
</svg>
</div>
</div>
</div>
</template>
<script setup></script>
<style lang="scss" scoped>
.single_column_select_container {
width: 100%;
height: 42px;
border-radius: 12px;
background: rgba(220, 221, 221, 0.16);
overflow: hidden;
box-sizing: border-box;
padding-left: 14px;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
.desc_box {
font-size: 20px;
font-weight: 350;
color: #dcdcdc;
flex: 1;
display: flex;
align-items: center;
.title {
}
.content {
}
}
.oper_wrap {
height: 100%;
width: 21px;
background: #d8d8d8;
display: flex;
flex-direction: column;
align-items: center;
.top {
flex: 1;
width: 19px;
display: flex;
align-items: center;
justify-content: center;
}
.bottom {
width: 19px;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
}
}
</style>
Write Preview
Loading…
Cancel
Save