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

 找回密码
 立即注册
楼主: hhh.

[流程系列] node-red本地计算万年历流程+万年历卡片

  [复制链接]

9

主题

229

帖子

2230

积分

论坛UI达人

积分
2230
金钱
2001
HASS币
0
 楼主| 发表于 2024-4-9 22:53:58 | 显示全部楼层
dscao 发表于 2024-4-9 21:49
感谢楼主又整理了一下,我也调整了一下,强迫症不喜欢一下子多这么多实体。在帖子附件的基础上修改了一下, ...

我也合并成功了,感谢大佬。
回复

使用道具 举报

77

主题

1392

帖子

2万

积分

元老级技术达人

积分
24744
金钱
23312
HASS币
290
发表于 2024-4-9 23:03:41 | 显示全部楼层
Mr.G 发表于 2024-4-9 21:56
我这边也改为一个实体了,问下卡片那里要怎么调用属性

这个我用了:custom:config-template-card
回复

使用道具 举报

77

主题

1392

帖子

2万

积分

元老级技术达人

积分
24744
金钱
23312
HASS币
290
发表于 2024-4-9 23:05:31 | 显示全部楼层
本帖最后由 dscao 于 2024-4-9 23:10 编辑
type: custom:config-template-card
entities:
  - sensor.nong_li
