perf:refine dashboard responsive

This commit is contained in:
Pan 2017-12-04 14:28:26 +08:00
parent 96a7035b1d
commit 8f9de5c641
5 changed files with 68 additions and 67 deletions

View File

@ -69,6 +69,7 @@ export default {
} }
</style> </style>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.box-card-component {
.box-card-header { .box-card-header {
position: relative; position: relative;
height: 220px; height: 220px;
@ -108,4 +109,10 @@ export default {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 14px; font-size: 14px;
} }
@media only screen and (max-width: 1510px){
.mallki-text{
display: none;
}
}
}
</style> </style>

View File

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

View File

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

View File

@ -1,6 +1,6 @@
<template> <template>
<el-table :data="list" style="width: 100%;padding-top: 15px;"> <el-table :data="list" style="width: 100%;padding-top: 15px;">
<el-table-column label="Order_No"> <el-table-column label="Order_No" show-overflow-tooltip>
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.order_no}} {{scope.row.order_no}}
</template> </template>
@ -15,11 +15,6 @@
<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> </template>
</el-table-column> </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> </el-table>
</template> </template>

View File

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