mirror of
https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network.git
synced 2026-02-04 15:05:54 +08:00
417 lines
7.4 KiB
SCSS
417 lines
7.4 KiB
SCSS
// 组件样式
|
|
|
|
// 按钮样式
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 12px 24px;
|
|
border-radius: 6px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
|
|
&:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
&.btn-primary {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
|
|
&:hover {
|
|
background: #337ecc;
|
|
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
|
|
}
|
|
}
|
|
|
|
&.btn-outline {
|
|
background: transparent;
|
|
color: var(--primary-color);
|
|
border: 2px solid var(--primary-color);
|
|
|
|
&:hover {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
&.btn-large {
|
|
padding: 16px 32px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
&.btn-small {
|
|
padding: 8px 16px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
// 卡片样式
|
|
.card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: var(--shadow-light);
|
|
transition: all 0.3s ease;
|
|
|
|
&.card-hover {
|
|
&:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: var(--shadow-dark);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 代码块样式
|
|
.code-block {
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
margin: 16px 0;
|
|
overflow-x: auto;
|
|
|
|
pre {
|
|
margin: 0;
|
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
|
|
code {
|
|
background: none;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
font-size: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 容器样式
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
|
|
@media (max-width: 768px) {
|
|
padding: 0 16px;
|
|
}
|
|
}
|
|
|
|
// 网格布局
|
|
.grid {
|
|
display: grid;
|
|
gap: 20px;
|
|
|
|
&.grid-2 {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
|
@media (max-width: 768px) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
&.grid-3 {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
|
|
@media (max-width: 1024px) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
&.grid-4 {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
|
|
@media (max-width: 1024px) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 弹性布局
|
|
.flex {
|
|
display: flex;
|
|
|
|
&.flex-center {
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
&.flex-between {
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
&.flex-column {
|
|
flex-direction: column;
|
|
}
|
|
|
|
&.flex-wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
&.flex-1 {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
// 间距工具类
|
|
.mt-0 { margin-top: 0; }
|
|
.mt-1 { margin-top: 8px; }
|
|
.mt-2 { margin-top: 16px; }
|
|
.mt-3 { margin-top: 24px; }
|
|
.mt-4 { margin-top: 32px; }
|
|
.mt-5 { margin-top: 40px; }
|
|
|
|
.mb-0 { margin-bottom: 0; }
|
|
.mb-1 { margin-bottom: 8px; }
|
|
.mb-2 { margin-bottom: 16px; }
|
|
.mb-3 { margin-bottom: 24px; }
|
|
.mb-4 { margin-bottom: 32px; }
|
|
.mb-5 { margin-bottom: 40px; }
|
|
|
|
.ml-0 { margin-left: 0; }
|
|
.ml-1 { margin-left: 8px; }
|
|
.ml-2 { margin-left: 16px; }
|
|
.ml-3 { margin-left: 24px; }
|
|
.ml-4 { margin-left: 32px; }
|
|
.ml-5 { margin-left: 40px; }
|
|
|
|
.mr-0 { margin-right: 0; }
|
|
.mr-1 { margin-right: 8px; }
|
|
.mr-2 { margin-right: 16px; }
|
|
.mr-3 { margin-right: 24px; }
|
|
.mr-4 { margin-right: 32px; }
|
|
.mr-5 { margin-right: 40px; }
|
|
|
|
.pt-0 { padding-top: 0; }
|
|
.pt-1 { padding-top: 8px; }
|
|
.pt-2 { padding-top: 16px; }
|
|
.pt-3 { padding-top: 24px; }
|
|
.pt-4 { padding-top: 32px; }
|
|
.pt-5 { padding-top: 40px; }
|
|
|
|
.pb-0 { padding-bottom: 0; }
|
|
.pb-1 { padding-bottom: 8px; }
|
|
.pb-2 { padding-bottom: 16px; }
|
|
.pb-3 { padding-bottom: 24px; }
|
|
.pb-4 { padding-bottom: 32px; }
|
|
.pb-5 { padding-bottom: 40px; }
|
|
|
|
.pl-0 { padding-left: 0; }
|
|
.pl-1 { padding-left: 8px; }
|
|
.pl-2 { padding-left: 16px; }
|
|
.pl-3 { padding-left: 24px; }
|
|
.pl-4 { padding-left: 32px; }
|
|
.pl-5 { padding-left: 40px; }
|
|
|
|
.pr-0 { padding-right: 0; }
|
|
.pr-1 { padding-right: 8px; }
|
|
.pr-2 { padding-right: 16px; }
|
|
.pr-3 { padding-right: 24px; }
|
|
.pr-4 { padding-right: 32px; }
|
|
.pr-5 { padding-right: 40px; }
|
|
|
|
// 文本工具类
|
|
.text-center { text-align: center; }
|
|
.text-left { text-align: left; }
|
|
.text-right { text-align: right; }
|
|
|
|
.text-primary { color: var(--text-primary); }
|
|
.text-regular { color: var(--text-regular); }
|
|
.text-secondary { color: var(--text-secondary); }
|
|
.text-placeholder { color: var(--text-placeholder); }
|
|
|
|
.text-success { color: var(--success-color); }
|
|
.text-warning { color: var(--warning-color); }
|
|
.text-danger { color: var(--danger-color); }
|
|
.text-info { color: var(--info-color); }
|
|
|
|
.font-bold { font-weight: bold; }
|
|
.font-normal { font-weight: normal; }
|
|
.font-light { font-weight: 300; }
|
|
|
|
.text-sm { font-size: 12px; }
|
|
.text-base { font-size: 14px; }
|
|
.text-lg { font-size: 16px; }
|
|
.text-xl { font-size: 18px; }
|
|
.text-2xl { font-size: 20px; }
|
|
.text-3xl { font-size: 24px; }
|
|
.text-4xl { font-size: 28px; }
|
|
|
|
// 显示工具类
|
|
.d-none { display: none; }
|
|
.d-block { display: block; }
|
|
.d-inline { display: inline; }
|
|
.d-inline-block { display: inline-block; }
|
|
.d-flex { display: flex; }
|
|
.d-grid { display: grid; }
|
|
|
|
// 响应式工具类
|
|
@media (max-width: 768px) {
|
|
.d-md-none { display: none; }
|
|
.d-md-block { display: block; }
|
|
.d-md-flex { display: flex; }
|
|
.d-md-grid { display: grid; }
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.d-lg-none { display: none; }
|
|
.d-lg-block { display: block; }
|
|
.d-lg-flex { display: flex; }
|
|
.d-lg-grid { display: grid; }
|
|
}
|
|
|
|
// 动画工具类
|
|
.fade-in {
|
|
animation: fadeIn 0.5s ease-in-out;
|
|
}
|
|
|
|
.slide-up {
|
|
animation: slideUp 0.5s ease-out;
|
|
}
|
|
|
|
.slide-down {
|
|
animation: slideDown 0.5s ease-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
// 加载动画
|
|
.loading {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 3px solid rgba(255, 255, 255, 0.3);
|
|
border-radius: 50%;
|
|
border-top-color: #fff;
|
|
animation: spin 1s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
// 徽章样式
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
|
|
&.badge-primary {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
&.badge-success {
|
|
background: var(--success-color);
|
|
color: white;
|
|
}
|
|
|
|
&.badge-warning {
|
|
background: var(--warning-color);
|
|
color: white;
|
|
}
|
|
|
|
&.badge-danger {
|
|
background: var(--danger-color);
|
|
color: white;
|
|
}
|
|
|
|
&.badge-info {
|
|
background: var(--info-color);
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
// 标签样式
|
|
.tag {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
border-radius: 16px;
|
|
background: var(--background-light);
|
|
color: var(--text-regular);
|
|
margin: 2px;
|
|
|
|
&:hover {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
// 分割线
|
|
.divider {
|
|
height: 1px;
|
|
background: var(--border-light);
|
|
margin: 20px 0;
|
|
}
|
|
|
|
// 空状态
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
color: var(--text-secondary);
|
|
|
|
.empty-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 16px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.empty-title {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.empty-description {
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
} |