card:
  type: custom:button-card
  show_icon: true
  show_state: false
  show_name: false
  styles:
    grid:
      - grid-template-areas: ' "a b f g g"  "a c h i i"  "a d j k k"  "a e l m n"  "o p p p p"  "q r r r r" "s t t t t"  "u v v v v" "w x x x x" "y z z z z"'
      - grid-template-columns: 70px 20px 1fr 1fr 1fr
      - grid-template-rows: 75px 75px 75px 75px 75px 1fr 1fr 1fr 1fr 1fr
    card:
      - padding: 10px
  custom_fields:
    a:
      card:
        type: custom:button-card
        entity: sensor.nong_li
        show_icon: false
        show_name: false
        show_state: true
        show_label: false
        styles:
          grid:
            - height: 320px
          card:
            - background: none
            - border: none
            - box-shadow: none
          state:
            - writing-mode: vertical-lr
            - font-weight: bold
            - font-size: 30px
            - letter-spacing: 10px
    b:
      card:
        type: custom:button-card
        name: ${states['sensor.nong_li'].attributes.tian_gan_nian}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - margin-top: 10px
            - background: none
            - border: none
            - box-shadow: none
          name:
            - writing-mode: vertical-lr
            - font-weight: lighter
            - font-size: 12px
            - letter-spacing: 6px
    c:
      card:
        type: custom:button-card
        name: ${states['sensor.nong_li'].attributes.tian_gan_yue}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - margin-top: 10px
            - background: none
            - border: none
            - box-shadow: none
          name:
            - writing-mode: vertical-lr
            - font-weight: lighter
            - font-size: 12px
            - letter-spacing: 6px
    d:
      card:
        type: custom:button-card
        name: ${states['sensor.nong_li'].attributes.tian_gan_ri}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - margin-top: 10px
            - background: none
            - border: none
            - box-shadow: none
          name:
            - writing-mode: vertical-lr
            - font-weight: lighter
            - font-size: 12px
            - letter-spacing: 6px
    e:
      card:
        type: custom:button-card
        entity: sensor.xing_qi
        show_icon: false
        show_name: false
        show_state: true
        show_label: false
        styles:
          grid: null
          card:
            - margin-top: 10px
            - background: none
            - border: none
            - box-shadow: none
          state:
            - writing-mode: vertical-lr
            - font-weight: lighter
            - font-size: 12px
            - letter-spacing: 6px
    f:
      card:
        type: custom:button-card
        name: 五行
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - justify-self: end
            - font-weight: bold
            - font-size: 18px
            - letter-spacing: 3px
    g:
      card:
        type: custom:button-card
        name: ${states['sensor.nong_li'].attributes.wu_xing}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - margin-left: 10%
            - font-weight: lighter
            - justify-self: start
            - font-size: 15px
            - letter-spacing: 1px
    h:
      card:
        type: custom:button-card
        name: 冲煞
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - justify-self: end
            - font-weight: bold
            - font-size: 18px
            - letter-spacing: 3px
    i:
      card:
        type: custom:button-card
        name: ${states['sensor.nong_li'].attributes.chong_sha}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - margin-left: 10%
            - font-weight: lighter
            - justify-self: start
            - font-size: 15px
            - letter-spacing: 1px
    j:
      card:
        type: custom:button-card
        name: 彭祖
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - justify-self: end
            - font-weight: bold
            - font-size: 18px
            - letter-spacing: 3px
    k:
      card:
        type: custom:button-card
        name: ${states['sensor.nong_li'].attributes.peng_zu_gan}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - margin-left: 10%
            - font-weight: lighter
            - justify-self: start
            - font-size: 15px
            - letter-spacing: 1px
    l:
      card:
        type: custom:button-card
        name: ${'喜神:'+states['sensor.nong_li'].attributes.xi_shen}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - font-size: 14px
            - font-weight: bold
            - letter-spacing: 1px
          state:
            - font-weight: lighter
            - font-size: 14px
            - letter-spacing: 3px
    m:
      card:
        type: custom:button-card
        name: ${'福神:'+states['sensor.nong_li'].attributes.fu_shen}
        show_icon: false
        show_name: true
        show_state: false
        show_label: true
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - font-size: 14px
            - font-weight: bold
            - letter-spacing: 1px
          state:
            - font-weight: lighter
            - font-size: 14px
            - letter-spacing: 3px
    'n':
      card:
        type: custom:button-card
        name: ${'财神:'+states['sensor.nong_li'].attributes.cai_shen}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - font-size: 14px
            - font-weight: bold
            - letter-spacing: 1px
          state:
            - font-weight: lighter
            - font-size: 14px
            - letter-spacing: 3px
    o:
      card:
        type: custom:button-card
        name: 宜
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - justify-self: end
            - font-weight: bold
            - font-size: 25px
            - color: green
    p:
      card:
        type: custom:button-card
        name: ${states['sensor.nong_li'].attributes.yi}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - margin-left: 15px
            - font-weight: lighter
            - justify-self: start
            - font-size: 13px
            - letter-spacing: 3px
            - white-space: normal
    q:
      card:
        type: custom:button-card
        name: 忌
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - justify-self: end
            - font-weight: bold
            - font-size: 25px
            - color: red
    r:
      card:
        type: custom:button-card
        name: ${states['sensor.nong_li'].attributes.ji}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - margin-left: 15px
            - font-weight: lighter
            - justify-self: start
            - font-size: 13px
            - letter-spacing: 3px
            - white-space: normal
    s:
      card:
        type: custom:button-card
        name: 八字
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - justify-self: end
            - font-weight: bold
            - font-size: 18px
    t:
      card:
        type: custom:button-card
        name: ${states['sensor.nong_li'].attributes.ba_zi}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - margin-left: 15px
            - font-weight: lighter
            - justify-self: start
            - font-size: 13px
            - letter-spacing: 3px
    u:
      card:
        type: custom:button-card
        name: 胎神
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - justify-self: end
            - font-weight: bold
            - font-size: 18px
    v:
      card:
        type: custom:button-card
        name: ${states['sensor.nong_li'].attributes.tai_shen}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - margin-left: 15px
            - font-weight: lighter
            - justify-self: start
            - font-size: 13px
            - letter-spacing: 3px
    w:
      card:
        type: custom:button-card
        name: 吉神
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - justify-self: end
            - font-weight: bold
            - font-size: 20px
    x:
      card:
        type: custom:button-card
        name: ${states['sensor.nong_li'].attributes.ji_shen}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - margin-left: 15px
            - font-weight: lighter
            - justify-self: start
            - font-size: 13px
            - letter-spacing: 3px
            - white-space: normal
    'y':
      card:
        type: custom:button-card
        name: 凶神
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - justify-self: end
            - font-weight: bold
            - font-size: 20px
    z:
      card:
        type: custom:button-card
        name: ${states['sensor.nong_li'].attributes.xiong_shen}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - margin-left: 15px
            - font-weight: lighter
            - justify-self: start
            - font-size: 13px
            - letter-spacing: 3px
            - white-space: normal


