```
feat(router): 移除首页路由配置并添加Node版本文件 移除了原有的首页(home)路由配置，该路由包含进入系统主菜单和各种业务模块的快捷入口， 包括经营异常、严重违法、市场主体除名、批量吊销、撤销登记、联合惩戒、年报管理、智慧认领、 强制注销、综合查询、组织架构和系统管理等功能。 同时新增了.node-version文件，指定项目使用的Node版本为14.19.*，以确保开发环境的一致性。 ```
This commit is contained in:
chenxf
parent
70a565555c
commit
56fc9f45d5
|
|
@ -0,0 +1 @@
|
||||||
|
14.19.*
|
||||||
|
|
@ -93,21 +93,6 @@ export const constantRoutes = [
|
||||||
hidden: true,
|
hidden: true,
|
||||||
meta: { title: '用于同路由刷新', icon: 'home' }
|
meta: { title: '用于同路由刷新', icon: 'home' }
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/home',
|
|
||||||
name: 'home',
|
|
||||||
component: Layout,
|
|
||||||
redirect: '/home/index',
|
|
||||||
hidden: true,
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: '/home/index',
|
|
||||||
name: 'homeindex',
|
|
||||||
component: () => import('@/views/home/index'),
|
|
||||||
meta: { title: '首页', icon: 'home', hiddenMenu: true }
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/menuIndex',
|
path: '/menuIndex',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
|
|
|
||||||
|
|
@ -1,616 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="dashboard-container">
|
|
||||||
<div class="left-content">
|
|
||||||
<div
|
|
||||||
class="entry"
|
|
||||||
@click="()=>{
|
|
||||||
$router.push({ path: '/menuIndex' })
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<svg-icon icon-class="home" />
|
|
||||||
进入系统主菜单
|
|
||||||
</div>
|
|
||||||
<!-- 左侧菜单 -->
|
|
||||||
<div class="sidebar">
|
|
||||||
<div class="sidebar-header">
|
|
||||||
<div class="title">
|
|
||||||
菜单快捷入口
|
|
||||||
</div>
|
|
||||||
<svg-icon icon-class="setting" />
|
|
||||||
</div>
|
|
||||||
<div class="menu-grid">
|
|
||||||
<div
|
|
||||||
class="menu-item"
|
|
||||||
@click="()=>{
|
|
||||||
$router.push({
|
|
||||||
path: '/aiccs/comprehensive/abnMarket'
|
|
||||||
})
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<svg-icon icon-class="m1" />
|
|
||||||
<div>经营异常</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="menu-item"
|
|
||||||
@click="()=>{
|
|
||||||
$router.push({
|
|
||||||
path: '/aiccs/comprehensive/illegalQuery'
|
|
||||||
})
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<svg-icon icon-class="m2" />
|
|
||||||
<div>严重违法</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="menu-item"
|
|
||||||
@click="()=>{
|
|
||||||
$router.push({
|
|
||||||
path: '/aiccs/comprehensive/abnMarket'
|
|
||||||
})
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<svg-icon icon-class="m3" />
|
|
||||||
<div>市场主体除名</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="menu-item"
|
|
||||||
@click="()=>{
|
|
||||||
$router.push({
|
|
||||||
path: '/aiccs/comprehensive/abnMarket'
|
|
||||||
})
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<svg-icon icon-class="m3" />
|
|
||||||
<div>批量吊销</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="menu-item"
|
|
||||||
@click="()=>{
|
|
||||||
$router.push({
|
|
||||||
path: '/aiccs/comprehensive/abnMarket'
|
|
||||||
})
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<svg-icon icon-class="m4" />
|
|
||||||
<div>撤销登记</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="menu-item"
|
|
||||||
@click="()=>{
|
|
||||||
$router.push({
|
|
||||||
path: '/aiccs/comprehensive/abnMarket'
|
|
||||||
})
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<svg-icon icon-class="m5" />
|
|
||||||
<div>联合惩戒</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="menu-item"
|
|
||||||
@click="()=>{
|
|
||||||
$router.push({
|
|
||||||
path: '/aiccs/comprehensive/abnMarket'
|
|
||||||
})
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<svg-icon icon-class="m6" />
|
|
||||||
<div>年报管理</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="menu-item"
|
|
||||||
@click="()=>{
|
|
||||||
$router.push({
|
|
||||||
path: '/aiccs/comprehensive/abnMarket'
|
|
||||||
})
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<svg-icon icon-class="m6" />
|
|
||||||
<div>智慧认领</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="menu-item"
|
|
||||||
@click="()=>{
|
|
||||||
$router.push({
|
|
||||||
path: '/aiccs/comprehensive/abnMarket'
|
|
||||||
})
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<svg-icon icon-class="m7" />
|
|
||||||
<div>强制注销</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="menu-item"
|
|
||||||
@click="()=>{
|
|
||||||
$router.push({
|
|
||||||
path: '/aiccs/comprehensive/abnMarket'
|
|
||||||
})
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<svg-icon icon-class="m7" />
|
|
||||||
<div> 综合查询</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="menu-item"
|
|
||||||
@click="()=>{
|
|
||||||
$router.push({
|
|
||||||
path: '/aiccs/comprehensive/abnMarket'
|
|
||||||
})
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<svg-icon icon-class="m8" />
|
|
||||||
<div>组织架构</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="menu-item"
|
|
||||||
@click="()=>{
|
|
||||||
$router.push({
|
|
||||||
path: '/aiccs/comprehensive/abnMarket'
|
|
||||||
})
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<svg-icon icon-class="m8" />
|
|
||||||
<div>系统管理</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 右侧内容区 -->
|
|
||||||
<div class="main-content">
|
|
||||||
|
|
||||||
<div class="todo-and-card">
|
|
||||||
<!-- 待办事项总览 -->
|
|
||||||
<div class="todo-header">
|
|
||||||
<span class="title">待办事项总览</span>
|
|
||||||
<span class="tag normal">正常 <span class="color">12</span></span>
|
|
||||||
<span class="tag overdue">超期 <span class="color">42</span></span>
|
|
||||||
<span class="tag soon-overdue">即将超期 <span class="color">122</span></span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 统计卡片 -->
|
|
||||||
<div class="card-group">
|
|
||||||
<div class="stat-card">
|
|
||||||
<div class="icon">
|
|
||||||
<svg-icon icon-class="d1" />
|
|
||||||
</div>
|
|
||||||
<div class="info">
|
|
||||||
<div class="card-icon">经营异常</div>
|
|
||||||
<div class="card-num">12</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card">
|
|
||||||
|
|
||||||
<div class="icon">
|
|
||||||
<svg-icon icon-class="d2" />
|
|
||||||
</div>
|
|
||||||
<div class="info">
|
|
||||||
<div class="card-icon">严重违法</div>
|
|
||||||
<div class="card-num">0</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card">
|
|
||||||
<div class="icon">
|
|
||||||
<svg-icon icon-class="d3" />
|
|
||||||
</div>
|
|
||||||
<div class="info">
|
|
||||||
<div class="card-icon">联合惩戒</div>
|
|
||||||
<div class="card-num">12</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card">
|
|
||||||
<div class="icon">
|
|
||||||
<svg-icon icon-class="d1" />
|
|
||||||
</div>
|
|
||||||
<div class="info">
|
|
||||||
<div class="card-icon">撤销登记</div>
|
|
||||||
<div class="card-num">12</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card">
|
|
||||||
<div class="icon">
|
|
||||||
<svg-icon icon-class="d2" />
|
|
||||||
</div>
|
|
||||||
<div class="info">
|
|
||||||
<div class="card-icon">市场除名</div>
|
|
||||||
<div class="card-num">0</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 图表区域 -->
|
|
||||||
<div class="chart-container">
|
|
||||||
<!-- 柱状图 -->
|
|
||||||
<div class="chart-item bar-chart">
|
|
||||||
<div class="chart-title">各市经营异常主体数量对比</div>
|
|
||||||
<div id="barChart" class="chart-box" />
|
|
||||||
</div>
|
|
||||||
<!-- 环形图 -->
|
|
||||||
<div class="chart-item pie-chart">
|
|
||||||
<div class="chart-title">经营异常主体类型分布</div>
|
|
||||||
<div id="pieChart" class="chart-box" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import * as echarts from 'echarts'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'BusinessAbnormalDashboard',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
barChart: null,
|
|
||||||
pieChart: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.initBarChart()
|
|
||||||
this.initPieChart()
|
|
||||||
// 监听窗口大小变化，自适应图表
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
this.barChart.resize()
|
|
||||||
this.pieChart.resize()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
window.removeEventListener('resize', () => {
|
|
||||||
this.barChart.resize()
|
|
||||||
this.pieChart.resize()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 初始化柱状图
|
|
||||||
initBarChart() {
|
|
||||||
const chartDom = document.getElementById('barChart')
|
|
||||||
this.barChart = echarts.init(chartDom)
|
|
||||||
const option = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: { type: 'shadow' }
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: '3%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: [
|
|
||||||
'呼和浩特市', '包头市', '呼伦贝尔市', '兴安盟', '通辽市', '赤峰市',
|
|
||||||
'锡林郭勒盟', '乌兰察布市', '鄂尔多斯市', '巴彦淖尔市', '乌海市', '阿拉善盟'
|
|
||||||
],
|
|
||||||
axisLabel: {
|
|
||||||
rotate: 45,
|
|
||||||
fontSize: 12
|
|
||||||
}
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
name: '数量（家）',
|
|
||||||
nameTextStyle: { fontSize: 12 }
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
data: [
|
|
||||||
250000, 200000, 160000, 100000, 140000, 190000,
|
|
||||||
90000, 130000, 210000, 100000, 70000, 60000
|
|
||||||
],
|
|
||||||
type: 'bar',
|
|
||||||
itemStyle: {
|
|
||||||
color: function(params) {
|
|
||||||
// 渐变蓝色系
|
|
||||||
const colors = [
|
|
||||||
'#66b1ff', '#409eff', '#337ecc', '#2662a6', '#194680', '#0c2a5a',
|
|
||||||
'#66b1ff', '#409eff', '#337ecc', '#2662a6', '#194680', '#0c2a5a'
|
|
||||||
]
|
|
||||||
return colors[params.dataIndex]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
this.barChart.setOption(option)
|
|
||||||
},
|
|
||||||
// 初始化环形图
|
|
||||||
initPieChart() {
|
|
||||||
const chartDom = document.getElementById('pieChart')
|
|
||||||
this.pieChart = echarts.init(chartDom)
|
|
||||||
const option = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item'
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
right: 10,
|
|
||||||
top: 'center',
|
|
||||||
textStyle: { fontSize: 12 }
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '主体类型',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['40%', '70%'],
|
|
||||||
center: ['35%', '50%'],
|
|
||||||
avoidLabelOverlap: false,
|
|
||||||
itemStyle: {
|
|
||||||
borderRadius: 10,
|
|
||||||
borderColor: '#fff',
|
|
||||||
borderWidth: 2
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
position: 'center'
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
fontSize: 16,
|
|
||||||
fontWeight: 'bold'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{ value: 25, name: '企业' },
|
|
||||||
{ value: 65, name: '个体工商户' },
|
|
||||||
{ value: 10, name: '农民专业合作社' }
|
|
||||||
],
|
|
||||||
color: ['#409eff', '#66b1ff', '#a0cfff']
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
this.pieChart.setOption(option)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.dashboard-container {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
background: #f5f7fa;
|
|
||||||
padding: 20px 12px;
|
|
||||||
.left-content{
|
|
||||||
.entry{
|
|
||||||
height: 56px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: #3296FA;
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0px 2px 6px 0px #DDDDDD;
|
|
||||||
background: #FFFFFF;
|
|
||||||
.svg-icon{
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 左侧菜单样式
|
|
||||||
.sidebar {
|
|
||||||
margin-top: 15px;
|
|
||||||
width: 234px;
|
|
||||||
background: #fff;
|
|
||||||
padding: 16px;
|
|
||||||
box-shadow: 0px 2px 6px 0px #DDDDDD;
|
|
||||||
|
|
||||||
.sidebar-header {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
color: #333;
|
|
||||||
position: relative;
|
|
||||||
margin-left: 14px;
|
|
||||||
line-height: 24px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
&::before{
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: -8px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
width: 2px;
|
|
||||||
height: 14px;
|
|
||||||
border-radius: 1px;
|
|
||||||
background: #3296FA;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 15px;
|
|
||||||
|
|
||||||
.menu-item {
|
|
||||||
text-align: center;
|
|
||||||
background: #FFFFFF;
|
|
||||||
border-radius: 8px;
|
|
||||||
color: #666;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s;
|
|
||||||
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 12px 0;
|
|
||||||
font-size: 12px;
|
|
||||||
&:hover {
|
|
||||||
box-shadow: 0px 2px 8px 0px rgba(50, 150, 250, 0.32);
|
|
||||||
}
|
|
||||||
.svg-icon{
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 右侧主内容
|
|
||||||
.main-content {
|
|
||||||
flex: 1;
|
|
||||||
padding: 0 20px 20px 20px;
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
.todo-and-card{
|
|
||||||
background: #FFFFFF;
|
|
||||||
box-shadow: 0px 2px 6px 0px #DDDDDD;
|
|
||||||
padding: 16px 13px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
// 待办事项头部
|
|
||||||
.todo-header {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 15px;
|
|
||||||
padding-left: 15px;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
position: relative;
|
|
||||||
margin-right: 94px;
|
|
||||||
&::before{
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: -8px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
width: 2px;
|
|
||||||
height: 14px;
|
|
||||||
border-radius: 1px;
|
|
||||||
background: #3296FA;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag {
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 12px;
|
|
||||||
font-size: 14px;
|
|
||||||
.color{
|
|
||||||
margin-left: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.normal {
|
|
||||||
.color{
|
|
||||||
color: #409eff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.overdue {
|
|
||||||
.color{
|
|
||||||
color: #f56c6c;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.soon-overdue {
|
|
||||||
.color{
|
|
||||||
color: #e6a23c;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 统计卡片组
|
|
||||||
.card-group {
|
|
||||||
display: flex;
|
|
||||||
gap: 20px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.stat-card {
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 35px 30px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
|
||||||
.icon{
|
|
||||||
background: #EBF5FF;
|
|
||||||
border-radius: 65px;
|
|
||||||
padding: 4px;
|
|
||||||
border: 4px solid #FFFFFF;
|
|
||||||
box-shadow: 0px 2px 8px 0px rgba(50, 150, 250, 0.32);
|
|
||||||
.svg-icon{
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.info{
|
|
||||||
margin-left: 20px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: center;
|
|
||||||
.card-icon {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #666;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-num {
|
|
||||||
font-size: 32px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #409eff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 图表容器
|
|
||||||
.chart-container {
|
|
||||||
display: flex;
|
|
||||||
gap: 20px;
|
|
||||||
height: 400px;
|
|
||||||
|
|
||||||
.chart-item {
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 15px;
|
|
||||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
|
||||||
|
|
||||||
&.bar-chart {
|
|
||||||
flex: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.pie-chart {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-title {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-box {
|
|
||||||
width: 100%;
|
|
||||||
height: calc(100% - 30px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 响应式适配
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
.chart-container {
|
|
||||||
flex-direction: column;
|
|
||||||
height: auto !important;
|
|
||||||
|
|
||||||
.chart-item {
|
|
||||||
height: 400px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue