aiot-uniapp/src/style/index.scss

// 测试用的 iconfont，可生效
// @import './iconfont.css';

.test {
  // 可以通过 @apply 多个样式封装整体样式
  @apply mt-4 ml-4;

  padding-top: 4px;
  color: red;
}

:root,
page {
  --wot-color-theme: #f97316;
}

/*
border-t-1
由于uniapp中无法使用*选择器，使用魔法代替*，加上此规则可以简化border与divide的使用，并提升布局的兼容性
1. 防止padding和border影响元素宽度。 (https://github.com/mozdevs/cssremedy/issues/4)
2. 允许仅通过添加边框宽度来向元素添加边框。 (https://github.com/tailwindcss/tailwindcss/pull/116)
3. [UnoCSS]: 允许使用css变量'--un-default-border-color'覆盖默认边框颜色
*/
// 这个样式有重大BUG，先去掉！！(2025-08-15)
// :not(not),
// ::before,
// ::after {
//   box-sizing: border-box; /* 1 */
//   border-width: 0; /* 2 */
//   border-style: solid; /* 2 */
//   border-color: var(--un-default-border-color, #e5e7eb); /* 3 */
// }

// ==================== 全局公共样式 ====================

// 页面容器：暖白背景 + 最小全屏高度
.yd-page-container {
  @apply min-h-screen;
  background-color: #fffdf5;
}

// ==================== AIOT 设计系统 ====================

// 通用卡片样式
.ai-card {
  background: #fff;
  border-radius: 48rpx;
  border: 2rpx solid #fff7ed;
  box-shadow: 0 2rpx 12rpx rgba(249, 115, 22, 0.06);
}

// 渐变头部
.ai-gradient-header {
  background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
  border-radius: 0 0 80rpx 80rpx;
  padding-top: env(safe-area-inset-top);
  position: relative;
  overflow: hidden;
}

// 头部装饰层（点阵 + 圆圈）
.ai-header-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0 0 80rpx 80rpx;
  overflow: hidden;
  pointer-events: none;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, #fff 1px, transparent 1px);
    background-size: 48rpx 48rpx;
    opacity: 0.1;
  }

  // 右上圆圈
  &::after {
    content: '';
    position: absolute;
    top: -40rpx;
    right: -40rpx;
    width: 320rpx;
    height: 320rpx;
    border-radius: 50%;
    background: #fff;
    opacity: 0.08;
  }
}

// 头部装饰层 - 左下圆圈（需要额外元素）
.ai-header-circle-bl {
  position: absolute;
  top: 160rpx;
  left: -40rpx;
  width: 256rpx;
  height: 256rpx;
  border-radius: 50%;
  background: #fff;
  opacity: 0.08;
  pointer-events: none;
}

// 主要按钮样式
.ai-btn-primary {
  background: linear-gradient(to right, #fbbf24, #f97316);
  color: #fff;
  border-radius: 24rpx;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 8rpx 24rpx rgba(249, 115, 22, 0.25);
  padding: 28rpx 0;
}

// 徽章/标签
.ai-badge {
  font-size: 22rpx;
  font-weight: bold;
  padding: 4rpx 16rpx;
  border-radius: 999px;
  display: inline-block;

  &--orange {
    background: #fff7ed;
    color: #f97316;
  }
  &--red {
    background: #fef2f2;
    color: #ef4444;
  }
  &--green {
    background: #f0fdf4;
    color: #22c55e;
  }
}

// ==================== 详情页底部操作按钮 ====================
.yd-detail-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 24rpx;

  // 按钮容器
  &-actions {
    @apply w-full flex gap-24rpx;
  }
}

// ==================== 搜索表单弹窗样式 ====================
.yd-search-form {
  // 弹窗圆角
  &-popup {
    @apply rounded-t-24rpx;
  }

  // 弹窗容器
  &-container {
    @apply p-32rpx;
  }

  // 弹窗标题
  &-title {
    @apply mb-24rpx text-32rpx font-semibold;
    color: #333;
  }

  // 表单项
  &-item {
    @apply mt-24rpx;
  }

  // 表单项标签
  &-label {
    @apply mb-12rpx text-28rpx;
    color: #666;
  }

  // 底部按钮组
  &-actions {
    @apply w-full flex justify-center gap-24rpx mt-24rpx;
  }

  // 日期范围选择器
  &-date-range {
    // 容器
    &-container {
      @apply flex items-center gap-16rpx;
    }

    // 日期选择框
    &-picker {
      @apply h-72rpx flex flex-1 items-center justify-center rounded-8rpx px-24rpx text-28rpx;
      background-color: #f5f5f5;
    }

    // 确认按钮组
    &-actions {
      @apply mt-16rpx flex justify-end gap-16rpx;
    }
  }
}