要先安装一下这个卡片: https://github.com/iantrich/config-template-card

flows.json

11.66 KB, 阅读权限: 20, 下载次数: 29

修改了一点点

回复

使用道具 举报

9

主题

229

帖子

2230

积分

论坛UI达人

积分
2230
金钱
2001
HASS币
0
 楼主| 发表于 2024-4-9 23:09:27 | 显示全部楼层
dscao 发表于 2024-4-9 23:05
要先安装一下这个卡片: https://github.com/iantrich/config-template-card

还是大佬牛皮,我还在button-card中改呢
回复

使用道具 举报

22

主题

473

帖子

6403

积分

元老级技术达人

略懂一些皮毛而已!

积分
6403
金钱
5920
HASS币
40
发表于 2024-4-9 23:33:31 | 显示全部楼层
QQ截图20240409233059.png QQ截图20240409233112.png


在@dscao 大佬的改的基础上做了一点小小的修改,把原来的星期显示改为了时辰显示,代码如下


type: custom:config-template-card
entities:
  - sensor.nong_li
card:
  type: custom:button-card
  show_icon: true
  show_state: false
  show_name: false
  styles:
    grid:
      - grid-template-areas: ' "a b f g g"  "a c h i i"  "a d j k k"  "a e l m n"  "o p p p p"  "q r r r r" "s t t t t"  "u v v v v" "w x x x x" "y z z z z"'
      - grid-template-columns: 70px 20px 1fr 1fr 1fr
      - grid-template-rows: 75px 75px 75px 75px 75px 1fr 1fr 1fr 1fr 1fr
    card:
      - padding: 10px
  custom_fields:
    a:
      card:
        type: custom:button-card
        entity: sensor.nong_li
        show_icon: false
        show_name: false
        show_state: true
        show_label: false
        styles:
          grid:
            - height: 320px
          card:
            - background: none
            - border: none
            - box-shadow: none
          state:
            - writing-mode: vertical-lr
            - font-weight: bold
            - font-size: 30px
            - letter-spacing: 10px
    b:
      card:
        type: custom:button-card
        name: ${states['sensor.nong_li'].attributes.tian_gan_nian}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - margin-top: 10px
            - background: none
            - border: none
            - box-shadow: none
          name:
            - writing-mode: vertical-lr
            - font-weight: lighter
            - font-size: 12px
            - letter-spacing: 6px
    c:
      card:
        type: custom:button-card
        name: ${states['sensor.nong_li'].attributes.tian_gan_yue}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - margin-top: 10px
            - background: none
            - border: none
            - box-shadow: none
          name:
            - writing-mode: vertical-lr
            - font-weight: lighter
            - font-size: 12px
            - letter-spacing: 6px
    d:
      card:
        type: custom:button-card
        name: ${states['sensor.nong_li'].attributes.tian_gan_ri}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - margin-top: 10px
            - background: none
            - border: none
            - box-shadow: none
          name:
            - writing-mode: vertical-lr
            - font-weight: lighter
            - font-size: 12px
            - letter-spacing: 6px
    e:
      card:
        type: custom:button-card
        name: ${states['sensor.nong_li'].attributes.shi_chen}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - margin-top: 10px
            - background: none
            - border: none
            - box-shadow: none
          name:
            - writing-mode: vertical-lr
            - font-weight: lighter
            - font-size: 12px
            - letter-spacing: 6px
    f:
      card:
        type: custom:button-card
        name: 五行
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - justify-self: end
            - font-weight: bold
            - font-size: 18px
            - letter-spacing: 3px
    g:
      card:
        type: custom:button-card
        name: ${states['sensor.nong_li'].attributes.wu_xing}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - margin-left: 10%
            - font-weight: lighter
            - justify-self: start
            - font-size: 15px
            - letter-spacing: 1px
    h:
      card:
        type: custom:button-card
        name: 冲煞
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - justify-self: end
            - font-weight: bold
            - font-size: 18px
            - letter-spacing: 3px
    i:
      card:
        type: custom:button-card
        name: ${states['sensor.nong_li'].attributes.chong_sha}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - margin-left: 10%
            - font-weight: lighter
            - justify-self: start
            - font-size: 15px
            - letter-spacing: 1px
    j:
      card:
        type: custom:button-card
        name: 彭祖
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - justify-self: end
            - font-weight: bold
            - font-size: 18px
            - letter-spacing: 3px
    k:
      card:
        type: custom:button-card
        name: ${states['sensor.nong_li'].attributes.peng_zu_gan}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - margin-left: 10%
            - font-weight: lighter
            - justify-self: start
            - font-size: 15px
            - letter-spacing: 1px
    l:
      card:
        type: custom:button-card
        name: ${'喜神:'+states['sensor.nong_li'].attributes.xi_shen}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - font-size: 14px
            - font-weight: bold
            - letter-spacing: 1px
          state:
            - font-weight: lighter
            - font-size: 14px
            - letter-spacing: 3px
    m:
      card:
        type: custom:button-card
        name: ${'福神:'+states['sensor.nong_li'].attributes.fu_shen}
        show_icon: false
        show_name: true
        show_state: false
        show_label: true
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - font-size: 14px
            - font-weight: bold
            - letter-spacing: 1px
          state:
            - font-weight: lighter
            - font-size: 14px
            - letter-spacing: 3px
    'n':
      card:
        type: custom:button-card
        name: ${'财神:'+states['sensor.nong_li'].attributes.cai_shen}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - font-size: 14px
            - font-weight: bold
            - letter-spacing: 1px
          state:
            - font-weight: lighter
            - font-size: 14px
            - letter-spacing: 3px
    o:
      card:
        type: custom:button-card
        name: 宜
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - justify-self: end
            - font-weight: bold
            - font-size: 25px
            - color: green
    p:
      card:
        type: custom:button-card
        name: ${states['sensor.nong_li'].attributes.yi}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - margin-left: 15px
            - font-weight: lighter
            - justify-self: start
            - font-size: 13px
            - letter-spacing: 3px
            - white-space: normal
    q:
      card:
        type: custom:button-card
        name: 忌
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - justify-self: end
            - font-weight: bold
            - font-size: 25px
            - color: red
    r:
      card:
        type: custom:button-card
        name: ${states['sensor.nong_li'].attributes.ji}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - margin-left: 15px
            - font-weight: lighter
            - justify-self: start
            - font-size: 13px
            - letter-spacing: 3px
            - white-space: normal
    s:
      card:
        type: custom:button-card
        name: 八字
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - justify-self: end
            - font-weight: bold
            - font-size: 18px
    t:
      card:
        type: custom:button-card
        name: ${states['sensor.nong_li'].attributes.ba_zi}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - margin-left: 15px
            - font-weight: lighter
            - justify-self: start
            - font-size: 13px
            - letter-spacing: 3px
    u:
      card:
        type: custom:button-card
        name: 胎神
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - justify-self: end
            - font-weight: bold
            - font-size: 18px
    v:
      card:
        type: custom:button-card
        name: ${states['sensor.nong_li'].attributes.tai_shen}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - margin-left: 15px
            - font-weight: lighter
            - justify-self: start
            - font-size: 13px
            - letter-spacing: 3px
    w:
      card:
        type: custom:button-card
        name: 吉神
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - justify-self: end
            - font-weight: bold
            - font-size: 20px
    x:
      card:
        type: custom:button-card
        name: ${states['sensor.nong_li'].attributes.ji_shen}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - margin-left: 15px
            - font-weight: lighter
            - justify-self: start
            - font-size: 13px
            - letter-spacing: 3px
            - white-space: normal
    'y':
      card:
        type: custom:button-card
        name: 凶神
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - justify-self: end
            - font-weight: bold
            - font-size: 20px
    z:
      card:
        type: custom:button-card
        name: ${states['sensor.nong_li'].attributes.xiong_shen}
        show_icon: false
        show_name: true
        show_state: false
        show_label: false
        styles:
          grid: null
          card:
            - background: none
            - border: none
            - box-shadow: none
          name:
            - margin-left: 15px
            - font-weight: lighter
            - justify-self: start
            - font-size: 13px
            - letter-spacing: 3px
            - white-space: normal




