refactor:views/components
This commit is contained in:
@@ -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;
|
||||
|
@@ -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
|
||||
|
@@ -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: [{
|
||||
|
@@ -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>
|
||||
|
Reference in New Issue
Block a user