本帖最后由 lswq 于 2023-9-24 15:27 编辑
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: 三楼电视柜 TC1
card_mod:
style:
mushroom-title-card$: |
/* Set spacing around greeting */
.header {
--title-padding: 20px 0px 10px 20px;
--title-spacing: 8px;
}
- type: custom:mod-card
card:
type: grid
square: false
mode: horizontal
cards:
- type: custom:mod-card
card:
type: picture
image: /local/image/tc1.png
card_mod: null
style: |
ha-card {
/* Set padding of card */
padding: 0px 0px 0px 0px;
/* Move card up to match header card */
--ha-card-border-radius: 0px;
margin-left: 0px;
margin-right: 40px;
margin-bottom: 0px;
- type: custom:mod-card
card:
type: custom:mushroom-template-card
icon: mdi:timer-play
icon_color: red
layout: horizontal
entity: sensor.ztc1_power_wo_shi
fill_container: true
primary: 运行时间
secondary: '{{states(''sensor.ztc1_time_wo_shi'')}}'
tap_action:
action: fire-dom-event
card_mod: null
style: |
ha-card {
/* Move card up to match header card */
margin-left: -10px;
margin-right: 20px;
margin-top: -5px;
margin-bottom: 0px;
columns: 2
style: |
ha-card {
/* Set padding of card */
padding: 0px 0px 0px 0px;
/* Move card up to match header card */
margin-left: 28px;
margin-right: 0px;
margin-bottom: -8px;
/* Remove styling from card */
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
padding: 0px !important;
transition: all 0s;
}
- type: custom:mod-card
card:
type: horizontal-stack
cards:
- type: custom:mod-card
card:
type: custom:mushroom-title-card
subtitle: 功率 Power
style:
mushroom-title-card$: |
/* Style name */
.subtitle {
--subtitle-font-size: 18px;
--subtitle-font-weight: var(--mush-title-font-weight, bold);
color: var(--secondary-text-color) !important;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
alignment: end
subtitle: {{states('sensor.ztc1_power_wo_shi')}} W
style:
mushroom-title-card$: |
/* Style name */
.subtitle {
--subtitle-font-size: 18px;
--subtitle-font-weight: var(--mush-title-font-weight, bold);
color: var(--secondary-text-color) !important;
}
style: |
ha-card {
margin-left: 10px;
margin-right: 10px;
margin-bottom: -40px;
}
- type: custom:mod-card
card:
type: custom:mini-graph-card
name: null
entities:
- sensor.ztc1_power_wo_shi
animate: false
height: 100
upper_bound_secondary: 40
line_color: skyblue
line_width: 6
font_size: 80
font-weight: bold
show:
name: false
icon: false
state: false
style: |
ha-card {
/* Move card up to match header card */
margin-left: 10px;
margin-right: 10px;
margin-bottom: 0px;
/* Remove styling from card */
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
--ha-card-border-radius: 15px;
padding: 0px !important;
transition: all 0s;
}
- type: custom:mod-card
card:
type: grid
square: true
cards:
- type: custom:mushroom-entity-card
entity: switch.ztc1_1_d0bae462fe78
layout: vertical
icon_color: blue
tap_action:
action: toggle
double_tap_action:
action: more-info
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: auto;
border-radius: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}
- type: custom:mushroom-entity-card
entity: switch.ztc1_2_d0bae462fe78
layout: vertical
icon_color: purple
tap_action:
action: toggle
double_tap_action:
action: more-info
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: auto;
border-radius: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}
- type: custom:mushroom-entity-card
entity: switch.ztc1_3_d0bae462fe78
layout: vertical
icon_color: red
tap_action:
action: toggle
double_tap_action:
action: more-info
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: auto;
border-radius: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}
- type: custom:mushroom-entity-card
entity: switch.ztc1_4_d0bae462fe78
name: 扫地充电座
layout: vertical
icon_color: green
tap_action:
action: toggle
double_tap_action:
action: more-info
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: auto;
border-radius: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}
- type: custom:mushroom-entity-card
entity: switch.ztc1_5_d0bae462fe78
name: 小米网关
layout: vertical
icon_color: orange
tap_action:
action: toggle
double_tap_action:
action: more-info
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: auto;
border-radius: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}
- type: custom:mushroom-entity-card
entity: switch.ztc1_6_d0bae462fe78
layout: vertical
icon_color: blue
tap_action:
action: toggle
double_tap_action:
action: more-info
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: auto;
border-radius: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}
columns: 3
card_mod:
style: |
ha-card {
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
}
需要hacs下载相应卡片，和使用主题，如果不想用主题可以自己使用cardmod在里面自己修改背景色和卡片圆角及阴影，主题是我结合Google和minimalist改的，还有抠了背景的图片放在下面压缩包里了
| 
楼主: 623305170
发表于 2023-9-24 14:17:57
楼主
