Skip to content

G
gin-vue-admin

FLIPPED-AURORA / gin-vue-admin
大约 1 年 前同步成功

通知 342
Star 18155
Fork 5506
G
gin-vue-admin

体验新版 GitCode，发现更多精彩内容 >>

提交 afa85e1b 编写于 作者: 1 1319612909
浏览文件
操作

index css

上级 ee454d46
隐藏空白更改
内联 并排
Showing with 316 addition and 114 deletion
web/src/style/main.scss
浏览文件 @ afa85e1b
......@@ -1231,3 +1231,118 @@ $mainHight: 100vh;
overflow: hidden;
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;
}
}
}
web/src/view/dashboard/index.vue
浏览文件 @ afa85e1b
<template>
<div class="big">
<div class="mid">
<!-- <div class="mid">
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
......@@ -18,10 +18,56 @@
</div>
</el-col>
</el-row>
</div>
<div class="top">
</div> -->
<!-- <div class="top">
<div id="main" class="chart-container"></div>
</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 class="bottom">
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="12">
......@@ -42,127 +88,167 @@
<script>
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 TodoList from "./component/todoList"
import { mapGetters } from 'vuex'
export default {
name: 'Dashboard',
data() {
return {
toolCards:[
{
label:"用户管理",
icon:"el-icon el-icon-user",
name:"user"
},
{
label:"角色管理",
icon:"el-icon el-icon-setting",
name:"authority"
},
{
label:"菜单管理",
icon:"el-icon el-icon-menu",
name:"menu"
},
{
label:"代码生成器",
icon:"el-icon el-icon-cpu",
name:"autoCode"
},
{
label:"表单生成器",
icon:"el-icon el-icon-document-checked",
name:"formCreate"
},
{
label:"关于我们",
icon:"el-icon el-icon-user",
name:"about"
}
]
}
},
computed: {
...mapGetters('user', ['userInfo'])
},
components:{
RaddarChart, //雷达图
stackMap, //堆叠图
Sunburst, //旭日图
musicPlayer, //音乐播放器
TodoList //TodoList
TodoList, //TodoList
// RaddarChart, //雷达图
// stackMap, //堆叠图
// Sunburst, //旭日图
},
methods:{
toTarget(name){
this.$router.push({name})
}
},
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
}
}
});
}
});
// 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>
......@@ -170,7 +256,8 @@ export default {
.big{
margin:100px 0 0 0;
padding-top: 0;
background-color: rgb(243,243,243);;
background-color: rgb(243,243,243);
padding-top: 15px;
.top{
width: 100%;
height: 360px;
......@@ -197,7 +284,7 @@ export default {
.bottom{
width: 100%;
height: 300px;
margin: 20px 0;
// margin: 20px 0;
.el-row{
margin-right: 4px !important;
}
......
web/vue.config.js
浏览文件 @ afa85e1b
......@@ -23,7 +23,7 @@ module.exports = {
// 把key的路径代理到target位置
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: { //需要代理的路径 例如 '/api'
target: `http://127.0.0.1:8888`, //代理到 目标路径
target: `http://139.9.113.229:8888/`, //代理到 目标路径
changeOrigin: true,
pathRewrite: { // 修改路径数据
['^' + process.env.VUE_APP_BASE_API]: '' // 举例 '^/api:""' 把路径中的/api字符串删除
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或