feat: 暗黑模式自定义样式统一调整
This commit is contained in:
haoxr
parent
8653f21636
commit
7af83db7f0
|
|
@ -107,6 +107,7 @@
|
|||
"useArrayMap": true,
|
||||
"useArrayReduce": true,
|
||||
"useArraySome": true,
|
||||
"useArrayUnique": true,
|
||||
"useAsyncQueue": true,
|
||||
"useAsyncState": true,
|
||||
"useAttrs": true,
|
||||
|
|
|
|||
29
index.html
29
index.html
|
|
@ -1,15 +1,18 @@
|
|||
<!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>
|
||||
|
|
@ -1,13 +1,14 @@
|
|||
<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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
<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;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,12 @@
|
|||
<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)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,19 @@
|
|||
// 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);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
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);
|
||||
}
|
||||
|
|
@ -1,20 +1,5 @@
|
|||
@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';
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
@mixin clearfix {
|
||||
&:after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin relative {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
|
||||
svg{
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
// 导出 variables.module.scss 变量提供给TypeScript使用
|
||||
:export {
|
||||
menuBg: $menuBg;
|
||||
menuText: $menuText;
|
||||
menuActiveText: $menuActiveText
|
||||
}
|
||||
|
|
@ -1,25 +1,11 @@
|
|||
// 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;
|
||||
|
|
@ -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']>
|
||||
|
|
|
|||
|
|
@ -1,76 +1,3 @@
|
|||
<!-- 团队介绍 -->
|
||||
<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">
|
||||
<li
|
||||
class="developer__item"
|
||||
v-for="(item, index) in developers"
|
||||
:key="index"
|
||||
>
|
||||
<div class="developer__inner">
|
||||
<el-image
|
||||
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">
|
||||
<el-tag
|
||||
v-for="(position, i) in item.positions"
|
||||
:type="(colors[i % colors.length] as any)"
|
||||
:class="i !== 0 ? 'f-ml' : ''"
|
||||
size="small"
|
||||
:key="i"
|
||||
>{{ position }}</el-tag
|
||||
>
|
||||
</div>
|
||||
<div class="developer__homepage">
|
||||
<a :href="item.homepage" target="_blank">个人主页</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<el-image class="developer__indicator" :src="indicatorImgUrl" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="交流群" name="2">
|
||||
<div class="group">
|
||||
<el-image
|
||||
class="group-img"
|
||||
src="https://www.youlai.tech/files/blog/youlaiqun.png"
|
||||
:preview-src-list="[
|
||||
'https://www.youlai.tech/files/blog/youlaiqun.png'
|
||||
]"
|
||||
/>
|
||||
<div class="group-tip">
|
||||
群二维码过期可添加开发者微信由其拉入群，备注「有来」即可。
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="加入我们" name="3">
|
||||
<div class="join">
|
||||
<p>1. 人品良好、善于思考、执行力强；</p>
|
||||
<p>2. 熟悉项目，且至少给项目提交(过)一个PR；</p>
|
||||
<p>3. Git代码库活跃，个人主页或博客完善者优先；</p>
|
||||
<p>4. 过分优秀者我们会主动联系您...</p>
|
||||
<div class="join__desc">申请加入方式: 添加开发者微信申请即可。</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, reactive, ref, toRefs, watchEffect } from 'vue';
|
||||
|
|
@ -109,10 +36,10 @@ const { teamActiveName, developers, colors, indicatorImgUrl } = toRefs(state);
|
|||
|
||||
let bScroll = reactive({});
|
||||
|
||||
const dev_wrapper = ref<HTMLElement | any>(null);
|
||||
const developer_container = ref<HTMLElement | any>(null);
|
||||
|
||||
onMounted(() => {
|
||||
bScroll = new BScroll(dev_wrapper.value, {
|
||||
bScroll = new BScroll(developer_container.value, {
|
||||
mouseWheel: true, //开启鼠标滚轮
|
||||
disableMouse: false, //启用鼠标拖动
|
||||
scrollX: true //X轴滚动启用
|
||||
|
|
@ -126,8 +53,80 @@ watchEffect(() => {
|
|||
});
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<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-container" ref="developer_container">
|
||||
<ul class="developer-list">
|
||||
<li
|
||||
class="developer-item"
|
||||
v-for="(item, index) in developers"
|
||||
:key="index"
|
||||
>
|
||||
<div class="developer-item-wrapper">
|
||||
<el-image
|
||||
class="developer-img"
|
||||
:src="item.imgUrl"
|
||||
:preview-src-list="[item.imgUrl]"
|
||||
></el-image>
|
||||
<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)"
|
||||
:class="i !== 0 ? 'f-ml' : ''"
|
||||
size="small"
|
||||
:key="i"
|
||||
>{{ position }}</el-tag
|
||||
>
|
||||
</div>
|
||||
<div class="developer-info-homepage">
|
||||
<a :href="item.homepage" target="_blank">个人主页</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<el-image class="developer-indicator" :src="indicatorImgUrl" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="交流群" name="2">
|
||||
<div class="group">
|
||||
<el-image
|
||||
class="group-img"
|
||||
src="https://www.youlai.tech/files/blog/youlaiqun.png"
|
||||
:preview-src-list="[
|
||||
'https://www.youlai.tech/files/blog/youlaiqun.png'
|
||||
]"
|
||||
/>
|
||||
<div class="group-tip">
|
||||
群二维码过期可添加开发者微信由其拉入群，备注「有来」即可。
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="加入我们" name="3">
|
||||
<div class="join">
|
||||
<p>1. 人品良好、善于思考、执行力强；</p>
|
||||
<p>2. 熟悉项目，且至少给项目提交(过)一个PR；</p>
|
||||
<p>3. Git代码库活跃，个人主页或博客完善者优先；</p>
|
||||
<p>4. 过分优秀者我们会主动联系您...</p>
|
||||
<div class="join-way">申请加入方式: 添加开发者微信申请即可。</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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]'
|
||||
})
|
||||
}),
|
||||
|
||||
|
||||
]
|
||||
};
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue