Skip to content

V
vue3-element-admin

有来技术 / vue3-element-admin

通知 2
Star 1
Fork 0
V
vue3-element-admin

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 f7df4114 编写于 作者: H haoxr
浏览文件
操作

feat: 暗黑模式自定义样式统一调整 

Former-commit-id: 7af83db7
上级 50cc85ba
隐藏空白更改
内联 并排
Showing with 248 addition and 235 deletion
.eslintrc-auto-import.json
浏览文件 @ f7df4114
......@@ -107,6 +107,7 @@
"useArrayMap": true,
"useArrayReduce": true,
"useArraySome": true,
"useArrayUnique": true,
"useAsyncQueue": true,
"useAsyncState": true,
"useAttrs": true,
......
index.html
浏览文件 @ f7df4114
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="vue-element-admin的vue3升级版本" />
<meta name="keywords" content="vue-element-admin,vue3-element-admin" />
<title>vue3-element-admin</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="vue-element-admin的vue3版本" />
<meta name="keywords" content="vue-element-admin,vue3-element-admin" />
<title>vue3-element-admin</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
\ No newline at end of file
src/components/Hamburger/index.vue
浏览文件 @ f7df4114
<template>
<div
@click="toggleClick"
class="px-[15px] hover:bg-gray-50 cursor-pointer h-[50px] leading-[50px]"
class="px-[15px] hover:bg-gray-50 cursor-pointer h-[50px] leading-[50px] dark:hover:bg-[var(--el-fill-color-light)]"
>
<svg
:class="{ 'is-active': isActive }"
:class="{ 'is-active': isActive } "
class="hamburger"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
style="color:#FFF!important"
>
<path
d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
......@@ -34,9 +35,9 @@ function toggleClick() {
<style lang="scss" scoped>
.hamburger {
display: inline-block;
width: 20px;
height: 20px;
vertical-align:-4px;
&.is-active {
transform: rotate(180deg);
}
......
src/components/IconSelect/index.vue
浏览文件 @ f7df4114
......@@ -83,7 +83,7 @@ onMounted(() => {
<template #reference>
<div
@click="visible = !visible"
class="cursor-pointer text-[#999] absolute right-[10px] top-0"
class="cursor-pointer text-[#999] absolute right-[10px] top-0 height-[32px] leading-[32px]"
>
<i-ep-caret-top v-show="visible"></i-ep-caret-top>
<i-ep-caret-bottom v-show="!visible"></i-ep-caret-bottom>
......
src/layout/components/Settings/index.vue
浏览文件 @ f7df4114
......@@ -45,11 +45,10 @@ onMounted(() => {
<el-divider>主题</el-divider>
<button @click="toggleDark()">当前状态是: {{ isDark }}</button>
<div class="flex justify-center" @click="toggleDark()">
<el-switch
<div class="flex justify-center" @click.stop>
<el-switch
v-model="isDark"
@change="toggleDark"
inline-prompt
:active-icon="Sunny"
:inactive-icon="Moon"
......
src/layout/components/Sidebar/index.vue
浏览文件 @ f7df4114
<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import SidebarItem from './SidebarItem.vue';
import Logo from './Logo.vue';
import variables from '@/styles/variables.module.scss';
import { useSettingsStore } from '@/store/modules/settings';
import { usePermissionStore } from '@/store/modules/permission';
import { useAppStore } from '@/store/modules/app';
import { storeToRefs } from 'pinia';
import variables from '@/styles/ts-variables.module.scss'
const settingsStore = useSettingsStore();
const permissionStore = usePermissionStore();
......@@ -23,7 +22,7 @@ const isCollapse = computed(() => !appStore.sidebar.opened);
const activeMenu = computed<string>(() => {
const { meta, path } = route;
if (meta?.activeMenu) {
return meta.activeMenu as string;
return meta.activeMenu;
}
return path;
});
......
src/layout/components/TagsView/index.vue
浏览文件 @ f7df4114
<script setup lang="ts">
import { ComponentInternalInstance } from 'vue';
import {
getCurrentInstance,
nextTick,
ref,
watch,
onMounted,
ComponentInternalInstance
} from 'vue';
import { storeToRefs } from 'pinia';
import path from 'path-browserify';
......@@ -202,6 +209,9 @@ function closeAllTags(view: TagView) {
function openTagMenu(tag: TagView, e: MouseEvent) {
const menuMinWidth = 105;
console.log("test",proxy?.$el)
const offsetLeft = proxy?.$el.getBoundingClientRect().left; // container margin left
const offsetWidth = proxy?.$el.offsetWidth; // container width
const maxLeft = offsetWidth - menuMinWidth; // left boundary
......@@ -232,8 +242,8 @@ onMounted(() => {
</script>
<template>
<div class="tags-container">
<scroll-pane
class="tags-container"
ref="scrollPaneRef"
@scroll="handleScroll"
>
......@@ -249,7 +259,7 @@ onMounted(() => {
{{ translateRouteTitleI18n(tag.meta?.title) }}
<span
v-if="!isAffix(tag)"
class="rounded-[60%] hover:bg-gray-300"
class="tags-item-close"
@click.prevent.stop="closeSelectedTag(tag)"
>
<i-ep-close class="text-[10px]" />
......@@ -288,19 +298,19 @@ onMounted(() => {
关闭所有
</li>
</ul>
</div>
</template>
<style lang="scss" scoped>
.tags-container {
height: 34px;
width: 100%;
border: 1px solid #eee;
box-shadow: 0px 1px 1px #eee;
border: 1px solid var(--el-border-color-light);
box-shadow: 0px 1px 1px var(--el-box-shadow-light);
.tags-item {
display: inline-block;
cursor: pointer;
border: 1px solid #d8dce5;
border: 1px solid var(--el-border-color-light);
padding: 3px 8px;
font-size: 12px;
margin: 4px 0 0 5px;
......@@ -321,7 +331,7 @@ onMounted(() => {
background-color: var(--el-color-primary);
color: #fff;
border-color: var(--el-color-primary);
&::before {
&::before {
content: '';
background: #fff;
display: inline-block;
......@@ -330,7 +340,21 @@ onMounted(() => {
border-radius: 50%;
margin-right: 5px;
}
.tags-item-close{
&:hover{
background:rgb(0 0 0 / 0.16)
}
}
}
&-close{
border-radius:100%;
&:hover{
color:#FFF;
background:rgb(0 0 0 / 0.16)
}
}
}
}
......
src/layout/index.vue
浏览文件 @ f7df4114
......@@ -10,6 +10,7 @@ import { useSettingsStore } from '@/store/modules/settings';
const { width } = useWindowSize();
/**
* 响应式布局容器固定宽度
*
......@@ -82,11 +83,13 @@ function handleOutsideClick() {
</template>
<style lang="scss" scoped>
@import '@/styles/mixin.scss';
@import '@/styles/variables.module.scss';
.app-wrapper {
@include clearfix;
&:after {
content: '';
display: table;
clear: both;
}
position: relative;
height: 100%;
width: 100%;
......
src/styles/dark.scss
浏览文件 @ f7df4114
// only scss variables
$--colors: (
"primary": (
"base": #589ef8,
),
"primary": ("base": red),
);
@forward "element-plus/theme-chalk/src/dark/var.scss" with (
$colors: $--colors
);
@forward "element-plus/theme-chalk/src/dark/var.scss" with ($colors: $--colors);
html.dark {
.navbar {
background-color: var(--el-bg-color);
color: var(--el-text-color-regular);
}
.hamburger {
fill: var(--el-text-color-regular);
}
}
\ No newline at end of file
src/styles/global.scss 0 → 100644
浏览文件 @ f7df4114
html,
body,
#app {
height: 100%;
}
svg {
display: inline-block;
vertical-align: -0.15em; //因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果
}
// main-container global css
.app-container {
padding: 20px;
}
.search {
padding: 18px 0 0 10px;
margin-bottom: 10px;
border-radius: var(--el-card-border-radius);
border: 1px solid var(--el-border-color-light);
box-shadow: var(--el-box-shadow-light);
}
\ No newline at end of file
src/styles/index.scss
浏览文件 @ f7df4114
@import 'src/styles/variables.module';
@import 'src/styles/element-plus';
@import './element.scss';
@import './sidebar.scss';
@import './tailwind.scss';
@import './reset.scss';
// main-container global css
.app-container {
padding: 20px;
}
.search{
padding: 18px 0 0 10px;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #eee;
box-shadow: 1px 1px 1px #eee;
}
@import './global.scss';
@import './dark.scss';
\ No newline at end of file
src/styles/mixin.scss 已删除 100644 → 0
浏览文件 @ 50cc85ba
@mixin clearfix {
&:after {
content: '';
display: table;
clear: both;
}
}
@mixin relative {
position: relative;
width: 100%;
height: 100%;
}
src/styles/reset.scss 已删除 100644 → 0
浏览文件 @ 50cc85ba
svg{
display: inline-block;
}
src/styles/sidebar.scss
浏览文件 @ f7df4114
......@@ -70,11 +70,11 @@
}
}
.is-active > .el-sub-menu__title {
.is-active>.el-sub-menu__title {
color: $subMenuActiveText !important;
}
& .nest-menu .el-sub-menu > .el-sub-menu__title,
& .nest-menu .el-sub-menu>.el-sub-menu__title,
& .el-sub-menu .el-menu-item {
min-width: $sideBarWidth !important;
background-color: $subMenuBg !important;
......@@ -88,6 +88,7 @@
.hideSidebar {
.sidebar-container {
width: 54px !important;
.svg-icon {
margin-right: 0px;
}
......@@ -117,7 +118,7 @@
.el-sub-menu {
overflow: hidden;
& > .el-sub-menu__title {
&>.el-sub-menu__title {
padding: 0 !important;
.svg-icon {
......@@ -136,8 +137,8 @@
.el-menu--collapse {
.el-sub-menu {
& > .el-sub-menu__title {
& > span {
&>.el-sub-menu__title {
&>span {
height: 0;
width: 0;
overflow: hidden;
......@@ -174,6 +175,7 @@
}
.withoutAnimation {
.main-container,
.sidebar-container {
transition: none;
......@@ -183,17 +185,18 @@
// when menu collapsed
.el-menu--vertical {
& > .el-menu {
&>.el-menu {
.svg-icon {
margin-right: 16px;
}
.sub-el-icon {
margin-right: 12px;
margin-left: -2px;
}
}
.nest-menu .el-sub-menu > .el-sub-menu__title,
.nest-menu .el-sub-menu>.el-sub-menu__title,
.el-menu-item {
&:hover {
// you can use $subMenuHover
......@@ -202,7 +205,7 @@
}
// the scroll bar appears when the subMenu is too long
> .el-menu--popup {
>.el-menu--popup {
max-height: 100vh;
overflow-y: auto;
......@@ -219,25 +222,4 @@
border-radius: 20px;
}
}
}
body[layout="mix"] {
.horizontal-header{
.el-menu-item{
height: 50px!important;
line-height: 50px!important;
}
.el-sub-menu__title {
background-color: #001529!important;
height: 50px!important;
}
}
.horizontal-header-right>div {
color: #FFF;
}
.svg-icon{
margin-right: 16px;
}
}
}
\ No newline at end of file
src/styles/ts-variables.module.scss 0 → 100644
浏览文件 @ f7df4114
// 导出 variables.module.scss 变量提供给TypeScript使用
:export {
menuBg: $menuBg;
menuText: $menuText;
menuActiveText: $menuActiveText
}
\ No newline at end of file
src/styles/variables.module.scss
浏览文件 @ f7df4114
// sidebar
// 全局SCSS变量
$menuText: #bfcbd9;
$menuActiveText: #409eff;
$subMenuActiveText: #f4f4f5;
$menuBg: #304156;
$menuHover: #263445;
$subMenuBg: #1f2d3d;
$subMenuActiveText: #f4f4f5;
$subMenuHover: #001528;
$sideBarWidth: 210px;
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
menuText: $menuText;
menuActiveText: $menuActiveText;
subMenuActiveText: $subMenuActiveText;
menuBg: $menuBg;
menuHover: $menuHover;
subMenuBg: $subMenuBg;
subMenuHover: $subMenuHover;
sideBarWidth: $sideBarWidth;
}
$sideBarWidth: 210px;
\ No newline at end of file
src/types/auto-imports.d.ts
浏览文件 @ f7df4114
......@@ -108,6 +108,7 @@ declare global {
const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
const useArraySome: typeof import('@vueuse/core')['useArraySome']
const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
const useAttrs: typeof import('vue')['useAttrs']
......@@ -373,6 +374,7 @@ declare module 'vue' {
readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
readonly useArrayUnique: UnwrapRef<typeof import('@vueuse/core')['useArrayUnique']>
readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
......
src/views/dashboard/components/Team/index.vue
浏览文件 @ f7df4114
<!-- 团队介绍 -->
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref, toRefs, watchEffect } from 'vue';
import BScroll from 'better-scroll';
const state = reactive({
teamActiveName: '1',
developers: [
{
imgUrl: 'https://s2.loli.net/2022/04/06/yRx8uzj4emA5QVr.jpg',
nickname: '郝先瑞',
positions: ['后端', '前端', '文档'],
homepage: 'https://www.cnblogs.com/haoxianrui/'
},
{
imgUrl: 'https://s2.loli.net/2022/04/06/cQihGv9uPsTjXk1.jpg',
nickname: '张川',
positions: ['后端', '前端'],
homepage: 'https://blog.csdn.net/qq_41595149'
},
{
imgUrl: 'https://s2.loli.net/2022/04/07/2IiOYBHnRGKgCSd.jpg',
nickname: '张加林',
positions: ['DevOps'],
homepage: 'https://gitee.com/ximy'
}
],
colors: ['', 'success', 'warning', 'danger'],
indicatorImgUrl: new URL(
`../../../../assets/index/indicator.png`,
import.meta.url
).href
});
const { teamActiveName, developers, colors, indicatorImgUrl } = toRefs(state);
let bScroll = reactive({});
const developer_container = ref<HTMLElement | any>(null);
onMounted(() => {
bScroll = new BScroll(developer_container.value, {
mouseWheel: true, //开启鼠标滚轮
disableMouse: false, //启用鼠标拖动
scrollX: true //X轴滚动启用
});
});
watchEffect(() => {
nextTick(() => {
bScroll && (bScroll as any).refresh();
});
});
</script>
<template>
<div class="component-container">
<el-card class="team-card">
<template #header>
<span class="fw-b">有来开源组织 & 技术团队</span>
</template>
<el-tabs v-model="teamActiveName">
<el-tab-pane label="开发者" name="1">
<div class="developer" ref="dev_wrapper">
<ul class="developer__container">
<div class="developer-container" ref="developer_container">
<ul class="developer-list">
<li
class="developer__item"
class="developer-item"
v-for="(item, index) in developers"
:key="index"
>
<div class="developer__inner">
<div class="developer-item-wrapper">
<el-image
class="developer__img"
class="developer-img"
:src="item.imgUrl"
:preview-src-list="[item.imgUrl]"
></el-image>
<div class="developer__info">
<span class="developer__nickname">{{ item.nickname }}</span>
<div class="developer__position">
<div class="developer-info">
<span class="developer-info-nickname">{{ item.nickname }}</span>
<div class="developer-info-position">
<el-tag
v-for="(position, i) in item.positions"
:type="(colors[i % colors.length] as any)"
......@@ -32,14 +86,14 @@
>{{ position }}</el-tag
>
</div>
<div class="developer__homepage">
<div class="developer-info-homepage">
<a :href="item.homepage" target="_blank">个人主页</a>
</div>
</div>
</div>
</li>
</ul>
<el-image class="developer__indicator" :src="indicatorImgUrl" />
<el-image class="developer-indicator" :src="indicatorImgUrl" />
</div>
</el-tab-pane>
......@@ -64,70 +118,15 @@
<p>2. 熟悉项目，且至少给项目提交(过)一个PR；</p>
<p>3. Git代码库活跃，个人主页或博客完善者优先；</p>
<p>4. 过分优秀者我们会主动联系您...</p>
<div class="join__desc">申请加入方式: 添加开发者微信申请即可。</div>
<div class="join-way">申请加入方式: 添加开发者微信申请即可。</div>
</div>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</template>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref, toRefs, watchEffect } from 'vue';
import BScroll from 'better-scroll';
const state = reactive({
teamActiveName: '1',
developers: [
{
imgUrl: 'https://s2.loli.net/2022/04/06/yRx8uzj4emA5QVr.jpg',
nickname: '郝先瑞',
positions: ['后端', '前端', '文档'],
homepage: 'https://www.cnblogs.com/haoxianrui/'
},
{
imgUrl: 'https://s2.loli.net/2022/04/06/cQihGv9uPsTjXk1.jpg',
nickname: '张川',
positions: ['后端', '前端'],
homepage: 'https://blog.csdn.net/qq_41595149'
},
{
imgUrl: 'https://s2.loli.net/2022/04/07/2IiOYBHnRGKgCSd.jpg',
nickname: '张加林',
positions: ['DevOps'],
homepage: 'https://gitee.com/ximy'
}
],
colors: ['', 'success', 'warning', 'danger'],
indicatorImgUrl: new URL(
`../../../../assets/index/indicator.png`,
import.meta.url
).href
});
const { teamActiveName, developers, colors, indicatorImgUrl } = toRefs(state);
let bScroll = reactive({});
const dev_wrapper = ref<HTMLElement | any>(null);
onMounted(() => {
bScroll = new BScroll(dev_wrapper.value, {
mouseWheel: true, //开启鼠标滚轮
disableMouse: false, //启用鼠标拖动
scrollX: true //X轴滚动启用
});
});
watchEffect(() => {
nextTick(() => {
bScroll && (bScroll as any).refresh();
});
});
</script>
<style lang="scss" scoped>
.component-container {
.team-card {
font-size: 14px;
......@@ -137,17 +136,17 @@ watchEffect(() => {
}
}
.developer {
.developer-container {
width: 100%;
overflow: hidden;
&__container {
.developer-list {
display: inline-flex;
overflow: hidden;
justify-content: flex-start;
padding: 10px;
.developer__item {
.developer-item {
&:not(:first-child) {
margin-left: 20px;
}
......@@ -157,40 +156,39 @@ watchEffect(() => {
width: 180px;
min-width: 180px;
.developer__inner {
border: 1px solid #cccccc;
.developer-item-wrapper {
border: 1px solid var(--el-border-color-light);
border-radius: 5px;
box-shadow: 6px 6px 6px #aaa;
box-shadow: var(--el-box-shadow-lighter);
padding: 8px;
text-align: center;
.developer__img {
.developer-img {
height: 100px;
width: 100px;
}
.developer__info {
.developer-info {
padding: 6px;
font-size: 14px;
.developer__position {
.developer-info-position {
margin-top: 10px;
}
.developer__homepage {
.developer-info-homepage {
margin-top: 16px;
a {
display: inline-block;
padding: 4px 10px;
color: #409eff;
border: 1px solid #409eff;
color: var(--el-color-primary);
border: 1px solid var(--el-color-primary);
border-radius: 5px;
background: #ecf5ff;
background: var(--el-color-primary-light-9);
&:hover {
background: #409eff;
color: #ffffff;
background: var(--el-color-primary);
color: var(--el-color-white);
}
}
}
......@@ -199,7 +197,7 @@ watchEffect(() => {
}
}
&__indicator {
.developer-indicator {
position: absolute;
right: 0;
bottom: 0;
......@@ -214,7 +212,7 @@ watchEffect(() => {
font-weight: bold;
}
&__desc {
&-way {
margin-top: 20px;
color: #409eff;
font-weight: bold;
......@@ -229,12 +227,11 @@ watchEffect(() => {
}
}
.fw-b {
.fw-b {
font-weight: bold;
}
.f-ml {
margin-left: 5px;
}
}
</style>
src/views/dashboard/index.vue
浏览文件 @ f7df4114
......@@ -19,8 +19,8 @@ import Team from './components/Team/index.vue';
<github-corner class="github-corner" />
<!-- 数据 -->
<el-row :gutter="40" class="card-panel__col">
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
<el-row :gutter="40" class="mb-[12px]">
<el-col :xs="24" :sm="12" :lg="6" class="mb-[12px]">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-user">
<svg-icon icon-class="uv" size="4em" />
......@@ -32,7 +32,7 @@ import Team from './components/Team/index.vue';
</div>
</el-col>
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
<el-col :xs="24" :sm="12" :lg="6" class="mb-[12px]">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="message" size="4em" />
......@@ -44,7 +44,7 @@ import Team from './components/Team/index.vue';
</div>
</el-col>
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
<el-col :xs="24" :sm="12" :lg="6" class="mb-[12px]">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="money" size="4em" />
......@@ -55,7 +55,7 @@ import Team from './components/Team/index.vue';
</div>
</div>
</el-col>
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
<el-col :xs="24" :sm="12" :lg="6" class="mb-[12px]">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-shopping">
<svg-icon icon-class="shopping" size="4em" />
......@@ -71,19 +71,19 @@ import Team from './components/Team/index.vue';
<!-- 项目 + 团队成员介绍 -->
<el-row :gutter="40">
<!-- 项目介绍 -->
<el-col :md="12" :lg="12" class="card-panel__col">
<el-col :md="12" :lg="12" class="mb-[12px]">
<Project />
</el-col>
<!-- 团队介绍 -->
<el-col :md="12" :lg="12" class="card-panel__col">
<el-col :md="12" :lg="12" class="mb-[12px]">
<Team />
</el-col>
</el-row>
<!-- Echarts 图表 -->
<el-row :gutter="40" style="margin-top: 20px">
<el-col :sm="24" :lg="8" class="card-panel__col">
<el-col :sm="24" :lg="8" class="mb-[12px]">
<BarChart
id="barChart"
height="400px"
......@@ -92,7 +92,7 @@ import Team from './components/Team/index.vue';
/>
</el-col>
<el-col :xs="24" :sm="12" :lg="8" class="card-panel__col">
<el-col :xs="24" :sm="12" :lg="8" class="mb-[12px]">
<PieChart
id="pieChart"
height="400px"
......@@ -101,7 +101,7 @@ import Team from './components/Team/index.vue';
/>
</el-col>
<el-col :xs="24" :sm="12" :lg="8" class="card-panel__col">
<el-col :xs="24" :sm="12" :lg="8" class="mb-[12px]">
<RadarChart
id="radarChart"
height="400px"
......@@ -116,7 +116,7 @@ import Team from './components/Team/index.vue';
<style lang="scss" scoped>
.dashboard-container {
padding: 24px;
background-color: rgb(240, 242, 245);
background-color:var(--el-bg-color-page);
position: relative;
.github-corner {
......@@ -147,7 +147,7 @@ import Team from './components/Team/index.vue';
padding-top: 30px;
.el-table {
border-top: 1px solid #dfe6ec;
border-top: 1px solid var(--el-border-color-light);
}
}
......@@ -156,9 +156,6 @@ import Team from './components/Team/index.vue';
}
}
.card-panel__col {
margin-bottom: 12px;
}
.card-panel {
height: 108px;
......@@ -166,10 +163,10 @@ import Team from './components/Team/index.vue';
font-size: 12px;
position: relative;
overflow: hidden;
color: #666;
background: #fff;
box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.05);
color: var(--el-text-color-regular);
background: var(--el-bg-color-overlay);
box-shadow:var(--el-box-shadow-dark);
border-color:var(--el-border-color);
.icon-message {
color: #36a3f7;
......@@ -224,7 +221,7 @@ import Team from './components/Team/index.vue';
.card-panel-text {
line-height: 18px;
color: rgba(0, 0, 0, 0.45);
color: var(--el-text-color-secondary);
font-size: 16px;
margin-bottom: 12px;
}
......@@ -237,7 +234,7 @@ import Team from './components/Team/index.vue';
}
.chart-container {
background: #ffffff;
background: var(--el-bg-color-overlay);
}
}
</style>
vite.config.ts
浏览文件 @ f7df4114
......@@ -23,6 +23,18 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
'@': pathSrc
}
},
css: {
// CSS 预处理器
preprocessorOptions: {
//define global scss variable
scss: {
javascriptEnabled: true,
additionalData: `
@use "@/styles/variables.module.scss" as *;
`
}
}
},
// 本地反向代理解决浏览器跨域限制
server: {
host: '0.0.0.0',
......@@ -63,6 +75,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
dts: path.resolve(pathSrc, 'types', 'auto-imports.d.ts')
}),
Components({
resolvers: [
// 自动注册图标组件
......@@ -86,7 +99,9 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
iconDirs: [path.resolve(pathSrc, 'assets/icons')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]'
})
}),
]
};
});
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或