style: 更新全局样式和 UnoCSS 配置
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -11,11 +11,7 @@
|
|||||||
|
|
||||||
:root,
|
:root,
|
||||||
page {
|
page {
|
||||||
// 修改按主题色
|
--wot-color-theme: #f97316;
|
||||||
// --wot-color-theme: #37c2bc;
|
|
||||||
|
|
||||||
// 修改按钮背景色
|
|
||||||
// --wot-button-primary-bg-color: green;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@@ -37,10 +33,112 @@ border-t-1
|
|||||||
|
|
||||||
// ==================== 全局公共样式 ====================
|
// ==================== 全局公共样式 ====================
|
||||||
|
|
||||||
// 页面容器:灰色背景 + 最小全屏高度
|
// 页面容器:暖白背景 + 最小全屏高度
|
||||||
.yd-page-container {
|
.yd-page-container {
|
||||||
@apply min-h-screen;
|
@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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ==================== 详情页底部操作按钮 ====================
|
// ==================== 详情页底部操作按钮 ====================
|
||||||
|
|||||||
@@ -16,7 +16,7 @@
|
|||||||
/* 颜色变量 */
|
/* 颜色变量 */
|
||||||
|
|
||||||
/* 行为相关颜色 */
|
/* 行为相关颜色 */
|
||||||
$uni-color-primary: #007aff;
|
$uni-color-primary: #f97316;
|
||||||
$uni-color-success: #4cd964;
|
$uni-color-success: #4cd964;
|
||||||
$uni-color-warning: #f0ad4e;
|
$uni-color-warning: #f0ad4e;
|
||||||
$uni-color-error: #dd524d;
|
$uni-color-error: #dd524d;
|
||||||
|
|||||||
@@ -71,7 +71,36 @@ export default defineConfig({
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
// 动态图标需要在这里配置,或者写在vue页面中注释掉
|
// 动态图标需要在这里配置,或者写在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: [
|
rules: [
|
||||||
[
|
[
|
||||||
'p-safe',
|
'p-safe',
|
||||||
@@ -86,7 +115,7 @@ export default defineConfig({
|
|||||||
theme: {
|
theme: {
|
||||||
colors: {
|
colors: {
|
||||||
/** 主题色,用法如: text-primary */
|
/** 主题色,用法如: text-primary */
|
||||||
primary: 'var(--wot-color-theme,#0957DE)',
|
primary: 'var(--wot-color-theme,#f97316)',
|
||||||
},
|
},
|
||||||
fontSize: {
|
fontSize: {
|
||||||
/** 提供更小号的字体,用法如:text-2xs */
|
/** 提供更小号的字体,用法如:text-2xs */
|
||||||
|
|||||||
Reference in New Issue
Block a user