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

refactor(dashboard/index.vue): 首页样式优化

Browse Source
This commit is contained in:
郝先瑞
2022-01-29 12:34:05 +08:00
parent 0a5113617b
commit 1c8a05092c
4 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/icons/svg/money.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB

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

@@ -70,7 +70,7 @@ function initChart() {
{ {
name: 'Nightingale Chart', name: 'Nightingale Chart',
type: 'pie', type: 'pie',
radius: [50, 150], radius: [50, 130],
center: ['50%', '50%'], center: ['50%', '50%'],
roseType: 'area', roseType: 'area',
itemStyle: { itemStyle: {

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

@@ -70,7 +70,7 @@ function initChart() {
}, },
radar: { radar: {
// shape: 'circle', // shape: 'circle',
radius: '70%', radius: '60%',
indicator: [ indicator: [
{ name: '家用电器', max: 6500 }, { name: '家用电器', max: 6500 },
{ name: '服装箱包', max: 16000 }, { name: '服装箱包', max: 16000 },

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

@@ -4,10 +4,10 @@
<!-- 数据 --> <!-- 数据 -->
<el-row :gutter="40" class="card-panel-col"> <el-row :gutter="40" class="card-panel-col">
<el-col :xs="12" :span="12" :lg="6"> <el-col :xs="24" :lg="6" class="card-panel-col">
<div class="card-panel"> <div class="card-panel">
<div class="card-panel-icon-wrapper" style="margin-top: -10px"> <div class="card-panel-icon-wrapper" style="margin-top: -10px">
<el-image style="width:180px; height: 100px" <el-image style="width:240px; height: 100px"
src="https://gitee.com/haoxr/image/raw/master/20210606213932.png"/> src="https://gitee.com/haoxr/image/raw/master/20210606213932.png"/>
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
@@ -22,7 +22,7 @@
</div> </div>
</el-col> </el-col>
<el-col :xs="12" :span="12" :lg="6" class="card-panel-col"> <el-col :xs="24" :lg="6" class="card-panel-col">
<div class="card-panel"> <div class="card-panel">
<div class="card-panel-icon-wrapper icon-people"> <div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="peoples" class-name="card-panel-icon"/> <svg-icon icon-class="peoples" class-name="card-panel-icon"/>
@@ -36,7 +36,7 @@
</div> </div>
</el-col> </el-col>
<el-col :xs="12" :span="12" :lg="6" class="card-panel-col"> <el-col :xs="24" :lg="6" class="card-panel-col">
<div class="card-panel"> <div class="card-panel">
<div class="card-panel-icon-wrapper icon-money"> <div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="money" class-name="card-panel-icon"/> <svg-icon icon-class="money" class-name="card-panel-icon"/>
@@ -49,7 +49,7 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :xs="12" :span="12" :lg="6" class="card-panel-col"> <el-col :xs="24" :lg="6" class="card-panel-col">
<div class="card-panel"> <div class="card-panel">
<div class="card-panel-icon-wrapper icon-shopping"> <div class="card-panel-icon-wrapper icon-shopping">
<svg-icon icon-class="shopping" class-name="card-panel-icon"/> <svg-icon icon-class="shopping" class-name="card-panel-icon"/>
@@ -68,12 +68,12 @@
<el-row :gutter="40"> <el-row :gutter="40">
<!-- 项目介绍 --> <!-- 项目介绍 -->
<el-col :md="12" :lg="12"> <el-col :md="12" :lg="12" class="card-panel-col">
<Project/> <Project/>
</el-col> </el-col>
<!-- 团队介绍 --> <!-- 团队介绍 -->
<el-col :md="12" :lg="12"> <el-col :md="12" :lg="12" class="card-panel-col">
<Team/> <Team/>
</el-col> </el-col>
</el-row> </el-row>
@@ -81,17 +81,17 @@
<!-- Echarts 图表 --> <!-- Echarts 图表 -->
<el-row :gutter="40" style="margin-top: 20px"> <el-row :gutter="40" style="margin-top: 20px">
<el-col :sm="24" :lg="8"> <el-col :sm="24" :lg="8" class="card-panel-col">
<BarChart id="barChart" height="400px" width="100%" class="chart-container"/> <BarChart id="barChart" height="400px" width="100%" class="chart-container"/>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :lg="8"> <el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
<PieChart id="pieChart" height="400px" width="100%" class="chart-container"/> <PieChart id="pieChart" height="400px" width="100%" class="chart-container"/>
<!--订单漏斗图--> <!--订单漏斗图-->
<!--<FunnelChart id="funnelChart" height="400px" width="100%" class="chart-container"/>--> <!--<FunnelChart id="funnelChart" height="400px" width="100%" class="chart-container"/>-->
</el-col> </el-col>
<el-col :xs="24" :sm="12" :lg="8"> <el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
<RadarChart id="radarChart" height="400px" width="100%" class="chart-container"/> <RadarChart id="radarChart" height="400px" width="100%" class="chart-container"/>
</el-col> </el-col>
</el-row> </el-row>
@@ -235,8 +235,8 @@ const nickname = computed(() => useUserStoreHook().nickname);
color: #f4516c; color: #f4516c;
.svg-icon { .svg-icon {
width: 3.2em !important; width: 3em !important;
height: 3.2em !important; height: 3em !important;
} }
} }
@@ -251,7 +251,7 @@ const nickname = computed(() => useUserStoreHook().nickname);
.card-panel-icon-wrapper { .card-panel-icon-wrapper {
float: left; float: left;
margin: 14px 0 0 14px; margin: 14px 0 0 6px;
padding: 16px; padding: 16px;
transition: all 0.38s ease-out; transition: all 0.38s ease-out;
border-radius: 6px; border-radius: 6px;