jinql
/
vue-element-admin
mirror of https://github.com/PanJiaChen/vue-element-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

perf:refine dashboard responsive

Browse Source
pull/315/merge
Pan 7 years ago
parent 96a7035b1d
commit 8f9de5c641
5 changed files with 66 additions and 65 deletions
Show Stats Download Patch File Download Diff File

75
src/views/dashboard/admin/components/BoxCard.vue
Unescape View File

@ -69,43 +69,50 @@ export default {
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.box-card-header {
position: relative;
height: 220px;
img {
width: 100%;
height: 100%;
transition: all 0.2s linear;
&:hover {
transform: scale(1.1, 1.1);
filter: contrast(130%);
.box-card-component {
.box-card-header {
position: relative;
height: 220px;
img {
width: 100%;
height: 100%;
transition: all 0.2s linear;
&:hover {
transform: scale(1.1, 1.1);
filter: contrast(130%);
}
}
}
}
.mallki-text {
position: absolute;
top: 0px;
right: 0px;
font-size: 20px;
font-weight: bold;
}
.panThumb {
z-index: 100;
height: 70px!important;
width: 70px!important;
position: absolute!important;
top: -45px;
left: 0px;
border: 5px solid #ffffff;
background-color: #fff;
margin: auto;
box-shadow: none!important;
/deep/ .pan-info{
.mallki-text {
position: absolute;
top: 0px;
right: 0px;
font-size: 20px;
font-weight: bold;
}
.panThumb {
z-index: 100;
height: 70px!important;
width: 70px!important;
position: absolute!important;
top: -45px;
left: 0px;
border: 5px solid #ffffff;
background-color: #fff;
margin: auto;
box-shadow: none!important;
/deep/ .pan-info {
box-shadow: none!important;
}
}
.progress-item {
margin-bottom: 10px;
font-size: 14px;
}
@media only screen and (max-width: 1510px){
.mallki-text{
display: none;
}
}
}
.progress-item {
margin-bottom: 10px;
font-size: 14px;
}
</style>

14
src/views/dashboard/admin/components/PanelGroup.vue
Unescape View File

@ -1,6 +1,6 @@
<template>
<el-row class="panel-group" :gutter="40">
<el-col :span="6">
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class='card-panel' @click="handleSetLineChartData('newVisitis')">
<div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
@ -11,7 +11,7 @@
</div>
</div>
</el-col>
<el-col :span="6">
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('messages')">
<div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="message" class-name="card-panel-icon" />
@ -22,7 +22,7 @@
</div>
</div>
</el-col>
<el-col :span="6">
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('purchases')">
<div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="money" class-name="card-panel-icon" />
@ -33,7 +33,7 @@
</div>
</div>
</el-col>
<el-col :span="6">
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('shoppings')">
<div class="card-panel-icon-wrapper icon-shoppingCard">
<svg-icon icon-class="shoppingCard" class-name="card-panel-icon" />
@ -64,7 +64,10 @@ export default {
<style rel="stylesheet/scss" lang="scss" scoped>
.panel-group {
margin-top: 20px;
margin-top: 18px;
.card-panel-col{
margin-bottom: 32px;
}
.card-panel {
height: 108px;
cursor: pointer;
@ -132,5 +135,4 @@ export default {
}
}
}
</style>

4
src/views/dashboard/admin/components/TodoList/index.scss
Unescape View File

@ -246,16 +246,12 @@
margin: 0;
padding: 0;
list-style: none;
position: absolute;
right: 0;
left: -20px;
}
.filters li {
display: inline;
}
.filters li a {
color: inherit;
margin: 3px;
font-size: 12px;
padding: 3px 7px;
text-decoration: none;

13
src/views/dashboard/admin/components/TransactionTable.vue
Unescape View File

@ -1,6 +1,6 @@
<template>
<el-table :data="list" style="width: 100%;padding-top: 15px;" >
<el-table-column label="Order_No">
<el-table :data="list" style="width: 100%;padding-top: 15px;">
<el-table-column label="Order_No" show-overflow-tooltip>
<template slot-scope="scope">
{{scope.row.order_no}}
</template>
@ -10,16 +10,11 @@
¥{{scope.row.price | toThousandslsFilter}}
</template>
</el-table-column>
<el-table-column label="Status" width="100" align="center">
<el-table-column label="Status" width="100" align="center">
<template slot-scope="scope">
<el-tag :type="scope.row.status | statusFilter"> {{scope.row.status}}</el-tag>
<el-tag :type="scope.row.status | statusFilter"> {{scope.row.status}}</el-tag>
</template>
</el-table-column>
<!-- <el-table-column label="Username" width="135" align="center">
<template slot-scope="scope">
{{scope.row.username}}
</template>
</el-table-column> -->
</el-table>
</template>

25
src/views/dashboard/admin/index.vue
Unescape View File

@ -4,36 +4,36 @@
<panel-group @handleSetLineChartData="handleSetLineChartData"></panel-group>
<el-row style="margin-top:30px;background:#fff;padding:15px 15px 0;">
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<line-chart :chart-data="lineChartData"></line-chart>
</el-row>
<el-row style="margin-top:30px;" :gutter="30">
<el-col :span="8">
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<raddar-chart></raddar-chart>
</div>
</el-col>
<el-col :span="8">
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<pie-chart></pie-chart>
</div>
</el-col>
<el-col :span="8">
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<bar-chart></bar-chart>
</div>
</el-col>
</el-row>
<el-row style="margin-top:30px;">
<el-col :span="12" style="padding-right:8px;">
<el-row :gutter="8">
<el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
<transaction-table></transaction-table>
</el-col>
<el-col :span="6">
<todo-list style="margin:0 8px;"></todo-list>
<el-col :xs="{span: 12}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 5}">
<todo-list></todo-list>
</el-col>
<el-col :span="6">
<el-col :xs="{span: 12}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 5}">
<box-card></box-card>
</el-col>
</el-row>
@ -99,11 +99,12 @@ export default {
<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
padding: 30px;
padding: 32px;
background-color: rgb(240, 242, 245);
.chart-wrapper {
background: #fff;
padding: 15px 15px 0;
padding: 16px 16px 0;
margin-bottom: 32px;
}
}
</style>

Write Preview
Loading…
Cancel
Save