时间皮肤

时间工具（ElementType.TimeTool）显示当前时间，可选标题和日期。源码 src/components/DrawEl/el-time-tool.vue。

规范

• 直接写裸 CSS，不加任何外层选择器：写 .time { ... }、.title { ... } 即可，系统会自动把它 scope 到本皮肤。
• 别动 font-size：字号由面板的 titleFontSize / timeFontSize / dateFontSize 控制，改了会错位。
• 背景按需透明：根容器默认有半透明底色，皮肤可覆盖。
• 动画：@keyframes 写在顶层、名字带本皮肤前缀以免撞名。
• 时间用 tabular-nums：已内置等宽数字，皮肤无需重复设置。

DOM 结构

<div class="time-tool">
  <div class="title">当前时间</div>
  <div class="time">12:00:00</div>
  <div class="date">2024年1月1日 星期一</div>
</div>

标题（.title）在 titleContent 为空时不渲染；日期（.date）在 timeFormat 为 "time" 时不渲染。

类名	含义
.time-tool	根容器（背景 / 圆角 / padding / 居中布局）
.title	标题文字（可空）
.time	时间数字（HH:MM:SS，等宽）
.date	日期文字（可空，含星期）

示例

青色发光时钟：

.time-tool {
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(10, 30, 40, 0.92), rgba(5, 15, 25, 0.92));
  border: 1px solid rgba(30, 189, 188, 0.3);
}

.title {
  color: rgba(255, 255, 255, 0.7);
}

.time {
  color: #ffffff;
  text-shadow: 0 0 16px rgba(30, 189, 188, 0.6);
}

.date {
  color: rgba(30, 189, 188, 0.8);
}

想偷懒？用 AI 帮你写皮肤 一键生成带规范的提示词。