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