可以参考大佬顶部卡片2.0配置,我在他的基础上进行了部分修改,如下代码为文学弹窗卡片内容
type: custom:mod-card
card:
type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:button-card
entity: sensor.mei_ri_yi_yan
show_icon: false
show_state: true
show_label: true
show_name: true
name: 每日一言
label: |
[[[
if (entity.attributes.from && entity.attributes.author) {
return entity.attributes.from + ', ' + entity.attributes.author;
} else {
return '未知类型 ';
}
]]]
styles:
grid:
- grid-template-areas: '"n " "s " "l "'
card:
- '--keep-background': 'true'
- justify-self: start
- align-self: start
- background-image: |
[[[
if (entity.attributes.thumb) {
return 'url(' + entity.attributes.thumb + ')';
} else {
return 'none';
}
]]]
- background-size: cover
- background-position: center
- background-color: rgba(150, 150, 150, 0.7)
- background-repeat: no-repeat
- opacity: 0.9
- background-blend-mode: multiply
state:
- align-self: center
- justify-self: center
- margin-left: 5%
- margin-right: 5%
- margin-top: 1%
- margin-bottom: null
- font-weight: bold
- font-size: 22px
- color: rgb(255 255 255)
- white-space: normal
- word-wrap: break-word
name:
- align-self: start
- justify-self: start
- margin-left: 5%
- font-weight: bold
- font-size: 15px
- color: rgb(255 255 255)
label:
- align-self: center
- justify-self: center
- padding-bottom: 10%
- margin-left: 8%
- margin-top: 1%
- font-size: 11px
- color: rgb(220 220 220)
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
- type: action
tap_action:
action: call-service
service: button.press
target:
device_id: 04f9d8c3771acec44dc960108609a7af
icon: mdi:refresh
alignment: justify
card_mod:
style: |
ha-card {
/* 增加左边边距 */
padding-left: 10px; /* 您可以根据需要调整这个值 */
padding-top: 10px;
padding-right: 10px;
}
- type: custom:button-card
entity: sensor.mei_ri_dian_ying
show_icon: false
show_state: true
show_name: true
styles:
grid:
- grid-template-areas: '"n b""s b""a b" "a b" "c b"'
card:
- justify-self: start
- align-self: start
state:
- align-self: start
- justify-self: start
- margin-left: 8%
- font-weight: bold
- font-size: 20px
name:
- align-self: start
- justify-self: start
- margin-left: 8%
- font-size: 15px
- color: rgb(125 125 125)
custom_fields:
a:
card:
type: custom:button-card
entity: sensor.mei_ri_dian_ying
show_icon: false
show_state: true
show_label: true
show_name: true
name: >
[[[ return '豆瓣评分:' +
entity.attributes.mov_rating ]]]
state_display: |
[[[
if (entity.attributes.mov_type && Array.isArray(entity.attributes.mov_type)) {
var types = entity.attributes.mov_type.join('/'); // 将mov_type数组用斜杠连接
return types + ' ' + entity.attributes.mov_year+ ' ' + entity.attributes.mov_area; // 添加年份到连接后的字符串后面
} else {
return '未知类型 ' + entity.attributes.mov_year+ ' ' + entity.attributes.mov_area; // 如果mov_type不存在或不是数组,返回一个默认值加上年份
}
]]]
label: >
[[[ return '导演:' +
entity.attributes.mov_director ]]]
styles:
card:
- justify-self: start
- padding: 0px
- background: none
- border: none
- box-shadow: none
- align-self: start
name:
- align-self: start
- justify-self: start
- margin-left: 8%
- font-size: 10px
state:
- align-self: start
- justify-self: start
- margin-left: 8%
- font-size: 10px
label:
- align-self: start
- justify-self: start
- margin-left: 8%
- font-size: 10px
b:
card:
type: custom:button-card
show_entity_picture: true
entity_picture: |-
[[[
if (entity.attributes.poster_url) {
return entity.attributes.poster_url;
} else {
return 'none';
}
]]]
styles:
card:
- background: none
- border: none
- box-shadow: none
- justify-self: start
- align-self: start
- margin-left: 10px
- margin-right: 15px
entity_picture:
- justify-self: start
- width: 120px
- padding: 17px
- margin-left: 0px
c:
card:
type: custom:button-card
entity: sensor.mei_ri_dian_ying
show_icon: false
show_state: true
show_label: true
show_name: true
label: →点击转至电影源
name: >
[[[ return '“ ' + entity.attributes.mov_text +
' ”' ]]]
tap_action:
action: url
url_path: |
[[[ return entity.attributes.mov_link ]]]
state_display: |
[[[ return entity.attributes.mov_intro ]]]
styles:
card:
- justify-self: start
- padding: 0px
- background: none
- border: none
- box-shadow: none
- align-self: start
name:
- align-self: start
- justify-self: start
- margin-left: 8%
- font-size: 13px
- padding: 5px
- white-space: normal
- word-wrap: break-word
- text-align: left;
state:
- align-self: start
- justify-self: start
- margin-left: 8%
- font-size: 10px
- white-space: normal
- word-wrap: break-word
- text-align: left;
label:
- align-self: start
- justify-self: start
- margin-left: 8%
- font-size: 10px
- padding-top: 5px
- color: blue
- type: custom:button-card
entity: sensor.ying_yu_yi_ju_hua
show_icon: false
show_state: true
show_label: true
show_name: true
name: 每日英语
label: |
[[[
return entity.attributes.ch
]]]
styles:
grid:
- grid-template-areas: '"n " "s " "l "'
card:
- justify-self: start
- align-self: start
state:
- align-self: start
- justify-self: start
- margin-left: 5%
- margin-right: 10%
- font-size: 18px
- white-space: normal
- word-wrap: break-word
- text-align: left;
name:
- align-self: start
- justify-self: start
- margin-left: 5%
- font-size: 15px
- color: rgb(166 166 166)
- padding-bottom: 3%
label:
- align-self: start
- justify-self: start
- padding-bottom: 10%
- margin-left: 5%
- margin-top: 1%
- font-size: 11px
- padding: 0px
- type: custom:button-card
entity: sensor.shi
show_icon: false
show_state: true
show_label: true
show_name: true
name: 每日诗词
label: |
[[[
if (entity.attributes.title && entity.attributes.author) {
return '《' + entity.attributes.title + '》- ' + entity.attributes.author;
} else {
return '未知类型 ';
}
]]]
styles:
grid:
- grid-template-areas: '"n " "s " "l "'
card:
- justify-self: start
- align-self: start
state:
- align-self: start
- justify-self: start
- margin-left: 5%
- margin-top: 1%
- margin-bottom: null
- font-size: 18px
- white-space: normal
- word-wrap: break-word
- text-align: left;
name:
- align-self: start
- justify-self: start
- margin-left: 5%
- font-size: 15px
- color: rgb(166 166 166)
- padding-bottom: 3%
label:
- align-self: start
- justify-self: start
- padding-bottom: 10%
- margin-left: 5%
- margin-top: 1%
- font-size: 11px
- padding: 0px
|