请选择 进入手机版 | 继续访问电脑版

『瀚思彼岸』» 智能家居技术论坛

 找回密码
 立即注册
查看: 2013|回复: 38

[UI界面] 好看的电力监测的UI来了!代码如下:点击图标弹出数据

[复制链接]

1

主题

22

帖子

154

积分

注册会员

Rank: 2

积分
154
金钱
132
HASS币
0
发表于 2024-5-15 11:22:24 | 显示全部楼层 |阅读模式
type: custom:button-card
show_entity_picture: true
entity_picture: /local/icon/电费.png
name: 用电数据
show_icon: false
show_name: true
show_state: false
styles:
  card:
    - background: none
    - border: none
    - box-shadow: none
  entity_picture:
    - justify-self: start
    - width: 65px
    - padding: 0px
    - margin-left: 10px
    - border-radius: 5px
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      title: 用电数据
      content:
        type: custom:swipe-card
        parameters:
          loop: true
          effect: coverflow
        cards:
          - type: custom:stack-in-card
            title: 用电数据
            mode: vertical
            cards:
              - type: horizontal-stack
                cards:
                  - type: custom:mushroom-entity-card
                    entity: sensor.state_grid_6108617426058_month_ele_num
                    name: 本月用电
                    layout: vertical
                    icon: mdi:home-lightning-bolt-outline
                    icon_color: yellow
                  - type: custom:mushroom-entity-card
                    entity: sensor.state_grid_6108617426058_daily_ele_num
                    name: 日总用电
                    layout: vertical
                    icon: mdi:home-lightning-bolt-outline
                    icon_color: yellow
              - type: horizontal-stack
                cards:
                  - type: custom:mushroom-entity-card
                    entity: sensor.state_grid_6108617426058_last_month_ele_num
                    name: 上月用电
                    layout: vertical
                    icon: mdi:home-lightning-bolt-outline
                    icon_color: yellow
                  - type: custom:mushroom-entity-card
                    entity: sensor.state_grid_6108617426058_last_month_ele_cost
                    name: 上月电费
                    layout: vertical
                    icon: mdi:currency-jpy
                    icon_color: green
              - type: horizontal-stack
                cards:
                  - type: custom:mushroom-entity-card
                    entity: sensor.state_grid_6108617426058_year_ele_num
                    name: 本年用电
                    layout: vertical
                    icon: mdi:home-lightning-bolt-outline
                    icon_color: yellow
                  - type: custom:mushroom-entity-card
                    entity: sensor.state_grid_6108617426058_year_ele_cost
                    name: 本年电费
                    layout: vertical
                    icon: mdi:currency-jpy
                    icon_color: green
              - type: custom:mushroom-entity-card
                entity: sensor.state_grid_6108617426058_balance
                name: 电费余额
                layout: vertical
                icon: mdi:currency-jpy
                icon_color: green

1715743078023.jpg
1715743155517.jpg

评分

参与人数 2金钱 +9 收起 理由
shenzihan999 + 1 感谢楼主分享!
summ99111 + 8

查看全部评分

回复

使用道具 举报

6

主题

160

帖子

1189

积分

金牌会员

Rank: 6Rank: 6

积分
1189
金钱
1029
HASS币
10
发表于 2024-5-15 12:33:19 | 显示全部楼层
let me see see
回复

使用道具 举报

33

主题

2043

帖子

5325

积分

论坛元老

Rank: 8Rank: 8

积分
5325
金钱
3282
HASS币
60
QQ
发表于 2024-5-15 13:36:07 | 显示全部楼层
用起来了,谢谢分享。
我不生产技术,我只是技术的搬运工。
回复

使用道具 举报

7

主题

1087

帖子

3436

积分

论坛元老

Rank: 8Rank: 8

积分
3436
金钱
2349
HASS币
0
发表于 2024-5-15 14:03:14 | 显示全部楼层
谢谢大佬分享。
电费.png
等等图标能发一下不
回复

使用道具 举报

5

主题

195

帖子

1415

积分

金牌会员

Rank: 6Rank: 6

积分
1415
金钱
1220
HASS币
0
发表于 2024-5-15 14:20:18 | 显示全部楼层
已用上 支持
回复

使用道具 举报

4

主题

38

帖子

168

积分

注册会员

Rank: 2

积分
168
金钱
130
HASS币
0
发表于 2024-5-15 14:30:55 | 显示全部楼层
let me see see
回复

使用道具 举报

1

主题

95

帖子

492

积分

中级会员

Rank: 3Rank: 3

积分
492
金钱
397
HASS币
0
发表于 2024-5-15 14:41:23 | 显示全部楼层
厉害厉害  let me see see
回复

使用道具 举报

10

主题

157

帖子

853

积分

高级会员

Rank: 4

积分
853
金钱
696
HASS币
0
发表于 2024-5-15 14:56:55 | 显示全部楼层

let me see see
回复

使用道具 举报

19

主题

416

帖子

2395

积分

金牌会员

Rank: 6Rank: 6

积分
2395
金钱
1974
HASS币
20
发表于 2024-5-15 15:41:13 | 显示全部楼层
大佬 点击不弹出是啥问题
回复

使用道具 举报

4

主题

55

帖子

1132

积分

金牌会员

Rank: 6Rank: 6

积分
1132
金钱
1077
HASS币
0
发表于 2024-5-15 16:23:35 | 显示全部楼层
小白请教!怎样更改主题和用电数据的图标
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-5-26 11:38 , Processed in 5.475303 second(s), 36 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表