98 lines
2.2 KiB
SCSS
98 lines
2.2 KiB
SCSS
// 测试用的 iconfont，可生效
|
||
// @import './iconfont.css';
|
||
|
||
.test {
|
||
// 可以通过 @apply 多个样式封装整体样式
|
||
@apply mt-4 ml-4;
|
||
|
||
padding-top: 4px;
|
||
color: red;
|
||
}
|
||
|
||
:root,
|
||
page {
|
||
// 修改按主题色
|
||
// --wot-color-theme: #37c2bc;
|
||
|
||
// 修改按钮背景色
|
||
// --wot-button-primary-bg-color: green;
|
||
}
|
||
|
||
/*
|
||
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: #f5f5f5;
|
||
}
|
||
|
||
// ==================== 搜索表单弹窗样式 ====================
|
||
.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;
|
||
}
|
||
}
|
||
} |