由于家里还有两个同品牌不同型号的电热毯，我又设计了一个专门的控制卡片。这款电热毯具有模式选择功能，布局更加简洁直观。

效果预览

功能特点

🎯 核心功能

  • 主开关控制，带有状态指示

  • 模式切换（普通/除螨）

  • 左右分区独立控制（档位 + 速热）

  • 倒计时功能

  • 状态监控（故障检测 + S/D状态）

🎨 设计亮点

  • 紧凑布局，节省空间

  • 模式选择直观明了

  • 统一的视觉风格

  • 合理的交互设计

完整配置代码

yaml

type: vertical-stack
cards:
  # 第一行：主开关和模式选择
  - type: horizontal-stack
    cards:
      # 主开关
      - type: custom:button-card
        name: 电热毯
        entity: switch.jipin_cn_899985142_002_on_p_2_1
        layout: vertical
        show_state: true
        state:
          - value: 'on'
            name: 已开启
            styles:
              icon:
                - color: var(--paper-item-icon-active-color)
                - width: 35px
                - height: 35px
              name:
                - font-size: 13px
                - font-weight: bold
              state:
                - font-size: 11px
                - color: var(--paper-item-icon-active-color)
              card:
                - background-color: 'rgba(255,193,7,0.2)'
                - border: 2px solid var(--paper-item-icon-active-color)
          - value: 'off'
            name: 电热毯
            styles:
              icon:
                - color: var(--disabled-text-color)
                - width: 35px
                - height: 35px
              name:
                - font-size: 13px
                - font-weight: bold
              state:
                - font-size: 11px
                - color: var(--disabled-text-color)
              card:
                - background-color: 'rgba(189,189,189,0.1)'
        tap_action:
          action: toggle
        icon: mdi:blanket
        styles:
          card:
            - padding: 8px
            - height: 90px
          grid:
            - grid-template-areas: '"i" "n" "s"'
            - grid-template-rows: 1fr min-content min-content
            - row-gap: 6px

      # 模式选择
      - type: custom:button-card
        name: 模式
        entity: select.jipin_cn_899985142_002_mode_p_2_3
        layout: vertical
        show_state: true
        show_name: true
        state:
          - value: '普通'
            styles:
              icon:
                - color: var(--paper-item-icon-active-color)
              name:
                - font-size: 12px
              state:
                - font-size: 12px
                - color: var(--paper-item-icon-active-color)
          - value: '除螨'
            styles:
              icon:
                - color: '#2196f3'
              name:
                - font-size: 12px
              state:
                - font-size: 12px
                - color: '#2196f3'
              card:
                - background-color: 'rgba(33,150,243,0.15)'
        icon: mdi:menu
        tap_action:
          action: more-info
        styles:
          card:
            - padding: 8px
            - height: 90px
          grid:
            - grid-template-areas: '"i" "n" "s"'
            - grid-template-rows: 1fr min-content min-content
            - row-gap: 6px

      # 倒计时
      - type: custom:button-card
        name: 倒计时
        entity: number.jipin_cn_899985142_002_countdown_time_p_5_1
        layout: vertical
        show_state: true
        show_name: true
        state:
          - operator: default
            styles:
              name:
                - font-size: 12px
              state:
                - font-size: 12px
                - font-weight: bold
        icon: mdi:timer-outline
        tap_action:
          action: more-info
        hold_action:
          action: more-info
        styles:
          card:
            - padding: 8px
            - height: 90px
          grid:
            - grid-template-areas: '"i" "n" "s"'
            - grid-template-rows: 1fr min-content min-content
            - row-gap: 6px

  # 第二行：左右控制
  - type: horizontal-stack
    cards:
      # 左侧控制
      - type: vertical-stack
        cards:
          - type: custom:button-card
            name: 左档位
            entity: number.jipin_cn_899985142_002_left_gears_p_4_2
            layout: vertical
            show_state: true
            show_name: true
            state:
              - operator: default
                styles:
                  name:
                    - font-size: 11px
                  state:
                    - font-size: 13px
                    - font-weight: bold
            icon: mdi:heat-wave
            tap_action:
              action: more-info
            hold_action:
              action: more-info
            styles:
              card:
                - padding: 6px
                - height: 75px
              grid:
                - grid-template-areas: '"i" "n" "s"'
                - grid-template-rows: 1fr min-content min-content
                - row-gap: 4px

          - type: custom:button-card
            name: 左速热
            entity: switch.jipin_cn_899985142_002_left_speed_hot_p_4_4
            layout: vertical
            show_state: true
            show_name: true
            state:
              - value: 'on'
                styles:
                  icon:
                    - color: '#ff9800'
                  name:
                    - font-size: 11px
                  state:
                    - font-size: 11px
                    - color: '#ff9800'
                  card:
                    - background-color: 'rgba(255,152,0,0.15)'
              - value: 'off'
                styles:
                  icon:
                    - color: var(--disabled-text-color)
                  name:
                    - font-size: 11px
                  state:
                    - font-size: 11px
                    - color: var(--disabled-text-color)
            icon: mdi:flash
            tap_action:
              action: toggle
            styles:
              card:
                - padding: 6px
                - height: 75px
              grid:
                - grid-template-areas: '"i" "n" "s"'
                - grid-template-rows: 1fr min-content min-content
                - row-gap: 4px

      # 右侧控制
      - type: vertical-stack
        cards:
          - type: custom:button-card
            name: 右档位
            entity: number.jipin_cn_899985142_002_right_gears_p_4_3
            layout: vertical
            show_state: true
            show_name: true
            state:
              - operator: default
                styles:
                  name:
                    - font-size: 11px
                  state:
                    - font-size: 13px
                    - font-weight: bold
            icon: mdi:heat-wave
            tap_action:
              action: more-info
            hold_action:
              action: more-info
            styles:
              card:
                - padding: 6px
                - height: 75px
              grid:
                - grid-template-areas: '"i" "n" "s"'
                - grid-template-rows: 1fr min-content min-content
                - row-gap: 4px

          - type: custom:button-card
            name: 右速热
            entity: switch.jipin_cn_899985142_002_right_speed_hot_p_4_5
            layout: vertical
            show_state: true
            show_name: true
            state:
              - value: 'on'
                styles:
                  icon:
                    - color: '#ff9800'
                  name:
                    - font-size: 11px
                  state:
                    - font-size: 11px
                    - color: '#ff9800'
                  card:
                    - background-color: 'rgba(255,152,0,0.15)'
              - value: 'off'
                styles:
                  icon:
                    - color: var(--disabled-text-color)
                  name:
                    - font-size: 11px
                  state:
                    - font-size: 11px
                    - color: var(--disabled-text-color)
            icon: mdi:flash
            tap_action:
              action: toggle
            styles:
              card:
                - padding: 6px
                - height: 75px
              grid:
                - grid-template-areas: '"i" "n" "s"'
                - grid-template-rows: 1fr min-content min-content
                - row-gap: 4px

  # 第三行：状态信息
  - type: horizontal-stack
    cards:
      # 故障状态
      - type: custom:button-card
        entity: sensor.jipin_cn_899985142_002_fault_p_2_2
        layout: horizontal
        show_state: true
        show_name: false
        state:
          - value: '故障'
            styles:
              icon:
                - color: '#ff3d00'
              state:
                - font-size: 11px
                - font-weight: bold
                - color: '#ff3d00'
              card:
                - background-color: 'rgba(255,61,0,0.1)'
          - value: '无故障'
            styles:
              icon:
                - color: '#4caf50'
              state:
                - font-size: 11px
                - color: '#4caf50'
          - operator: default
            styles:
              icon:
                - color: '#4caf50'
              state:
                - font-size: 11px
                - color: '#4caf50'
        icon: mdi:alert-circle-outline
        tap_action:
          action: more-info
        styles:
          card:
            - padding: 6px 10px
            - height: 35px
          grid:
            - grid-template-areas: '"i s"'
            - grid-template-columns: 1fr 2fr
            - align-items: center

      # S/D状态
      - type: custom:button-card
        entity: sensor.jipin_cn_899985142_002_option_p_4_6
        layout: horizontal
        show_state: true
        show_name: false
        state:
          - operator: default
            styles:
              icon:
                - color: var(--paper-item-icon-active-color)
              state:
                - font-size: 11px
                - color: var(--paper-item-icon-active-color)
        name: S/D
        icon: mdi:information-outline
        tap_action:
          action: more-info
        styles:
          card:
            - padding: 6px 10px
            - height: 35px
          grid:
            - grid-template-areas: '"i s"'
            - grid-template-columns: 1fr 2fr
            - align-items: center

