@@ -6,16 +6,27 @@ | |||
--> | |||
<template> | |||
<div class="selectorBtnGroup"></div> | |||
<div class="selector-btn-group"> | |||
<button | |||
class="btn" | |||
v-for="opt in options" | |||
:key="opt" | |||
@click="active = opt" | |||
:class="active == opt ? 'btn-active' : ''"> | |||
{{ opt }} | |||
</button> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
name: 'SelectorBtnGroup', | |||
components: {}, | |||
props: {}, | |||
props: ['options'], | |||
data() { | |||
return {}; | |||
return { | |||
active: this.options[0] || 'default' | |||
}; | |||
}, | |||
computed: {}, | |||
methods: {}, | |||
@@ -23,6 +34,36 @@ export default { | |||
</script> | |||
<style scoped lang="scss"> | |||
.selectorBtnGroup { | |||
button { | |||
border: none; | |||
appearance: none; | |||
outline: none; | |||
color: red; | |||
font-size: 14px; | |||
padding: 8px 12px; | |||
} | |||
button:first-child { | |||
border-top-left-radius: 8px; | |||
border-bottom-left-radius: 8px; | |||
} | |||
button:last-child { | |||
border-top-right-radius: 8px; | |||
border-bottom-right-radius: 8px; | |||
} | |||
.selector-btn-group { | |||
} | |||
.btn { | |||
background: #03233c; | |||
color: #fff; | |||
cursor: pointer; | |||
transition: all 0.3s ease-out; | |||
&.btn-active, | |||
&:hover { | |||
background: #0f3d5c; | |||
} | |||
} | |||
</style> |
@@ -6,24 +6,52 @@ | |||
--> | |||
<template> | |||
<div class="switcher"> | |||
1/2 | |||
</div> | |||
<div class="switcher" style="display: flex; align-items: center; gap: 12px"> | |||
<el-switch v-model="value"></el-switch> | |||
<span style="color: #fff; font-size: 16px">{{ mode }}</span> | |||
; | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
name: "Switcher", | |||
components: {}, | |||
props: {}, | |||
data() { | |||
return {} | |||
}, | |||
computed: {}, | |||
methods: {}, | |||
} | |||
name: 'Switcher', | |||
components: {}, | |||
props: {}, | |||
data() { | |||
return { | |||
value: true, | |||
}; | |||
}, | |||
computed: { | |||
mode() { | |||
return this.value ? '历史详情' : '实时数据'; | |||
}, | |||
}, | |||
methods: {}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.switcher {} | |||
.switcher { | |||
:deep(.el-switch__core) { | |||
border: none; | |||
background-color: #213d566b; | |||
&::after { | |||
background-color: #02457e; | |||
} | |||
} | |||
:deep(.is-checked) { | |||
.el-switch__core { | |||
border: none; | |||
background-color: #b4fffc; | |||
&::after { | |||
background-color: #08d8cd; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -101,12 +101,57 @@ | |||
align-items: center; | |||
justify-content: center; | |||
"> | |||
<span style="color: #0ee8e4; font-weight: 500; font-size: 32px">234</span> | |||
<span style="color: #fff; font-size: 14px; letter-spacing: 1px;">- 原料1/吨 -</span> | |||
<span style="color: #0ee8e4; font-weight: 500; font-size: 32px"> | |||
234 | |||
</span> | |||
<span style="color: #fff; font-size: 14px; letter-spacing: 1px"> | |||
- 原料1/吨 - | |||
</span> | |||
</div> | |||
</ShadowRect> | |||
</div> | |||
<!-- btn group --> | |||
<div | |||
class="absolute" | |||
style=" | |||
position: absolute; | |||
top: 10px; | |||
left: 60px; | |||
padding: 12px; | |||
background: #0003; | |||
border: 1px solid #ccc; | |||
"> | |||
<SelectorBtnGroup :options="['日', '周', '月', '年']" /> | |||
</div> | |||
<div | |||
class="absolute" | |||
style=" | |||
position: absolute; | |||
top: 90px; | |||
left: 60px; | |||
padding: 12px; | |||
background: #0003; | |||
border: 1px solid #ccc; | |||
"> | |||
<SelectorBtnGroup | |||
:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" /> | |||
</div> | |||
<!-- switcher --> | |||
<div | |||
class="absolute" | |||
style=" | |||
position: absolute; | |||
top: 10px; | |||
right: 10px; | |||
padding: 12px; | |||
background: #0003; | |||
border: 1px solid #ccc; | |||
"> | |||
<Switcher /> | |||
</div> | |||
<!-- null --> | |||
<section class="header" style="height: 80px">窑炉生产运行驾驶舱</section> | |||
<section | |||
@@ -127,9 +172,11 @@ | |||
<script> | |||
import DateBtnGroup from '../components/DateBtnGroup.vue'; | |||
import ShadowRect from '../components/ShadowRect.vue'; | |||
import SelectorBtnGroup from '../components/SelectorBtnGroup.vue'; | |||
import Switcher from '../components/Switcher.vue'; | |||
export default { | |||
name: 'KilnDataBoard', | |||
components: { DateBtnGroup, ShadowRect }, | |||
components: { DateBtnGroup, ShadowRect, SelectorBtnGroup, Switcher }, | |||
props: {}, | |||
data() { | |||
return {}; | |||