chenpingsen
4 months ago
3 changed files with 2392 additions and 2176 deletions
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -0,0 +1,135 @@ |
|||||
|
<template> |
||||
|
<a-popover color="rgba(0, 0, 0, 0.8)"> |
||||
|
<template #content> |
||||
|
<div class="light-tag"> |
||||
|
<div class="light-tag-tit"> |
||||
|
<div> |
||||
|
<img src="/asset/image//bulbLogo/21962.png" alt="" /> |
||||
|
<span class="tag-text">{{ result.name }}</span> |
||||
|
</div> |
||||
|
<button class="right-button">{{ type == 1 ? '正常' : '关闭' }}</button> |
||||
|
</div> |
||||
|
<div class="light-tag-box"> |
||||
|
<div class="tag-box-item"> |
||||
|
<img src="/asset/image//bulbLogo/22496.png" alt="" /> |
||||
|
<span class="title">控制模式</span> |
||||
|
<span class="result">自动</span> |
||||
|
</div> |
||||
|
<div class="tag-box-item"> |
||||
|
<img src="/asset/image//bulbLogo/22496.png" alt="" /> |
||||
|
<span class="title">亮度</span> |
||||
|
<span class="result">{{ result.brightness }}</span> |
||||
|
</div> |
||||
|
<div class="tag-box-item"> |
||||
|
<img src="/asset/image//bulbLogo/22496.png" alt="" /> |
||||
|
<span class="title">控制场景</span> |
||||
|
<span class="result">{{ result.automatic2 }}</span> |
||||
|
</div> |
||||
|
<div class="tag-box-item"> |
||||
|
<img src="/asset/image//bulbLogo/22496.png" alt="" /> |
||||
|
<span class="title">色温</span> |
||||
|
<span class="result">{{ result.brightness3 }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<div class="icon-box" :style="styleObject"> |
||||
|
<img v-if="type == 1" class="icon-item" src="/asset/image/bulbLogo/22394.png" alt=""> |
||||
|
<img v-if="type == 2" class="icon-item" src="/asset/image/bulbLogo/22396.png" alt=""> |
||||
|
<img v-if="type == 3" class="icon-item" src="/asset/image/bulbLogo/22400.png" alt=""> |
||||
|
</div> |
||||
|
</a-popover> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref } from 'vue'; |
||||
|
defineProps({ |
||||
|
styleObject: Object, |
||||
|
type: Number |
||||
|
}); |
||||
|
|
||||
|
const result = ref({ |
||||
|
id: '1', |
||||
|
name: '站厅照明 1区', |
||||
|
manual: '手动', |
||||
|
automatic: '自动', |
||||
|
brightness: '100lux', |
||||
|
brightness2: '30lux', |
||||
|
manual2: '手动', |
||||
|
automatic2: '舒适', |
||||
|
brightness3: '4000k', |
||||
|
brightness4: '3800k', |
||||
|
}); |
||||
|
|
||||
|
</script> |
||||
|
<style lang="less" scoped> |
||||
|
.icon-box { |
||||
|
width: 25px; |
||||
|
height: 25px; |
||||
|
position: absolute; |
||||
|
.icon-item { |
||||
|
width: 25px; |
||||
|
cursor: pointer; |
||||
|
transition: all ease 0.1s; |
||||
|
} |
||||
|
.icon-item:active { |
||||
|
transform: scale(1.2); |
||||
|
} |
||||
|
} |
||||
|
// 悬浮窗外部 |
||||
|
.light-tag { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 10px; |
||||
|
// 悬浮窗标题 |
||||
|
.light-tag-tit { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
vertical-align: middle; |
||||
|
height: 30px; |
||||
|
.tag-text { |
||||
|
font-size: 16px; |
||||
|
font-weight: 700; |
||||
|
color: white; |
||||
|
padding-left: 10px; |
||||
|
} |
||||
|
.right-button { |
||||
|
width: 50px; |
||||
|
height: 26px; |
||||
|
background: rgba(57, 215, 187, 0.1); |
||||
|
border: 1px solid rgba(57, 215, 187, 1); |
||||
|
font-size: 12px; |
||||
|
color: rgba(57, 215, 187, 1); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
// 悬浮窗底部4格子 |
||||
|
.light-tag-box { |
||||
|
display: grid; |
||||
|
grid-template-columns: 1fr 1fr; |
||||
|
grid-template-rows: 1fr 1fr; |
||||
|
grid-gap: 10px; |
||||
|
.tag-box-item { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
img { |
||||
|
width: 120px; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
.title { |
||||
|
position: absolute; |
||||
|
left: 60px; |
||||
|
top: 13px; |
||||
|
color: rgba(64, 255, 252, 1); |
||||
|
} |
||||
|
.result { |
||||
|
line-height: 50px; |
||||
|
font-size: 16px; |
||||
|
font-weight: 700; |
||||
|
color: white; |
||||
|
}; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
Loading…
Reference in new issue