diff --git a/src/style/index.scss b/src/style/index.scss index a72155c..6e4e38e 100644 --- a/src/style/index.scss +++ b/src/style/index.scss @@ -11,11 +11,7 @@ :root, page { - // 修改按主题色 - // --wot-color-theme: #37c2bc; - - // 修改按钮背景色 - // --wot-button-primary-bg-color: green; + --wot-color-theme: #f97316; } /* @@ -37,10 +33,112 @@ border-t-1 // ==================== 全局公共样式 ==================== -// 页面容器:灰色背景 + 最小全屏高度 +// 页面容器:暖白背景 + 最小全屏高度 .yd-page-container { @apply min-h-screen; - background-color: #f5f5f5; + 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; + } } // ==================== 详情页底部操作按钮 ==================== @@ -110,4 +208,4 @@ border-t-1 @apply mt-16rpx flex justify-end gap-16rpx; } } -} \ No newline at end of file +} diff --git a/src/uni.scss b/src/uni.scss index 21b9e5f..566763b 100644 --- a/src/uni.scss +++ b/src/uni.scss @@ -16,7 +16,7 @@ /* 颜色变量 */ /* 行为相关颜色 */ -$uni-color-primary: #007aff; +$uni-color-primary: #f97316; $uni-color-success: #4cd964; $uni-color-warning: #f0ad4e; $uni-color-error: #dd524d; diff --git a/uno.config.ts b/uno.config.ts index 4a4401f..b3ba115 100644 --- a/uno.config.ts +++ b/uno.config.ts @@ -71,7 +71,36 @@ export default defineConfig({ }, ], // 动态图标需要在这里配置,或者写在vue页面中注释掉 - safelist: ['i-carbon-code', 'i-carbon-home', 'i-carbon-user', 'i-carbon-document', 'i-carbon-chat', 'i-carbon-user-avatar'], + safelist: [ + 'i-carbon-code', + 'i-carbon-home', + 'i-carbon-user', + 'i-carbon-document', + 'i-carbon-chat', + 'i-carbon-user-avatar', + 'i-carbon-scan', + 'i-carbon-task', + 'i-carbon-group', + 'i-carbon-dashboard', + 'i-carbon-time', + 'i-carbon-tool-kit', + 'i-carbon-notification', + 'i-carbon-chevron-down', + 'i-carbon-shield-check', + 'i-carbon-view', + 'i-carbon-checkmark', + 'i-carbon-checkmark-outline', + 'i-carbon-camera', + 'i-carbon-close', + 'i-carbon-text-input', + 'i-carbon-add', + 'i-carbon-task-complete', + 'i-carbon-events', + 'i-carbon-qr-code', + 'i-carbon-analytics', + 'i-carbon-location-person', + 'i-carbon-settings-adjust', + ], rules: [ [ 'p-safe', @@ -86,7 +115,7 @@ export default defineConfig({ theme: { colors: { /** 主题色,用法如: text-primary */ - primary: 'var(--wot-color-theme,#0957DE)', + primary: 'var(--wot-color-theme,#f97316)', }, fontSize: { /** 提供更小号的字体,用法如:text-2xs */