发布页开发

This commit is contained in:
筱野
2025-08-17 22:58:00 +08:00
parent 68a6558776
commit 2b3caf027b
76 changed files with 6173 additions and 1610 deletions

227
src/nutui-theme.scss Normal file
View File

@@ -0,0 +1,227 @@
// ==========================================
// NutUI 专用黑色主题覆盖文件
// ==========================================
// 引入NutUI原始样式如果需要
// @import '@nutui/nutui-react-taro/dist/style.css';
// 全局主题变量覆盖
$nut-primary-color: #000000 !important;
$nut-primary-color-end: #000000 !important;
// 超强力样式覆盖 - 确保在所有环境下生效
:global {
// 页面根元素
page,
.taro_page,
#app,
.app {
// ===== Checkbox 复选框 =====
.nut-checkbox {
.nut-checkbox__icon {
border-color: #ddd;
&.nut-checkbox__icon--checked {
background-color: #000000 !important;
border-color: #000000 !important;
color: #ffffff !important;
&::after,
&::before {
color: #ffffff !important;
border-color: #ffffff !important;
}
.nut-icon,
.nut-icon-check {
color: #ffffff !important;
}
}
}
&.nut-checkbox--checked {
.nut-checkbox__icon {
background-color: #000000 !important;
border-color: #000000 !important;
color: #ffffff !important;
}
}
}
// ===== Button 按钮 =====
.nut-button {
&.nut-button--primary {
background-color: #000000 !important;
border-color: #000000 !important;
color: #ffffff !important;
&:hover,
&:active,
&:focus {
background-color: #333333 !important;
border-color: #333333 !important;
color: #ffffff !important;
}
}
&.nut-button--default {
border-color: #000000 !important;
color: #000000 !important;
&:active {
background-color: #f5f5f5 !important;
}
}
}
// ===== Switch 开关 =====
.nut-switch {
&.nut-switch--open,
&.nut-switch--active {
background-color: #000000 !important;
.nut-switch__button {
background-color: #ffffff !important;
}
}
}
// ===== Radio 单选框 =====
.nut-radio {
.nut-radio__icon {
&.nut-radio__icon--checked {
background-color: #000000 !important;
border-color: #000000 !important;
color: #ffffff !important;
}
}
&.nut-radio--checked {
.nut-radio__icon {
background-color: #000000 !important;
border-color: #000000 !important;
}
}
}
// ===== Input 输入框 =====
.nut-input {
&.nut-input--focus {
.nut-input__input {
border-color: #000000 !important;
}
}
}
// ===== Picker 选择器 =====
.nut-picker {
.nut-picker__confirm {
color: #000000 !important;
}
}
// ===== Slider 滑动条 =====
.nut-slider {
.nut-slider__track {
background-color: #000000 !important;
}
.nut-slider__button {
background-color: #000000 !important;
border-color: #000000 !important;
}
}
// ===== ActionSheet 动作面板 =====
.nut-actionsheet {
.nut-actionsheet__item {
&.nut-actionsheet__item--active {
color: #000000 !important;
}
}
}
// ===== Tab 标签页 =====
.nut-tabs {
.nut-tabs__tab {
&.nut-tabs__tab--active {
color: #000000 !important;
}
}
.nut-tabs__line {
background-color: #000000 !important;
}
}
}
}
// 超强力直接覆盖 - 针对所有可能的选择器
.nut-checkbox__icon--checked,
.nut-checkbox-icon-checked,
.nut-checkbox__icon.nut-checkbox__icon--checked,
.nut-checkbox .nut-checkbox__icon--checked,
.nut-checkbox .nut-checkbox__icon.nut-checkbox__icon--checked {
background-color: #000000 !important;
border-color: #000000 !important;
color: #ffffff !important;
background: #000000 !important;
border: 1px solid #000000 !important;
}
// 针对内部图标
.nut-checkbox__icon--checked .nut-icon,
.nut-checkbox-icon-checked .nut-icon,
.nut-checkbox__icon--checked::after,
.nut-checkbox-icon-checked::after,
.nut-checkbox__icon--checked::before,
.nut-checkbox-icon-checked::before {
color: #ffffff !important;
background-color: #ffffff !important;
border-color: #ffffff !important;
}
// 针对所有可能的勾选图标
.nut-icon-check,
.nut-icon-checklist,
.nut-checkbox__icon--checked .nut-icon-check,
.nut-checkbox-icon-checked .nut-icon-check {
color: #ffffff !important;
fill: #ffffff !important;
}
// 针对 checkbox button 激活状态
.nut-checkbox-button-active,
.nut-checkbox-button.nut-checkbox-button-active {
background-color: #000000 !important;
border-color: #000000 !important;
color: #ffffff !important;
background: #000000 !important;
border: 1px solid #000000 !important;
}
.nut-button--primary,
.nut-button.nut-button--primary {
background-color: #000000 !important;
border-color: #000000 !important;
color: #ffffff !important;
background: #000000 !important;
border: 1px solid #000000 !important;
}
.nut-switch--open,
.nut-switch.nut-switch--open {
background-color: #000000 !important;
background: #000000 !important;
}
.nut-radio__icon--checked,
.nut-radio-icon-checked,
.nut-radio .nut-radio__icon--checked {
background-color: #000000 !important;
border-color: #000000 !important;
color: #ffffff !important;
background: #000000 !important;
border: 1px solid #000000 !important;
}