refactor: 控制台简化
Former-commit-id: bb17a4f93723eedcfce015b14d2d0c9fe5c48662
This commit is contained in:
haoxr
@@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<el-color-picker
|
||||
:predefine="[
|
||||
'#409EFF',
|
||||
'#1890ff',
|
||||
'#304156',
|
||||
'#212121',
|
||||
'#11a983',
|
||||
'#13c2c2',
|
||||
'#6959CD',
|
||||
'#f5222d'
|
||||
]"
|
||||
class="theme-picker"
|
||||
popper-class="theme-picker-dropdown"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style>
|
||||
.theme-message,
|
||||
.theme-picker-dropdown {
|
||||
z-index: 9999 !important;
|
||||
}
|
||||
|
||||
.theme-picker .el-color-picker__trigger {
|
||||
height: 26px !important;
|
||||
width: 26px !important;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.theme-picker-dropdown .el-color-dropdown__link-btn {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@@ -1,15 +0,0 @@
|
||||
import { Directive } from 'vue';
|
||||
|
||||
/**
|
||||
* 按钮防抖
|
||||
*/
|
||||
export const deBounce: Directive = {
|
||||
mounted(el: HTMLElement) {
|
||||
el.addEventListener('click', () => {
|
||||
el.classList.add('is-disabled');
|
||||
setTimeout(() => {
|
||||
el.classList.remove('is-disabled');
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
};
|
||||
1
src/types/components.d.ts
vendored
1
src/types/components.d.ts
vendored
@@ -57,6 +57,7 @@ declare module '@vue/runtime-core' {
|
||||
IEpPlus: typeof import('~icons/ep/plus')['default']
|
||||
IEpRefresh: typeof import('~icons/ep/refresh')['default']
|
||||
IEpSearch: typeof import('~icons/ep/search')['default']
|
||||
IEpSetting: typeof import('~icons/ep/setting')['default']
|
||||
IEpTop: typeof import('~icons/ep/top')['default']
|
||||
LangSelect: typeof import('./../components/LangSelect/index.vue')['default']
|
||||
MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default']
|
||||
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
onActivated,
|
||||
onBeforeUnmount,
|
||||
onDeactivated,
|
||||
onMounted,
|
||||
onMounted
|
||||
} from 'vue';
|
||||
import { init, EChartsOption } from 'echarts';
|
||||
import * as echarts from 'echarts';
|
||||
@@ -18,22 +18,22 @@ import resize from '@/utils/resize';
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
default: 'barChart',
|
||||
default: 'barChart'
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: '',
|
||||
default: ''
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px',
|
||||
required: true,
|
||||
required: true
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px',
|
||||
required: true,
|
||||
},
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const { mounted, chart, beforeDestroy, activated, deactivated } = resize();
|
||||
@@ -51,37 +51,37 @@ function initChart() {
|
||||
fontSize: 18,
|
||||
fontStyle: 'normal',
|
||||
fontWeight: 'bold',
|
||||
color: '#337ecc',
|
||||
},
|
||||
color: '#337ecc'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '10%',
|
||||
containLabel: true,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999',
|
||||
},
|
||||
},
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
x: 'center',
|
||||
y: 'bottom',
|
||||
data: ['收入', '毛利润', '收入增长率', '利润增长率'],
|
||||
data: ['收入', '毛利润', '收入增长率', '利润增长率']
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [ '浙江', '北京', '上海', '广东','深圳'],
|
||||
data: ['浙江', '北京', '上海', '广东', '深圳'],
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
type: 'shadow'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
@@ -90,8 +90,8 @@ function initChart() {
|
||||
max: 10000,
|
||||
interval: 2000,
|
||||
axisLabel: {
|
||||
formatter: '{value} ',
|
||||
},
|
||||
formatter: '{value} '
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
@@ -99,56 +99,56 @@ function initChart() {
|
||||
max: 100,
|
||||
interval: 20,
|
||||
axisLabel: {
|
||||
formatter: '{value}%',
|
||||
},
|
||||
},
|
||||
formatter: '{value}%'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '收入',
|
||||
type: 'bar',
|
||||
data: [7000, 7100, 7200, 7300,7400],
|
||||
data: [7000, 7100, 7200, 7300, 7400],
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#83bff6' },
|
||||
{ offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: '#188df0' },
|
||||
]),
|
||||
},
|
||||
{ offset: 1, color: '#188df0' }
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '毛利润',
|
||||
type: 'bar',
|
||||
data: [ 8000,8200, 8400, 8600, 8800],
|
||||
data: [8000, 8200, 8400, 8600, 8800],
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#25d73c' },
|
||||
{ offset: 0.5, color: '#1bc23d' },
|
||||
{ offset: 1, color: '#179e61' },
|
||||
]),
|
||||
},
|
||||
{ offset: 1, color: '#179e61' }
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '收入增长率',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: [ 60,65, 70, 75, 80],
|
||||
data: [60, 65, 70, 75, 80],
|
||||
itemStyle: {
|
||||
color: '#67C23A',
|
||||
},
|
||||
color: '#67C23A'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '利润增长率',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: [ 70,75, 80, 85, 90],
|
||||
data: [70, 75, 80, 85, 90],
|
||||
itemStyle: {
|
||||
color: '#409EFF',
|
||||
},
|
||||
},
|
||||
],
|
||||
color: '#409EFF'
|
||||
}
|
||||
}
|
||||
]
|
||||
} as EChartsOption);
|
||||
chart.value = barChart;
|
||||
}
|
||||
@@ -1,119 +0,0 @@
|
||||
<template>
|
||||
<div class="component-container">
|
||||
<el-card class="project-card">
|
||||
<template #header>
|
||||
<span class="fw-b">有来项目简介</span>
|
||||
</template>
|
||||
<div class="project-card__main">
|
||||
<!-- 项目简介 -->
|
||||
<el-link target="_blank" type="primary" href="https://gitee.com/haoxr">
|
||||
youlai-mall
|
||||
</el-link>
|
||||
是基于Spring Boot 2.7、Spring Cloud 2021 & Alibaba
|
||||
2021、Vue3、Element-Plus、uni-app等主流技术栈构建的一整套全栈开源商城项目，
|
||||
涉及
|
||||
<el-link
|
||||
target="_blank"
|
||||
type="primary"
|
||||
href="https://gitee.com/youlaitech/youlai-mall"
|
||||
>后端微服务</el-link
|
||||
>
|
||||
、
|
||||
<el-link
|
||||
target="_blank"
|
||||
type="success"
|
||||
href="https://gitee.com/youlaitech/youlai-mall-admin"
|
||||
>前端管理</el-link
|
||||
>
|
||||
、
|
||||
<el-link
|
||||
target="_blank"
|
||||
type="warning"
|
||||
href="https://gitee.com/youlaitech/youlai-mall-weapp"
|
||||
>微信小程序
|
||||
</el-link>
|
||||
和
|
||||
<el-link
|
||||
target="_blank"
|
||||
type="danger"
|
||||
href="https://gitee.com/youlaitech/youlai-mall-weapp"
|
||||
>APP应用</el-link
|
||||
>
|
||||
等多端的开发。
|
||||
<el-divider />
|
||||
|
||||
<!-- 源码地址 -->
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="6">
|
||||
<el-badge value="免费开源" class="fw-b"> 项目地址 </el-badge>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-link
|
||||
target="_blank"
|
||||
type="warning"
|
||||
href="https://www.youlai.tech/"
|
||||
>官方文档</el-link
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-link
|
||||
target="_blank"
|
||||
type="primary"
|
||||
href="https://github.com/youlaitech"
|
||||
>Github</el-link
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-link
|
||||
target="_blank"
|
||||
type="success"
|
||||
href="https://gitee.com/youlaiorg"
|
||||
>码云</el-link
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
<!-- 技术栈 -->
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="6" class="fw-b"> 后端技术栈 </el-col>
|
||||
<el-col :span="18">
|
||||
Spring Boot、Spring Cloud & Alibaba、Spring Security
|
||||
OAuth2、JWT、Elastic Stack 、K8s...
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="6" class="fw-b"> 前端技术栈 </el-col>
|
||||
<el-col :span="18">
|
||||
Vue3、TypeScript、Element-Plus、uni-app、vue3-element-admin ...
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'index'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.component-container {
|
||||
.project-card {
|
||||
font-size: 14px;
|
||||
|
||||
&__main {
|
||||
line-height: 28px;
|
||||
height: 320px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.fw-b {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,237 +0,0 @@
|
||||
|
||||
<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>
|
||||
<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>
|
||||
.team-card {
|
||||
font-size: 14px;
|
||||
|
||||
.el-tabs__content {
|
||||
.el-tab-pane {
|
||||
height: 265px;
|
||||
}
|
||||
}
|
||||
|
||||
.developer-container {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.developer-list {
|
||||
display: inline-flex;
|
||||
overflow: hidden;
|
||||
justify-content: flex-start;
|
||||
padding: 10px;
|
||||
|
||||
.developer-item {
|
||||
&:not(:first-child) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
width: 180px;
|
||||
min-width: 180px;
|
||||
|
||||
.developer-item-wrapper {
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
border-radius: 5px;
|
||||
box-shadow: var(--el-box-shadow-lighter);
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
|
||||
.developer-img {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.developer-info {
|
||||
padding: 6px;
|
||||
font-size: 14px;
|
||||
|
||||
.developer-info-position {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.developer-info-homepage {
|
||||
margin-top: 16px;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
color: var(--el-color-primary);
|
||||
border: 1px solid var(--el-color-primary);
|
||||
border-radius: 5px;
|
||||
background: var(--el-color-primary-light-9);
|
||||
&:hover {
|
||||
background: var(--el-color-primary);
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.developer-indicator {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.join {
|
||||
overflow: hidden;
|
||||
p {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&-way {
|
||||
margin-top: 20px;
|
||||
color: #409eff;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.group {
|
||||
&-img {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fw-b {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.f-ml {
|
||||
margin-left: 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -6,81 +6,86 @@ export default { name: 'Dashboard' };
|
||||
// 组件引用
|
||||
import GithubCorner from '@/components/GithubCorner/index.vue';
|
||||
import SvgIcon from '@/components/SvgIcon/index.vue';
|
||||
import BarChart from './components/Chart/BarChart.vue';
|
||||
import PieChart from './components/Chart/PieChart.vue';
|
||||
import RadarChart from './components/Chart/RadarChart.vue';
|
||||
import BarChart from './components/BarChart.vue';
|
||||
import PieChart from './components/PieChart.vue';
|
||||
import RadarChart from './components/RadarChart.vue';
|
||||
|
||||
import Project from './components/Project/index.vue';
|
||||
import Team from './components/Team/index.vue';
|
||||
import CountUp from 'vue-countup-v3';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<!--github-->
|
||||
<github-corner class="github-corner" />
|
||||
|
||||
<!-- 数据 -->
|
||||
<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" />
|
||||
<div class="data-box">
|
||||
<div
|
||||
class="text-[#40c9c6] hover:!text-white hover:bg-[#40c9c6] p-3 rounded"
|
||||
>
|
||||
<svg-icon icon-class="uv" size="3em" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">访问数</div>
|
||||
<div class="card-panel-num">1000</div>
|
||||
<div class="flex flex-col space-y-3">
|
||||
<div class="text-[var(--el-text-color-secondary)]">访问数</div>
|
||||
<div class="text-lg">
|
||||
<count-up :end-val="2000"></count-up>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!--消息数-->
|
||||
<el-col :xs="24" :sm="12" :lg="6" class="mb-[12px]">
|
||||
<div class="data-box">
|
||||
<div
|
||||
class="text-[#36a3f7] hover:!text-white hover:bg-[#36a3f7] p-3 rounded"
|
||||
>
|
||||
<svg-icon icon-class="message" size="3em" />
|
||||
</div>
|
||||
<div class="flex flex-col space-y-3">
|
||||
<div class="text-[var(--el-text-color-secondary)]">消息数</div>
|
||||
<div class="text-lg">
|
||||
<count-up :end-val="2000"></count-up>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-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" />
|
||||
<div class="data-box">
|
||||
<div
|
||||
class="text-[#f4516c] hover:!text-white hover:bg-[#f4516c] p-3 rounded"
|
||||
>
|
||||
<svg-icon icon-class="money" size="3em" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">消息数</div>
|
||||
<div class="card-panel-num">1000</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-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" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">收入金额</div>
|
||||
<div class="card-panel-num">1000</div>
|
||||
<div class="flex flex-col space-y-3">
|
||||
<div class="text-[var(--el-text-color-secondary)]">收入金额</div>
|
||||
<div class="text-lg">
|
||||
<count-up :end-val="2000"></count-up>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-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" />
|
||||
<div class="data-box">
|
||||
<div
|
||||
class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded"
|
||||
>
|
||||
<svg-icon icon-class="shopping" size="3em" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">订单数</div>
|
||||
<div class="card-panel-num">1000</div>
|
||||
<div class="flex flex-col space-y-3">
|
||||
<div class="text-[var(--el-text-color-secondary)]">订单数</div>
|
||||
<div class="text-lg">
|
||||
<count-up :end-val="2000"></count-up>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 项目 + 团队成员介绍 -->
|
||||
<el-row :gutter="40">
|
||||
<!-- 项目介绍 -->
|
||||
<el-col :md="12" :lg="12" class="mb-[12px]">
|
||||
<Project />
|
||||
</el-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="mb-[12px]">
|
||||
@@ -88,7 +93,7 @@ import Team from './components/Team/index.vue';
|
||||
id="barChart"
|
||||
height="400px"
|
||||
width="100%"
|
||||
class="chart-container"
|
||||
class="bg-[var(--el-bg-color-overlay)]"
|
||||
/>
|
||||
</el-col>
|
||||
|
||||
@@ -97,7 +102,7 @@ import Team from './components/Team/index.vue';
|
||||
id="pieChart"
|
||||
height="400px"
|
||||
width="100%"
|
||||
class="chart-container"
|
||||
class="bg-[var(--el-bg-color-overlay)]"
|
||||
/>
|
||||
</el-col>
|
||||
|
||||
@@ -106,7 +111,7 @@ import Team from './components/Team/index.vue';
|
||||
id="radarChart"
|
||||
height="400px"
|
||||
width="100%"
|
||||
class="chart-container"
|
||||
class="bg-[var(--el-bg-color-overlay)]"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -126,113 +131,16 @@ import Team from './components/Team/index.vue';
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.box-center {
|
||||
margin: 0 auto;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
.box-center {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.user-role {
|
||||
padding-top: 10px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.box-social {
|
||||
padding-top: 30px;
|
||||
|
||||
.el-table {
|
||||
border-top: 1px solid var(--el-border-color-light);
|
||||
}
|
||||
}
|
||||
|
||||
.user-follow {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-panel {
|
||||
height: 108px;
|
||||
.data-box {
|
||||
font-weight: bold;
|
||||
padding: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
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;
|
||||
}
|
||||
|
||||
.icon-user {
|
||||
color: #40c9c6;
|
||||
}
|
||||
|
||||
.icon-money {
|
||||
color: #f4516c;
|
||||
}
|
||||
|
||||
.icon-shopping {
|
||||
color: #34bfa3;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.card-panel-icon-wrapper {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.icon-user {
|
||||
background: #40c9c6;
|
||||
}
|
||||
|
||||
.icon-message {
|
||||
background: #36a3f7;
|
||||
}
|
||||
|
||||
.icon-money {
|
||||
background: #f4516c;
|
||||
}
|
||||
|
||||
.icon-shopping {
|
||||
background: #34bfa3;
|
||||
}
|
||||
}
|
||||
|
||||
.card-panel-icon-wrapper {
|
||||
float: left;
|
||||
margin: 14px 0 0 14px;
|
||||
padding: 16px;
|
||||
transition: all 0.38s ease-out;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.card-panel-description {
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
margin: 26px 20px 0;
|
||||
|
||||
.card-panel-text {
|
||||
line-height: 18px;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-panel-num {
|
||||
font-size: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
background: var(--el-bg-color-overlay);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user