小部件主题

主题变量

小部件开发时所有颜色需遵循主题变量规则，需要使用变量替代

代码示例

index.html

// widget/index.html
<div class="widget-container">
  <div class="widget-title">{{ widgetData.title }}</div>
  <div class="content-container">
    <img class="banner" src="../assets/images/default.png" alt="" />
    <div class="description">{{ widgetData.description }}</div>
  </div>
</div>

index.css

.widget-title {
  position: absolute;
  left: 0;
  top: 0;
  height: 28px;
  line-height: 28px;
  padding: 0 17px;
  color: var(--primary-color, #d62a1e); // 颜色使用主题变量，后跟默认值
  background: var(
    --primary-background-color,
    #fbe9e8
  ); // 颜色使用主题变量，后跟默认值
  // background: var(--screen-background, #fff) no-repeat 0 0 / cover;  // 背景图也可以使用主题变量，后跟默认值
  border-radius: 0 0 18px 0;
  font-size: 14px;
  font-weight: bolder;
  text-align: center;
}
.widget-container {
  position: relative;
  box-sizing: border-box;
  padding-top: 36px;
  background-color: #fff;
}
.content-container {
  padding: 0 20px;
  color: #333;
  box-sizing: border-box;
}
.banner {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 6px;
  overflow: hidden;
}
.title {
  margin-top: 2px;
  font-size: 16px;
  font-weight: bold;
}
.description {
  margin-top: 4px;
  font-size: 14px;
  word-break: break-all;
  text-align: justify;
  line-height: 1.5;
}

主题变量

主题变量为 css3 变量，开发涉及颜色时需要使用主题变量功能

可选值

属性	类型	说明
`--screen-background`	容器色	全局背景⾊，⽤于屏幕⽐例拉伸时填充⻚⾯空⽩,也可使用背景图
`--widget-container`	容器色	卡⽚背景⾊，⽤于卡⽚容器
`--container-sub-color`	容器色	容器装饰⾊，卡⽚装饰元素⾊，⽤于卡⽚内装饰线、装饰图形等设计元素
`--primary-background-color`	容器色	主题背景⾊，⽤于数据图表容器、icon 容器、标签、占位图等⼤⾯积⾊块
`--primary-color`	主题色	主色，主题基础⾊调，⽤于焦点信息、重要按钮、重要标题⽂字及数据展示
`--primary-clicked-color`	主题色	点击色，由主⾊梯度衍⽣，⽤于主⾊点击交互反馈
`--primary-hover-color`	主题色	悬浮色，由主⾊梯度衍⽣，⽤于主⾊悬浮交互反馈
`--primary-disable-color`	主题色	失效色，由主⾊梯度衍⽣，⽤于主⾊按钮不可操作交互反馈
`--nav-clicked-color`	主题色	菜单点击⾊,由主⾊梯度衍⽣，⽤于菜单列表点击状态
`--nav-hover-color`	主题色	菜单悬浮⾊，由主⾊梯度衍⽣，⽤于菜单列表悬浮状态
`--sub-color`	功能色	辅助⾊，辅助⾊，⽤于强调数据、⼩⾯积⾊块
`--warning-color`	功能色	告警⾊，告警提示⾊，⽤于 AI 告警标签、AI 功能按钮
`--error-color`	功能色	错误⾊，负反馈提示⾊，⽤于失败、异常、错误等功能状态、危险按钮
`--success-color`	功能色	成功⾊，正反馈提示⾊，⽤于成功、在线、正确等功能状态
`--link-color`	功能色	链接⾊，链接提示⾊
`--primary-text`	中性色	主要⽂字，⽤于标题⽂字、正⽂段落、⽂字链
`--sub-text`	中性色	次要⽂字，⽤于次要标题⽂字、辅助型说明⽂字、icon 图标
`--disable-text`	中性色	失效⽂字，⽤于失效⽂字
`--divider-color`	中性色	⽤于分割线
`--table-background'`	中性色	⽤于失效按钮背景⾊、icon 背景⾊,⽤于列表头部背景⾊

主题颜色配置

主题颜色配置根据当前小部件所在大屏中配置，点击查看对应主题颜色配置

1. 小部件主题