flows.json (11.31 KB, 下载次数: 22)
回复

使用道具 举报

22

主题

622

帖子

2813

积分

金牌会员

Rank: 6Rank: 6

积分
2813
金钱
2191
HASS币
0
发表于 2024-4-10 08:25:54 | 显示全部楼层
dscao 发表于 2024-4-9 21:49
感谢楼主又整理了一下,我也调整了一下,强迫症不喜欢一下子多这么多实体。在帖子附件的基础上修改了一下, ...

大佬我也正想这么改·····你这函数代码能贴下吗
回复

使用道具 举报

0

主题

81

帖子

1345

积分

金牌会员

Rank: 6Rank: 6

积分
1345
金钱
1264
HASS币
0
发表于 2024-4-14 14:11:35 | 显示全部楼层
本帖最后由 lucienyida 于 2024-4-14 14:15 编辑

万年历.png
把“宜”“忌”加了个背景图标,以及下面的”八字、胎神、吉神、凶神“对齐了,看起来更美观了点。

顺便问一下,“彭祖”后面的那个值,怎么让他两行显示。
        name:
          - font-weight: normal
          - justify-self: end
          - font-size: 15px
          - letter-spacing: 5px
          - white-space: normal
用white-space: normal这个并不会自动换行。
回复

使用道具 举报

