优化前端代码架构 - 提取CSS变量和工具类
主要改进： - 新增 variables.css 统一管理所有主题相关的CSS变量 - 新增 utilities.css 提供可复用的工具类组件 - 重构所有Vue组件，移除重复的CSS代码 - 统一使用CSS变量实现一致的粉色主题(#FF6B9D) - 改进代码组织结构，提升可维护性 - 优化样式继承和复用机制 修改文件： - 新增：frontend/src/styles/variables.css, utilities.css - 重构：App.vue, 所有视图组件和组件文件 - 更新：style.css, element-plus.css 技术亮点： - 模块化CSS架构，使用@import导入 - 统一的颜色、间距、阴影、过渡效果变量 - 卡片、按钮、布局等通用工具类 - 响应式设计支持
This commit is contained in:
祀梦
@@ -60,43 +60,6 @@ const activeMenu = computed(() => route.path)
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
|
||||||
/* 全局样式修正 */
|
|
||||||
:root {
|
|
||||||
--menu-bg: #FFFFFF;
|
|
||||||
--menu-text: #666666;
|
|
||||||
--menu-active-text: #FF6B9D;
|
|
||||||
--menu-hover-bg: #FFF0F5;
|
|
||||||
--menu-border: #FFB6C1;
|
|
||||||
--theme-bg: #FAFAFA;
|
|
||||||
--theme-bg-card: #FFFFFF;
|
|
||||||
--theme-border: #FFE4EC;
|
|
||||||
--theme-primary: #FF6B9D;
|
|
||||||
--theme-text: #333333;
|
|
||||||
--theme-text-secondary: #999999;
|
|
||||||
--theme-bg-light: #FFF9FB;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.app-container {
|
.app-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -107,7 +70,7 @@ body {
|
|||||||
.side-menu {
|
.side-menu {
|
||||||
width: 240px;
|
width: 240px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-right: 1px solid rgba(255, 107, 157, 0.15);
|
border-right: 1px solid var(--border);
|
||||||
box-shadow: 4px 0 20px rgba(255, 107, 157, 0.1);
|
box-shadow: 4px 0 20px rgba(255, 107, 157, 0.1);
|
||||||
background: rgba(255, 255, 255, 0.98);
|
background: rgba(255, 255, 255, 0.98);
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
@@ -119,7 +82,7 @@ body {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 35px 0;
|
padding: 35px 0;
|
||||||
border-bottom: 1px solid rgba(255, 107, 157, 0.15);
|
border-bottom: 1px solid var(--border);
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -131,38 +94,20 @@ body {
|
|||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
width: 80%;
|
width: 80%;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
background: linear-gradient(90deg, transparent, #FF6B9D, transparent);
|
background: linear-gradient(90deg, transparent, var(--primary), transparent);
|
||||||
animation: shimmer 3s infinite;
|
animation: shimmer 3s infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes shimmer {
|
|
||||||
0%, 100% {
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
font-size: 52px;
|
font-size: 52px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
animation: float 3s ease-in-out infinite;
|
animation: float 3s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-text {
|
.logo-text {
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #FF6B9D;
|
color: var(--primary);
|
||||||
text-shadow: 0 0 20px rgba(255, 107, 157, 0.3);
|
text-shadow: 0 0 20px rgba(255, 107, 157, 0.3);
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
}
|
}
|
||||||
@@ -181,8 +126,8 @@ body {
|
|||||||
:deep(.el-menu-item) {
|
:deep(.el-menu-item) {
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
margin: 8px 12px;
|
margin: 8px 12px;
|
||||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
transition: var(--transition-hover);
|
||||||
color: var(--theme-text-secondary);
|
color: var(--text-secondary);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -195,14 +140,14 @@ body {
|
|||||||
top: 0;
|
top: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 3px;
|
width: 3px;
|
||||||
background: var(--theme-primary);
|
background: var(--primary);
|
||||||
transform: scaleY(0);
|
transform: scaleY(0);
|
||||||
transition: transform 0.3s ease;
|
transition: transform 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-menu-item:hover) {
|
:deep(.el-menu-item:hover) {
|
||||||
background: rgba(0, 212, 255, 0.1) !important;
|
background: rgba(0, 212, 255, 0.1) !important;
|
||||||
color: var(--theme-primary);
|
color: var(--primary);
|
||||||
transform: translateX(8px);
|
transform: translateX(8px);
|
||||||
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
|
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
|
||||||
}
|
}
|
||||||
@@ -212,8 +157,8 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-menu-item.is-active) {
|
:deep(.el-menu-item.is-active) {
|
||||||
background: linear-gradient(135deg, #00D4FF 0%, #00B8E0 100%) !important;
|
background: var(--gradient-cyan) !important;
|
||||||
color: var(--theme-bg) !important;
|
color: var(--bg-page) !important;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
box-shadow: 0 4px 16px rgba(0, 212, 255, 0.4);
|
box-shadow: 0 4px 16px rgba(0, 212, 255, 0.4);
|
||||||
}
|
}
|
||||||
@@ -225,167 +170,6 @@ body {
|
|||||||
.main-content {
|
.main-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
background: var(--theme-bg);
|
background: var(--bg-page);
|
||||||
}
|
|
||||||
|
|
||||||
/* 全局覆盖Element Plus黑色边框 */
|
|
||||||
:deep(.el-input__wrapper) {
|
|
||||||
box-shadow: 0 0 0 1px var(--theme-border) inset !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-input__wrapper:hover) {
|
|
||||||
box-shadow: 0 0 0 1px var(--theme-primary) inset !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-input__wrapper.is-focus) {
|
|
||||||
box-shadow: 0 0 0 1px var(--theme-primary) inset !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-select__wrapper) {
|
|
||||||
box-shadow: 0 0 0 1px var(--theme-border) inset !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-select__wrapper:hover) {
|
|
||||||
box-shadow: 0 0 0 1px var(--theme-primary) inset !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-select__wrapper.is-focused) {
|
|
||||||
box-shadow: 0 0 0 1px var(--theme-primary) inset !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-input-number__decrease),
|
|
||||||
:deep(.el-input-number__increase) {
|
|
||||||
background: var(--theme-bg-light);
|
|
||||||
color: var(--theme-text-secondary);
|
|
||||||
border: 1px solid var(--theme-border) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-input-number__decrease:hover),
|
|
||||||
:deep(.el-input-number__increase:hover) {
|
|
||||||
background: rgba(255, 107, 157, 0.1);
|
|
||||||
color: var(--theme-primary);
|
|
||||||
border-color: var(--theme-primary) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-input-number__decrease.is-disabled),
|
|
||||||
:deep(.el-input-number__increase.is-disabled) {
|
|
||||||
color: #ccc !important;
|
|
||||||
border-color: var(--theme-border) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-button) {
|
|
||||||
border: 1px solid var(--theme-border) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-button--primary) {
|
|
||||||
background: linear-gradient(135deg, #FF6B9D 0%, #FF8FB3 100%) !important;
|
|
||||||
border-color: #FF6B9D !important;
|
|
||||||
color: white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-button--success) {
|
|
||||||
background: linear-gradient(135deg, #00D4FF 0%, #00E5FF 100%) !important;
|
|
||||||
border-color: #00D4FF !important;
|
|
||||||
color: white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-button--warning) {
|
|
||||||
background: linear-gradient(135deg, #FFB800 0%, #FFD000 100%) !important;
|
|
||||||
border-color: #FFB800 !important;
|
|
||||||
color: white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-button--danger) {
|
|
||||||
background: linear-gradient(135deg, #FF6B6B 0%, #FF8B8B 100%) !important;
|
|
||||||
border-color: #FF6B6B !important;
|
|
||||||
color: white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-card) {
|
|
||||||
border: 1px solid var(--theme-border) !important;
|
|
||||||
box-shadow: 0 2px 12px rgba(255, 107, 157, 0.08) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-table) {
|
|
||||||
border: 1px solid var(--theme-border) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-table th.el-table__cell) {
|
|
||||||
background: var(--theme-bg-light) !important;
|
|
||||||
color: var(--theme-text) !important;
|
|
||||||
border-bottom: 1px solid var(--theme-border) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-table td.el-table__cell) {
|
|
||||||
border-bottom: 1px solid var(--theme-border) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-table__border-left) {
|
|
||||||
border-left: 1px solid var(--theme-border) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-table__border-right) {
|
|
||||||
border-right: 1px solid var(--theme-border) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-checkbox__inner) {
|
|
||||||
border: 1px solid var(--theme-border) !important;
|
|
||||||
background: white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-checkbox__inner:hover) {
|
|
||||||
border-color: var(--theme-primary) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
|
|
||||||
background: var(--theme-primary) !important;
|
|
||||||
border-color: var(--theme-primary) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-checkbox__input.is-disabled .el-checkbox__inner) {
|
|
||||||
background: #f5f5f5 !important;
|
|
||||||
border-color: #e4e7ed !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-pagination button) {
|
|
||||||
border: 1px solid var(--theme-border) !important;
|
|
||||||
background: var(--theme-bg-light) !important;
|
|
||||||
color: var(--theme-text-secondary) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-pagination button:hover) {
|
|
||||||
background: rgba(255, 107, 157, 0.1) !important;
|
|
||||||
color: var(--theme-primary) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-pagination li.is-active) {
|
|
||||||
background: var(--theme-primary) !important;
|
|
||||||
color: white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-pager li) {
|
|
||||||
background: var(--theme-bg-light) !important;
|
|
||||||
color: var(--theme-text-secondary) !important;
|
|
||||||
border: 1px solid var(--theme-border) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 下拉面板样式 */
|
|
||||||
:deep(.el-select-dropdown) {
|
|
||||||
border: 1px solid var(--theme-border) !important;
|
|
||||||
box-shadow: 0 2px 12px rgba(255, 107, 157, 0.1) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-select-dropdown__item) {
|
|
||||||
color: var(--theme-text) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-select-dropdown__item:hover) {
|
|
||||||
background: rgba(255, 107, 157, 0.1) !important;
|
|
||||||
color: var(--theme-primary) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-select-dropdown__item.is-selected) {
|
|
||||||
color: var(--theme-primary) !important;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -20,15 +20,13 @@ defineProps({
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.header-card {
|
.header-card {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
border-radius: 16px;
|
border-radius: var(--radius-xl);
|
||||||
background: rgba(255, 255, 255, 0.95);
|
|
||||||
border: 1px solid rgba(255, 107, 157, 0.15);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: var(--theme-primary);
|
color: var(--primary);
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
|
|||||||
@@ -129,24 +129,8 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.chart-card {
|
.chart-card {
|
||||||
border-radius: 20px;
|
border-radius: var(--radius-xl);
|
||||||
min-height: 400px;
|
min-height: 400px;
|
||||||
background: rgba(255, 255, 255, 0.95);
|
|
||||||
border: 1px solid rgba(255, 107, 157, 0.15);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-title {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--theme-primary);
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-container {
|
.chart-container {
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
size="large"
|
size="large"
|
||||||
class="action-btn"
|
class="action-btn"
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
@click="$emit('start-crawler')"
|
@click="$emit('startCrawler')"
|
||||||
>
|
>
|
||||||
<span class="btn-icon">🚀</span>
|
<span class="btn-icon">🚀</span>
|
||||||
立即更新
|
立即更新
|
||||||
@@ -51,23 +51,8 @@ defineEmits(['start-crawler', 'export', 'clean'])
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.chart-card {
|
.chart-card {
|
||||||
border-radius: 20px;
|
border-radius: var(--radius-xl);
|
||||||
min-height: 400px;
|
min-height: 400px;
|
||||||
background: rgba(255, 255, 255, 0.95);
|
|
||||||
border: 1px solid rgba(255, 107, 157, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-title {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--theme-primary);
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.quick-actions {
|
.quick-actions {
|
||||||
@@ -82,33 +67,17 @@ defineEmits(['start-crawler', 'export', 'clean'])
|
|||||||
height: 60px;
|
height: 60px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
border-radius: 14px;
|
border-radius: 14px;
|
||||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
display: flex;
|
box-shadow: var(--shadow-md);
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
box-shadow: 0 4px 12px rgba(255, 107, 157, 0.15);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-btn:hover {
|
.action-btn:hover {
|
||||||
box-shadow: 0 8px 20px rgba(255, 107, 157, 0.25);
|
box-shadow: 0 8px 20px rgba(255, 107, 157, 0.25);
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.action-btn .el-button__content) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn:hover {
|
|
||||||
transform: translateY(-5px) scale(1.02);
|
transform: translateY(-5px) scale(1.02);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-icon {
|
.btn-icon {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
margin-right: 8px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -33,11 +33,11 @@ defineProps({
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.stat-card {
|
.stat-card {
|
||||||
border-radius: 20px;
|
border-radius: var(--radius-xl);
|
||||||
min-height: 180px;
|
min-height: 120px;
|
||||||
background: rgba(255, 255, 255, 0.95);
|
background: rgba(255, 255, 255, 0.95);
|
||||||
border: 1px solid rgba(255, 107, 157, 0.15);
|
border: 1px solid rgba(255, 107, 157, 0.15);
|
||||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
transition: var(--transition-hover);
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
@@ -45,7 +45,7 @@ defineProps({
|
|||||||
.stat-card:hover {
|
.stat-card:hover {
|
||||||
transform: translateY(-8px) scale(1.02);
|
transform: translateY(-8px) scale(1.02);
|
||||||
box-shadow: 0 8px 24px rgba(255, 107, 157, 0.15);
|
box-shadow: 0 8px 24px rgba(255, 107, 157, 0.15);
|
||||||
border-color: var(--theme-primary);
|
border-color: var(--cyan);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-card.total {
|
.stat-card.total {
|
||||||
@@ -71,26 +71,26 @@ defineProps({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.stat-icon {
|
.stat-icon {
|
||||||
font-size: 48px;
|
font-size: 32px;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
filter: drop-shadow(0 0 15px rgba(255, 107, 157, 0.3));
|
filter: drop-shadow(0 0 15px rgba(255, 107, 157, 0.3));
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-info {
|
.stat-info {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
text-align: center;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-value {
|
.stat-value {
|
||||||
font-size: 36px;
|
font-size: 28px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--theme-text);
|
color: var(--text-primary);
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-label {
|
.stat-label {
|
||||||
font-size: 14px;
|
font-size: 12px;
|
||||||
color: var(--theme-text-secondary);
|
color: var(--text-secondary);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
|
|||||||
@@ -1,39 +1,6 @@
|
|||||||
:root {
|
@import './styles/variables.css';
|
||||||
--theme-primary: #00D4FF;
|
@import './styles/utilities.css';
|
||||||
--theme-primary-light: #00B8E0;
|
@import './styles/element-plus.css';
|
||||||
--theme-primary-dark: #0090B0;
|
|
||||||
--theme-bg: linear-gradient(135deg, #0A0E27 0%, #1A1F3A 50%, #162032 100%);
|
|
||||||
--theme-bg-solid: #0A0E27;
|
|
||||||
--theme-bg-light: #1A1F3A;
|
|
||||||
--theme-bg-card: rgba(26, 31, 58, 0.95);
|
|
||||||
--theme-text: #E0E6FF;
|
|
||||||
--theme-text-secondary: #9CA3AF;
|
|
||||||
--theme-border: #2D3748;
|
|
||||||
--theme-border-light: #3A4558;
|
|
||||||
--theme-gradient-1: linear-gradient(135deg, #00D4FF 0%, #00B8E0 100%);
|
|
||||||
--theme-gradient-2: linear-gradient(135deg, #FF6B9D 0%, #FF8E53 100%);
|
|
||||||
--theme-gradient-3: linear-gradient(135deg, #00FF88 0%, #00CC6A 100%);
|
|
||||||
|
|
||||||
--el-color-primary: #00D4FF;
|
|
||||||
--el-color-primary-light-3: #00B8E0;
|
|
||||||
--el-color-primary-light-5: #4A90E2;
|
|
||||||
--el-color-primary-light-7: #00B8FF;
|
|
||||||
--el-color-primary-light-8: #00D4FF;
|
|
||||||
--el-color-primary-light-9: #00E5FF;
|
|
||||||
--el-color-primary-dark-2: #0090B0;
|
|
||||||
--el-color-success: #00FF88;
|
|
||||||
--el-color-warning: #FFB800;
|
|
||||||
--el-color-danger: #FF3366;
|
|
||||||
--el-color-info: #A855F7;
|
|
||||||
--el-bg-color: #0A0E27;
|
|
||||||
--el-bg-color-page: #0A0E27;
|
|
||||||
--el-text-color-primary: #E0E6FF;
|
|
||||||
--el-text-color-regular: #9CA3AF;
|
|
||||||
--el-border-color: #2D3748;
|
|
||||||
--el-border-color-light: #2D3748;
|
|
||||||
--el-fill-color-blank: #1A1F3A;
|
|
||||||
--el-fill-color-light: #1A1F3A;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@@ -44,14 +11,41 @@
|
|||||||
body {
|
body {
|
||||||
font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
color: var(--theme-text);
|
color: var(--text-primary);
|
||||||
background: var(--theme-bg);
|
background: var(--bg-page);
|
||||||
background-attachment: fixed;
|
|
||||||
background-size: 400% 400%;
|
|
||||||
animation: gradientShift 15s ease infinite;
|
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--cyan);
|
||||||
|
transition: var(--transition-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: var(--cyan-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background-color: var(--bg-page);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background-color: var(--border-light);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
transition: var(--transition-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background-color: var(--primary-light);
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes gradientShift {
|
@keyframes gradientShift {
|
||||||
0%, 100% {
|
0%, 100% {
|
||||||
background-position: 0% 50%;
|
background-position: 0% 50%;
|
||||||
@@ -61,331 +55,33 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
@keyframes fadeIn {
|
||||||
text-decoration: none;
|
from {
|
||||||
color: var(--theme-primary);
|
opacity: 0;
|
||||||
transition: color 0.3s ease;
|
transform: translateY(10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
@keyframes shimmer {
|
||||||
color: var(--theme-primary-light);
|
0%, 100% {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-card {
|
@keyframes float {
|
||||||
border-radius: 16px;
|
0%, 100% {
|
||||||
border: 1px solid rgba(0, 212, 255, 0.15);
|
transform: translateY(0);
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
||||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
background-color: var(--theme-bg-card);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
}
|
}
|
||||||
|
50% {
|
||||||
.el-card:hover {
|
transform: translateY(-5px);
|
||||||
box-shadow: 0 8px 32px rgba(0, 212, 255, 0.2);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
border-color: rgba(0, 212, 255, 0.4);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-button--primary {
|
|
||||||
background: var(--theme-gradient-1);
|
|
||||||
border: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 10px 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
color: #0A0E27;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-button--primary::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: -100%;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
|
||||||
transition: left 0.5s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-button--primary:hover::before {
|
|
||||||
left: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-button--primary:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 16px rgba(0, 212, 255, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-button--success {
|
|
||||||
background: var(--theme-gradient-3);
|
|
||||||
border: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 10px 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
color: #0A0E27;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-button--success::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: -100%;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
|
||||||
transition: left 0.5s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-button--success:hover::before {
|
|
||||||
left: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-button--success:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 16px rgba(0, 255, 136, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-button--danger {
|
|
||||||
background: var(--theme-gradient-2);
|
|
||||||
border: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 10px 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
color: white;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-button--danger::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: -100%;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
|
||||||
transition: left 0.5s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-button--danger:hover::before {
|
|
||||||
left: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-button--danger:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 16px rgba(255, 107, 157, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-button--warning {
|
|
||||||
background-color: #FFB800;
|
|
||||||
border-color: #FFB800;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 10px 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
color: #0A0E27;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-button--warning:hover {
|
|
||||||
background-color: #E5A600;
|
|
||||||
border-color: #E5A600;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 12px rgba(255, 184, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-button--default {
|
|
||||||
border: 1px solid var(--theme-border);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 10px 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
background-color: var(--theme-bg-light);
|
|
||||||
color: var(--theme-text);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-button--default:hover {
|
|
||||||
border-color: var(--theme-primary);
|
|
||||||
color: var(--theme-primary);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 212, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-input__wrapper {
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 0 0 1px var(--theme-border) inset;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
background-color: var(--theme-bg-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-input__wrapper:hover {
|
|
||||||
box-shadow: 0 0 0 1px var(--theme-primary-light) inset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-input__wrapper.is-focus {
|
|
||||||
box-shadow: 0 0 0 2px var(--theme-primary) inset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-select .el-input__wrapper {
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-table {
|
|
||||||
border-radius: 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
border: 1px solid var(--theme-border);
|
|
||||||
background-color: var(--theme-bg-card);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-table th {
|
|
||||||
background-color: var(--theme-bg-light);
|
|
||||||
color: var(--theme-primary);
|
|
||||||
font-weight: 600;
|
|
||||||
border-bottom: 2px solid var(--theme-primary);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-table td {
|
|
||||||
border-bottom: 1px solid var(--theme-border);
|
|
||||||
background-color: var(--theme-bg-card);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-table tr:hover > td {
|
|
||||||
background-color: var(--theme-bg-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-tag {
|
|
||||||
border-radius: 6px;
|
|
||||||
border: 1px solid var(--theme-border);
|
|
||||||
padding: 4px 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-tag--primary {
|
|
||||||
background-color: rgba(0, 212, 255, 0.15);
|
|
||||||
color: var(--theme-primary);
|
|
||||||
border-color: var(--theme-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-tag--success {
|
|
||||||
background-color: rgba(0, 255, 136, 0.15);
|
|
||||||
color: #00FF88;
|
|
||||||
border-color: #00FF88;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-tag--warning {
|
|
||||||
background-color: rgba(255, 184, 0, 0.15);
|
|
||||||
color: #FFB800;
|
|
||||||
border-color: #FFB800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-tag--danger {
|
|
||||||
background-color: rgba(255, 51, 102, 0.15);
|
|
||||||
color: #FF3366;
|
|
||||||
border-color: #FF3366;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-tag--info {
|
|
||||||
background-color: rgba(168, 85, 247, 0.15);
|
|
||||||
color: #A855F7;
|
|
||||||
border-color: #A855F7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-rate__icon {
|
|
||||||
color: var(--theme-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
|
|
||||||
background-color: var(--theme-primary);
|
|
||||||
color: #0A0E27;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-pagination.is-background .btn-next,
|
|
||||||
.el-pagination.is-background .btn-prev {
|
|
||||||
background-color: var(--theme-bg-light);
|
|
||||||
color: var(--theme-primary);
|
|
||||||
border-radius: 6px;
|
|
||||||
border: 1px solid var(--theme-border);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-pagination.is-background .btn-next:hover,
|
|
||||||
.el-pagination.is-background .btn-prev:hover {
|
|
||||||
background-color: var(--theme-primary);
|
|
||||||
color: #0A0E27;
|
|
||||||
border-color: var(--theme-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-pagination.is-background .el-pager li {
|
|
||||||
background-color: var(--theme-bg-light);
|
|
||||||
color: var(--theme-primary);
|
|
||||||
border-radius: 6px;
|
|
||||||
margin: 0 4px;
|
|
||||||
border: 1px solid var(--theme-border);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-pagination.is-background .el-pager li:hover {
|
|
||||||
background-color: var(--theme-primary-light);
|
|
||||||
color: #0A0E27;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-message {
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
|
||||||
background-color: var(--theme-bg-card);
|
|
||||||
border: 1px solid var(--theme-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-message--success .el-message__content {
|
|
||||||
color: #00FF88;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-message--error .el-message__content {
|
|
||||||
color: #FF3366;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-message--warning .el-message__content {
|
|
||||||
color: #FFB800;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-message--info .el-message__content {
|
|
||||||
color: #A855F7;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-progress-bar__inner {
|
|
||||||
background: var(--theme-gradient-1);
|
|
||||||
border-radius: 8px;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-progress-bar__inner::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: linear-gradient(
|
|
||||||
90deg,
|
|
||||||
transparent 0%,
|
|
||||||
rgba(255, 255, 255, 0.2) 50%,
|
|
||||||
transparent 100%
|
|
||||||
);
|
|
||||||
animation: progressShine 2s infinite;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes progressShine {
|
@keyframes progressShine {
|
||||||
@@ -396,174 +92,3 @@ a:hover {
|
|||||||
transform: translateX(100%);
|
transform: translateX(100%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-switch.is-checked .el-switch__core {
|
|
||||||
background-color: var(--theme-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-switch.is-checked .el-switch__action {
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-alert {
|
|
||||||
border-radius: 12px;
|
|
||||||
border: 1px solid var(--theme-border);
|
|
||||||
background-color: var(--theme-bg-card);
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-alert--success {
|
|
||||||
background-color: rgba(0, 255, 136, 0.1);
|
|
||||||
border-color: #00FF88;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-alert--info {
|
|
||||||
background-color: rgba(168, 85, 247, 0.1);
|
|
||||||
border-color: #A855F7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-alert--warning {
|
|
||||||
background-color: rgba(255, 184, 0, 0.1);
|
|
||||||
border-color: #FFB800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-alert--error {
|
|
||||||
background-color: rgba(255, 51, 102, 0.1);
|
|
||||||
border-color: #FF3366;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-dialog {
|
|
||||||
border-radius: 16px;
|
|
||||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
|
||||||
background-color: var(--theme-bg-card);
|
|
||||||
border: 1px solid var(--theme-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-dialog__header {
|
|
||||||
background-color: var(--theme-bg-light);
|
|
||||||
border-radius: 16px 16px 0 0;
|
|
||||||
padding: 20px;
|
|
||||||
border-bottom: 1px solid var(--theme-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-dialog__title {
|
|
||||||
color: var(--theme-primary);
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-dialog__body {
|
|
||||||
color: var(--theme-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-dropdown-menu {
|
|
||||||
border-radius: 12px;
|
|
||||||
border: 1px solid var(--theme-border);
|
|
||||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
|
||||||
background-color: var(--theme-bg-card);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-dropdown-menu__item:hover {
|
|
||||||
background-color: var(--theme-bg-light);
|
|
||||||
color: var(--theme-primary);
|
|
||||||
border-radius: 6px;
|
|
||||||
margin: 2px 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-notification {
|
|
||||||
border-radius: 16px;
|
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
||||||
background-color: var(--theme-bg-card);
|
|
||||||
border: 1px solid var(--theme-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-notification__title {
|
|
||||||
color: var(--theme-primary);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-card__header {
|
|
||||||
border-bottom: 1px solid var(--theme-border);
|
|
||||||
padding: 16px 20px;
|
|
||||||
background-color: var(--theme-bg-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-card__body {
|
|
||||||
padding: 20px;
|
|
||||||
color: var(--theme-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-form-item__label {
|
|
||||||
color: var(--theme-text);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-input-number {
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-input-number .el-input__wrapper {
|
|
||||||
border-radius: 8px;
|
|
||||||
background-color: var(--theme-bg-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-radio-button__inner {
|
|
||||||
border-radius: 8px !important;
|
|
||||||
border: 1px solid var(--theme-border);
|
|
||||||
background-color: var(--theme-bg-light);
|
|
||||||
color: var(--theme-text);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-radio-button__original-radio:checked + .el-radio-button__inner {
|
|
||||||
background-color: var(--theme-primary);
|
|
||||||
border-color: var(--theme-primary);
|
|
||||||
color: #0A0E27;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-menu {
|
|
||||||
border-right: 1px solid var(--theme-border);
|
|
||||||
background-color: var(--theme-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-menu-item {
|
|
||||||
border-radius: 8px;
|
|
||||||
margin: 4px 8px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--theme-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-menu-item:hover {
|
|
||||||
background-color: var(--theme-bg-light);
|
|
||||||
color: var(--theme-primary);
|
|
||||||
transform: translateX(4px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-menu-item.is-active {
|
|
||||||
background-color: var(--theme-primary);
|
|
||||||
color: #0A0E27;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background-color: var(--theme-bg);
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background-color: var(--theme-border-light);
|
|
||||||
border-radius: 4px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background-color: var(--theme-primary-light);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,177 +1,160 @@
|
|||||||
/* Element Plus 全局样式覆盖 - 强制去除所有黑色边框 */
|
|
||||||
|
|
||||||
/* 输入框 */
|
|
||||||
.el-input__wrapper {
|
.el-input__wrapper {
|
||||||
box-shadow: 0 0 0 1px #FFE4EC inset !important;
|
box-shadow: 0 0 0 1px var(--border) inset !important;
|
||||||
}
|
|
||||||
|
|
||||||
.el-input__wrapper:hover {
|
|
||||||
box-shadow: 0 0 0 1px #FF6B9D inset !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.el-input__wrapper:hover,
|
||||||
.el-input__wrapper.is-focus {
|
.el-input__wrapper.is-focus {
|
||||||
box-shadow: 0 0 0 1px #FF6B9D inset !important;
|
box-shadow: 0 0 0 1px var(--primary) inset !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 下拉选择框 */
|
|
||||||
.el-select__wrapper {
|
.el-select__wrapper {
|
||||||
box-shadow: 0 0 0 1px #FFE4EC inset !important;
|
box-shadow: 0 0 0 1px var(--border) inset !important;
|
||||||
}
|
|
||||||
|
|
||||||
.el-select__wrapper:hover {
|
|
||||||
box-shadow: 0 0 0 1px #FF6B9D inset !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.el-select__wrapper:hover,
|
||||||
.el-select__wrapper.is-focused {
|
.el-select__wrapper.is-focused {
|
||||||
box-shadow: 0 0 0 1px #FF6B9D inset !important;
|
box-shadow: 0 0 0 1px var(--primary) inset !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-select__placeholder {
|
.el-select__placeholder {
|
||||||
color: #999999 !important;
|
color: var(--text-secondary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-select__caret {
|
.el-select__caret {
|
||||||
color: #FF6B9D !important;
|
color: var(--primary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-select-dropdown {
|
.el-select-dropdown {
|
||||||
border: 1px solid #FFE4EC !important;
|
border: 1px solid var(--border) !important;
|
||||||
box-shadow: 0 2px 12px rgba(255, 107, 157, 0.1) !important;
|
box-shadow: var(--shadow-md) !important;
|
||||||
background: white !important;
|
background: white !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-select-dropdown__item {
|
.el-select-dropdown__item {
|
||||||
color: #333333 !important;
|
color: var(--text-primary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-select-dropdown__item:hover {
|
.el-select-dropdown__item:hover {
|
||||||
background: rgba(255, 107, 157, 0.1) !important;
|
background: rgba(255, 107, 157, 0.1) !important;
|
||||||
color: #FF6B9D !important;
|
color: var(--primary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-select-dropdown__item.is-selected {
|
.el-select-dropdown__item.is-selected {
|
||||||
color: #FF6B9D !important;
|
color: var(--primary) !important;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 数字输入框 */
|
|
||||||
.el-input-number__decrease,
|
.el-input-number__decrease,
|
||||||
.el-input-number__increase {
|
.el-input-number__increase {
|
||||||
background: #FFF9FB !important;
|
background: var(--bg-light) !important;
|
||||||
color: #999999 !important;
|
color: var(--text-secondary) !important;
|
||||||
border: 1px solid #FFE4EC !important;
|
border: 1px solid var(--border) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-input-number__decrease:hover,
|
.el-input-number__decrease:hover,
|
||||||
.el-input-number__increase:hover {
|
.el-input-number__increase:hover {
|
||||||
background: rgba(255, 107, 157, 0.1) !important;
|
background: rgba(255, 107, 157, 0.1) !important;
|
||||||
color: #FF6B9D !important;
|
color: var(--primary) !important;
|
||||||
border-color: #FF6B9D !important;
|
border-color: var(--primary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-input-number__decrease.is-disabled,
|
.el-input-number__decrease.is-disabled,
|
||||||
.el-input-number__increase.is-disabled {
|
.el-input-number__increase.is-disabled {
|
||||||
color: #cccccc !important;
|
color: #ccc !important;
|
||||||
border-color: #FFE4EC !important;
|
border-color: var(--border) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-input-number__wrapper {
|
.el-input-number__wrapper {
|
||||||
box-shadow: 0 0 0 1px #FFE4EC inset !important;
|
box-shadow: 0 0 0 1px var(--border) inset !important;
|
||||||
}
|
|
||||||
|
|
||||||
.el-input-number__wrapper:hover {
|
|
||||||
box-shadow: 0 0 0 1px #FF6B9D inset !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.el-input-number__wrapper:hover,
|
||||||
.el-input-number__wrapper.is-focus {
|
.el-input-number__wrapper.is-focus {
|
||||||
box-shadow: 0 0 0 1px #FF6B9D inset !important;
|
box-shadow: 0 0 0 1px var(--primary) inset !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 按钮 */
|
|
||||||
.el-button {
|
.el-button {
|
||||||
border: 1px solid #FFE4EC !important;
|
border: 1px solid var(--border) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-button--primary {
|
.el-button--primary {
|
||||||
background: linear-gradient(135deg, #FF6B9D 0%, #FF8FB3 100%) !important;
|
background: var(--gradient-primary) !important;
|
||||||
border-color: #FF6B9D !important;
|
border-color: var(--primary) !important;
|
||||||
color: white !important;
|
color: white !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-button--primary:hover {
|
.el-button--primary:hover {
|
||||||
background: linear-gradient(135deg, #FF5A8F 0%, #FF7FA7 100%) !important;
|
|
||||||
box-shadow: 0 4px 12px rgba(255, 107, 157, 0.3) !important;
|
box-shadow: 0 4px 12px rgba(255, 107, 157, 0.3) !important;
|
||||||
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-button--success {
|
.el-button--success {
|
||||||
background: linear-gradient(135deg, #00D4FF 0%, #00E5FF 100%) !important;
|
background: var(--gradient-cyan) !important;
|
||||||
border-color: #00D4FF !important;
|
border-color: var(--cyan) !important;
|
||||||
color: white !important;
|
color: white !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-button--success:hover {
|
.el-button--success:hover {
|
||||||
background: linear-gradient(135deg, #00C4F0 0%, #00D4E8 100%) !important;
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3) !important;
|
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3) !important;
|
||||||
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-button--warning {
|
.el-button--warning {
|
||||||
background: linear-gradient(135deg, #FFB800 0%, #FFD000 100%) !important;
|
background: var(--gradient-yellow) !important;
|
||||||
border-color: #FFB800 !important;
|
border-color: var(--yellow) !important;
|
||||||
color: white !important;
|
color: white !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-button--warning:hover {
|
.el-button--warning:hover {
|
||||||
background: linear-gradient(135deg, #FFA700 0%, #FFC000 100%) !important;
|
|
||||||
box-shadow: 0 4px 12px rgba(255, 184, 0, 0.3) !important;
|
box-shadow: 0 4px 12px rgba(255, 184, 0, 0.3) !important;
|
||||||
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-button--danger {
|
.el-button--danger {
|
||||||
background: linear-gradient(135deg, #FF6B6B 0%, #FF8B8B 100%) !important;
|
background: var(--gradient-danger) !important;
|
||||||
border-color: #FF6B6B !important;
|
border-color: var(--danger) !important;
|
||||||
color: white !important;
|
color: white !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-button--danger:hover {
|
.el-button--danger:hover {
|
||||||
background: linear-gradient(135deg, #FF5A5A 0%, #FF7A7A 100%) !important;
|
|
||||||
box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3) !important;
|
box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3) !important;
|
||||||
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 卡片 */
|
|
||||||
.el-card {
|
.el-card {
|
||||||
border: 1px solid #FFE4EC !important;
|
border: 1px solid var(--border) !important;
|
||||||
box-shadow: 0 2px 12px rgba(255, 107, 157, 0.08) !important;
|
box-shadow: var(--shadow-sm) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-card__header {
|
.el-card__header {
|
||||||
border-bottom: 1px solid #FFE4EC !important;
|
border-bottom: 1px solid var(--border) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-card__body {
|
.el-card__body {
|
||||||
background: rgba(255, 255, 255, 0.95) !important;
|
background: var(--bg-card) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 表格 */
|
|
||||||
.el-table {
|
.el-table {
|
||||||
border: 1px solid #FFE4EC !important;
|
border: 1px solid var(--border) !important;
|
||||||
background: white !important;
|
background: white !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-table th.el-table__cell {
|
.el-table th.el-table__cell {
|
||||||
background: #FFF9FB !important;
|
background: var(--bg-light) !important;
|
||||||
color: #333333 !important;
|
color: var(--text-primary) !important;
|
||||||
border-bottom: 1px solid #FFE4EC !important;
|
border-bottom: 1px solid var(--border) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-table td.el-table__cell {
|
.el-table td.el-table__cell {
|
||||||
border-bottom: 1px solid #FFE4EC !important;
|
border-bottom: 1px solid var(--border) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-table__border-left {
|
.el-table__border-left {
|
||||||
border-left: 1px solid #FFE4EC !important;
|
border-left: 1px solid var(--border) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-table__border-right {
|
.el-table__border-right {
|
||||||
border-right: 1px solid #FFE4EC !important;
|
border-right: 1px solid var(--border) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-table tr:hover > td {
|
.el-table tr:hover > td {
|
||||||
@@ -179,22 +162,21 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.el-table__body tr.current-row > td.el-table__cell {
|
.el-table__body tr.current-row > td.el-table__cell {
|
||||||
background: #FFE4EC !important;
|
background: var(--border) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Checkbox */
|
|
||||||
.el-checkbox__inner {
|
.el-checkbox__inner {
|
||||||
border: 1px solid #FFE4EC !important;
|
border: 1px solid var(--border) !important;
|
||||||
background: white !important;
|
background: white !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-checkbox__inner:hover {
|
.el-checkbox__inner:hover {
|
||||||
border-color: #FF6B9D !important;
|
border-color: var(--primary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-checkbox__input.is-checked .el-checkbox__inner {
|
.el-checkbox__input.is-checked .el-checkbox__inner {
|
||||||
background: #FF6B9D !important;
|
background: var(--primary) !important;
|
||||||
border-color: #FF6B9D !important;
|
border-color: var(--primary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-checkbox__input.is-disabled .el-checkbox__inner {
|
.el-checkbox__input.is-disabled .el-checkbox__inner {
|
||||||
@@ -202,79 +184,71 @@
|
|||||||
border-color: #e4e7ed !important;
|
border-color: #e4e7ed !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 分页器 */
|
|
||||||
.el-pagination button {
|
.el-pagination button {
|
||||||
border: 1px solid #FFE4EC !important;
|
border: 1px solid var(--border) !important;
|
||||||
background: #FFF9FB !important;
|
background: var(--bg-light) !important;
|
||||||
color: #999999 !important;
|
color: var(--text-secondary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-pagination button:hover {
|
.el-pagination button:hover {
|
||||||
background: rgba(255, 107, 157, 0.1) !important;
|
background: rgba(255, 107, 157, 0.1) !important;
|
||||||
color: #FF6B9D !important;
|
color: var(--primary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-pagination li.is-active {
|
.el-pagination li.is-active {
|
||||||
background: #FF6B9D !important;
|
background: var(--primary) !important;
|
||||||
color: white !important;
|
color: white !important;
|
||||||
border-color: #FF6B9D !important;
|
border-color: var(--primary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-pager li {
|
.el-pager li {
|
||||||
background: #FFF9FB !important;
|
background: var(--bg-light) !important;
|
||||||
color: #999999 !important;
|
color: var(--text-secondary) !important;
|
||||||
border: 1px solid #FFE4EC !important;
|
border: 1px solid var(--border) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-pager li:hover {
|
.el-pager li:hover {
|
||||||
color: #FF6B9D !important;
|
color: var(--primary) !important;
|
||||||
}
|
|
||||||
|
|
||||||
/* Tag */
|
|
||||||
.el-tag {
|
|
||||||
border: 1px solid #FFE4EC !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-tag--primary {
|
.el-tag--primary {
|
||||||
background: rgba(255, 107, 157, 0.1) !important;
|
background: rgba(255, 107, 157, 0.1) !important;
|
||||||
color: #FF6B9D !important;
|
color: var(--primary) !important;
|
||||||
border-color: rgba(255, 107, 157, 0.3) !important;
|
border-color: rgba(255, 107, 157, 0.3) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-tag--success {
|
.el-tag--success {
|
||||||
background: rgba(0, 212, 255, 0.1) !important;
|
background: rgba(0, 212, 255, 0.1) !important;
|
||||||
color: #00D4FF !important;
|
color: var(--cyan) !important;
|
||||||
border-color: rgba(0, 212, 255, 0.3) !important;
|
border-color: rgba(0, 212, 255, 0.3) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-tag--warning {
|
.el-tag--warning {
|
||||||
background: rgba(255, 184, 0, 0.1) !important;
|
background: rgba(255, 184, 0, 0.1) !important;
|
||||||
color: #FFB800 !important;
|
color: var(--yellow) !important;
|
||||||
border-color: rgba(255, 184, 0, 0.3) !important;
|
border-color: rgba(255, 184, 0, 0.3) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-tag--danger {
|
.el-tag--danger {
|
||||||
background: rgba(255, 107, 107, 0.1) !important;
|
background: rgba(255, 107, 107, 0.1) !important;
|
||||||
color: #FF6B6B !important;
|
color: var(--danger) !important;
|
||||||
border-color: rgba(255, 107, 107, 0.3) !important;
|
border-color: rgba(255, 107, 107, 0.3) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Rate 评分 */
|
|
||||||
.el-rate__icon {
|
.el-rate__icon {
|
||||||
color: #FFE4EC !important;
|
color: var(--border) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-rate__icon.hover {
|
.el-rate__icon.hover {
|
||||||
color: #FF6B9D !important;
|
color: var(--primary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Dialog 对话框 */
|
|
||||||
.el-dialog {
|
.el-dialog {
|
||||||
border: 1px solid #FFE4EC !important;
|
border: 1px solid var(--border) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-dialog__header {
|
.el-dialog__header {
|
||||||
border-bottom: 1px solid #FFE4EC !important;
|
border-bottom: 1px solid var(--border) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-dialog__body {
|
.el-dialog__body {
|
||||||
@@ -282,96 +256,111 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.el-dialog__footer {
|
.el-dialog__footer {
|
||||||
border-top: 1px solid #FFE4EC !important;
|
border-top: 1px solid var(--border) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Dropdown 下拉菜单 */
|
|
||||||
.el-dropdown-menu {
|
.el-dropdown-menu {
|
||||||
border: 1px solid #FFE4EC !important;
|
border: 1px solid var(--border) !important;
|
||||||
box-shadow: 0 2px 12px rgba(255, 107, 157, 0.1) !important;
|
box-shadow: var(--shadow-md) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-dropdown-menu__item {
|
.el-dropdown-menu__item {
|
||||||
color: #333333 !important;
|
color: var(--text-primary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-dropdown-menu__item:hover {
|
.el-dropdown-menu__item:hover {
|
||||||
background: rgba(255, 107, 157, 0.1) !important;
|
background: rgba(255, 107, 157, 0.1) !important;
|
||||||
color: #FF6B9D !important;
|
color: var(--primary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Scrollbar 滚动条 */
|
|
||||||
.el-scrollbar__wrap::-webkit-scrollbar {
|
.el-scrollbar__wrap::-webkit-scrollbar {
|
||||||
width: 6px;
|
width: 6px;
|
||||||
height: 6px;
|
height: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-scrollbar__wrap::-webkit-scrollbar-thumb {
|
.el-scrollbar__wrap::-webkit-scrollbar-thumb {
|
||||||
background: #FFE4EC;
|
background: var(--border);
|
||||||
border-radius: 3px;
|
border-radius: var(--radius-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-scrollbar__wrap::-webkit-scrollbar-thumb:hover {
|
.el-scrollbar__wrap::-webkit-scrollbar-thumb:hover {
|
||||||
background: #FF6B9D;
|
background: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Form 表单 */
|
|
||||||
.el-form-item__label {
|
.el-form-item__label {
|
||||||
color: #666666 !important;
|
color: var(--text-muted) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-form-item__error {
|
.el-form-item__error {
|
||||||
color: #FF6B6B !important;
|
color: var(--danger) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Message 消息提示 */
|
|
||||||
.el-message {
|
.el-message {
|
||||||
border: 1px solid #FFE4EC !important;
|
border: 1px solid var(--border) !important;
|
||||||
box-shadow: 0 4px 16px rgba(255, 107, 157, 0.15) !important;
|
box-shadow: var(--shadow-md) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-message--success {
|
.el-message--success {
|
||||||
background: rgba(0, 212, 255, 0.1) !important;
|
background: rgba(0, 212, 255, 0.1) !important;
|
||||||
border-color: rgba(0, 212, 255, 0.3) !important;
|
border-color: rgba(0, 212, 255, 0.3) !important;
|
||||||
color: #00D4FF !important;
|
color: var(--cyan) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-message--error {
|
.el-message--error {
|
||||||
background: rgba(255, 107, 107, 0.1) !important;
|
background: rgba(255, 107, 107, 0.1) !important;
|
||||||
border-color: rgba(255, 107, 107, 0.3) !important;
|
border-color: rgba(255, 107, 107, 0.3) !important;
|
||||||
color: #FF6B6B !important;
|
color: var(--danger) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-message--warning {
|
.el-message--warning {
|
||||||
background: rgba(255, 184, 0, 0.1) !important;
|
background: rgba(255, 184, 0, 0.1) !important;
|
||||||
border-color: rgba(255, 184, 0, 0.3) !important;
|
border-color: rgba(255, 184, 0, 0.3) !important;
|
||||||
color: #FFB800 !important;
|
color: var(--yellow) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-message--info {
|
.el-message--info {
|
||||||
background: rgba(255, 107, 157, 0.1) !important;
|
background: rgba(255, 107, 157, 0.1) !important;
|
||||||
border-color: rgba(255, 107, 157, 0.3) !important;
|
border-color: rgba(255, 107, 157, 0.3) !important;
|
||||||
color: #FF6B9D !important;
|
color: var(--primary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* MessageBox 弹窗 */
|
|
||||||
.el-message-box {
|
.el-message-box {
|
||||||
border: 1px solid #FFE4EC !important;
|
border: 1px solid var(--border) !important;
|
||||||
box-shadow: 0 4px 16px rgba(255, 107, 157, 0.15) !important;
|
box-shadow: var(--shadow-md) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-message-box__header {
|
.el-message-box__header {
|
||||||
border-bottom: 1px solid #FFE4EC !important;
|
border-bottom: 1px solid var(--border) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-message-box__title {
|
.el-message-box__title {
|
||||||
color: #FF6B9D !important;
|
color: var(--primary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-message-box__content {
|
.el-message-box__content {
|
||||||
color: #333333 !important;
|
color: var(--text-primary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-message-box__btns {
|
.el-message-box__btns {
|
||||||
border-top: 1px solid #FFE4EC !important;
|
border-top: 1px solid var(--border) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-alert--success {
|
||||||
|
background-color: rgba(0, 255, 136, 0.1) !important;
|
||||||
|
border-color: var(--green) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-alert--info {
|
||||||
|
background-color: rgba(255, 107, 157, 0.1) !important;
|
||||||
|
border-color: var(--primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-alert--warning {
|
||||||
|
background-color: rgba(255, 184, 0, 0.1) !important;
|
||||||
|
border-color: var(--yellow) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-alert--error {
|
||||||
|
background-color: rgba(255, 51, 102, 0.1) !important;
|
||||||
|
border-color: var(--danger) !important;
|
||||||
}
|
}
|
||||||
|
|||||||
190
frontend/src/styles/utilities.css
Normal file
190
frontend/src/styles/utilities.css
Normal file
@@ -0,0 +1,190 @@
|
|||||||
|
.card-base {
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
background: var(--bg-card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
transition: var(--transition-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-base:hover {
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
border-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
padding: 16px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--primary);
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-base {
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
font-weight: 600;
|
||||||
|
transition: var(--transition-base);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: var(--gradient-primary);
|
||||||
|
border-color: var(--primary);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
box-shadow: 0 4px 12px rgba(255, 107, 157, 0.3);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-success {
|
||||||
|
background: var(--gradient-cyan);
|
||||||
|
border-color: var(--cyan);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-success:hover {
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-warning {
|
||||||
|
background: var(--gradient-yellow);
|
||||||
|
border-color: var(--yellow);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-warning:hover {
|
||||||
|
box-shadow: 0 4px 12px rgba(255, 184, 0, 0.3);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
background: var(--gradient-danger);
|
||||||
|
border-color: var(--danger);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger:hover {
|
||||||
|
box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-right: 0;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-container {
|
||||||
|
padding: 20px;
|
||||||
|
background: var(--bg-page);
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container {
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.stat-grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-center {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-between {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-primary {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-cyan {
|
||||||
|
color: var(--cyan);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-success {
|
||||||
|
color: var(--green);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-warning {
|
||||||
|
color: var(--yellow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-danger {
|
||||||
|
color: var(--danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-muted {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-gradient-primary {
|
||||||
|
background: var(--gradient-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-gradient-cyan {
|
||||||
|
background: var(--gradient-cyan);
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-pink {
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rounded-xl {
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rounded-lg {
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow-sm {
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow-md {
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
43
frontend/src/styles/variables.css
Normal file
43
frontend/src/styles/variables.css
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
:root {
|
||||||
|
--primary: #FF6B9D;
|
||||||
|
--primary-light: #FF8FB3;
|
||||||
|
--primary-dark: #FF5A8F;
|
||||||
|
|
||||||
|
--cyan: #00D4FF;
|
||||||
|
--cyan-light: #00E5FF;
|
||||||
|
--cyan-dark: #00B8E0;
|
||||||
|
|
||||||
|
--green: #34D399;
|
||||||
|
--yellow: #FFB800;
|
||||||
|
--danger: #FF6B6B;
|
||||||
|
--purple: #A855F7;
|
||||||
|
|
||||||
|
--bg-page: #FAFAFA;
|
||||||
|
--bg-card: #FFFFFF;
|
||||||
|
--bg-light: #FFF9FB;
|
||||||
|
|
||||||
|
--text-primary: #333333;
|
||||||
|
--text-secondary: #999999;
|
||||||
|
--text-muted: #666666;
|
||||||
|
|
||||||
|
--border: #FFE4EC;
|
||||||
|
--border-light: #FFD6E3;
|
||||||
|
|
||||||
|
--gradient-primary: linear-gradient(135deg, #FF6B9D 0%, #FF8FB3 100%);
|
||||||
|
--gradient-cyan: linear-gradient(135deg, #00D4FF 0%, #00E5FF 100%);
|
||||||
|
--gradient-yellow: linear-gradient(135deg, #FFB800 0%, #FFD000 100%);
|
||||||
|
--gradient-danger: linear-gradient(135deg, #FF6B6B 0%, #FF8B8B 100%);
|
||||||
|
|
||||||
|
--radius-sm: 6px;
|
||||||
|
--radius-md: 8px;
|
||||||
|
--radius-lg: 12px;
|
||||||
|
--radius-xl: 16px;
|
||||||
|
--radius-2xl: 20px;
|
||||||
|
|
||||||
|
--shadow-sm: 0 2px 8px rgba(255, 107, 157, 0.08);
|
||||||
|
--shadow-md: 0 4px 12px rgba(255, 107, 157, 0.15);
|
||||||
|
--shadow-lg: 0 8px 20px rgba(255, 107, 157, 0.2);
|
||||||
|
|
||||||
|
--transition-base: all 0.3s ease;
|
||||||
|
--transition-hover: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="crawler-tasks">
|
<div class="page-container">
|
||||||
<PageHeader title="任务管理" icon="🎀" />
|
<PageHeader title="任务管理" icon="🎀" />
|
||||||
|
|
||||||
<el-card class="control-card" shadow="hover">
|
<el-card class="control-card" shadow="hover">
|
||||||
@@ -32,7 +32,6 @@
|
|||||||
@click="handleStart"
|
@click="handleStart"
|
||||||
:loading="crawler.running"
|
:loading="crawler.running"
|
||||||
:disabled="crawler.running"
|
:disabled="crawler.running"
|
||||||
class="start-btn"
|
|
||||||
>
|
>
|
||||||
<span class="btn-icon">🚀</span>
|
<span class="btn-icon">🚀</span>
|
||||||
开始任务
|
开始任务
|
||||||
@@ -42,7 +41,6 @@
|
|||||||
size="large"
|
size="large"
|
||||||
@click="handleStop"
|
@click="handleStop"
|
||||||
:disabled="!crawler.running"
|
:disabled="!crawler.running"
|
||||||
class="stop-btn"
|
|
||||||
>
|
>
|
||||||
<span class="btn-icon">⏹️</span>
|
<span class="btn-icon">⏹️</span>
|
||||||
停止任务
|
停止任务
|
||||||
@@ -159,11 +157,6 @@ const crawlProgress = computed(() => {
|
|||||||
return Math.round((crawler.progress.current / crawler.progress.total) * 100)
|
return Math.round((crawler.progress.current / crawler.progress.total) * 100)
|
||||||
})
|
})
|
||||||
|
|
||||||
const verifyProgress = computed(() => {
|
|
||||||
if (crawler.progress.total === 0) return 0
|
|
||||||
return Math.round((crawler.progress.current / crawler.progress.total) * 100)
|
|
||||||
})
|
|
||||||
|
|
||||||
function formatTime(timeStr) {
|
function formatTime(timeStr) {
|
||||||
if (!timeStr) return '-'
|
if (!timeStr) return '-'
|
||||||
const date = new Date(timeStr)
|
const date = new Date(timeStr)
|
||||||
@@ -212,17 +205,9 @@ onUnmounted(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.crawler-tasks {
|
|
||||||
padding: 20px;
|
|
||||||
background: var(--theme-bg);
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control-card {
|
.control-card {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
border-radius: 16px;
|
border-radius: var(--radius-xl);
|
||||||
background: var(--theme-bg-card);
|
|
||||||
border: 1px solid var(--theme-border);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-header {
|
.card-header {
|
||||||
@@ -234,7 +219,7 @@ onUnmounted(() => {
|
|||||||
.card-title {
|
.card-title {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--theme-primary);
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.control-content {
|
.control-content {
|
||||||
@@ -249,7 +234,7 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
.control-label {
|
.control-label {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
}
|
}
|
||||||
@@ -264,23 +249,6 @@ onUnmounted(() => {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.start-btn, .stop-btn {
|
|
||||||
padding: 15px 40px;
|
|
||||||
font-size: 16px;
|
|
||||||
border-radius: 12px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-btn:hover:not(:disabled) {
|
|
||||||
transform: translateY(-3px);
|
|
||||||
box-shadow: 0 8px 20px rgba(255, 107, 157, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stop-btn:hover:not(:disabled) {
|
|
||||||
transform: translateY(-3px);
|
|
||||||
box-shadow: 0 8px 20px rgba(220, 53, 69, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-icon {
|
.btn-icon {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
@@ -288,9 +256,7 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
.progress-card {
|
.progress-card {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
border-radius: 16px;
|
border-radius: var(--radius-xl);
|
||||||
background: var(--theme-bg-card);
|
|
||||||
border: 1px solid var(--theme-border);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-content {
|
.progress-content {
|
||||||
@@ -303,7 +269,7 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
.progress-label {
|
.progress-label {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
@@ -314,7 +280,7 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
.progress-text {
|
.progress-text {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: var(--theme-primary);
|
color: var(--primary);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -335,12 +301,12 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
.status-label {
|
.status-label {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #999;
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-value {
|
.status-value {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #FF6B9D;
|
color: var(--primary);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -361,17 +327,17 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
.stat-item.success {
|
.stat-item.success {
|
||||||
background: rgba(52, 211, 153, 0.1);
|
background: rgba(52, 211, 153, 0.1);
|
||||||
border: 2px solid #34D399;
|
border: 2px solid var(--green);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-item.failed {
|
.stat-item.verified {
|
||||||
background: rgba(239, 68, 68, 0.1);
|
background: rgba(255, 107, 157, 0.1);
|
||||||
border: 2px solid #EF4444;
|
border: 2px solid var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-label {
|
.stat-label {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -381,17 +347,15 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.stat-item.success .stat-value {
|
.stat-item.success .stat-value {
|
||||||
color: #34D399;
|
color: var(--green);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-item.failed .stat-value {
|
.stat-item.verified .stat-value {
|
||||||
color: #EF4444;
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.scheduled-card {
|
.scheduled-card {
|
||||||
border-radius: 16px;
|
border-radius: var(--radius-xl);
|
||||||
background: var(--theme-bg-card);
|
|
||||||
border: 1px solid var(--theme-border);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.scheduled-content {
|
.scheduled-content {
|
||||||
@@ -406,7 +370,7 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
.scheduled-label {
|
.scheduled-label {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #666;
|
color: var(--text-muted);
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
min-width: 150px;
|
min-width: 150px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="dashboard">
|
<div class="page-container">
|
||||||
<PageHeader title="代理池管理系统" icon="🔮" />
|
<PageHeader title="代理池管理系统" icon="🔮" />
|
||||||
|
|
||||||
<el-row :gutter="20" class="stats-row">
|
<el-row :gutter="20" class="stats-row">
|
||||||
@@ -63,7 +63,6 @@ const crawler = useCrawlerStore()
|
|||||||
|
|
||||||
const stats = computed(() => proxyStore.stats)
|
const stats = computed(() => proxyStore.stats)
|
||||||
|
|
||||||
// 监听爬虫状态，任务结束时自动刷新数据
|
|
||||||
watch(() => crawler.running, async (newVal, oldVal) => {
|
watch(() => crawler.running, async (newVal, oldVal) => {
|
||||||
if (oldVal === true && newVal === false) {
|
if (oldVal === true && newVal === false) {
|
||||||
await proxyStore.fetchStats()
|
await proxyStore.fetchStats()
|
||||||
@@ -141,12 +140,6 @@ onUnmounted(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.dashboard {
|
|
||||||
padding: 20px;
|
|
||||||
background: var(--theme-bg);
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats-row {
|
.stats-row {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
@@ -156,10 +149,8 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.status-card {
|
.status-card {
|
||||||
border-radius: 20px;
|
border-radius: var(--radius-xl);
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
background: rgba(255, 255, 255, 0.95);
|
|
||||||
border: 1px solid rgba(255, 107, 157, 0.2);
|
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -178,7 +169,7 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
.progress-text {
|
.progress-text {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #FF6B9D;
|
color: var(--primary);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-shadow: 0 0 10px rgba(255, 107, 157, 0.3);
|
text-shadow: 0 0 10px rgba(255, 107, 157, 0.3);
|
||||||
}
|
}
|
||||||
@@ -186,24 +177,13 @@ onUnmounted(() => {
|
|||||||
.status-message {
|
.status-message {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #9CA3AF;
|
color: var(--text-secondary);
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
background: rgba(26, 31, 58, 0.5);
|
background: rgba(255, 255, 255, 0.5);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
border: 1px solid rgba(0, 212, 255, 0.1);
|
border: 1px solid rgba(0, 212, 255, 0.1);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
animation: fadeIn 0.5s ease;
|
animation: fadeIn 0.5s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(10px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="plugins">
|
<div class="page-container">
|
||||||
<PageHeader title="插件管理" icon="🔌" />
|
<PageHeader title="插件管理" icon="🔌" />
|
||||||
|
|
||||||
<el-card class="plugins-card" shadow="hover" v-loading="pluginsStore.loading">
|
<el-card class="plugins-card" shadow="hover" v-loading="pluginsStore.loading">
|
||||||
@@ -126,16 +126,8 @@ onMounted(async () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.plugins {
|
|
||||||
padding: 20px;
|
|
||||||
background: var(--theme-bg);
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.plugins-card {
|
.plugins-card {
|
||||||
border-radius: 16px;
|
border-radius: var(--radius-xl);
|
||||||
background: var(--theme-bg-card);
|
|
||||||
border: 1px solid var(--theme-border);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-header {
|
.card-header {
|
||||||
@@ -147,7 +139,7 @@ onMounted(async () => {
|
|||||||
.card-title {
|
.card-title {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--theme-primary);
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.plugin-name {
|
.plugin-name {
|
||||||
@@ -161,7 +153,7 @@ onMounted(async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.plugin-description {
|
.plugin-description {
|
||||||
color: var(--theme-text-secondary);
|
color: var(--text-secondary);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -178,7 +170,7 @@ onMounted(async () => {
|
|||||||
|
|
||||||
.stat-label {
|
.stat-label {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: var(--theme-text-secondary);
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-value {
|
.stat-value {
|
||||||
@@ -187,23 +179,20 @@ onMounted(async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.stat-value.success {
|
.stat-value.success {
|
||||||
color: #34D399;
|
color: var(--green);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-value.failed {
|
.stat-value.failed {
|
||||||
color: #F56C6C;
|
color: var(--danger);
|
||||||
}
|
}
|
||||||
|
|
||||||
.last-run {
|
.last-run {
|
||||||
color: var(--theme-text-secondary);
|
color: var(--text-secondary);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-icon {
|
.btn-icon {
|
||||||
|
font-size: 20px;
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-switch__label) {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="proxy-list">
|
<div class="page-container">
|
||||||
<PageHeader title="代理列表" icon="📋" />
|
<PageHeader title="代理列表" icon="📋" />
|
||||||
|
|
||||||
<el-card class="filter-card" shadow="hover">
|
<el-card class="filter-card" shadow="hover">
|
||||||
<el-form :inline="true" :model="filterForm" class="filter-form">
|
<el-form :inline="true" :model="filterForm" class="form-row">
|
||||||
<el-form-item label="协议类型">
|
<el-form-item label="协议类型">
|
||||||
<el-select v-model="filterForm.protocol" placeholder="全部" clearable style="width: 120px">
|
<el-select v-model="filterForm.protocol" placeholder="全部" clearable style="width: 120px">
|
||||||
<el-option label="全部" value=""></el-option>
|
<el-option label="全部" value=""></el-option>
|
||||||
@@ -23,11 +23,11 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" @click="handleSearch" class="search-btn">
|
<el-button type="primary" @click="handleSearch">
|
||||||
<span class="btn-icon">🔍</span>
|
<span class="btn-icon">🔍</span>
|
||||||
搜索
|
搜索
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button @click="handleReset" class="reset-btn">
|
<el-button @click="handleReset">
|
||||||
<span class="btn-icon">🔄</span>
|
<span class="btn-icon">🔄</span>
|
||||||
重置
|
重置
|
||||||
</el-button>
|
</el-button>
|
||||||
@@ -63,7 +63,6 @@
|
|||||||
v-loading="proxyStore.loading"
|
v-loading="proxyStore.loading"
|
||||||
@selection-change="handleSelectionChange"
|
@selection-change="handleSelectionChange"
|
||||||
:row-style="{ cursor: 'pointer' }"
|
:row-style="{ cursor: 'pointer' }"
|
||||||
class="proxy-table"
|
|
||||||
>
|
>
|
||||||
<el-table-column type="selection" width="55" />
|
<el-table-column type="selection" width="55" />
|
||||||
<el-table-column prop="ip" label="IP地址" width="150" />
|
<el-table-column prop="ip" label="IP地址" width="150" />
|
||||||
@@ -82,7 +81,6 @@
|
|||||||
disabled
|
disabled
|
||||||
show-score
|
show-score
|
||||||
:score-template="scope.row.score ? '{value}' : '0'"
|
:score-template="scope.row.score ? '{value}' : '0'"
|
||||||
text-color="var(--theme-primary)"
|
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
@@ -93,7 +91,6 @@
|
|||||||
type="primary"
|
type="primary"
|
||||||
size="small"
|
size="small"
|
||||||
@click.stop="handleCopy(scope.row)"
|
@click.stop="handleCopy(scope.row)"
|
||||||
class="action-btn"
|
|
||||||
>
|
>
|
||||||
复制
|
复制
|
||||||
</el-button>
|
</el-button>
|
||||||
@@ -101,7 +98,6 @@
|
|||||||
type="danger"
|
type="danger"
|
||||||
size="small"
|
size="small"
|
||||||
@click.stop="handleDelete(scope.row)"
|
@click.stop="handleDelete(scope.row)"
|
||||||
class="action-btn"
|
|
||||||
>
|
>
|
||||||
删除
|
删除
|
||||||
</el-button>
|
</el-button>
|
||||||
@@ -118,7 +114,6 @@
|
|||||||
layout="total, sizes, prev, pager, next, jumper"
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
@size-change="handleSizeChange"
|
@size-change="handleSizeChange"
|
||||||
@current-change="handleCurrentChange"
|
@current-change="handleCurrentChange"
|
||||||
class="pagination"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
@@ -251,41 +246,12 @@ onMounted(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.proxy-list {
|
|
||||||
padding: 20px;
|
|
||||||
background: var(--theme-bg);
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-card {
|
.filter-card {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
border-radius: 16px;
|
|
||||||
background: var(--theme-bg-card);
|
|
||||||
border: 1px solid var(--theme-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-form {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-btn, .reset-btn {
|
|
||||||
border-radius: 8px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-btn:hover, .reset-btn:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 12px rgba(255, 107, 157, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-icon {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-card {
|
.table-card {
|
||||||
border-radius: 16px;
|
border-radius: var(--radius-xl);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-header {
|
.card-header {
|
||||||
@@ -297,7 +263,7 @@ onMounted(() => {
|
|||||||
.card-title {
|
.card-title {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #FF6B9D;
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-actions {
|
.header-actions {
|
||||||
@@ -305,18 +271,9 @@ onMounted(() => {
|
|||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.proxy-table {
|
.btn-icon {
|
||||||
border-radius: 12px;
|
font-size: 20px;
|
||||||
overflow: hidden;
|
margin-right: 0;
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn {
|
|
||||||
border-radius: 6px;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-wrapper {
|
.pagination-wrapper {
|
||||||
@@ -325,8 +282,4 @@ onMounted(() => {
|
|||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination {
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,64 +1,148 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="settings">
|
<div class="page-container">
|
||||||
<PageHeader title="设置" icon="⚙️" />
|
<PageHeader title="系统设置" icon="⚙️" />
|
||||||
|
|
||||||
<el-card class="settings-card" shadow="hover">
|
<el-card class="settings-card" shadow="hover" v-loading="loading">
|
||||||
<template #header>
|
<template #header>
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<span class="card-title">📝 关于</span>
|
<span class="card-title">🎨 基础配置</span>
|
||||||
|
<el-button type="primary" @click="handleSave" size="large" :loading="saving">
|
||||||
|
<span class="btn-icon">💾</span>
|
||||||
|
保存配置
|
||||||
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<div class="about-content">
|
<el-form :model="settings" label-width="150px" class="settings-form">
|
||||||
<div class="about-item">
|
<el-form-item label="数据库路径">
|
||||||
<span class="about-label">项目名称</span>
|
<el-input v-model="settings.db_path" placeholder="数据库文件路径" />
|
||||||
<span class="about-value">代理池管理系统</span>
|
</el-form-item>
|
||||||
</div>
|
|
||||||
<div class="about-item">
|
<el-form-item label="爬取超时">
|
||||||
<span class="about-label">版本号</span>
|
<el-input-number
|
||||||
<span class="about-value">v1.0.0</span>
|
v-model="settings.crawl_timeout"
|
||||||
</div>
|
:min="5"
|
||||||
<div class="about-item">
|
:max="120"
|
||||||
<span class="about-label">后端API</span>
|
:step="5"
|
||||||
<span class="about-value">http://localhost:3000</span>
|
class="setting-input"
|
||||||
</div>
|
/>
|
||||||
<div class="about-item">
|
<span class="setting-suffix">秒</span>
|
||||||
<span class="about-label">前端服务</span>
|
</el-form-item>
|
||||||
<span class="about-value">http://localhost:8080</span>
|
|
||||||
</div>
|
<el-form-item label="验证超时">
|
||||||
<div class="about-item">
|
<el-input-number
|
||||||
<span class="about-label">数据库</span>
|
v-model="settings.validation_timeout"
|
||||||
<span class="about-value">SQLite</span>
|
:min="3"
|
||||||
</div>
|
:max="60"
|
||||||
</div>
|
:step="1"
|
||||||
|
class="setting-input"
|
||||||
|
/>
|
||||||
|
<span class="setting-suffix">秒</span>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="最大重试次数">
|
||||||
|
<el-input-number
|
||||||
|
v-model="settings.max_retries"
|
||||||
|
:min="0"
|
||||||
|
:max="10"
|
||||||
|
class="setting-input"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="默认并发数">
|
||||||
|
<el-input-number
|
||||||
|
v-model="settings.default_concurrency"
|
||||||
|
:min="10"
|
||||||
|
:max="200"
|
||||||
|
:step="10"
|
||||||
|
class="setting-input"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="最低代理分数">
|
||||||
|
<el-input-number
|
||||||
|
v-model="settings.min_proxy_score"
|
||||||
|
:min="0"
|
||||||
|
:max="10"
|
||||||
|
:step="1"
|
||||||
|
class="setting-input"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="代理过期时间">
|
||||||
|
<el-input-number
|
||||||
|
v-model="settings.proxy_expiry_days"
|
||||||
|
:min="1"
|
||||||
|
:max="30"
|
||||||
|
:step="1"
|
||||||
|
class="setting-input"
|
||||||
|
/>
|
||||||
|
<span class="setting-suffix">天</span>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
</el-card>
|
</el-card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted } from 'vue'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
import PageHeader from '../components/PageHeader.vue'
|
import PageHeader from '../components/PageHeader.vue'
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
const saving = ref(false)
|
||||||
|
const settings = reactive({
|
||||||
|
db_path: '',
|
||||||
|
crawl_timeout: 30,
|
||||||
|
validation_timeout: 10,
|
||||||
|
max_retries: 3,
|
||||||
|
default_concurrency: 50,
|
||||||
|
min_proxy_score: 5,
|
||||||
|
proxy_expiry_days: 7
|
||||||
|
})
|
||||||
|
|
||||||
|
async function fetchSettings() {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const response = await fetch('http://localhost:8923/api/settings')
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json()
|
||||||
|
Object.assign(settings, data)
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSave() {
|
||||||
|
saving.value = true
|
||||||
|
try {
|
||||||
|
const response = await fetch('http://localhost:8923/api/settings', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(settings)
|
||||||
|
})
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
ElMessage.success('配置保存成功啦~')
|
||||||
|
} else {
|
||||||
|
ElMessage.error('配置保存失败呢~')
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
saving.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchSettings()
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.settings {
|
|
||||||
padding: 20px;
|
|
||||||
background: var(--theme-bg);
|
|
||||||
min-height: 100vh;
|
|
||||||
color: var(--theme-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-card {
|
.settings-card {
|
||||||
margin-bottom: 20px;
|
border-radius: var(--radius-xl);
|
||||||
border-radius: 12px;
|
|
||||||
background: var(--theme-bg-card);
|
|
||||||
border: 1px solid var(--theme-border);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-card:hover {
|
|
||||||
box-shadow: 0 4px 16px rgba(255, 107, 157, 0.15);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
border-color: var(--theme-primary);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-header {
|
.card-header {
|
||||||
@@ -69,132 +153,26 @@ import PageHeader from '../components/PageHeader.vue'
|
|||||||
|
|
||||||
.card-title {
|
.card-title {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
color: var(--theme-primary);
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-content {
|
.settings-form {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
max-width: 800px;
|
||||||
|
|
||||||
.setting-item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 20px 0;
|
|
||||||
border-bottom: 1px solid var(--theme-border);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-item:hover {
|
|
||||||
background-color: var(--theme-bg-light);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 20px 10px;
|
|
||||||
margin: 0 -10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-item:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-info {
|
|
||||||
flex: 1;
|
|
||||||
padding-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-label {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--theme-text);
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-desc {
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--theme-text-secondary);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.setting-input {
|
.setting-input {
|
||||||
width: 150px;
|
width: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.setting-actions {
|
.setting-suffix {
|
||||||
display: flex;
|
margin-left: 10px;
|
||||||
gap: 20px;
|
color: var(--text-secondary);
|
||||||
justify-content: center;
|
|
||||||
padding-top: 20px;
|
|
||||||
border-top: 1px solid var(--theme-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.save-btn {
|
|
||||||
padding: 12px 30px;
|
|
||||||
font-size: 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background-color: var(--theme-primary);
|
|
||||||
border: none;
|
|
||||||
color: var(--theme-bg);
|
|
||||||
font-weight: 700;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.save-btn:hover {
|
|
||||||
transform: translateY(-3px);
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reset-btn {
|
|
||||||
padding: 12px 30px;
|
|
||||||
font-size: 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background-color: var(--theme-bg-light);
|
|
||||||
border: 1px solid var(--theme-border);
|
|
||||||
color: var(--theme-text);
|
|
||||||
font-weight: 700;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reset-btn:hover {
|
|
||||||
transform: translateY(-3px);
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-icon {
|
.btn-icon {
|
||||||
font-size: 18px;
|
font-size: 20px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-content {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 15px 0;
|
|
||||||
border-bottom: 1px solid var(--theme-border);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-item:hover {
|
|
||||||
background-color: var(--theme-bg-light);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 15px 10px;
|
|
||||||
margin: 0 -10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-item:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-label {
|
|
||||||
font-size: 16px;
|
|
||||||
color: var(--theme-text-secondary);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-value {
|
|
||||||
font-size: 16px;
|
|
||||||
color: var(--theme-primary);
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user