154 lines
3.2 KiB
CSS
154 lines
3.2 KiB
CSS
/**
|
|
* 评查点分组新增/编辑页样式
|
|
*/
|
|
|
|
/* 页面容器 */
|
|
.rule-group-new-page {
|
|
@apply p-5;
|
|
}
|
|
|
|
/* 页面标题区域 */
|
|
.rule-group-new-page .page-header {
|
|
@apply flex justify-between items-center mb-6;
|
|
}
|
|
|
|
.rule-group-new-page .page-title {
|
|
@apply text-xl font-medium mb-1;
|
|
}
|
|
|
|
.rule-group-new-page .page-subtitle {
|
|
@apply text-sm text-gray-500;
|
|
}
|
|
|
|
/* 表单容器 */
|
|
.rule-group-new-page .form-container {
|
|
@apply p-0;
|
|
}
|
|
|
|
/* 提示信息区域 */
|
|
.rule-group-new-page .info-message {
|
|
@apply flex items-center p-4 mb-5 bg-[rgba(0,104,74,0.05)] border border-[rgba(0,104,74,0.1)] rounded-md;
|
|
}
|
|
|
|
.rule-group-new-page .info-message i {
|
|
@apply text-lg mr-3 text-[#00684a];
|
|
}
|
|
|
|
.rule-group-new-page .info-message p {
|
|
@apply text-sm text-gray-600 m-0;
|
|
}
|
|
|
|
/* 表单区域 */
|
|
.rule-group-new-page .form-section {
|
|
@apply bg-white rounded-md border border-gray-200 mb-6 transition-shadow duration-200 shadow-sm;
|
|
}
|
|
|
|
.rule-group-new-page .form-section:hover {
|
|
@apply shadow-md;
|
|
}
|
|
|
|
.rule-group-new-page .form-section-header {
|
|
@apply flex items-center p-4 border-b border-gray-100;
|
|
}
|
|
|
|
.rule-group-new-page .form-section-header i {
|
|
@apply text-lg mr-2 text-[#00684a];
|
|
}
|
|
|
|
.rule-group-new-page .form-section-header h3 {
|
|
@apply text-base font-medium m-0;
|
|
}
|
|
|
|
.rule-group-new-page .form-section-body {
|
|
@apply p-6;
|
|
}
|
|
|
|
/* 表单元素 */
|
|
.rule-group-new-page .form-group {
|
|
@apply mb-5;
|
|
}
|
|
|
|
.rule-group-new-page .form-label {
|
|
@apply block text-sm font-medium mb-2 text-gray-700;
|
|
}
|
|
|
|
.rule-group-new-page .form-label .required-mark {
|
|
@apply text-red-500 ml-1;
|
|
}
|
|
|
|
.rule-group-new-page .form-input,
|
|
.rule-group-new-page .form-select,
|
|
.rule-group-new-page .form-textarea {
|
|
@apply w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-1 focus:ring-[#00684a] focus:border-[#00684a] outline-none text-sm transition-all duration-200;
|
|
}
|
|
|
|
.rule-group-new-page .form-input:hover,
|
|
.rule-group-new-page .form-select:hover,
|
|
.rule-group-new-page .form-textarea:hover {
|
|
@apply border-[#00684a];
|
|
}
|
|
|
|
.rule-group-new-page .form-input.error,
|
|
.rule-group-new-page .form-select.error,
|
|
.rule-group-new-page .form-textarea.error {
|
|
@apply border-red-500 focus:ring-0 ;
|
|
}
|
|
|
|
.rule-group-new-page .form-textarea {
|
|
@apply min-h-[120px] resize-y;
|
|
}
|
|
|
|
.rule-group-new-page .form-tip {
|
|
@apply mt-1.5 text-xs text-gray-500;
|
|
}
|
|
|
|
.rule-group-new-page .form-error {
|
|
@apply mt-1.5 text-xs text-red-500;
|
|
}
|
|
|
|
/* 单选框组样式 */
|
|
.rule-group-new-page .radio-group {
|
|
@apply flex gap-6;
|
|
}
|
|
|
|
.rule-group-new-page .radio-item {
|
|
@apply flex items-center cursor-pointer;
|
|
}
|
|
|
|
.rule-group-new-page .radio-input {
|
|
@apply mr-2 cursor-pointer;
|
|
}
|
|
|
|
/* 行布局 */
|
|
.rule-group-new-page .form-row {
|
|
@apply flex flex-col md:flex-row gap-6;
|
|
}
|
|
|
|
.rule-group-new-page .form-col {
|
|
@apply flex-1 min-w-0;
|
|
}
|
|
|
|
/* 按钮组 */
|
|
.rule-group-new-page .form-actions {
|
|
@apply flex justify-end gap-3 mt-6 mb-10;
|
|
}
|
|
|
|
/* 错误提示 */
|
|
.rule-group-new-page .general-error {
|
|
@apply p-4 mb-6 bg-red-50 border border-red-100 rounded-md text-red-700 text-sm;
|
|
}
|
|
|
|
/* 响应式调整 */
|
|
@media (max-width: 768px) {
|
|
.rule-group-new-page .form-row {
|
|
@apply flex-col;
|
|
}
|
|
|
|
.rule-group-new-page .page-header {
|
|
@apply flex-col items-start;
|
|
}
|
|
|
|
.rule-group-new-page .page-header .header-actions {
|
|
@apply mt-4;
|
|
}
|
|
} |