Merge branch 'GST002' of http://182.92.169.222:3000/dlsx/ContestPortal into GST002
Conflicts: .env.productionGST002
commit
b31cf9ff02
32 changed files with 2339 additions and 453 deletions
|
After Width: | Height: | Size: 198 KiB |
|
After Width: | Height: | Size: 327 KiB |
|
After Width: | Height: | Size: 386 KiB |
|
After Width: | Height: | Size: 330 KiB |
|
After Width: | Height: | Size: 143 KiB |
@ -0,0 +1,53 @@ |
||||
import { defineStore } from 'pinia' |
||||
import { themes, type Theme } from '@/styles/themes' |
||||
|
||||
export default defineStore('theme', { |
||||
state: () => { |
||||
return { |
||||
currentTheme: themes[0], |
||||
themes: themes, |
||||
isDark: false |
||||
} |
||||
}, |
||||
actions: { |
||||
setTheme(theme: Theme) { |
||||
this.currentTheme = theme |
||||
// 更新CSS变量
|
||||
document.documentElement.style.setProperty('--primary-color', theme.primaryColor) |
||||
document.documentElement.style.setProperty('--secondary-color', theme.secondaryColor) |
||||
document.documentElement.style.setProperty('--background-color', theme.backgroundColor) |
||||
document.documentElement.style.setProperty('--text-color', theme.textColor) |
||||
document.documentElement.style.setProperty('--gradient-color', theme.gradientColor) |
||||
document.documentElement.style.setProperty('--card-bg-color', theme.cardBgColor) |
||||
document.documentElement.style.setProperty('--border-color', theme.borderColor) |
||||
document.documentElement.style.setProperty('--menu-text-color', theme.menuTextColor) |
||||
document.documentElement.style.setProperty('--menu-active-color', theme.menuActiveColor) |
||||
|
||||
// 更新body背景色
|
||||
document.body.style.backgroundColor = theme.backgroundColor |
||||
document.body.style.color = theme.textColor |
||||
|
||||
// 切换暗黑模式
|
||||
this.isDark = theme.name === '暗夜主题' || theme.name === '暗夜绿主题' |
||||
if (this.isDark) { |
||||
document.documentElement.classList.add('dark') |
||||
} else { |
||||
document.documentElement.classList.remove('dark') |
||||
} |
||||
|
||||
// 保存主题到本地存储
|
||||
localStorage.setItem('theme', theme.name) |
||||
}, |
||||
|
||||
// 初始化主题
|
||||
initTheme() { |
||||
const savedTheme = localStorage.getItem('theme') |
||||
if (savedTheme) { |
||||
const theme = this.themes.find(t => t.name === savedTheme) |
||||
if (theme) { |
||||
this.setTheme(theme) |
||||
} |
||||
} |
||||
} |
||||
} |
||||
})
|
||||
@ -0,0 +1,147 @@ |
||||
// Element Plus 暗黑主题变量覆盖 |
||||
html.dark { |
||||
// 常用颜色 |
||||
--el-color-primary: var(--primary-color); |
||||
--el-color-primary-light-3: var(--primary-color); |
||||
--el-color-primary-light-5: var(--primary-color); |
||||
--el-color-primary-light-7: var(--primary-color); |
||||
--el-color-primary-light-8: var(--primary-color); |
||||
--el-color-primary-light-9: var(--primary-color); |
||||
--el-color-primary-dark-2: var(--primary-color); |
||||
|
||||
// 文字颜色 |
||||
--el-text-color-primary: var(--text-color); |
||||
--el-text-color-regular: var(--text-color); |
||||
--el-text-color-secondary: rgba(255, 255, 255, 0.7); |
||||
--el-text-color-placeholder: rgba(255, 255, 255, 0.3); |
||||
--el-text-color-disabled: rgba(255, 255, 255, 0.3); |
||||
|
||||
// 边框颜色 |
||||
--el-border-color: var(--border-color); |
||||
--el-border-color-light: var(--border-color); |
||||
--el-border-color-lighter: var(--border-color); |
||||
--el-border-color-extra-light: var(--border-color); |
||||
|
||||
// 填充颜色 |
||||
--el-fill-color: var(--card-bg-color); |
||||
--el-fill-color-light: var(--card-bg-color); |
||||
--el-fill-color-lighter: var(--card-bg-color); |
||||
--el-fill-color-extra-light: var(--card-bg-color); |
||||
--el-fill-color-dark: var(--card-bg-color); |
||||
--el-fill-color-darker: var(--card-bg-color); |
||||
|
||||
// 背景颜色 |
||||
--el-bg-color: var(--background-color); |
||||
--el-bg-color-overlay: var(--card-bg-color); |
||||
|
||||
// 遮罩颜色 |
||||
--el-mask-color: rgba(0, 0, 0, 0.8); |
||||
|
||||
// 组件深色背景 |
||||
--el-bg-color-page: var(--background-color); |
||||
|
||||
// 弹窗背景 |
||||
--el-popup-bg-color: var(--card-bg-color); |
||||
|
||||
// 禁用状态 |
||||
--el-disabled-bg-color: var(--card-bg-color); |
||||
--el-disabled-text-color: rgba(255, 255, 255, 0.3); |
||||
--el-disabled-border-color: var(--border-color); |
||||
} |
||||
|
||||
// 全局组件暗黑适配 |
||||
html.dark { |
||||
// 表格 |
||||
.el-table { |
||||
--el-table-bg-color: var(--card-bg-color); |
||||
--el-table-tr-bg-color: var(--card-bg-color); |
||||
--el-table-header-bg-color: var(--background-color); |
||||
--el-table-border-color: var(--border-color); |
||||
|
||||
th.el-table__cell { |
||||
background-color: var(--background-color); |
||||
} |
||||
} |
||||
|
||||
// 分页 |
||||
.el-pagination { |
||||
--el-pagination-button-bg-color: var(--card-bg-color); |
||||
--el-pagination-hover-color: var(--primary-color); |
||||
} |
||||
|
||||
// 表单 |
||||
.el-form { |
||||
.el-form-item__label { |
||||
color: var(--text-color); |
||||
} |
||||
} |
||||
|
||||
// 输入框 |
||||
.el-input { |
||||
--el-input-bg-color: var(--card-bg-color); |
||||
--el-input-border-color: var(--border-color); |
||||
--el-input-hover-border-color: var(--primary-color); |
||||
--el-input-focus-border-color: var(--primary-color); |
||||
} |
||||
|
||||
// 选择器 |
||||
.el-select { |
||||
.el-input { |
||||
--el-select-input-focus-border-color: var(--primary-color); |
||||
} |
||||
} |
||||
|
||||
// 下拉菜单 |
||||
.el-dropdown-menu { |
||||
--el-dropdown-menuItem-hover-fill: var(--card-bg-color); |
||||
--el-dropdown-menuItem-hover-color: var(--primary-color); |
||||
} |
||||
|
||||
// 对话框 |
||||
.el-dialog { |
||||
--el-dialog-bg-color: var(--card-bg-color); |
||||
--el-dialog-border-color: var(--border-color); |
||||
|
||||
.el-dialog__header { |
||||
border-bottom: 1px solid var(--border-color); |
||||
} |
||||
} |
||||
|
||||
// 卡片 |
||||
.el-card { |
||||
--el-card-bg-color: var(--card-bg-color); |
||||
border-color: var(--border-color); |
||||
|
||||
.el-card__header { |
||||
border-bottom: 1px solid var(--border-color); |
||||
} |
||||
} |
||||
|
||||
// 标签 |
||||
.el-tag { |
||||
--el-tag-bg-color: transparent; |
||||
--el-tag-border-color: var(--border-color); |
||||
|
||||
&.el-tag--primary { |
||||
--el-tag-bg-color: transparent; |
||||
--el-tag-border-color: var(--primary-color); |
||||
} |
||||
} |
||||
|
||||
// 按钮 |
||||
.el-button { |
||||
&.el-button--primary { |
||||
--el-button-bg-color: var(--primary-color) !important; |
||||
--el-button-border-color: var(--primary-color) !important; |
||||
} |
||||
|
||||
&.el-button--default { |
||||
--el-button-bg-color: var(--card-bg-color) !important; |
||||
--el-button-border-color: var(--border-color) !important; |
||||
--el-button-hover-bg-color: var(--primary-color) !important; |
||||
--el-button-hover-border-color: var(--primary-color) !important; |
||||
--el-button-active-bg-color: var(--primary-color) !important; |
||||
--el-button-active-border-color: var(--primary-color) !important; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,147 @@ |
||||
// Element Plus 白蓝主题变量覆盖 |
||||
html.light-blue { |
||||
// 常用颜色 |
||||
--el-color-primary: #1890ff; |
||||
--el-color-primary-light-3: #40a9ff; |
||||
--el-color-primary-light-5: #69c0ff; |
||||
--el-color-primary-light-7: #91d5ff; |
||||
--el-color-primary-light-8: #bae7ff; |
||||
--el-color-primary-light-9: #e6f7ff; |
||||
--el-color-primary-dark-2: #096dd9; |
||||
|
||||
// 文字颜色 |
||||
--el-text-color-primary: #ffffff; |
||||
--el-text-color-regular: #ffffff; |
||||
--el-text-color-secondary: rgba(255, 255, 255, 0.7); |
||||
--el-text-color-placeholder: rgba(255, 255, 255, 0.3); |
||||
--el-text-color-disabled: rgba(255, 255, 255, 0.3); |
||||
|
||||
// 边框颜色 |
||||
--el-border-color: rgba(255, 255, 255, 0.1); |
||||
--el-border-color-light: rgba(255, 255, 255, 0.1); |
||||
--el-border-color-lighter: rgba(255, 255, 255, 0.1); |
||||
--el-border-color-extra-light: rgba(255, 255, 255, 0.1); |
||||
|
||||
// 填充颜色 |
||||
--el-fill-color: #1d1e1f; |
||||
--el-fill-color-light: #1d1e1f; |
||||
--el-fill-color-lighter: #1d1e1f; |
||||
--el-fill-color-extra-light: #1d1e1f; |
||||
--el-fill-color-dark: #1d1e1f; |
||||
--el-fill-color-darker: #1d1e1f; |
||||
|
||||
// 背景颜色 |
||||
--el-bg-color: #141414; |
||||
--el-bg-color-overlay: #1d1e1f; |
||||
|
||||
// 遮罩颜色 |
||||
--el-mask-color: rgba(0, 0, 0, 0.8); |
||||
|
||||
// 组件深色背景 |
||||
--el-bg-color-page: #141414; |
||||
|
||||
// 弹窗背景 |
||||
--el-popup-bg-color: #1d1e1f; |
||||
|
||||
// 禁用状态 |
||||
--el-disabled-bg-color: #1d1e1f; |
||||
--el-disabled-text-color: rgba(255, 255, 255, 0.3); |
||||
--el-disabled-border-color: rgba(255, 255, 255, 0.1); |
||||
} |
||||
|
||||
// 全局组件白蓝主题适配 |
||||
html.light-blue { |
||||
// 表格 |
||||
.el-table { |
||||
--el-table-bg-color: #1d1e1f; |
||||
--el-table-tr-bg-color: #1d1e1f; |
||||
--el-table-header-bg-color: #141414; |
||||
--el-table-border-color: rgba(255, 255, 255, 0.1); |
||||
|
||||
th.el-table__cell { |
||||
background-color: #141414; |
||||
} |
||||
} |
||||
|
||||
// 分页 |
||||
.el-pagination { |
||||
--el-pagination-button-bg-color: #1d1e1f; |
||||
--el-pagination-hover-color: #1890ff; |
||||
} |
||||
|
||||
// 表单 |
||||
.el-form { |
||||
.el-form-item__label { |
||||
color: #ffffff; |
||||
} |
||||
} |
||||
|
||||
// 输入框 |
||||
.el-input { |
||||
--el-input-bg-color: #1d1e1f; |
||||
--el-input-border-color: rgba(255, 255, 255, 0.1); |
||||
--el-input-hover-border-color: #1890ff; |
||||
--el-input-focus-border-color: #1890ff; |
||||
} |
||||
|
||||
// 选择器 |
||||
.el-select { |
||||
.el-input { |
||||
--el-select-input-focus-border-color: #1890ff; |
||||
} |
||||
} |
||||
|
||||
// 下拉菜单 |
||||
.el-dropdown-menu { |
||||
--el-dropdown-menuItem-hover-fill: #1d1e1f; |
||||
--el-dropdown-menuItem-hover-color: #1890ff; |
||||
} |
||||
|
||||
// 对话框 |
||||
.el-dialog { |
||||
--el-dialog-bg-color: #1d1e1f; |
||||
--el-dialog-border-color: rgba(255, 255, 255, 0.1); |
||||
|
||||
.el-dialog__header { |
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
||||
} |
||||
} |
||||
|
||||
// 卡片 |
||||
.el-card { |
||||
--el-card-bg-color: #1d1e1f; |
||||
border-color: rgba(255, 255, 255, 0.1); |
||||
|
||||
.el-card__header { |
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
||||
} |
||||
} |
||||
|
||||
// 标签 |
||||
.el-tag { |
||||
--el-tag-bg-color: #1d1e1f; |
||||
--el-tag-border-color: rgba(255, 255, 255, 0.1); |
||||
|
||||
&.el-tag--primary { |
||||
--el-tag-bg-color: #1890ff; |
||||
--el-tag-border-color: #1890ff; |
||||
} |
||||
} |
||||
|
||||
// 按钮 |
||||
.el-button { |
||||
&.el-button--primary { |
||||
--el-button-bg-color: #1890ff !important; |
||||
--el-button-border-color: #1890ff !important; |
||||
} |
||||
|
||||
&.el-button--default { |
||||
--el-button-bg-color: #1d1e1f !important; |
||||
--el-button-border-color: rgba(255, 255, 255, 0.1) !important; |
||||
--el-button-hover-bg-color: #1890ff !important; |
||||
--el-button-hover-border-color: #1890ff !important; |
||||
--el-button-active-bg-color: #1890ff !important; |
||||
--el-button-active-border-color: #1890ff !important; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,147 @@ |
||||
// Element Plus 白紫主题变量覆盖 |
||||
html.light-purple { |
||||
// 常用颜色 |
||||
--el-color-primary: #B46EFD; |
||||
--el-color-primary-light-3: #C08EFD; |
||||
--el-color-primary-light-5: #CCADFE; |
||||
--el-color-primary-light-7: #D8CBFE; |
||||
--el-color-primary-light-8: #E1DAFE; |
||||
--el-color-primary-light-9: #F5F0FF; |
||||
--el-color-primary-dark-2: #684FFF; |
||||
|
||||
// 文字颜色 |
||||
--el-text-color-primary: #ffffff; |
||||
--el-text-color-regular: #ffffff; |
||||
--el-text-color-secondary: rgba(255, 255, 255, 0.7); |
||||
--el-text-color-placeholder: rgba(255, 255, 255, 0.3); |
||||
--el-text-color-disabled: rgba(255, 255, 255, 0.3); |
||||
|
||||
// 边框颜色 |
||||
--el-border-color: rgba(255, 255, 255, 0.1); |
||||
--el-border-color-light: rgba(255, 255, 255, 0.1); |
||||
--el-border-color-lighter: rgba(255, 255, 255, 0.1); |
||||
--el-border-color-extra-light: rgba(255, 255, 255, 0.1); |
||||
|
||||
// 填充颜色 |
||||
--el-fill-color: #1d1e1f; |
||||
--el-fill-color-light: #1d1e1f; |
||||
--el-fill-color-lighter: #1d1e1f; |
||||
--el-fill-color-extra-light: #1d1e1f; |
||||
--el-fill-color-dark: #1d1e1f; |
||||
--el-fill-color-darker: #1d1e1f; |
||||
|
||||
// 背景颜色 |
||||
--el-bg-color: #141414; |
||||
--el-bg-color-overlay: #1d1e1f; |
||||
|
||||
// 遮罩颜色 |
||||
--el-mask-color: rgba(0, 0, 0, 0.8); |
||||
|
||||
// 组件深色背景 |
||||
--el-bg-color-page: #141414; |
||||
|
||||
// 弹窗背景 |
||||
--el-popup-bg-color: #1d1e1f; |
||||
|
||||
// 禁用状态 |
||||
--el-disabled-bg-color: #1d1e1f; |
||||
--el-disabled-text-color: rgba(255, 255, 255, 0.3); |
||||
--el-disabled-border-color: rgba(255, 255, 255, 0.1); |
||||
} |
||||
|
||||
// 全局组件白紫主题适配 |
||||
html.light-purple { |
||||
// 表格 |
||||
.el-table { |
||||
--el-table-bg-color: #1d1e1f; |
||||
--el-table-tr-bg-color: #1d1e1f; |
||||
--el-table-header-bg-color: #141414; |
||||
--el-table-border-color: rgba(255, 255, 255, 0.1); |
||||
|
||||
th.el-table__cell { |
||||
background-color: #141414; |
||||
} |
||||
} |
||||
|
||||
// 分页 |
||||
.el-pagination { |
||||
--el-pagination-button-bg-color: #1d1e1f; |
||||
--el-pagination-hover-color: #B46EFD; |
||||
} |
||||
|
||||
// 表单 |
||||
.el-form { |
||||
.el-form-item__label { |
||||
color: #ffffff; |
||||
} |
||||
} |
||||
|
||||
// 输入框 |
||||
.el-input { |
||||
--el-input-bg-color: #1d1e1f; |
||||
--el-input-border-color: rgba(255, 255, 255, 0.1); |
||||
--el-input-hover-border-color: #B46EFD; |
||||
--el-input-focus-border-color: #B46EFD; |
||||
} |
||||
|
||||
// 选择器 |
||||
.el-select { |
||||
.el-input { |
||||
--el-select-input-focus-border-color: #B46EFD; |
||||
} |
||||
} |
||||
|
||||
// 下拉菜单 |
||||
.el-dropdown-menu { |
||||
--el-dropdown-menuItem-hover-fill: #1d1e1f; |
||||
--el-dropdown-menuItem-hover-color: #B46EFD; |
||||
} |
||||
|
||||
// 对话框 |
||||
.el-dialog { |
||||
--el-dialog-bg-color: #1d1e1f; |
||||
--el-dialog-border-color: rgba(255, 255, 255, 0.1); |
||||
|
||||
.el-dialog__header { |
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
||||
} |
||||
} |
||||
|
||||
// 卡片 |
||||
.el-card { |
||||
--el-card-bg-color: #1d1e1f; |
||||
border-color: rgba(255, 255, 255, 0.1); |
||||
|
||||
.el-card__header { |
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
||||
} |
||||
} |
||||
|
||||
// 标签 |
||||
.el-tag { |
||||
--el-tag-bg-color: #1d1e1f; |
||||
--el-tag-border-color: rgba(255, 255, 255, 0.1); |
||||
|
||||
&.el-tag--primary { |
||||
--el-tag-bg-color: #B46EFD; |
||||
--el-tag-border-color: #B46EFD; |
||||
} |
||||
} |
||||
|
||||
// 按钮 |
||||
.el-button { |
||||
&.el-button--primary { |
||||
--el-button-bg-color: #B46EFD !important; |
||||
--el-button-border-color: #B46EFD !important; |
||||
} |
||||
|
||||
&.el-button--default { |
||||
--el-button-bg-color: #1d1e1f !important; |
||||
--el-button-border-color: rgba(255, 255, 255, 0.1) !important; |
||||
--el-button-hover-bg-color: #B46EFD !important; |
||||
--el-button-hover-border-color: #B46EFD !important; |
||||
--el-button-active-bg-color: #B46EFD !important; |
||||
--el-button-active-border-color: #B46EFD !important; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,75 @@ |
||||
export interface Theme { |
||||
name: string; |
||||
primaryColor: string; |
||||
secondaryColor: string; |
||||
backgroundColor: string; |
||||
textColor: string; |
||||
gradientColor: string; |
||||
cardBgColor: string; |
||||
borderColor: string; |
||||
menuTextColor: string; |
||||
menuActiveColor: string; |
||||
} |
||||
|
||||
export const themes: Theme[] = [ |
||||
{ |
||||
name: '默认主题', |
||||
primaryColor: '#0bd7c6', |
||||
secondaryColor: '#0033f7', |
||||
backgroundColor: '#ffffff', |
||||
textColor: '#333333', |
||||
gradientColor: 'linear-gradient(to right, #0bd7c6, #0033f7)', |
||||
cardBgColor: '#ffffff', |
||||
borderColor: '#e5e6eb', |
||||
menuTextColor: '#1d2129', |
||||
menuActiveColor: '#0033f7' |
||||
}, |
||||
{ |
||||
name: '白蓝主题', |
||||
primaryColor: '#1890ff', |
||||
secondaryColor: '#096dd9', |
||||
backgroundColor: '#ffffff', |
||||
textColor: '#1d2129', |
||||
gradientColor: 'linear-gradient(to right, #1890ff, #096dd9)', |
||||
cardBgColor: '#ffffff', |
||||
borderColor: '#e5e6eb', |
||||
menuTextColor: '#1d2129', |
||||
menuActiveColor: '#1890ff' |
||||
}, |
||||
{ |
||||
name: '白紫主题', |
||||
primaryColor: '#B46EFD', |
||||
secondaryColor: '#684FFF', |
||||
backgroundColor: '#ffffff', |
||||
textColor: '#1d2129', |
||||
gradientColor: 'linear-gradient(to right, #B46EFD, #684FFF)', |
||||
cardBgColor: '#ffffff', |
||||
borderColor: '#e5e6eb', |
||||
menuTextColor: '#1d2129', |
||||
menuActiveColor: '#B46EFD' |
||||
}, |
||||
{ |
||||
name: '暗夜主题', |
||||
primaryColor: '#1055fc', |
||||
secondaryColor: '#e03d12', |
||||
backgroundColor: '#141414', |
||||
textColor: '#ffffff', |
||||
gradientColor: 'linear-gradient(to right, #1055fc, #e03d12)', |
||||
cardBgColor: '#1f1f1f', |
||||
borderColor: '#434343', |
||||
menuTextColor: 'rgba(255, 255, 255, 0.85)', |
||||
menuActiveColor: '#1055fc' |
||||
}, |
||||
{ |
||||
name: '暗夜绿主题', |
||||
primaryColor: '#61F7EE', |
||||
secondaryColor: '#2370E6', |
||||
backgroundColor: '#141414', |
||||
textColor: '#ffffff', |
||||
gradientColor: 'linear-gradient(to right, #61F7EE, #2CE2AF, #2370E6)', |
||||
cardBgColor: '#1f1f1f', |
||||
borderColor: '#434343', |
||||
menuTextColor: 'rgba(255, 255, 255, 0.85)', |
||||
menuActiveColor: '#61F7EE' |
||||
} |
||||
];
|
||||
@ -0,0 +1,62 @@ |
||||
:root { |
||||
--primary-color: #0bd7c6; |
||||
--secondary-color: #0033f7; |
||||
--background-color: transparent; |
||||
--text-color: #333333; |
||||
--gradient-color: linear-gradient(to right, #0bd7c6, #0033f7); |
||||
--card-bg-color: #ffffff; |
||||
--border-color: #e5e6eb; |
||||
--menu-text-color: #1d2129; |
||||
--menu-active-color: #0033f7; |
||||
} |
||||
$el-button-bg-color: #0bd7c6; |
||||
|
||||
$base-container-width: 1420px; |
||||
|
||||
// 使用CSS变量 |
||||
.gradient { |
||||
background: var(--gradient-color); |
||||
} |
||||
|
||||
.text-primary { |
||||
color: var(--primary-color); |
||||
} |
||||
|
||||
.text-secondary { |
||||
color: var(--secondary-color); |
||||
} |
||||
|
||||
.bg-primary { |
||||
background-color: var(--primary-color); |
||||
} |
||||
|
||||
.bg-secondary { |
||||
background-color: var(--secondary-color); |
||||
} |
||||
|
||||
// 暗黑主题适配 |
||||
body { |
||||
background-color: var(--background-color); |
||||
color: var(--text-color); |
||||
transition: all 0.3s; |
||||
} |
||||
|
||||
.el-menu { |
||||
--el-menu-bg-color: var(--card-bg-color) !important; |
||||
--el-menu-text-color: var(--menu-text-color) !important; |
||||
--el-menu-hover-text-color: var(--menu-active-color) !important; |
||||
--el-menu-active-color: var(--menu-active-color) !important; |
||||
border-color: var(--border-color) !important; |
||||
} |
||||
|
||||
.el-card { |
||||
--el-card-bg-color: var(--card-bg-color) !important; |
||||
--el-card-border-color: var(--border-color) !important; |
||||
} |
||||
|
||||
.el-button { |
||||
--el-button-bg-color: var($el-button-bg-color) !important; |
||||
--el-button-border-color: var(--border-color) !important; |
||||
--el-button-hover-border-color: var(--primary-color) !important; |
||||
--el-button-hover-bg-color: var(--primary-color) !important; |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,84 @@ |
||||
<template> |
||||
<div class="container"> |
||||
<div class="item" v-for="item in 10"> |
||||
<div class="new-iamge"> |
||||
<img src="../../assets/images/news.png" alt="" v-default-image /> |
||||
</div> |
||||
<div class="new-title">上海一患者在医院停房车维权，称车祸花近百万，屁股整形遇“假专家”</div> |
||||
<div class="new-time"> |
||||
<div>2023-08-01</div> |
||||
<div>新闻</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref, computed, nextTick, watch, onMounted } from 'vue' |
||||
import { useRouter, useRoute } from 'vue-router' |
||||
|
||||
const router = useRouter() |
||||
const route = useRoute() |
||||
|
||||
const total = ref(0) |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.container { |
||||
width: 1420px; |
||||
margin: 0 auto; |
||||
padding-top: 100px; |
||||
display: grid; |
||||
grid-template-columns: repeat(4, 1fr); |
||||
grid-template-rows: repeat(2, 1fr); |
||||
gap: 20px; |
||||
.item { |
||||
width: 320px; |
||||
height: 260px; |
||||
background-color: var(--card-bg-color); |
||||
margin-right: 20px; |
||||
margin-bottom: 20px; |
||||
cursor: pointer; |
||||
transition: all 0.3s; |
||||
border-radius: 5px; |
||||
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2); |
||||
overflow: hidden; |
||||
&:hover { |
||||
transform: translateY(-5px); |
||||
} |
||||
.new-iamge{ |
||||
width: 100%; |
||||
height: 175px; |
||||
img{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
.new-title{ |
||||
width: 100%; |
||||
height: 50px; |
||||
padding: 0 10px; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
display: -webkit-box; |
||||
-webkit-line-clamp: 2; |
||||
-webkit-box-orient: vertical; |
||||
font-size: 16px; |
||||
font-weight: 700; |
||||
margin-top: 5px; |
||||
line-height: 25px; |
||||
} |
||||
.new-time{ |
||||
width: 100%; |
||||
height: 25px; |
||||
padding: 0 10px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
font-size: 14px; |
||||
margin-top: 5px; |
||||
font-size: 12px; |
||||
color: #999; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue