root
/
yibu
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

index css

main
1319612909 4 years ago
parent
ee454d469b
commit
afa85e1b94
3 changed files with 316 additions and 114 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 115
      web/src/style/main.scss
  2. 299
      web/src/view/dashboard/index.vue
  3. 2
      web/vue.config.js

115
web/src/style/main.scss
View File

@ -1231,3 +1231,118 @@ $mainHight: 100vh;
overflow: hidden; overflow: hidden;
height: 60px; height: 60px;
} }
.card{
background-color: #fff;
padding: 20px;
border-radius: 4px;
overflow: hidden;
.car-left{
height: 68px;
width: 70%;
float: left;
}
.car-right{
height: 68px;
width: 29%;
float: left;
.flow,
.user-number,
.feedback{
width: 24px;
height: 24px;
display: inline-block;
border-radius: 50%;
line-height: 24px;
text-align: center;
font-size: 13px;
margin-right: 5px;
}
.flow{
background-color: #fff7e8;
border-color: #feefd0;
color: #faad14;
}
.user-number{
background-color: #ecf5ff;
border-color: #d9ecff;
color: #409eff;
}
.feedback{
background-color: #eef9e8;
border-color: #dcf3d1;
color:#52c41a;
}
.car-item{
text-align: right;
b{
display: block;
}
}
}
.card-img{
width: 68px;
height: 68px;
display: inline-block;
float: left;
overflow: hidden;
img{
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.text{
height: 68px;
margin-left: 10px;
float: left;
margin-top: 14px;
h4{
font-size: 20px;
color: #262626;
font-weight: 500;
white-space: nowrap;
word-break: break-all;
text-overflow: ellipsis;
}
.tips-text{
color: #8c8c8c;
margin-top: 8px;
}
}
}
.shadow{
margin: 5px 0;
.grid-content{
background-color: #fff;
border-radius: 4px;
text-align: center;
padding: 15px 0;
cursor: pointer;
.el-icon{
width: 30px;
height: 30px;
font-size: 30px;
margin-bottom: 8px;
}
.el-icon-user{
color: #ff9c6e;
}
.el-icon-setting{
color: #69c0ff;
}
.el-icon-menu{
color: #b37feb;
}
.el-icon-cpu{
color:#ffd666;
}
.el-icon-document-checked{
color:#ff85c0;
}
}
}

299
web/src/view/dashboard/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="big"> <div class="big">
<div class="mid">
<!-- <div class="mid">
<el-row :gutter="32"> <el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="8"> <el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper"> <div class="chart-wrapper">
@ -18,9 +18,55 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</div>
<div class="top">
</div> -->
<!-- <div class="top">
<div id="main" class="chart-container"></div> <div id="main" class="chart-container"></div>
</div> -->
<div class="card">
<div class="car-left">
<div>
<span class="card-img"> <img :src="userInfo.headerImg" alt="" > </span>
<div class="text"><h4>早安，管理员， 请开始您一天的工作吧！</h4>
<p class="tips-text">
<i class="el-icon-sunny"></i>
<span>今日晴，18℃ - 28℃，出门记得防晒哦。</span>
</p>
</div>
</div>
</div>
<div class="car-right">
<el-row>
<el-col :span="8"><div class="car-item">
<span class="flow"><i class="el-icon-s-grid"></i></span>
<span>今日流量 </span>
<b>13260</b>
</div></el-col>
<el-col :span="8"><div class="car-item">
<span class="user-number">
<i class="el-icon-s-custom "></i>
</span>
<span>总用户 </span>
<b>48286</b>
</div></el-col>
<el-col :span="8"><div class="car-item ">
<span class="feedback">
<i class="el-icon-star-on"></i>
</span>
<span>好评率 </span>
<b>98%</b>
</div></el-col>
</el-row>
</div>
</div>
<div class="shadow">
<el-row :gutter="20">
<el-col :span="4" v-for="(card,key) in toolCards" :key="key" @click.native="toTarget(card.name)">
<div class="grid-content">
<i :class="card.icon"></i>
<p>{{card.label}}</p>
</div>
</el-col>
</el-row>
</div> </div>
<div class="bottom"> <div class="bottom">
<el-row :gutter="32"> <el-row :gutter="32">
@ -42,127 +88,167 @@
<script> <script>
import echarts from 'echarts' import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import RaddarChart from "./component/RaddarChart"
import stackMap from "./component/stackMap"
import Sunburst from "./component/Sunburst"
// require('echarts/theme/macarons') // echarts theme
// import RaddarChart from "./component/RaddarChart"
// import stackMap from "./component/stackMap"
// import Sunburst from "./component/Sunburst"
import musicPlayer from "./component/musicPlayer" import musicPlayer from "./component/musicPlayer"
import TodoList from "./component/todoList" import TodoList from "./component/todoList"
import { mapGetters } from 'vuex'
export default { export default {
name: 'Dashboard', name: 'Dashboard',
data() { data() {
return { return {
}
},
components:{
RaddarChart, //雷达图
stackMap, //堆叠图
Sunburst, //旭日图
musicPlayer, //音乐播放器
TodoList //TodoList
toolCards:[
{
label:"用户管理",
icon:"el-icon el-icon-user",
name:"user"
}, },
mounted() {
let myChart = echarts.init(document.getElementById('main'),'macarons');
// let stackMap = echarts.init(document.getElementById('stackMap'));
let option = {
legend: {},
tooltip: {
trigger: 'axis',
showContent: false
{
label:"角色管理",
icon:"el-icon el-icon-setting",
name:"authority"
}, },
dataset: {
source: [
['product', '2012', '2013', '2014', '2015', '2016', '2017','2018','2019','2020'],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 70.0,6.4, 65.2, 82.5],
['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1,2, 67.1, 69.2],
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5,65.1, 53.3, 83.8],
['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1,86.5, 92.1, 85.7]
]
{
label:"菜单管理",
icon:"el-icon el-icon-menu",
name:"menu"
}, },
xAxis: {
type: 'category',
axisLabel: {
show: true,
textStyle: {
color: 'rgb(192,192,192)', //更改坐标轴文字颜色
fontSize : 14 //更改坐标轴文字大小
}
{
label:"代码生成器",
icon:"el-icon el-icon-cpu",
name:"autoCode"
}, },
axisTick: {
show: false
{
label:"表单生成器",
icon:"el-icon el-icon-document-checked",
name:"formCreate"
}, },
axisLine:{
lineStyle:{
color:'rgb(192,192,192)' //更改坐标轴颜色
{
label:"关于我们",
icon:"el-icon el-icon-user",
name:"about"
} }
},
},
yAxis: {
gridIndex:0,
axisLabel: {
show: true,
textStyle: {
color: 'rgb(192,192,192)', //更改坐标轴文字颜色
fontSize: 14 //更改坐标轴文字大小
]
} }
}, },
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgb(192,192,192)' //更改坐标轴颜色
}
}
computed: {
...mapGetters('user', ['userInfo'])
}, },
grid: {top: '55%'},
series: [
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{
type: 'pie',
id: 'pie',
radius: '30%',
center: ['50%', '25%'],
label: {
formatter: '{b}: {@2012} ({d}%)'
components:{
musicPlayer, //音乐播放器
TodoList, //TodoList
// RaddarChart, //雷达图
// stackMap, //堆叠图
// Sunburst, //旭日图
}, },
encode: {
itemName: 'product',
value: '2012',
tooltip: '2012'
}
methods:{
toTarget(name){
this.$router.push({name})
} }
]
};
//点记标记点时的动效
myChart.on('updateAxisPointer', function (event) {
var xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
var dimension = xAxisInfo.value + 1;
myChart.setOption({
series: {
id: 'pie',
label: {
formatter: '{b}: {@[' + dimension + ']} ({d}%)'
}, },
encode: {
value: dimension,
tooltip: dimension
}
}
});
}
});
// mounted() {
// let myChart = echarts.init(document.getElementById('main'),'macarons');
// // let stackMap = echarts.init(document.getElementById('stackMap'));
// let option = {
// legend: {},
// tooltip: {
// trigger: 'axis',
// showContent: false
// },
// dataset: {
// source: [
// ['product', '2012', '2013', '2014', '2015', '2016', '2017','2018','2019','2020'],
// ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 70.0,6.4, 65.2, 82.5],
// ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1,2, 67.1, 69.2],
// ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5,65.1, 53.3, 83.8],
// ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1,86.5, 92.1, 85.7]
// ]
// },
// xAxis: {
// type: 'category',
// axisLabel: {
// show: true,
// textStyle: {
// color: 'rgb(192,192,192)', //更改坐标轴文字颜色
// fontSize : 14 //更改坐标轴文字大小
// }
// },
// axisTick: {
// show: false
// },
// axisLine:{
// lineStyle:{
// color:'rgb(192,192,192)' //更改坐标轴颜色
// }
// },
// },
// yAxis: {
// gridIndex:0,
// axisLabel: {
// show: true,
// textStyle: {
// color: 'rgb(192,192,192)', //更改坐标轴文字颜色
// fontSize: 14 //更改坐标轴文字大小
// }
// },
// axisTick: {
// show: false
// },
// axisLine: {
// lineStyle: {
// color: 'rgb(192,192,192)' //更改坐标轴颜色
// }
// }
// },
// grid: {top: '55%'},
// series: [
// {type: 'line', smooth: true, seriesLayoutBy: 'row'},
// {type: 'line', smooth: true, seriesLayoutBy: 'row'},
// {type: 'line', smooth: true, seriesLayoutBy: 'row'},
// {type: 'line', smooth: true, seriesLayoutBy: 'row'},
// {
// type: 'pie',
// id: 'pie',
// radius: '30%',
// center: ['50%', '25%'],
// label: {
// formatter: '{b}: {@2012} ({d}%)'
// },
// encode: {
// itemName: 'product',
// value: '2012',
// tooltip: '2012'
// }
// }
// ]
// };
// //点记标记点时的动效
// myChart.on('updateAxisPointer', function (event) {
// var xAxisInfo = event.axesInfo[0];
// if (xAxisInfo) {
// var dimension = xAxisInfo.value + 1;
// myChart.setOption({
// series: {
// id: 'pie',
// label: {
// formatter: '{b}: {@[' + dimension + ']} ({d}%)'
// },
// encode: {
// value: dimension,
// tooltip: dimension
// }
// }
// });
// }
// });
window.addEventListener('resize',function() {myChart.resize()});
myChart.setOption(option);
// window.addEventListener('resize',function() {myChart.resize()});
// myChart.setOption(option);
}
// }
} }
</script> </script>
@ -170,7 +256,8 @@ export default {
.big{ .big{
margin:100px 0 0 0; margin:100px 0 0 0;
padding-top: 0; padding-top: 0;
background-color: rgb(243,243,243);;
background-color: rgb(243,243,243);
padding-top: 15px;
.top{ .top{
width: 100%; width: 100%;
height: 360px; height: 360px;
@ -197,7 +284,7 @@ export default {
.bottom{ .bottom{
width: 100%; width: 100%;
height: 300px; height: 300px;
margin: 20px 0;
// margin: 20px 0;
.el-row{ .el-row{
margin-right: 4px !important; margin-right: 4px !important;
} }

2
web/vue.config.js
View File

@ -23,7 +23,7 @@ module.exports = {
// 把key的路径代理到target位置 // 把key的路径代理到target位置
// detail: https://cli.vuejs.org/config/#devserver-proxy // detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: { //需要代理的路径 例如 '/api' [process.env.VUE_APP_BASE_API]: { //需要代理的路径 例如 '/api'
target: `http://127.0.0.1:8888`, //代理到 目标路径
target: `http://139.9.113.229:8888/`, //代理到 目标路径
changeOrigin: true, changeOrigin: true,
pathRewrite: { // 修改路径数据 pathRewrite: { // 修改路径数据
['^' + process.env.VUE_APP_BASE_API]: '' // 举例 '^/api:""' 把路径中的/api字符串删除 ['^' + process.env.VUE_APP_BASE_API]: '' // 举例 '^/api:""' 把路径中的/api字符串删除

Write Preview
Loading…
Cancel
Save