9

主题

229

帖子

2230

积分

论坛UI达人

积分
2230
金钱
2001
HASS币
0
 楼主| 发表于 2024-4-14 15:57:44 | 显示全部楼层
lucienyida 发表于 2024-4-14 14:11
把“宜”“忌”加了个背景图标,以及下面的”八字、胎神、吉神、凶神“对齐了,看起来更美观了点。

顺便 ...

white-space: normal         这个值就是自动换行,只不过是适应屏幕的换行。

如果把彭祖百忌的数据分离显示,在电脑端是没问题的,但是手机端无法正确显示。

如果你想在电脑端大屏显示,可以考虑分离彭祖百忌数据,去分开显示。在手机端目前这是最优的显示方案。

这个背景图标可以发出来吗?
回复

使用道具 举报

0

主题

81

帖子

1345

积分

金牌会员

Rank: 6Rank: 6

积分
1345
金钱
1264
HASS币
0
发表于 2024-4-14 16:27:44 | 显示全部楼层
hhh. 发表于 2024-4-14 15:57
white-space: normal         这个值就是自动换行,只不过是适应屏幕的换行。

如果把彭祖百忌的数据分 ...
        name:
          - width: 35px
          - height: 35px
          - background-color: green
          - border-radius: 50%
          - justify-content: center
          - color: white
          - font-weight: normal
          - font-size: 25px
回复

使用道具 举报

9

主题

229

帖子

2230

积分

论坛UI达人

积分
2230
金钱
2001
HASS币
0
 楼主| 发表于 2024-4-14 17:29:29 | 显示全部楼层
本帖最后由 hhh. 于 2024-4-14 17:30 编辑
name:
          - width: 30px
          - height: 30px
          - background-color: green
          - border-radius: 50%
          - justify-self: end
          - display: flex
          - justify-content: center
          - align-items: center
          - color: white
          - font-size: 20px
          - line-height: 30px

回复

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-12-22 11:41 , Processed in 0.095306 second(s), 32 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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