增加主题5套

GST002_H5
JayChou 2 months ago
parent 8c7ed611c6
commit ceffd91b0e
  1. 83
      src/Layout/footer/index.vue
  2. 337
      src/Layout/tabbar/index.vue
  3. BIN
      src/assets/images/bl.png
  4. BIN
      src/assets/images/bzbanner.png
  5. BIN
      src/assets/images/hl.png
  6. BIN
      src/assets/images/pk.png
  7. BIN
      src/assets/images/signup-bg.jpg
  8. 14
      src/main.ts
  9. 53
      src/store/module/theme.ts
  10. 147
      src/styles/dark.scss
  11. 10
      src/styles/index.scss
  12. 147
      src/styles/light-blue.scss
  13. 147
      src/styles/light-purple.scss
  14. 75
      src/styles/themes.ts
  15. 62
      src/styles/variables.scss
  16. 983
      src/views/home/index.vue
  17. 43
      src/views/news/index.vue
  18. 70
      src/views/raceInfo/index.vue

@ -1,10 +1,10 @@
<template>
<div class="footer">
<div class="footer" :class="{ 'dark-layout': useThemeStore.isDark }">
<div class="footer-nav">
<div v-for="item in NewList" :key="item.id" @click="toNewsDetail(item.id)">
<div class="item">
{{ item.title }}
</div>
{{ item.title }}
</div>
</div>
</div>
<div class="copyright">源码自然版权所有@2023 湘豫CP备 19005950-1</div>
@ -18,7 +18,9 @@
import { ref} from 'vue'
import { queryNewListApi } from '@/api/news'
import { useRouter } from 'vue-router'
import themeStore from '@/store/module/theme'
const useThemeStore = themeStore()
const NewList = ref<any>([])
const getNewList = async () =>{
const res:any = await queryNewListApi()
@ -32,25 +34,23 @@ const router = useRouter()
const toNewsDetail = (id: number) => {
router.push({
path: '/detail/' + id,
})
}
</script>
<style lang="scss" scoped>
.footer {
// position: fixed;
// bottom: 0;
height: 300px;
width: 100%;
// background-color: #252527;
height: 300px;
background: url('../../assets//images/footer.png') no-repeat;
background-size: cover;
display: flex;
flex-direction: column;
align-items: center;
// justify-content: center;
color: #333333;
color: var(--text-color);
position: relative;
transition: all 0.3s;
.footer-nav {
display: flex;
margin-top: 120px;
@ -59,6 +59,7 @@ const toNewsDetail = (id: number) => {
text-align: center;
font-size: 18px;
cursor: pointer;
transition: all 0.3s;
}
.item:nth-child(2) {
border-left: 1px solid #333333;
@ -68,11 +69,73 @@ const toNewsDetail = (id: number) => {
color: #0bd7c6;
}
}
.copyright {
margin-top: 80px;
}
.report {
margin-top: 0.1042rem;
}
&.dark-layout {
background: var(--card-bg-color);
border-top: 1px solid var(--border-color);
color: var(--text-color);
// height: auto;
padding: 60px 0;
&::before {
content: '';
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 1420px;
height: 3px;
background: var(--gradient-color);
}
.footer-nav {
position: absolute;
left: calc(50% - 1420px/2 );
top: 60px;
flex-direction: column !important;
gap: 20px;
margin-top: 0;
.item {
width: auto;
padding: 0 20px;
border: none;
opacity: 0.9;
transition: all 0.3s;
color: var(--text-color);
font-weight: 500;
text-align: left;
&:hover {
color: var(--primary-color);
opacity: 1;
}
}
}
.copyright, .report {
position: absolute;
left: calc(50% - 1420px/2 + 20px);
color: var(--text-color);
opacity: 0.8;
font-weight: 500;
}
.copyright {
top: 140px;
}
.report {
top: 160px;
}
}
}
</style>

@ -26,6 +26,35 @@
</div>
</div>
<div class="right" v-if="!useUserStore.token">
<div class="theme-switch">
<el-popover
v-model:visible="showThemePopover"
placement="bottom"
:width="200"
trigger="manual"
>
<template #reference>
<el-icon class="theme-icon" @click="showThemePopover = !showThemePopover">
<Setting />
</el-icon>
</template>
<div class="theme-popover">
<div class="theme-title">主题设置</div>
<div class="theme-list">
<div
v-for="theme in useThemeStore.themes"
:key="theme.name"
class="theme-item"
:class="{ active: currentThemeName === theme.name }"
@click="handleThemeChange(theme.name)"
>
<div class="theme-color" :style="{ backgroundColor: theme.primaryColor }"></div>
<span class="theme-name">{{ theme.name }}</span>
</div>
</div>
</div>
</el-popover>
</div>
<div
class="registered gradient"
@click="$router.push('/login?registered=true')"
@ -35,6 +64,35 @@
<div class="login" @click="$router.push('/login')">登录</div>
</div>
<div class="right" v-else>
<div class="theme-switch">
<el-popover
v-model:visible="showThemePopover"
placement="bottom"
:width="200"
trigger="manual"
>
<template #reference>
<el-icon class="theme-icon" @click="showThemePopover = !showThemePopover">
<Setting />
</el-icon>
</template>
<div class="theme-popover">
<div class="theme-title">主题设置</div>
<div class="theme-list">
<div
v-for="theme in useThemeStore.themes"
:key="theme.name"
class="theme-item"
:class="{ active: currentThemeName === theme.name }"
@click="handleThemeChange(theme.name)"
>
<div class="theme-color" :style="{ backgroundColor: theme.primaryColor }"></div>
<span class="theme-name">{{ theme.name }}</span>
</div>
</div>
</div>
</el-popover>
</div>
<div class="avater">
<img
:src="setImageUrl(useUserStore.userInfo.avatar)"
@ -69,13 +127,28 @@ import { useRouter, useRoute } from 'vue-router'
import { onMounted, ref, watch } from 'vue'
import userStore from '@/store/module/user'
import settingStore from '@/store/module/setting'
import themeStore from '@/store/module/theme'
import Item from './components/item.vue'
import defaultUserAvater from '@/assets/images/default.png'
import { Setting } from '@element-plus/icons-vue'
const useUserStore = userStore()
const useSettingStore = settingStore()
const useThemeStore = themeStore()
const $router = useRouter()
const $route = useRoute()
const flog = ref(false)
//
const currentThemeName = ref(useThemeStore.currentTheme.name)
const handleThemeChange = (themeName: string) => {
const selectedTheme = useThemeStore.themes.find(t => t.name === themeName)
if (selectedTheme) {
useThemeStore.setTheme(selectedTheme)
}
}
onMounted(() => {
window.addEventListener('scroll', () => {
if (window.scrollY >= 50) {
@ -108,6 +181,8 @@ watch(
},
)
// getLogoSetting()
const showThemePopover = ref(false)
</script>
<style lang="scss" scoped>
@ -138,12 +213,86 @@ watch(
.tabbar {
position: fixed;
top: 0;
z-index: 1;
height: 80px;
left: 0;
width: 100%;
background-color: transparent;
animation-duration: 0.3s;
animation-name: tabber-to;
z-index: 999;
transition: all 0.3s;
// background-color: var(--background-color);
border-bottom: 1px solid var(--border-color);
.container {
width: $base-container-width;
height: 80px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
.left {
display: flex;
align-items: center;
.logo {
width: 200px;
height: 80px;
display: flex;
align-items: center;
img {
width: 100%;
height: 100%;
}
}
.menu {
margin-left: 40px;
:deep(.el-menu) {
background-color: transparent;
border: none;
.el-menu-item {
color: var(--text-color);
&:hover {
color: var(--primary-color);
background-color: transparent !important;
}
&.is-active {
color: var(--primary-color);
background-color: transparent !important;
}
}
}
}
}
.right {
display: flex;
align-items: center;
.theme-switcher {
margin-right: 20px;
}
.user-info {
display: flex;
align-items: center;
cursor: pointer;
color: var(--text-color);
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
border: 1px solid var(--border-color);
}
.username {
font-size: 14px;
margin-right: 5px;
}
.el-icon {
font-size: 12px;
transition: transform 0.3s;
}
&:hover {
color: var(--primary-color);
.el-icon {
transform: rotate(180deg);
}
}
}
}
}
}
.tabbar-active {
@ -151,33 +300,56 @@ watch(
top: 0;
height: 80px;
width: 100%;
background-color: #fff;
background-color: var(--card-bg-color);
animation-duration: 0.3s;
animation-name: tabber;
z-index: 999;
box-shadow: 0px 0px 43px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 43px rgba(0, 0, 0, 0.1);
border-bottom: 1px solid var(--border-color);
.container {
width: $base-container-width;
height: 80px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
.menu {
margin-left: 40px;
:deep(.el-menu) {
background-color: transparent;
border: none;
.el-menu-item {
color: var(--text-color);
&:hover {
color: var(--primary-color);
background-color: transparent !important;
}
&.is-active {
color: var(--primary-color);
background-color: transparent !important;
}
}
}
}
}
}
@keyframes tabber {
0% {
// transform: translateY(-80px);
background-color: transparent;
}
100% {
// transform: translateY(0);
background-color: #fff;
background-color: var(--card-bg-color);
}
}
@keyframes tabber-to {
0% {
// transform: translateY(-80px);
background-color: #fff;
background-color: var(--card-bg-color);
}
100% {
// transform: translateY(0);
background-color: transparent;
}
}
@ -208,15 +380,20 @@ watch(
color: #fff;
}
.login {
color: #1d2129;
color: var(--text-color);
margin-left: 20px;
border: 1px solid #e5e6eb;
border: 1px solid var(--border-color);
&:hover {
color: var(--primary-color);
border-color: var(--primary-color);
}
}
.avater {
width: 35px;
height: 35px;
border-radius: 50%;
overflow: hidden;
border: 1px solid var(--border-color);
img {
width: 100%;
height: 100%;
@ -237,7 +414,7 @@ watch(
li {
padding: 12px 20px;
color: #1d2129;
color: var(--text-color);
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
@ -245,7 +422,7 @@ watch(
}
li:hover {
color: #0033f7;
color: var(--primary-color);
transform: translateY(-5px);
}
@ -259,7 +436,7 @@ watch(
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #fff;
background-color: var(--primary-color);
}
}
@ -300,8 +477,132 @@ watch(
:deep(.el-menu-item) {
background-color: transparent;
border-bottom: none;
&:hover {
background-color: transparent !important;
}
&.is-active {
background-color: transparent !important;
}
}
.el-dropdown-link {
white-space: nowrap;
}
.theme-switch {
margin-right: 20px;
.theme-icon {
font-size: 20px;
color: var(--text-color);
cursor: pointer;
transition: all 0.3s;
&:hover {
color: var(--primary-color);
transform: rotate(90deg);
}
}
}
.theme-popover {
.theme-title {
font-size: 16px;
font-weight: 600;
color: var(--text-color);
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-color);
}
.theme-list {
display: flex;
flex-direction: column;
gap: 10px;
.theme-item {
display: flex;
align-items: center;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s;
&:hover {
background-color: var(--background-color);
}
&.active {
background-color: var(--background-color);
.theme-name {
color: var(--primary-color);
}
}
.theme-color {
width: 20px;
height: 20px;
border-radius: 4px;
margin-right: 10px;
border: 1px solid var(--border-color);
}
.theme-name {
color: var(--text-color);
font-size: 14px;
}
}
}
}
.right {
display: flex;
align-items: center;
div {
width: 108px;
height: 40px;
text-align: center;
line-height: 40px;
border-radius: 5px;
font-size: 14px;
cursor: pointer;
}
.registered {
color: #fff;
background: var(--gradient-color);
border-radius: 20px;
transition: all 0.3s;
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
}
.login {
color: var(--text-color);
margin-left: 20px;
border: 1px solid var(--border-color);
border-radius: 20px;
transition: all 0.3s;
&:hover {
color: var(--primary-color);
border-color: var(--primary-color);
transform: translateY(-2px);
}
}
.avater {
width: 35px;
height: 35px;
border-radius: 50%;
overflow: hidden;
border: 1px solid var(--border-color);
transition: all 0.3s;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
margin-right: 20px;
&:hover {
transform: translateY(-2px);
border-color: var(--primary-color);
}
}
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 198 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 327 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 386 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 330 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 143 KiB

@ -12,16 +12,19 @@ import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import gloablComponent from './components/index'
// 引入全局样式
import '@/styles/index.scss'
import 'element-plus/theme-chalk/dark/css-vars.css' // 引入Element Plus暗黑主题
import './styles/dark.scss' // 引入自定义暗黑主题
import themeStore from './store/module/theme'
// 引入仓库
import pinia from '@/store/index'
import { createPinia } from 'pinia'
// 引入路由
import router from './permissions'
import router from './router'
import '@/utils/rem.js'
import defaultImage from '@/directives/defaultImage'
// 创建vue实例
const app = createApp(App)
app.use(pinia)
const pinia = createPinia()
// 注册全局指令
app.directive('default-image', defaultImage)
@ -33,6 +36,7 @@ app.use(ElementPlus, {
// 注册全局组件
app.use(gloablComponent)
app.use(router)
app.use(pinia)
// app.use(G6)
// 挂载点
@ -42,3 +46,7 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
// 初始化主题
const useThemeStore = themeStore()
useThemeStore.initTheme()

@ -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;
}
}
}

@ -1,5 +1,10 @@
// 引入清除浏览器默认样式文件
@import './reset.scss';
@import './variables.scss';
@import './dark.scss';
@import './light-blue.scss';
@import './light-purple.scss';
:root {
--el-color-primary: #0BD7C6;
}
@ -8,6 +13,11 @@
margin: 0 auto;
// background-color: #c2acac;
}
.container-100{
width: 100%;
margin: 0 auto;
// background-color: #c2acac;
}
.gradient{
background: linear-gradient(90deg, rgba(66,217,172,1) 0%, rgba(0,208,208,1) 100%);
}

@ -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

@ -67,38 +67,41 @@ const setImageUrl = (url: string) => {
margin-top: 100px;
.news-list {
width: 100%;
// height: 900px;
// background-color: #f2f3f5;
padding: 15px;
border: 1px solid #f2f3f5;
border: 1px solid var(--border-color);
background-color: var(--card-bg-color);
border-radius: 5px;
.item {
.news-title {
font-size: 24px;
font-weight: 700;
color: var(--text-color);
}
.children {
margin: 20px 0;
.son-item {
width: 100%;
height: 100px;
background-color: #fff;
background-color: var(--card-bg-color);
padding: 15px;
display: flex;
border-bottom: 1px solid rgba(228, 230, 235, 0.5);
border-bottom: 1px solid var(--border-color);
justify-content: space-between;
cursor: pointer;
transition: all 0.3s;
.left {
width: 1000px;
.title {
font-size: 18px;
font-weight: 700;
color: #4f5153;
color: var(--text-color);
transition: color 0.3s;
}
.content {
margin-top: 8px;
font-size: 13px;
color: #8a919f;
color: var(--text-color);
opacity: 0.65;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
@ -107,7 +110,8 @@ const setImageUrl = (url: string) => {
.time {
margin-top: 8px;
font-size: 12px;
color: #8a919f;
color: var(--text-color);
opacity: 0.45;
display: flex;
}
}
@ -119,10 +123,15 @@ const setImageUrl = (url: string) => {
img {
width: 100%;
height: 100%;
border-radius: 4px;
border: 1px solid var(--border-color);
}
}
&:hover {
background-color: #f7f8fa;
background-color: var(--background-color);
.title {
color: var(--primary-color);
}
}
}
}
@ -135,27 +144,29 @@ const setImageUrl = (url: string) => {
top: 100px;
z-index: 999;
width: 150px;
// height: 300px;
background-color: #f2f3f5;
background-color: var(--card-bg-color);
border: 1px solid var(--border-color);
padding: 10px;
border-radius: 5px;
.item {
height: 45px;
// text-align: center;
line-height: 22px;
font-size: 16px;
padding: 10px;
border-radius: 5px;
cursor: pointer;
margin: 5px 0;
color: var(--text-color);
transition: all 0.3s;
&:hover {
background-color: #0bd7c628;
color: #0bd7c6;
background-color: var(--primary-color);
color: #ffffff;
opacity: 0.8;
}
}
.active {
background-color: #0bd7c628;
color: #0bd7c6;
background-color: var(--primary-color);
color: #ffffff;
}
}
</style>

@ -308,9 +308,9 @@ const scrollToPosition = () => {
.top-image {
width: 100%;
height: 300px;
background-color: skyblue;
background: var(--background-color);
text-align: center;
color: #fff;
color: var(--text-color);
font-size: 32px;
font-weight: 700;
line-height: 300px;
@ -319,16 +319,14 @@ const scrollToPosition = () => {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
// grid-template-rows: repeat(2, 1fr);
// gap: 10px;
// margin-top: 10px;
.item {
width: 340px;
height: 360px;
// background-color: pink;
background-color: var(--card-bg-color);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06);
cursor: pointer;
border-radius: 10px;
border: 1px solid var(--border-color);
transition: all 0.2s;
.image {
width: 100%;
@ -336,19 +334,21 @@ const scrollToPosition = () => {
img {
width: 100%;
height: 100%;
border-radius: 4px;
}
}
.reac-info {
padding: 0 8px;
.reac-title {
margin-top: 19px;
color: #c9c9c9;
color: var(--text-color);
opacity: 0.65;
font-size: 12px;
}
.reac-project {
font-size: 16px;
font-weight: 600;
color: #333333;
color: var(--text-color);
margin-top: 10px;
line-height: 20px;
height: 60px;
@ -359,11 +359,12 @@ const scrollToPosition = () => {
}
.time {
font-size: 14px;
color: #8c8b8b;
color: var(--text-color);
opacity: 0.65;
margin-top: 30px;
}
.niandu {
color: #1e2033;
color: var(--text-color);
font-size: 18px;
margin-top: 20px;
font-weight: 600;
@ -375,6 +376,7 @@ const scrollToPosition = () => {
}
.item:hover {
transform: translateY(-5px);
border-color: var(--primary-color);
}
.item:nth-child(n) {
margin-top: 20px;
@ -391,12 +393,13 @@ const scrollToPosition = () => {
width: 300px;
margin-left: 40px;
.title {
color: #1e2033;
color: var(--text-color);
font-size: 28px;
font-weight: 600;
}
.description {
color: #1e2033;
color: var(--text-color);
opacity: 0.65;
font-size: 14px;
margin-top: 15px;
}
@ -406,8 +409,7 @@ const scrollToPosition = () => {
position: relative;
width: 100%;
height: 140px;
// background-color: pink;
color: #333333;
color: var(--text-color);
padding: 15px;
display: flex;
flex-direction: column;
@ -415,8 +417,13 @@ const scrollToPosition = () => {
box-shadow: 0rem 0rem 0.05208rem rgba(0, 0, 0, 0.06);
margin-top: 10px;
cursor: pointer;
background: var(--card-bg-color);
border: 1px solid var(--border-color);
border-radius: 4px;
transition: all 0.3s;
.year {
font-size: 12px;
opacity: 0.65;
}
.name {
width: 130px;
@ -426,6 +433,7 @@ const scrollToPosition = () => {
}
.time {
font-size: 12px;
opacity: 0.45;
}
.go-to {
position: absolute;
@ -436,9 +444,9 @@ const scrollToPosition = () => {
line-height: 28px;
text-align: center;
font-size: 14px;
color: #f6f5fb;
background: url('../../assets/images/left-top.png') no-repeat;
background-size: contain;
color: #ffffff;
background: var(--primary-color);
border-radius: 0 4px 0 4px;
}
.icon {
position: absolute;
@ -450,6 +458,14 @@ const scrollToPosition = () => {
img {
width: 100%;
height: 100%;
opacity: 0.8;
}
}
&:hover {
transform: translateY(-2px);
border-color: var(--primary-color);
.name {
color: var(--primary-color);
}
}
}
@ -474,12 +490,14 @@ const scrollToPosition = () => {
display: flex;
.label {
font-size: 16px;
color: #aaa;
color: var(--text-color);
opacity: 0.45;
width: 100px;
}
.text {
font-size: 16px;
font-weight: 600;
color: var(--text-color);
}
}
li:first-child {
@ -499,7 +517,8 @@ const scrollToPosition = () => {
margin-top: 25px;
.label {
font-size: 16px;
color: #aaa;
color: var(--text-color);
opacity: 0.45;
}
.deaceiption {
font-size: 16px;
@ -507,6 +526,7 @@ const scrollToPosition = () => {
line-height: 26px;
margin-top: 15px;
height: 300px;
color: var(--text-color);
}
.file {
margin-top: 25px;
@ -519,12 +539,16 @@ const scrollToPosition = () => {
width: 100%;
font-size: 14px;
line-height: 22px;
border: 1px solid #ccc;
border: 1px solid var(--border-color);
background-color: var(--card-bg-color);
padding: 20px;
margin-top: 20px;
color: var(--text-color);
p {
img {
width: 100%;
border-radius: 4px;
border: 1px solid var(--border-color);
}
}
}
@ -532,6 +556,12 @@ const scrollToPosition = () => {
:deep(.el-card) {
width: 100%;
height: 100%;
background-color: var(--card-bg-color);
border-color: var(--border-color);
color: var(--text-color);
.el-card__header {
border-bottom: 1px solid var(--border-color);
}
}
img {
width: 100%;

Loading…
Cancel
Save