使用说明

操作指南

  • 主开关：点击切换电热毯开关状态

  • 模式选择：点击切换"普通"和"除螨"模式

  • 倒计时：点击查看倒计时，长按调整时间

  • 档位按钮：点击查看当前档位，长按调整档位

  • 速热开关：点击开启/关闭速热功能

状态指示

  • 🟡 黄色边框：设备已开启

  • 🔵 蓝色背景：除螨模式开启

  • 🟠 橙色背景：速热功能开启

  • 🔴 红色背景：设备故障

  • 🟢 绿色图标：设备运行正常

设计特点

紧凑布局

这款卡片采用了更加紧凑的设计，适合在有限空间内展示：

  • 三行布局，每行高度适中

  • 较小的内边距和字体大小

  • 统一的行高和间距

模式选择

与第一款电热毯不同，这款使用选择实体控制模式：

  • 普通模式：使用默认颜色

  • 除螨模式：使用蓝色高亮显示

状态监控

  • 故障状态实时监控

  • S/D状态显示（具体含义需根据设备说明）

自定义建议

调整尺寸

如果卡片在您的界面上显示不合适，可以调整整体尺寸：

yaml

# 增加整体高度
- height: 85px   # 改为更大的值

# 调整字体大小
- font-size: 13px  # 改为更大的值

修改颜色

您可以根据自己的主题调整颜色：

yaml

# 修改除螨模式颜色
- color: '#2196f3'  # 蓝色
# 可替换为：
- color: '#9c27b0'  # 紫色
- color: '#009688'  # 青色

结语

这款电热毯控制卡片专为第二款电热毯设计，布局更加紧凑，功能更加集中。通过模式选择替代独立的除螨开关，使界面更加简洁。如果您在使用过程中有任何问题，或需要进一步调整，请随时告知。

希望这款卡片能为您的智能家居控制带来便利！