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

 找回密码
 立即注册
查看: 419|回复: 12

[UI界面] 弹出卡片上下白边 如何消除??

[复制链接]

4

主题

24

帖子

363

积分

中级会员

Rank: 3Rank: 3

积分
363
金钱
339
HASS币
0
发表于 2024-4-9 22:32:13 | 显示全部楼层 |阅读模式
如图:
请问上下白边如何消除,
Screenshot_20240409_222633.jpg
回复

使用道具 举报

3

主题

43

帖子

397

积分

中级会员

Rank: 3Rank: 3

积分
397
金钱
354
HASS币
0
发表于 2024-4-9 23:45:46 | 显示全部楼层
楼主请问这每日电影、每日一言等怎么做的
回复

使用道具 举报

7

主题

134

帖子

969

积分

高级会员

Rank: 4

积分
969
金钱
835
HASS币
0
发表于 2024-4-10 00:15:44 | 显示全部楼层
换mushroom shadow主题。

给卡片添加  title:

回复

使用道具 举报

4

主题

24

帖子

363

积分

中级会员

Rank: 3Rank: 3

积分
363
金钱
339
HASS币
0
 楼主| 发表于 2024-4-10 00:29:59 | 显示全部楼层
matrix007 发表于 2024-4-9 23:45
楼主请问这每日电影、每日一言等怎么做的

有个浏览器主页插件itab,我从插件卡片那里抓的数据,
回复

使用道具 举报

4

主题

24

帖子

363

积分

中级会员

Rank: 3Rank: 3

积分
363
金钱
339
HASS币
0
 楼主| 发表于 2024-4-10 00:36:49 | 显示全部楼层
hhh. 发表于 2024-4-10 00:15
换mushroom shadow主题。

给卡片添加  title:

回复

使用道具 举报

4

主题

24

帖子

363

积分

中级会员

Rank: 3Rank: 3

积分
363
金钱
339
HASS币
0
 楼主| 发表于 2024-4-10 00:39:57 | 显示全部楼层

感觉加了title更丑了,不过黑暗模式确实没那么明显,谢谢大佬
下载.png
回复

使用道具 举报

7

主题

134

帖子

969

积分

高级会员

Rank: 4

积分
969
金钱
835
HASS币
0
发表于 2024-4-10 09:52:03 | 显示全部楼层
chaosl 发表于 2024-4-10 00:39
感觉加了title更丑了,不过黑暗模式确实没那么明显,谢谢大佬

你加错位置了,加到弹出卡片

- type: custom: stack-in-card
   title: 每日一言
回复

使用道具 举报

7

主题

1072

帖子

3361

积分

论坛元老

Rank: 8Rank: 8

积分
3361
金钱
2289
HASS币
0
发表于 2024-4-10 10:08:14 | 显示全部楼层
你们搞的ui还蛮好看的,啥时候分享一下啊
回复

使用道具 举报

4

主题

24

帖子

363

积分

中级会员

Rank: 3Rank: 3

积分
363
金钱
339
HASS币
0
 楼主| 发表于 2024-4-10 20:06:27 | 显示全部楼层
hhh. 发表于 2024-4-10 09:52
你加错位置了,加到弹出卡片

- type: custom: stack-in-card

看来是没办法了,谢谢大佬
screenshot-1712750707482.png
回复

使用道具 举报

4

主题

24

帖子

363

积分

中级会员

Rank: 3Rank: 3

积分
363
金钱
339
HASS币
0
 楼主| 发表于 2024-4-10 20:27:23 | 显示全部楼层
隔壁的王叔叔 发表于 2024-4-10 10:08
你们搞的ui还蛮好看的,啥时候分享一下啊

可以参考大佬顶部卡片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
回复

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-5-3 02:39 , Processed in 0.066961 second(s), 34 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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