fix 选择器
This commit is contained in:
6
schoolNewsWeb/src/assets/imgs/calendar-icon.svg
Normal file
6
schoolNewsWeb/src/assets/imgs/calendar-icon.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.333 1.333L5.333 4" stroke="#4A5565" stroke-width="1.333" stroke-linecap="round"/>
|
||||
<path d="M10.667 1.333L10.667 4" stroke="#4A5565" stroke-width="1.333" stroke-linecap="round"/>
|
||||
<path d="M2 2.667L2 14.667L14 14.667L14 2.667L2 2.667Z" stroke="#4A5565" stroke-width="1.333"/>
|
||||
<path d="M2 6.667L14 6.667" stroke="#4A5565" stroke-width="1.333" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 465 B |
6
schoolNewsWeb/src/assets/imgs/dept-icon.svg
Normal file
6
schoolNewsWeb/src/assets/imgs/dept-icon.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.333 10L1.333 10L9.333 14C9.333 14 10 14 10 14C10.667 14 10.667 14 10.667 14L12.667 13.09L14.667 12.08C14 12 13.333 12 12.667 12L3.333 12C3.333 12 2 12 2 12L1.333 10Z" stroke="#4A5565" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 2.083L10 5.166" stroke="#4A5565" stroke-width="1.333" stroke-linecap="round"/>
|
||||
<path d="M12 10.09L12 14" stroke="#4A5565" stroke-width="1.333" stroke-linecap="round"/>
|
||||
<path d="M3.333 2C4.066 2 4.666 2.597 4.666 3.333L4.666 7.333C4.666 8.069 4.066 8.666 3.333 8.666C2.6 8.666 2 8.069 2 7.333L2 3.333C2 2.597 2.6 2 3.333 2Z" stroke="#4A5565" stroke-width="1.333"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 731 B |
6
schoolNewsWeb/src/assets/imgs/usermange.svg
Normal file
6
schoolNewsWeb/src/assets/imgs/usermange.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.6667 14V12.6667C10.6667 11.9594 10.3857 11.2811 9.88561 10.781C9.38552 10.281 8.70724 10 7.99999 10H3.99999C3.29275 10 2.61447 10.281 2.11438 10.781C1.61428 11.2811 1.33333 11.9594 1.33333 12.6667V14" stroke="#0A0A0A" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10.6667 2.08545C11.2385 2.2337 11.7449 2.56763 12.1065 3.03482C12.468 3.50202 12.6641 4.07604 12.6641 4.66678C12.6641 5.25752 12.468 5.83154 12.1065 6.29874C11.7449 6.76594 11.2385 7.09987 10.6667 7.24812" stroke="#0A0A0A" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M14.6667 14.0002V12.6669C14.6662 12.0761 14.4696 11.5021 14.1076 11.0351C13.7456 10.5682 13.2388 10.2346 12.6667 10.0869" stroke="#0A0A0A" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M5.99999 7.33333C7.47275 7.33333 8.66666 6.13943 8.66666 4.66667C8.66666 3.19391 7.47275 2 5.99999 2C4.52724 2 3.33333 3.19391 3.33333 4.66667C3.33333 6.13943 4.52724 7.33333 5.99999 7.33333Z" stroke="#0A0A0A" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
462
schoolNewsWeb/src/assets/styles/common.scss
Normal file
462
schoolNewsWeb/src/assets/styles/common.scss
Normal file
@@ -0,0 +1,462 @@
|
||||
/**
|
||||
* @description 全局通用样式
|
||||
* @author yslg
|
||||
* @since 2025-10-30
|
||||
* @figma https://www.figma.com/design/4aM0yqyoAjtW2jTZcqPAtN
|
||||
*/
|
||||
|
||||
// ============ 设计令牌 (Design Tokens) ============
|
||||
|
||||
// 颜色
|
||||
$color-primary: #C62828; // 主色（红色）
|
||||
$color-primary-hover: #B71C1C; // 主色悬停
|
||||
$color-text-primary: #1D2129; // 主要文字
|
||||
$color-text-secondary: #4E5969; // 次要文字
|
||||
$color-text-disabled: #C9CDD4; // 禁用文字/图标
|
||||
$color-bg-secondary: #F2F3F5; // 次要背景
|
||||
$color-bg-white: #FFFFFF; // 白色背景
|
||||
$color-border: #dcdfe6; // 边框
|
||||
|
||||
// 字体
|
||||
$font-family-cn: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
$font-family-en: 'Nunito Sans', sans-serif;
|
||||
$font-size-base: 14px;
|
||||
$line-height-base: 1.571428571em;
|
||||
|
||||
// 圆角
|
||||
$border-radius-small: 2px;
|
||||
$border-radius-medium: 4px;
|
||||
$border-radius-large: 8px;
|
||||
|
||||
// 间距
|
||||
$spacing-xs: 4px;
|
||||
$spacing-sm: 8px;
|
||||
$spacing-md: 12px;
|
||||
$spacing-lg: 16px;
|
||||
$spacing-xl: 20px;
|
||||
$spacing-xxl: 24px;
|
||||
|
||||
// ============ 按钮样式 ============
|
||||
|
||||
// 主要操作按钮
|
||||
.btn-primary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-xs;
|
||||
padding: $spacing-sm $spacing-xl;
|
||||
background: #409eff;
|
||||
border: none;
|
||||
border-radius: $border-radius-medium;
|
||||
color: $color-bg-white;
|
||||
font-size: $font-size-base;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: #66b1ff;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
// 创建/新增按钮（红色主题）
|
||||
.btn-create {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-xs;
|
||||
padding: $spacing-sm $spacing-lg;
|
||||
background: #E7000B;
|
||||
border: none;
|
||||
border-radius: $border-radius-large;
|
||||
color: $color-bg-white;
|
||||
font-size: $font-size-base;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
.icon {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #C70009;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索按钮
|
||||
.btn-search {
|
||||
padding: $spacing-sm $spacing-xl;
|
||||
border-radius: $border-radius-medium;
|
||||
font-size: $font-size-base;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
border: none;
|
||||
background: #409eff;
|
||||
color: $color-bg-white;
|
||||
|
||||
&:hover {
|
||||
background: #66b1ff;
|
||||
}
|
||||
}
|
||||
|
||||
// 重置按钮
|
||||
.btn-reset {
|
||||
padding: $spacing-sm $spacing-xl;
|
||||
border-radius: $border-radius-medium;
|
||||
font-size: $font-size-base;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
border: 1px solid $color-border;
|
||||
background: $color-bg-white;
|
||||
color: #606266;
|
||||
|
||||
&:hover {
|
||||
color: #409eff;
|
||||
border-color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
// 危险操作按钮
|
||||
.btn-danger {
|
||||
padding: $spacing-sm $spacing-xl;
|
||||
border-radius: $border-radius-medium;
|
||||
font-size: $font-size-base;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
border: none;
|
||||
background: #f56c6c;
|
||||
color: $color-bg-white;
|
||||
|
||||
&:hover {
|
||||
background: #f78989;
|
||||
}
|
||||
}
|
||||
|
||||
// 链接样式按钮（用于表格操作列）
|
||||
.btn-link {
|
||||
border: none;
|
||||
padding: 6px 12px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
border-radius: $border-radius-medium;
|
||||
min-width: 64px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
color: $color-bg-white;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&.btn-primary {
|
||||
background: #409eff;
|
||||
}
|
||||
|
||||
&.btn-warning {
|
||||
background: #e6a23c;
|
||||
}
|
||||
|
||||
&.btn-success {
|
||||
background: #67c23a;
|
||||
}
|
||||
|
||||
&.btn-danger {
|
||||
background: #f56c6c;
|
||||
}
|
||||
|
||||
&.btn-info {
|
||||
background: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
// ============ 分页样式 (基于Figma设计) ============
|
||||
|
||||
// 分页容器
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: $spacing-md 0;
|
||||
margin-top: 32px;
|
||||
background: #F9FAFB;
|
||||
border-radius: $border-radius-large;
|
||||
|
||||
// Element Plus 分页组件自定义样式
|
||||
:deep(.el-pagination) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-sm;
|
||||
padding: 0 $spacing-xxl;
|
||||
|
||||
// 总条数文本
|
||||
.el-pagination__total {
|
||||
font-family: $font-family-cn;
|
||||
font-size: $font-size-base;
|
||||
font-weight: 400;
|
||||
line-height: $line-height-base;
|
||||
color: $color-text-primary;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// 每页条数选择器
|
||||
.el-pagination__sizes {
|
||||
margin: 0;
|
||||
|
||||
.el-select {
|
||||
.el-select__wrapper {
|
||||
background: $color-bg-secondary;
|
||||
border: none;
|
||||
border-radius: $border-radius-small;
|
||||
padding: $spacing-xs $spacing-md;
|
||||
min-height: 32px;
|
||||
box-shadow: none;
|
||||
|
||||
.el-select__selected-item {
|
||||
font-family: $font-family-cn;
|
||||
font-size: $font-size-base;
|
||||
font-weight: 400;
|
||||
line-height: $line-height-base;
|
||||
color: $color-text-primary;
|
||||
}
|
||||
|
||||
.el-select__suffix {
|
||||
.el-icon {
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color-bg-secondary, 3%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 上一页/下一页按钮
|
||||
.btn-prev,
|
||||
.btn-next {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
min-width: auto;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: $border-radius-small;
|
||||
|
||||
.el-icon {
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: rgba($color-primary, 0.08);
|
||||
|
||||
.el-icon {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: transparent;
|
||||
cursor: not-allowed;
|
||||
|
||||
.el-icon {
|
||||
color: $color-text-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 页码列表
|
||||
.el-pager {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-xs;
|
||||
|
||||
li {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: $border-radius-small;
|
||||
padding: $spacing-xs;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
line-height: 24px;
|
||||
font-family: $font-family-en;
|
||||
font-size: $font-size-base;
|
||||
font-weight: 600;
|
||||
color: $color-text-secondary;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
|
||||
&:hover:not(.is-active):not(.is-disabled) {
|
||||
background: rgba($color-primary, 0.08);
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: $color-primary;
|
||||
color: $color-bg-white;
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
color: $color-text-disabled;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
// 更多页省略号
|
||||
&.more {
|
||||
background: transparent;
|
||||
color: $color-text-secondary;
|
||||
|
||||
&:hover {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 跳转输入框
|
||||
.el-pagination__jump {
|
||||
margin-left: 0;
|
||||
font-family: $font-family-cn;
|
||||
font-size: $font-size-base;
|
||||
color: $color-text-primary;
|
||||
|
||||
.el-input {
|
||||
.el-input__wrapper {
|
||||
background: $color-bg-white;
|
||||
border: 1px solid $color-border;
|
||||
border-radius: $border-radius-small;
|
||||
padding: $spacing-xs $spacing-sm;
|
||||
box-shadow: none;
|
||||
width: 60px;
|
||||
|
||||
.el-input__inner {
|
||||
font-family: $font-family-en;
|
||||
font-size: $font-size-base;
|
||||
font-weight: 600;
|
||||
color: $color-text-primary;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $color-primary;
|
||||
}
|
||||
|
||||
&.is-focus {
|
||||
border-color: $color-primary;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============ 加载状态 ============
|
||||
|
||||
.loading-container,
|
||||
.empty-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100px 20px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid $color-primary;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: $spacing-lg;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 64px;
|
||||
margin-bottom: $spacing-lg;
|
||||
}
|
||||
|
||||
// ============ 表格加载和空状态 ============
|
||||
|
||||
.loading-cell,
|
||||
.empty-cell {
|
||||
text-align: center;
|
||||
padding: 60px 20px !important;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
// ============ 搜索栏 ============
|
||||
|
||||
.search-bar {
|
||||
background: $color-bg-white;
|
||||
padding: $spacing-xl;
|
||||
border-radius: $border-radius-large;
|
||||
margin-bottom: $spacing-xl;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
gap: $spacing-lg;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.search-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-sm;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.search-label {
|
||||
font-size: $font-size-base;
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.search-input,
|
||||
.search-select {
|
||||
padding: $spacing-sm $spacing-md;
|
||||
border: 1px solid $color-border;
|
||||
border-radius: $border-radius-medium;
|
||||
font-size: $font-size-base;
|
||||
color: #606266;
|
||||
transition: border-color 0.3s;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.search-select {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-actions {
|
||||
display: flex;
|
||||
gap: $spacing-md;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
// ============ 工具栏 ============
|
||||
|
||||
.toolbar {
|
||||
margin-bottom: $spacing-xl;
|
||||
}
|
||||
Reference in New Issue
Block a user