tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 首页优化

Browse Source 
Former-commit-id: 3a14cf05eea6ecea80ef803990cdae051a0167ca
This commit is contained in:
郝先瑞
2022-04-25 00:05:40 +08:00
parent 72b871a898
commit 99c5b19b5f
10 changed files with 31 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/dashboard/components/Chart/BarChart.vue
View File

@@ -48,7 +48,7 @@ function initChart() {
barChart.setOption({
title: {
show: true,
text: '业绩总览(2021年)',
text: '业绩总览',
x: 'center',
padding: 15,
textStyle: {

2
src/views/dashboard/components/Chart/PieChart.vue
View File

@@ -47,7 +47,7 @@ function initChart() {
pieChart.setOption({
title: {
show: true,
text: '产品分类总览南丁格尔饼图',
text: '产品分类总览',
x: 'center',
padding: 15,
textStyle: {

2
src/views/dashboard/components/Chart/RadarChart.vue
View File

@@ -47,7 +47,7 @@ function initChart() {
radarChart.setOption({
title: {
show: true,
text: '订单状态总雷达图',
text: '订单状态统计',
x: 'center',
padding: 15,
textStyle: {

30
src/views/dashboard/components/Team/index.vue
View File

@@ -6,26 +6,17 @@
<span class="fw-b">有来开源组织 & 技术团队</span>
</template>
<el-tabs v-model="teamActiveName">
<el-tab-pane label="开发者「无回」" name="developer">
<el-tab-pane label="开发者" name="developer">
<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>
<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>
<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>
@@ -38,13 +29,10 @@
</div>
</el-tab-pane>
<el-tab-pane label="交流群「有来」" name="2">
<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']"
/>
<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>
@@ -73,13 +61,13 @@ const state = reactive({
{
imgUrl: "https://s2.loli.net/2022/04/06/yRx8uzj4emA5QVr.jpg",
nickname: "郝先瑞",
positions: ["Vue3", "Java", "文档"],
positions: ["后端", "前端", "文档"],
homepage: "https://www.cnblogs.com/haoxianrui/",
},
{
imgUrl: "https://s2.loli.net/2022/04/06/cQihGv9uPsTjXk1.jpg",
nickname: "张川",
positions: ["Vue3", "Java"],
positions: ["后端", "前端"],
homepage: "https://blog.csdn.net/qq_41595149",
},
{

28
src/views/dashboard/index.vue
View File

@@ -3,8 +3,8 @@
<github-corner class="github-corner" />
<!-- 数据 -->
<el-row :gutter="40" class="card-panel-col">
<!-- <el-col :xs="24" :lg="6" class="card-panel-col">
<el-row :gutter="40" class="card-panel__col">
<!-- <el-col :xs="24" :lg="6" class="card-panel__col">
<div class="card-panel">
<div class="card-panel-icon-wrapper" style="margin-top: -10px">
<el-image style="width:200px; height: 100px"
@@ -22,10 +22,10 @@
</div>
</el-col>-->
<el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
<svg-icon icon-class="uv" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">访问数</div>
@@ -34,7 +34,7 @@
</div>
</el-col>
<el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="message" class-name="card-panel-icon" />
@@ -46,18 +46,18 @@
</div>
</el-col>
<el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="money" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">支付金额</div>
<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="card-panel-col">
<el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-shopping">
<svg-icon icon-class="shopping" class-name="card-panel-icon" />
@@ -73,29 +73,29 @@
<!-- 项目 + 团队成员介绍 -->
<el-row :gutter="40">
<!-- 项目介绍 -->
<el-col :md="12" :lg="12" class="card-panel-col">
<el-col :md="12" :lg="12" class="card-panel__col">
<Project />
</el-col>
<!-- 团队介绍 -->
<el-col :md="12" :lg="12" class="card-panel-col">
<el-col :md="12" :lg="12" class="card-panel__col">
<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="card-panel__col">
<BarChart id="barChart" height="400px" width="100%" class="chart-container" />
</el-col>
<el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
<el-col :xs="24" :sm="12" :lg="8" class="card-panel__col">
<PieChart id="pieChart" height="400px" width="100%" class="chart-container" />
<!--订单漏斗图-->
<!--<FunnelChart id="funnelChart" height="400px" width="100%" class="chart-container"/>-->
</el-col>
<el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
<el-col :xs="24" :sm="12" :lg="8" class="card-panel__col">
<RadarChart id="radarChart" height="400px" width="100%" class="chart-container" />
</el-col>
</el-row>
@@ -160,7 +160,7 @@ import Team from "./components/Team/index.vue";
}
}
.card-panel-col {
.card-panel__col {
margin-bottom: 12px;
}