refactor:views/components

This commit is contained in:
Pan
2017-11-17 11:36:49 +08:00
parent 1286324214
commit 6d6a9df5b8
21 changed files with 154 additions and 143 deletions

View File

@@ -6,7 +6,7 @@
<div style="position:relative;">
<pan-thumb class="panThumb" :image="avatar"></pan-thumb>
<mallki className='mallki-text' text='vue-element-admin'></mallki>
<div class='progress-item'>
<div style="padding-top:35px;" class='progress-item'>
<span>Vue</span>
<el-progress :percentage="70"></el-progress>
</div>
@@ -18,6 +18,10 @@
<span>Css</span>
<el-progress :percentage="12"></el-progress>
</div>
<div class='progress-item'>
<span>ESlint</span>
<el-progress :percentage="100" status="success"></el-progress>
</div>
</div>
</el-card>
</template>
@@ -53,13 +57,7 @@ export default {
}
return statusMap[status]
}
},
created() {
},
methods: {
}
}
</script>
@@ -86,7 +84,7 @@ export default {
}
.mallki-text {
position: absolute;
top: -10px;
top: 0px;
right: 0px;
font-size: 20px;
font-weight: bold;
@@ -102,6 +100,9 @@ export default {
background-color: #fff;
margin: auto;
box-shadow: none!important;
/deep/ .pan-info{
box-shadow: none!important;
}
}
.progress-item {
margin-bottom: 10px;

View File

@@ -54,9 +54,9 @@ export default {
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
x: 'center',
y: 'bottom',
data: ['industries', 'technology', 'forex', 'gold', 'forecasts', 'markets']
left: 'center',
bottom: '10',
data: ['industries', 'technology', 'forex', 'gold', 'forecasts']
},
calculable: true,
series: [
@@ -71,8 +71,7 @@ export default {
{ value: 240, name: 'technology' },
{ value: 149, name: 'forex' },
{ value: 100, name: 'gold' },
{ value: 59, name: 'forecasts' },
{ value: 49, name: 'markets' }
{ value: 59, name: 'forecasts' }
],
animationEasing: 'cubicInOut',
animationDuration: 2600

View File

@@ -58,8 +58,8 @@ export default {
}
},
radar: {
radius: '70%',
center: ['50%', '44%'],
radius: '66%',
center: ['50%', '42%'],
splitNumber: 8,
splitArea: {
areaStyle: {
@@ -81,8 +81,8 @@ export default {
]
},
legend: {
left: 0,
bottom: 0,
left: 'center',
bottom: '10',
data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
},
series: [{

View File

@@ -1,29 +1,10 @@
<template>
<div class="dashboard-editor-container">
<github-corner></github-corner>
<!-- <el-row class="btn-group">
<el-col :span="4" class='text-center'>
<router-link class="pan-btn blue-btn" to="/components/index">Components</router-link>
</el-col>
<el-col :span="4" class='text-center'>
<router-link class="pan-btn light-blue-btn" to="/charts/index">Charts</router-link>
</el-col>
<el-col :span="4" class='text-center'>
<router-link class="pan-btn pink-btn" to="/excel/download">Excel</router-link>
</el-col>
<el-col :span="4" class='text-center'>
<router-link class="pan-btn green-btn" to="/example/table/complex-table">Table</router-link>
</el-col>
<el-col :span="4" class='text-center'>
<router-link class="pan-btn tiffany-btn" to="/form/edit-form">Form</router-link>
</el-col>
<el-col :span="4" class='text-center'>
<router-link class="pan-btn yellow-btn" to="/theme/index">Theme</router-link>
</el-col>
</el-row> -->
<el-row class="panel-group" :gutter="40">
<el-col :span="6">
<div class='card-panel no-margin-left' @click="handleSetLineChartData('newVisitis')">
<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" />
</div>
@@ -56,7 +37,7 @@
</div>
</el-col>
<el-col :span="6">
<div class='card-panel no-margin-right' @click="handleSetLineChartData('shoppings')">
<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" />
</div>
@@ -72,9 +53,9 @@
<line-chart :chart-data='lineChartData'></line-chart>
</el-row>
<el-row style="margin-top:30px;">
<el-row style="margin-top:30px;" :gutter="30">
<el-col :span="8">
<div class="chart-wrapper no-margin-left">
<div class="chart-wrapper">
<raddar-chart></raddar-chart>
</div>
</el-col>
@@ -84,7 +65,7 @@
</div>
</el-col>
<el-col :span="8">
<div class="chart-wrapper no-margin-right">
<div class="chart-wrapper">
<bar-chart></bar-chart>
</div>
</el-col>
@@ -100,15 +81,11 @@
<el-col :span="6">
<box-card></box-card>
</el-col>
</el-row>
</div>
</template>
<script>
import CountTo from 'vue-count-to'
import GithubCorner from '@/components/GithubCorner'
@@ -169,17 +146,10 @@ export default {
.dashboard-editor-container {
padding: 30px;
background-color: rgb(240, 242, 245);
.no-margin-left {
margin-left: 0!important;
}
.no-margin-right {
margin-right: 0!important;
}
.panel-group {
margin-top: 20px;
}
.card-panel {
// margin: 0 25px;
height: 108px;
cursor: pointer;
font-size: 12px;
@@ -247,11 +217,7 @@ export default {
}
.chart-wrapper {
background: #fff;
margin: 0 15px;
padding: 15px 15px 0;
}
.btn-group {
margin-bottom: 60px;
}
}
</style>