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

time setting

master
maochaoying 2 years ago
parent
68def05105
commit
c3f15d75eb
3 changed files with 208 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. 100
      src/components/DateSetting.vue
  2. 4
      src/components/SettingCard.vue
  3. 104
      src/components/TimeSetting.vue

100
src/components/DateSetting.vue
View File

@ -0,0 +1,100 @@
<template>
<div class="date_setting_container">
<div class="desc_box">
<p class="title">日期设置：</p>
<p class="content">2023-06-01</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>
.date_setting_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: 500;
color: #ffffff;
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>

4
src/components/SettingCard.vue
View File

@ -11,6 +11,8 @@
<div v-else class="info_card_list">
<AlarmCard />
<SingleColumnSelect />
<TimeSetting />
<DateSetting />
<Tab />
</div>
</div>
@ -20,6 +22,8 @@
import WarnCard from 'cpns/WarnCard'
import AlarmCard from 'cpns/AlarmCard'
import SingleColumnSelect from 'cpns/SingleColumnSelect'
import DateSetting from 'cpns/DateSetting'
import TimeSetting from 'cpns/TimeSetting'
import Tab from 'cpns/Tab'
const props = defineProps({
title: {

104
src/components/TimeSetting.vue
View File

@ -0,0 +1,104 @@
<template>
<div class="time_setting_container">
<div class="desc_box">
<p class="title">时间设置：</p>
<p class="content">
<div class="number">12</div>
<p>：</p>
<div class="number">21</div>
</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>
.time_setting_container {
width: 100%;
height: 42px;
border-radius: 12px;
background: #9DABC2;
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: #FFFFFF;
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