|
|
|
|
@ -1,191 +1,419 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="app-container home">
|
|
|
|
|
<el-row :gutter="20">
|
|
|
|
|
<el-col :sm="24" :lg="12" style="padding-left: 20px">
|
|
|
|
|
<h2>RuoYi-Vue-Plus后台管理框架</h2>
|
|
|
|
|
<p>
|
|
|
|
|
RuoYi-Vue-Plus 是基于 RuoYi-Vue 针对 分布式集群 场景升级(不兼容原框架)
|
|
|
|
|
<br/>
|
|
|
|
|
* 前端开发框架 Vue、Element UI<br/>
|
|
|
|
|
* 后端开发框架 Spring Boot<br/>
|
|
|
|
|
* 容器框架 Undertow 基于 XNIO 的高性能容器<br/>
|
|
|
|
|
* 权限认证框架 Sa-Token、Jwt 支持多终端认证系统<br/>
|
|
|
|
|
* 关系数据库 MySQL 适配 8.X 最低 5.7<br/>
|
|
|
|
|
* 关系数据库 Oracle 适配 11g 12c<br/>
|
|
|
|
|
* 关系数据库 PostgreSQL 适配 13 14<br/>
|
|
|
|
|
* 关系数据库 SQLServer 适配 2017 2019<br/>
|
|
|
|
|
* 缓存数据库 Redis 适配 6.X 最低 4.X<br/>
|
|
|
|
|
* 数据库框架 Mybatis-Plus 快速 CRUD 增加开发效率<br/>
|
|
|
|
|
* 数据库框架 p6spy 更强劲的 SQL 分析<br/>
|
|
|
|
|
* 多数据源框架 dynamic-datasource 支持主从与多种类数据库异构<br/>
|
|
|
|
|
* 序列化框架 Jackson 统一使用 jackson 高效可靠<br/>
|
|
|
|
|
* Redis客户端 Redisson 性能强劲、API丰富<br/>
|
|
|
|
|
* 分布式限流 Redisson 全局、请求IP、集群ID 多种限流<br/>
|
|
|
|
|
* 分布式锁 Lock4j 注解锁、工具锁 多种多样<br/>
|
|
|
|
|
* 分布式幂等 Redisson 拦截重复提交<br/>
|
|
|
|
|
* 分布式链路追踪 SkyWalking 支持链路追踪、网格分析、度量聚合、可视化<br/>
|
|
|
|
|
* 分布式任务调度 Xxl-Job 高性能 高可靠 易扩展<br/>
|
|
|
|
|
* 分布式文件存储 Minio 本地存储<br/>
|
|
|
|
|
* 分布式云存储 七牛、阿里、腾讯 云存储<br/>
|
|
|
|
|
* 监控框架 SpringBoot-Admin 全方位服务监控<br/>
|
|
|
|
|
* 校验框架 Validation 增强接口安全性 严谨性<br/>
|
|
|
|
|
* Excel框架 Alibaba EasyExcel 性能优异 扩展性强<br/>
|
|
|
|
|
* 文档框架 SpringDoc、javadoc 无注解零入侵基于java注释<br/>
|
|
|
|
|
* 工具类框架 Hutool、Lombok 减少代码冗余 增加安全性<br/>
|
|
|
|
|
* 代码生成器 适配MP、SpringDoc规范化代码 一键生成前后端代码<br/>
|
|
|
|
|
* 部署方式 Docker 容器编排 一键部署业务集群<br/>
|
|
|
|
|
* 国际化 SpringMessage Spring标准国际化方案<br/>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<b>当前版本:</b> <span>v{{ version }}</span>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<el-tag type="danger">¥免费开源</el-tag>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
size="mini"
|
|
|
|
|
icon="el-icon-cloudy"
|
|
|
|
|
plain
|
|
|
|
|
@click="goTarget('https://gitee.com/dromara/RuoYi-Vue-Plus')"
|
|
|
|
|
>访问码云</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
size="mini"
|
|
|
|
|
icon="el-icon-cloudy"
|
|
|
|
|
plain
|
|
|
|
|
@click="goTarget('https://github.com/dromara/RuoYi-Vue-Plus')"
|
|
|
|
|
>访问GitHub</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
size="mini"
|
|
|
|
|
icon="el-icon-cloudy"
|
|
|
|
|
plain
|
|
|
|
|
@click="goTarget('https://gitee.com/dromara/RuoYi-Vue-Plus/wikis/pages?sort_id=4106467&doc_id=1469725')"
|
|
|
|
|
>更新日志</el-button
|
|
|
|
|
>
|
|
|
|
|
</p>
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
|
|
<el-col :sm="24" :lg="12" style="padding-left: 50px">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
<h2>技术选型</h2>
|
|
|
|
|
</el-col>
|
|
|
|
|
<div class="app-container">
|
|
|
|
|
|
|
|
|
|
<div class="company" v-if="!$store.state.user.tenantId">
|
|
|
|
|
<el-input
|
|
|
|
|
style="width: 200px"
|
|
|
|
|
placeholder="公司名称"
|
|
|
|
|
size="small"
|
|
|
|
|
prefix-icon="el-icon-search"
|
|
|
|
|
v-model="gsInfo.tenantName"
|
|
|
|
|
@keyup.enter.native="getGsInfoList">
|
|
|
|
|
</el-input>
|
|
|
|
|
<div class="cp-content" style="width: 200px">
|
|
|
|
|
<div :class="gsInfo.active_id===item.id?'cp-item active':'cp-item'" @click="changCompany(item.id)" v-for="item in gsInfo.list">{{ item.name }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div :class="$store.state.user.tenantId?'content-all':'content'">
|
|
|
|
|
|
|
|
|
|
<div class="dashboard-editor-container">
|
|
|
|
|
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
|
|
|
|
<!--月工资-->
|
|
|
|
|
<div id="analysis1" style="height: 350px"></div>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
<h4>后端技术</h4>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>SpringBoot</li>
|
|
|
|
|
<li>Sa-Token</li>
|
|
|
|
|
<li>JWT</li>
|
|
|
|
|
<li>MyBatis</li>
|
|
|
|
|
<li>Druid</li>
|
|
|
|
|
<li>Jackson</li>
|
|
|
|
|
<li>...</li>
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
<el-row :gutter="32">
|
|
|
|
|
<el-col :xs="24" :sm="24" :lg="12">
|
|
|
|
|
<div class="chart-wrapper">
|
|
|
|
|
<dv-scroll-ranking-board :config="srbconfig" style="width:100%;height:350px" />
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :xs="24" :sm="24" :lg="12">
|
|
|
|
|
<div class="chart-wrapper">
|
|
|
|
|
<div id="analysis2" style="height: 350px"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
<h4>前端技术</h4>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>Vue</li>
|
|
|
|
|
<li>Vuex</li>
|
|
|
|
|
<li>Element-ui</li>
|
|
|
|
|
<li>Axios</li>
|
|
|
|
|
<li>Sass</li>
|
|
|
|
|
<li>Quill</li>
|
|
|
|
|
<li>...</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<el-col :xs="24" :sm="24" :lg="24">
|
|
|
|
|
<div class="chart-wrapper">
|
|
|
|
|
<div id="analysis3" style="height: 350px"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-divider />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { listTenant } from "@/api/pay/tenant";
|
|
|
|
|
import { getMonthPay, getDeptPay, getChuQin } from "@/api/pay/homepage";
|
|
|
|
|
import { scrollRankingBoard } from "@jiaminghi/data-view"
|
|
|
|
|
import { parseTime } from "@/utils/ruoyi";
|
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
|
|
|
|
|
|
let barChart1 = null;
|
|
|
|
|
let barChart2 = null;
|
|
|
|
|
let barChart3 = null;
|
|
|
|
|
|
|
|
|
|
function resizeFun() {
|
|
|
|
|
barChart1.resize();
|
|
|
|
|
barChart2.resize();
|
|
|
|
|
barChart3.resize();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "Index",
|
|
|
|
|
name: 'Index',
|
|
|
|
|
components: {
|
|
|
|
|
scrollRankingBoard
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
// 版本号
|
|
|
|
|
version: "0.8.3",
|
|
|
|
|
};
|
|
|
|
|
// 公司信息
|
|
|
|
|
gsInfo:{
|
|
|
|
|
tenantName:'',
|
|
|
|
|
active_id:this.$store.state.user.tenantId,
|
|
|
|
|
list:[]
|
|
|
|
|
},
|
|
|
|
|
lineChartData: {
|
|
|
|
|
actualData: [],
|
|
|
|
|
monthList: []
|
|
|
|
|
},
|
|
|
|
|
srbconfig: {
|
|
|
|
|
data: [],
|
|
|
|
|
rowNum: null,
|
|
|
|
|
unit: '天'
|
|
|
|
|
},
|
|
|
|
|
pieChartData: {
|
|
|
|
|
year: null,
|
|
|
|
|
month: null,
|
|
|
|
|
workHours: []
|
|
|
|
|
},
|
|
|
|
|
barChartData: {
|
|
|
|
|
year: null,
|
|
|
|
|
month: null,
|
|
|
|
|
departList: [],
|
|
|
|
|
wages: []
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
if (!this.$store.state.user.tenantId) {
|
|
|
|
|
this.getGsInfoList()
|
|
|
|
|
}else {
|
|
|
|
|
this.gsInfo.active_id = this.$store.state.user.tenantId
|
|
|
|
|
this.getReportDateList();
|
|
|
|
|
this.handleLineList();
|
|
|
|
|
this.getHours();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
goTarget(href) {
|
|
|
|
|
window.open(href, "_blank");
|
|
|
|
|
// 获取左侧公司列表
|
|
|
|
|
getGsInfoList(){
|
|
|
|
|
listTenant({ name: this.gsInfo.tenantName }).then(response => {
|
|
|
|
|
if(response.rows.length>0){
|
|
|
|
|
this.gsInfo.list = response.rows;
|
|
|
|
|
this.gsInfo.active_id = this.gsInfo.list[0].id
|
|
|
|
|
this.getReportDateList();
|
|
|
|
|
this.handleLineList();
|
|
|
|
|
this.getHours();
|
|
|
|
|
}else{
|
|
|
|
|
this.$alert(`没有查到相关公司，暂无数据！`, `提示`, {
|
|
|
|
|
type: 'warning'
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
// 选择公司
|
|
|
|
|
changCompany(id){
|
|
|
|
|
this.gsInfo.active_id = id;
|
|
|
|
|
this.reset();
|
|
|
|
|
window.removeEventListener("resize", resizeFun);
|
|
|
|
|
this.getReportDateList();
|
|
|
|
|
this.handleLineList();
|
|
|
|
|
this.getHours();
|
|
|
|
|
},
|
|
|
|
|
reset(){
|
|
|
|
|
this.lineChartData= {
|
|
|
|
|
actualData: [],
|
|
|
|
|
monthList: []
|
|
|
|
|
}
|
|
|
|
|
this.srbconfig= {
|
|
|
|
|
data: [],
|
|
|
|
|
rowNum: null,
|
|
|
|
|
unit: '天'
|
|
|
|
|
};
|
|
|
|
|
this.pieChartData= {
|
|
|
|
|
year: null,
|
|
|
|
|
month: null,
|
|
|
|
|
workHours: []
|
|
|
|
|
};
|
|
|
|
|
this.barChartData= {
|
|
|
|
|
year: null,
|
|
|
|
|
month: null,
|
|
|
|
|
departList: [],
|
|
|
|
|
wages: []
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
handleLineList() {
|
|
|
|
|
getMonthPay({ tenantId: this.gsInfo.active_id }).then(response => {
|
|
|
|
|
response.rows.forEach(item => {
|
|
|
|
|
this.lineChartData.actualData.push(Math.round(item.actuallyPayMoney * Math.pow(10, 2)) / Math.pow(10, 2))
|
|
|
|
|
var month = null
|
|
|
|
|
month = item.month + '月'
|
|
|
|
|
this.lineChartData.monthList.push(month)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.home {
|
|
|
|
|
blockquote {
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
margin: 0 0 20px;
|
|
|
|
|
font-size: 17.5px;
|
|
|
|
|
border-left: 5px solid #eee;
|
|
|
|
|
}
|
|
|
|
|
hr {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
border: 0;
|
|
|
|
|
border-top: 1px solid #eee;
|
|
|
|
|
}
|
|
|
|
|
.col-item {
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.initChart()
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
getReportDateList() {
|
|
|
|
|
let query = {
|
|
|
|
|
date: parseTime(new Date(), '{y}-{m}'),
|
|
|
|
|
tenantId: this.gsInfo.active_id
|
|
|
|
|
}
|
|
|
|
|
getChuQin(query).then(res => {
|
|
|
|
|
this.srbconfig.data = res.data;
|
|
|
|
|
this.srbconfig = {...this.srbconfig};
|
|
|
|
|
|
|
|
|
|
ul {
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.initChart()
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
getHours() {
|
|
|
|
|
getDeptPay({tenantId: this.gsInfo.active_id}).then(response => {
|
|
|
|
|
response.rows.forEach(mon => {
|
|
|
|
|
var list = {
|
|
|
|
|
value: mon.dayWorkHours,
|
|
|
|
|
name: mon.deptName
|
|
|
|
|
}
|
|
|
|
|
this.pieChartData.workHours.push(list);
|
|
|
|
|
this.barChartData.departList.push(mon.deptName)
|
|
|
|
|
this.barChartData.wages.push(mon.actuallyPayMoney)
|
|
|
|
|
})
|
|
|
|
|
if(response.rows.length>0){
|
|
|
|
|
this.pieChartData.year = response.rows[0].year
|
|
|
|
|
this.pieChartData.month = response.rows[0].month
|
|
|
|
|
this.barChartData.year = response.rows[0].year
|
|
|
|
|
this.barChartData.month = response.rows[0].month
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.initChart()
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
initChart() {
|
|
|
|
|
|
|
|
|
|
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
color: #676a6c;
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
barChart1 = echarts.init(document.getElementById('analysis1'));
|
|
|
|
|
barChart2 = echarts.init(document.getElementById('analysis2'))
|
|
|
|
|
barChart3 = echarts.init(document.getElementById('analysis3'))
|
|
|
|
|
|
|
|
|
|
ul {
|
|
|
|
|
list-style-type: none;
|
|
|
|
|
}
|
|
|
|
|
barChart1.setOption({
|
|
|
|
|
xAxis: {
|
|
|
|
|
data: this.lineChartData.monthList,
|
|
|
|
|
boundaryGap: false,
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: 10,
|
|
|
|
|
right: 10,
|
|
|
|
|
bottom: 20,
|
|
|
|
|
top: 30,
|
|
|
|
|
containLabel: true
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
axisPointer: {
|
|
|
|
|
type: 'cross'
|
|
|
|
|
},
|
|
|
|
|
padding: [5, 10]
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
// data: ['expected', 'actual']
|
|
|
|
|
data: ['工资']
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '工资',
|
|
|
|
|
smooth: true,
|
|
|
|
|
type: 'line',
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: '#3888fa',
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#3888fa',
|
|
|
|
|
width: 2
|
|
|
|
|
},
|
|
|
|
|
areaStyle: {
|
|
|
|
|
color: '#f3f8ff'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: this.lineChartData.actualData,
|
|
|
|
|
animationDuration: 2800,
|
|
|
|
|
animationEasing: 'quadraticOut'
|
|
|
|
|
}]
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
barChart2.setOption({
|
|
|
|
|
title: {
|
|
|
|
|
text: this.pieChartData.year + '-' + this.pieChartData.month + '月工时',
|
|
|
|
|
left: 'center'
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'item',
|
|
|
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '工时',
|
|
|
|
|
type: 'pie',
|
|
|
|
|
roseType: 'radius',
|
|
|
|
|
radius: [15, 95],
|
|
|
|
|
center: ['50%', '50%'],
|
|
|
|
|
data: this.pieChartData.workHours,
|
|
|
|
|
animationEasing: 'cubicInOut',
|
|
|
|
|
animationDuration: 2600
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
h4 {
|
|
|
|
|
margin-top: 0px;
|
|
|
|
|
barChart3.setOption({
|
|
|
|
|
title: {
|
|
|
|
|
text: this.barChartData.year + '-' + this.barChartData.month + '月工资',
|
|
|
|
|
left: 'center'
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
|
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
top: 30,
|
|
|
|
|
left: '2%',
|
|
|
|
|
right: '2%',
|
|
|
|
|
bottom: '3%',
|
|
|
|
|
containLabel: true
|
|
|
|
|
},
|
|
|
|
|
xAxis: [{
|
|
|
|
|
type: 'category',
|
|
|
|
|
data: this.barChartData.departList,
|
|
|
|
|
axisTick: {
|
|
|
|
|
alignWithLabel: true
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
interval: 0,
|
|
|
|
|
formatter: function(value) {
|
|
|
|
|
return value.split("").join("\n");
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}],
|
|
|
|
|
yAxis: [{
|
|
|
|
|
type: 'value',
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false
|
|
|
|
|
}
|
|
|
|
|
}],
|
|
|
|
|
series: [{
|
|
|
|
|
type: 'bar',
|
|
|
|
|
stack: 'vistors',
|
|
|
|
|
barWidth: '60%',
|
|
|
|
|
data: this.barChartData.wages,
|
|
|
|
|
animationDuration: 6000
|
|
|
|
|
}]
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
window.addEventListener("resize", resizeFun)
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
font-weight: 100;
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.app-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
.company {
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
width: 230px;
|
|
|
|
|
height: calc(100vh - 115px);
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
.cp-content {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
.cp-item {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
padding: 6px 10px 6px 5px;
|
|
|
|
|
color: #424242;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
&:hover {
|
|
|
|
|
background: #f6f6f6;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.active{
|
|
|
|
|
background: #edf6ff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.content{
|
|
|
|
|
padding-left: 15px;
|
|
|
|
|
width: calc(100% - 250px);
|
|
|
|
|
.el-button--medium {
|
|
|
|
|
padding: 2px 0px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.content-all{
|
|
|
|
|
width: 100%;
|
|
|
|
|
.el-button--medium {
|
|
|
|
|
padding: 2px 0px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.dash {
|
|
|
|
|
min-height: calc(100vh - 84px);
|
|
|
|
|
text-align: center;
|
|
|
|
|
background: #A0E1DD;
|
|
|
|
|
}
|
|
|
|
|
.biaoti {
|
|
|
|
|
font-size: 60px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
line-height: calc(100vh - 84px);
|
|
|
|
|
text-shadow: 0px 0px 0 #fff, -1px -1px 0 #fff, -2px -2px 0 #fff,
|
|
|
|
|
-3px -3px 0 #fff, -4px -4px 0 #fff,
|
|
|
|
|
-5px -5px 5px rgb(0, 0, 0),
|
|
|
|
|
-5px -5px 1px rgb(0, 0, 0);
|
|
|
|
|
}
|
|
|
|
|
.dv-scroll-ranking-board{
|
|
|
|
|
color:#333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
.dashboard-editor-container {
|
|
|
|
|
padding: 32px;
|
|
|
|
|
background-color: rgb(240, 242, 245);
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
b {
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
.chart-wrapper {
|
|
|
|
|
background: #fff;
|
|
|
|
|
padding: 16px 16px 0;
|
|
|
|
|
margin-bottom: 32px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.update-log {
|
|
|
|
|
ol {
|
|
|
|
|
display: block;
|
|
|
|
|
list-style-type: decimal;
|
|
|
|
|
margin-block-start: 1em;
|
|
|
|
|
margin-block-end: 1em;
|
|
|
|
|
margin-inline-start: 0;
|
|
|
|
|
margin-inline-end: 0;
|
|
|
|
|
padding-inline-start: 40px;
|
|
|
|
|
}
|
|
|
|
|
@media (max-width:1024px) {
|
|
|
|
|
.chart-wrapper {
|
|
|
|
|
padding: 8px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
wanglei
6 months ago