283 lines
6.7 KiB
SCSS
283 lines
6.7 KiB
SCSS
/**
|
||
* 这里是uni-app内置的常用样式变量
|
||
*
|
||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||
*
|
||
*/
|
||
|
||
/**
|
||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||
*
|
||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||
*/
|
||
|
||
/* 颜色变量 */
|
||
|
||
/* 行为相关颜色 */
|
||
$uni-color-primary: #007aff;
|
||
$uni-color-success: #4cd964;
|
||
$uni-color-warning: #f0ad4e;
|
||
$uni-color-error: #dd524d;
|
||
|
||
/* 文字基本颜色 */
|
||
$uni-text-color:#333;//基本色
|
||
$uni-text-color-inverse:#fff;//反色
|
||
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
|
||
$uni-text-color-placeholder: #808080;
|
||
$uni-text-color-disable:#c0c0c0;
|
||
|
||
/* 背景颜色 */
|
||
$uni-bg-color:#ffffff;
|
||
$uni-bg-color-grey:#f8f8f8;
|
||
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
|
||
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
|
||
|
||
/* 表格相关颜色 */
|
||
$table-header-bg: #f2f6fc;
|
||
$table-row-hover: #f5f7fa;
|
||
$table-row-alternate: #fafbfc;
|
||
$table-row-active: #e6f1fc; /* New: Active row highlight color */
|
||
$table-border-color: #ebeef5;
|
||
|
||
/* 边框颜色 */
|
||
$uni-border-color:#c8c7cc;
|
||
|
||
/* 尺寸变量 */
|
||
|
||
/* 文字尺寸 */
|
||
$uni-font-size-sm:12px;
|
||
$uni-font-size-base:14px;
|
||
$uni-font-size-lg:16px;
|
||
|
||
/* 图片尺寸 */
|
||
$uni-img-size-sm:20px;
|
||
$uni-img-size-base:26px;
|
||
$uni-img-size-lg:40px;
|
||
|
||
/* Border Radius */
|
||
$uni-border-radius-sm: 2px;
|
||
$uni-border-radius-base: 3px;
|
||
$uni-border-radius-lg: 6px;
|
||
$uni-border-radius-circle: 50%;
|
||
|
||
/* 水平间距 */
|
||
$uni-spacing-row-sm: 5px;
|
||
$uni-spacing-row-base: 10px;
|
||
$uni-spacing-row-lg: 15px;
|
||
|
||
/* 垂直间距 */
|
||
$uni-spacing-col-sm: 4px;
|
||
$uni-spacing-col-base: 8px;
|
||
$uni-spacing-col-lg: 12px;
|
||
|
||
/* 透明度 */
|
||
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
|
||
|
||
/* 文章场景相关 */
|
||
$uni-color-title: #2C405A; // 文章标题颜色
|
||
$uni-font-size-title:20px;
|
||
$uni-color-subtitle: #555555; // 二级标题颜色
|
||
$uni-font-size-subtitle:26px;
|
||
$uni-color-paragraph: #3F536E; // 文章段落颜色
|
||
$uni-font-size-paragraph:15px;
|
||
|
||
/* 表格全局样式 */
|
||
.regions-table,
|
||
.schools-table,
|
||
.users-table,
|
||
.roles-table,
|
||
.table-component {
|
||
width: 100%;
|
||
border: 1px solid $table-border-color;
|
||
border-radius: $uni-border-radius-base;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||
|
||
.table-header {
|
||
background-color: $table-header-bg;
|
||
background: linear-gradient(to bottom, lighten($table-header-bg, 2%), $table-header-bg); /* Enhanced header with subtle gradient */
|
||
display: flex;
|
||
font-weight: 700;
|
||
|
||
.th {
|
||
padding: 12px 15px;
|
||
text-align: left;
|
||
position: relative;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
border-bottom: 1px solid $table-border-color;
|
||
border-right: 1px solid $table-border-color;
|
||
|
||
&:last-child {
|
||
border-right: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.table-body {
|
||
.table-row {
|
||
display: flex;
|
||
border-bottom: 1px solid $table-border-color;
|
||
transition: all 0.25s ease; /* Smoother transition */
|
||
|
||
&:nth-child(even) {
|
||
background-color: $table-row-alternate;
|
||
}
|
||
|
||
&:hover {
|
||
background-color: $table-row-hover;
|
||
transform: translateY(-1px); /* Subtle lift effect on hover */
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
&:active, &.active {
|
||
background-color: $table-row-active; /* Active state highlight */
|
||
}
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.td {
|
||
padding: 12px 15px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
border-right: 1px solid $table-border-color;
|
||
|
||
&:last-child {
|
||
border-right: none;
|
||
}
|
||
|
||
&.actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 6px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.loading, .empty-data {
|
||
padding: 40px 0;
|
||
text-align: center;
|
||
color: $uni-text-color-grey;
|
||
|
||
/* Enhanced loading state */
|
||
&.loading {
|
||
background: linear-gradient(to bottom,
|
||
rgba(255, 255, 255, 0) 0%,
|
||
rgba(245, 245, 245, 0.5) 50%,
|
||
rgba(255, 255, 255, 0) 100%);
|
||
background-size: 200% 100%;
|
||
animation: loading-shine 1.5s infinite;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* Responsive adjustments */
|
||
@media screen and (max-width: 768px) {
|
||
.table-header, .table-row {
|
||
flex-wrap: wrap;
|
||
|
||
.th, .td {
|
||
min-width: 120px;
|
||
flex: 1;
|
||
}
|
||
|
||
.actions {
|
||
width: 100%;
|
||
justify-content: flex-start;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes loading-shine {
|
||
to {
|
||
background-position: -200% 0;
|
||
}
|
||
}
|
||
|
||
/* 表格操作按钮样式 */
|
||
.action-btn, .action-link {
|
||
font-size: $uni-font-size-sm;
|
||
padding: 4px 8px;
|
||
border-radius: $uni-border-radius-sm;
|
||
transition: all 0.3s ease;
|
||
cursor: pointer; /* Ensure cursor shows as pointer on hover */
|
||
&.view {
|
||
background-color: #ecf5ff;
|
||
color: $uni-color-primary;
|
||
}
|
||
|
||
&.edit {
|
||
background-color: #f0f9eb;
|
||
color: $uni-color-success;
|
||
}
|
||
|
||
&.delete {
|
||
background-color: #fef0f0;
|
||
color: $uni-color-error;
|
||
}
|
||
}
|
||
|
||
.action-link {
|
||
color: $uni-color-primary;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* 分页控件样式增强 */
|
||
.pagination {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
.page-btn {
|
||
padding: 8px 16px;
|
||
background-color: #fff;
|
||
border: 1px solid $table-border-color;
|
||
border-radius: $uni-border-radius-sm;
|
||
margin: 0 5px;
|
||
transition: all 0.3s ease;
|
||
|
||
&.disabled {
|
||
color: $uni-text-color-disable;
|
||
cursor: not-allowed;
|
||
}
|
||
}
|
||
|
||
.page-number {
|
||
padding: 0 12px;
|
||
}
|
||
}
|
||
|
||
/* 全局弹出层样式 - 确保最高z-index优先级 */
|
||
.popup-overlay {
|
||
position: fixed !important;
|
||
top: 0 !important;
|
||
left: 0 !important;
|
||
right: 0 !important;
|
||
bottom: 0 !important;
|
||
width: 100vw !important;
|
||
height: 100vh !important;
|
||
z-index: 2147483647 !important;
|
||
display: flex !important;
|
||
justify-content: center !important;
|
||
align-items: center !important;
|
||
}
|
||
|
||
.popup-container {
|
||
position: relative !important;
|
||
z-index: 2147483647 !important;
|
||
background: #FFFFFF !important;
|
||
}
|
||
|
||
/* 修复 uni-app-x Android 字体加载问题 */
|
||
/* 覆盖 uni-openLocation 组件的字体定义，使用系统默认字体 */
|
||
.uni-open-location-icons {
|
||
font-family: sans-serif !important;
|
||
}
|