<template>
|
<div class="systemMonitoring_box">
|
<My-bread :list="[
|
`${$t('operatManage.operatManage')}`,
|
`${$t('operatManage.systemMonitoring')}`,
|
]"></My-bread>
|
<el-divider />
|
<div class="content_Box">
|
<div class="cloumn_Box1">
|
<div class="flex_Box1 subpage_Div">
|
<el-tabs
|
v-model="activeName"
|
@tab-click="handleClick"
|
>
|
<el-tab-pane
|
:label="$t('operatManage.systemMonitoringObj.abnormalResources')"
|
name="first"
|
>
|
<el-table
|
:data="resInfo"
|
style="width: 100%; height: 310px"
|
>
|
<el-table-column
|
prop="id"
|
:label="$t('operatManage.systemMonitoringObj.resourceID')"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
:label="$t('operatManage.systemMonitoringObj.resourceName')"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="bak"
|
:label="$t('operatManage.systemMonitoringObj.resourceState')"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="createTime"
|
:label="$t('operatManage.systemMonitoringObj.abnormaltime')"
|
show-overflow-tooltip
|
>
|
</el-table-column>
|
</el-table>
|
</el-tab-pane>
|
<el-tab-pane
|
:label="
|
$t('operatManage.systemMonitoringObj.serviceResourceStatus')
|
"
|
name="second"
|
>
|
|
<div
|
id="resUseChart"
|
style="width:101vh; height: 30vh; "
|
></div>
|
|
</el-tab-pane>
|
<el-tab-pane
|
:label="$t('operatManage.systemMonitoringObj.userloginStatus')"
|
name="third"
|
>
|
<div
|
id="userLoginChart"
|
style="width:101vh; height: 30vh; "
|
></div>
|
</el-tab-pane>
|
<el-tab-pane
|
:label="
|
$t('operatManage.systemMonitoringObj.resourceOperationStatus')
|
"
|
name="fourth"
|
>
|
<div
|
id="operateCountChart"
|
style="width:101vh; height: 30vh; "
|
></div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
<div class="flex_Box subpage_Div">
|
<div>
|
<div
|
style="line-height: 32px"
|
class="imageTitle"
|
>
|
{{ $t('operatManage.systemMonitoringObj.onlinePersonnel') }}
|
</div>
|
</div>
|
<el-table
|
:data="tableData"
|
style="width: 100%"
|
height="90%"
|
>
|
<el-table-column
|
align="center"
|
type="index"
|
:label="$t('operatManage.ELM.index')"
|
width="100px"
|
/>
|
<el-table-column
|
prop="uid"
|
:label="$t('operatManage.systemMonitoringObj.userID')"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="uname"
|
:label="$t('operatManage.systemMonitoringObj.username')"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="loginTime"
|
:label="$t('operatManage.systemMonitoringObj.onlineTime')"
|
fixed="right"
|
>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<div class="cloumn_Box">
|
<div class="flex_Box subpage_Div">
|
<div style="width: 100%; height: 20px">
|
<div class="image1"></div>
|
<div class="imageTitle">
|
{{ $t('operatManage.systemMonitoringObj.memoryMonitoring') }}
|
</div>
|
</div>
|
<div class="top_Box1">
|
<div class="top_box_left">
|
<div class="left_title">
|
<div class="height_title">
|
<label>
|
{{
|
$t('operatManage.systemMonitoringObj.haveBeenUsed')
|
}}</label>
|
<p>{{ memInfo.use }}</p>
|
</div>
|
<div class="height_title">
|
<label>
|
{{
|
$t('operatManage.systemMonitoringObj.usageRate')
|
}}</label>
|
<p>{{ memInfo.usage }}</p>
|
</div>
|
</div>
|
<div class="left_title">
|
<div class="height_title">
|
<label>
|
{{
|
$t('operatManage.systemMonitoringObj.totalMemory')
|
}}</label>
|
<p>{{ memInfo.totalMem }}</p>
|
</div>
|
<div class="height_title">
|
<label>
|
{{
|
$t('operatManage.systemMonitoringObj.remainingMemory')
|
}}</label>
|
<p>{{ memInfo.remainMem }}</p>
|
</div>
|
</div>
|
</div>
|
<div
|
id="fathershuiWen"
|
class="top_box_right"
|
>
|
<div id="shuiwen"></div>
|
</div>
|
</div>
|
</div>
|
<div class="flex_Box subpage_Div">
|
<div>
|
<div class="image2"></div>
|
<div
|
style="line-height: 32px"
|
class="imageTitle"
|
>
|
{{ $t('operatManage.systemMonitoringObj.cpuMonitoring') }}
|
</div>
|
</div>
|
<div
|
id="Sys_cpu_chart"
|
style="width: 100%; height: 86%; margin-top: 8%"
|
></div>
|
</div>
|
<div class="flex_Box subpage_Div">
|
<div style="width: 100%; height: 34px">
|
<div class="image3"></div>
|
<div
|
style="line-height: 32px"
|
class="imageTitle"
|
>
|
{{ $t('operatManage.systemMonitoringObj.heteroconstant') }}
|
</div>
|
</div>
|
<div class="ycContent">
|
<div class="ycsBox">
|
<div style="width:100%;height:100%">
|
<div class="ycTltle">{{ resInfoCount }}</div>
|
<div class="heteroTitle">
|
{{ $t('operatManage.systemMonitoringObj.numberOfExceptions') }}
|
</div>
|
</div>
|
|
</div>
|
</div>
|
|
</div>
|
</div>
|
|
</div>
|
<!-- <div class="inform_box">
|
<div class="content_box">
|
<div class="top_box">
|
<div style="width: 100%; height: 100%">
|
<div
|
style="width: 30%; height: 100%; float: left; margin-left: 20%"
|
>
|
<div class="Syslabel">
|
<p style="line-height: 25px">
|
{{ $t('operatManage.systemMonitoringObj.haveBeenUsed') }}
|
{{ memInfo.use }}
|
</p>
|
<br />
|
<p style="line-height: 25px">
|
{{ $t('operatManage.systemMonitoringObj.totalMemory') }}
|
{{ memInfo.totalMem }}
|
</p>
|
</div>
|
</div>
|
<div
|
id="shuiwen"
|
style="
|
width: 40%;
|
height: 100%;
|
|
float: left;
|
"
|
></div>
|
</div>
|
</div>
|
<div class="bottom_box">
|
{{ $t('operatManage.systemMonitoringObj.systemMemory') }}
|
</div>
|
</div>
|
<div class="content_box">
|
<div class="top_box">
|
<div class="Syslabel">
|
{{ $t('operatManage.systemMonitoringObj.CPUusage') }}
|
</div>
|
<div class="details">{{ cpuInfo.cpuSysUsage }}</div>
|
<div id="Sys_cpu_chart"></div>
|
</div>
|
<div class="bottom_box">
|
{{ $t('operatManage.systemMonitoringObj.CPUsystemUsage') }}
|
</div>
|
</div>
|
<div class="content_box">
|
<div class="top_box">
|
<div class="Syslabel">
|
{{ $t('operatManage.systemMonitoringObj.numberOfExceptions') }}
|
</div>
|
<div class="details">{{ resInfoCount }}</div>
|
</div>
|
<div class="bottom_box">
|
{{ $t('operatManage.systemMonitoringObj.numberOfAbnormalSystems') }}
|
</div>
|
</div>
|
</div>
|
<div class="chart_box">
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane
|
:label="$t('operatManage.systemMonitoringObj.abnormalResources')"
|
name="first"
|
><el-table :data="resInfo" style="width: 100%">
|
<el-table-column
|
prop="id"
|
:label="$t('operatManage.systemMonitoringObj.resourceID')"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
:label="$t('operatManage.systemMonitoringObj.resourceName')"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="bak"
|
:label="$t('operatManage.systemMonitoringObj.resourceState')"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="createTime"
|
:label="$t('operatManage.systemMonitoringObj.abnormaltime')"
|
show-overflow-tooltip
|
>
|
</el-table-column> </el-table
|
></el-tab-pane>
|
<el-tab-pane label="服务资源状态" name="second">
|
<div id="resUseChart" style="width: 1515px; height: 243px"></div>
|
</el-tab-pane>
|
<el-tab-pane label="用户登录状态" name="third">
|
<div id="userLoginChart" style="width: 1515px; height: 243px"></div>
|
</el-tab-pane>
|
<el-tab-pane label="资源操作状态" name="fourth"
|
><div
|
id="operateCountChart"
|
style="width: 1515px; height: 243px"
|
></div
|
></el-tab-pane>
|
</el-tabs>
|
<!-- <p class="title_box">
|
{{ $t('operatManage.systemMonitoringObj.abnormalResources') }}
|
</p> -->
|
<!-- <el-table :data="resInfo" style="width: 100%">
|
<el-table-column
|
prop="id"
|
:label="$t('operatManage.systemMonitoringObj.resourceID')"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
:label="$t('operatManage.systemMonitoringObj.resourceName')"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="bak"
|
:label="$t('operatManage.systemMonitoringObj.resourceState')"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="createTime"
|
:label="$t('operatManage.systemMonitoringObj.abnormaltime')"
|
show-overflow-tooltip
|
>
|
</el-table-column>
|
</el-table> -->
|
<!-- <div style="margin-top: 10px" class="pagination_box">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="currentPage4"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="10"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="4"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
|
<div class="left">
|
<p class="title_box">
|
{{ $t('operatManage.systemMonitoringObj.onlinePersonnel') }}
|
</p>
|
<el-table :data="tableData" style="width: 100%">
|
<el-table-column
|
align="center"
|
type="index"
|
:label="$t('operatManage.ELM.index')"
|
width="100px"
|
/>
|
<el-table-column
|
prop="uid"
|
:label="$t('operatManage.systemMonitoringObj.userID')"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="uname"
|
:label="$t('operatManage.systemMonitoringObj.username')"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="loginTime"
|
:label="$t('operatManage.systemMonitoringObj.onlineTime')"
|
fixed="right"
|
>
|
</el-table-column>
|
</el-table>
|
|
<!-- <div style="margin-top: 10px" class="pagination_box">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="currentPage4"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="10"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="4"
|
>
|
</el-pagination>
|
</div>
|
</div> -->
|
</div>
|
</template>
|
|
<script>
|
import MyBread from '../../components/MyBread.vue';
|
import 'echarts-liquidfill';
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {
|
MyBread,
|
},
|
data() {
|
//这里存放数据
|
return {
|
activeName: 'first',
|
ws: null,
|
tableData: [],
|
memInfo: { totalMem: 0, use: 0, usage: 0, remainMem: 0 },
|
cpuInfo: { cpuSysUsage: 0 },
|
resInfo: [],
|
resInfoCount: 0,
|
echartData: [],
|
resUseCount: {},
|
userLoginCount: [],
|
operateCount: [],
|
};
|
},
|
//方法集合
|
methods: {
|
SetTableData1(res) {
|
this.tableData = res.userInfo;
|
this.memInfo = res.memInfo;
|
this.cpuInfo = res.cpuInfo;
|
if (this.echartData.length == 7) {
|
this.echartData.splice(0, 1);
|
}
|
this.lineChart2(this.memInfo.usage);
|
this.echartData.push([' ', parseFloat(res.cpuInfo.cpuSysUsage)]);
|
this.lineChart1();
|
},
|
SetTableData2(res) {
|
this.resInfo = res.resInfo;
|
this.resInfoCount = res.resInfo.length;
|
},
|
SetTableData3(res) {
|
this.resUseCount = res.resUseCount;
|
this.operateCount = res.operateCount.operateCount;
|
this.userLoginCount = res.userLoginCount.userLoginCount;
|
this.lineChart3();
|
this.lineChart4();
|
this.lineChart5();
|
},
|
handleClick(tab, event) {
|
switch (tab) {
|
case 'first':
|
break;
|
case 'second':
|
this.lineChart3();
|
break;
|
case 'third':
|
this.lineChart4();
|
break;
|
case 'fourth':
|
this.lineChart5();
|
break;
|
}
|
},
|
lineChart1() {
|
const valueList = this.echartData.map(function (item) {
|
return item[1];
|
});
|
|
var option = {
|
// Make gradient line here
|
visualMap: [
|
{
|
show: false,
|
type: 'continuous',
|
seriesIndex: 0,
|
},
|
],
|
toolbox: {
|
show: true,
|
feature: {
|
|
saveAsImage: { show: true }
|
}
|
},
|
title: [],
|
tooltip: {
|
trigger: 'axis',
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: ['', '', '', '', '', '', ''],
|
},
|
yAxis: [
|
{
|
axisLabel: {
|
show: false, // 不显示坐标轴上的文字
|
},
|
},
|
],
|
grid: [
|
{
|
top: '10%',
|
bottom: '10%',
|
left: '10%',
|
right: '10%',
|
},
|
],
|
series: [
|
{
|
type: 'line',
|
showSymbol: false,
|
data: valueList,
|
},
|
],
|
};
|
|
let myChart = this.$echarts.init(
|
document.getElementById('Sys_cpu_chart')
|
);
|
myChart.setOption(option);
|
window.addEventListener('resize', function () {
|
myChart.resize();
|
});
|
},
|
lineChart2(res) {
|
|
|
var a = 0;
|
if (res != 0) {
|
a = res.split('%').join('');
|
}
|
|
var data = { name: '1111', value: parseFloat(a) / 100 };
|
var list = [];
|
let value = data.value;
|
list.push({ name: data.name, value: data.value });
|
|
for (let i = 0; i < 2; i++) {
|
if (value - 0.1 > 0) {
|
value -= 0.1;
|
list.push({ name: data.name, value: value });
|
}
|
}
|
var options = {
|
// 提示框组件
|
tooltip: {
|
show: false,
|
trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
|
textStyle: {
|
show: false,
|
},
|
formatter: function (value) {
|
return value.seriesName + ': ' + parseInt(value.value * 100) + '% ';
|
},
|
},
|
series: [
|
{
|
type: 'liquidFill',
|
name: ' ',
|
radius: '40%',
|
center: ['30%', '30%'],
|
shape: 'circle',
|
phase: 0,
|
direction: 'right',
|
outline: {
|
show: true,
|
borderDistance: 0, // 边框线与图表的距离 数字
|
itemStyle: {
|
opacity: 1,
|
borderWidth: 0,
|
borderColor: '#2bf9ed',
|
},
|
},
|
// 图形样式
|
itemStyle: {
|
color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{ offset: 0, color: '#c5e87e' }, //柱图渐变色
|
{ offset: 0.5, color: '#2bf9ed' }, //柱图渐变色 //柱图渐变色
|
]),
|
opacity: 0.5,
|
shadowBlur: 10,
|
},
|
backgroundStyle: {
|
color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{ offset: 0, color: '#2bf9ed' }, //柱图渐变色
|
{ offset: 0.4, color: '#44C0C1' }, //柱图渐变色 //柱图渐变色
|
]),
|
opacity: 0.5,
|
},
|
// 图形的高亮样式
|
emphasis: {
|
itemStyle: {
|
opacity: 1,
|
},
|
},
|
// 图形上的文本标签
|
label: {
|
fontSize: 40,
|
fontWeight: 600,
|
color: '#fff',
|
},
|
data: list,
|
},
|
{
|
name: 'Access From',
|
type: 'pie',
|
radius: ['43%', '50%'],
|
center: ['30%', '30%'],
|
startAngle: 340,
|
avoidLabelOverlap: false,
|
itemStyle: {
|
borderRadius: 10,
|
},
|
label: {
|
show: false,
|
position: 'center',
|
},
|
emphasis: {
|
label: {
|
show: true,
|
fontSize: '40',
|
fontWeight: 'bold',
|
},
|
},
|
labelLine: {
|
show: false,
|
},
|
data: [
|
{
|
value: 0.4,
|
name: 'Direct',
|
itemStyle: {
|
color: '#2bf9ed',
|
},
|
},
|
{
|
value: 0.6,
|
name: 'Direct',
|
itemStyle: {
|
color: 'rgba(240, 248, 255, 0)',
|
},
|
},
|
],
|
emphasis: {
|
disabled: true,
|
},
|
tooltip: {
|
show: false,
|
},
|
},
|
],
|
};
|
|
let myChart1 = this.$echarts.init(document.getElementById('shuiwen'));
|
myChart1.setOption(options);
|
window.addEventListener('resize', function () {
|
myChart1.resize();
|
});
|
},
|
lineChart3() {
|
var data = [
|
{ name: '可用资源', value: this.resUseCount.resAbleCount },
|
{ name: '不可用资源', value: this.resUseCount.resUnableCount },
|
];
|
var option = {
|
tooltip: {
|
trigger: 'item',
|
},
|
toolbox: {
|
show: true,
|
feature: {
|
saveAsImage: { show: true }
|
}
|
},
|
legend: {
|
top: '5%',
|
left: 'center',
|
textStyle: {
|
fontSize: 18, //字体大小
|
|
},
|
},
|
series: [
|
{
|
name: ' ',
|
type: 'pie',
|
radius: ['40%', '70%'],
|
avoidLabelOverlap: false,
|
itemStyle: {
|
borderRadius: 10,
|
borderColor: '#fff',
|
borderWidth: 2,
|
},
|
label: {
|
show: false,
|
position: 'center',
|
},
|
emphasis: {
|
label: {
|
show: true,
|
fontSize: '40',
|
fontWeight: 'bold',
|
},
|
},
|
labelLine: {
|
show: false,
|
},
|
data: data,
|
},
|
],
|
};
|
let myChart2 = this.$echarts.init(document.getElementById('resUseChart'));
|
myChart2.setOption(option);
|
window.addEventListener('resize', function () {
|
myChart2.resize();
|
});
|
},
|
lineChart4() {
|
var data1 = [];
|
var data2 = [];
|
for (var i in this.userLoginCount) {
|
data1.push(this.userLoginCount[i].optime);
|
data2.push(this.userLoginCount[i].count);
|
}
|
|
var option = {
|
title: {
|
show: false,
|
},
|
tooltip: {
|
trigger: 'axis',
|
},
|
legend: {
|
show: false,
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true,
|
},
|
toolbox: {
|
feature: {
|
saveAsImage: {},
|
},
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: data1,
|
},
|
yAxis: {
|
type: 'value',
|
},
|
series: [
|
{
|
name: '',
|
type: 'line',
|
stack: 'Total',
|
data: data2,
|
},
|
],
|
};
|
let myChart3 = this.$echarts.init(
|
document.getElementById('userLoginChart')
|
);
|
myChart3.setOption(option);
|
},
|
lineChart5() {
|
var data1 = [];
|
var data2 = [];
|
for (var i in this.operateCount) {
|
data1.push(this.operateCount[i].modular2);
|
data2.push(this.operateCount[i].count);
|
}
|
|
var option = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow',
|
},
|
},
|
toolbox: {
|
show: true,
|
feature: {
|
|
saveAsImage: { show: true }
|
}
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true,
|
},
|
xAxis: [
|
{
|
type: 'category',
|
data: data1,
|
axisTick: {
|
alignWithLabel: true,
|
},
|
},
|
],
|
yAxis: [
|
{
|
type: 'value',
|
},
|
],
|
series: [
|
{
|
name: 'Direct',
|
type: 'bar',
|
barWidth: '60%',
|
data: data2,
|
},
|
],
|
};
|
let myChart4 = this.$echarts.init(
|
document.getElementById('operateCountChart')
|
);
|
myChart4.setOption(option);
|
},
|
},
|
created() {
|
if (Window.ws != null) {
|
Window.ws.close();
|
Window.ws.onclose = () => {
|
console.log('服务器关闭');
|
};
|
Window.ws = null;
|
}
|
|
Window.ws = new WebSocket(socketUrl);
|
Window.ws.option = () => { };
|
var that = this;
|
Window.ws.onmessage = (msg) => {
|
// console.log('来自服务器端的数据：' + msg.data); //监听接受来自服务端的信息
|
var data = JSON.parse(msg.data);
|
console.log(data);
|
if (data.userInfo != undefined) {
|
that.SetTableData1(data);
|
} else if (data.resInfo != undefined) {
|
that.SetTableData2(data);
|
} else if (data.operateCount != undefined) {
|
that.SetTableData3(data);
|
}
|
};
|
},
|
|
mounted() {
|
var mywidth = $("#fathershuiWen").width();
|
var mysright = $("#fathershuiWen").height();
|
var width = (mywidth * 1.5) + "px"
|
var height = (mysright * 1.5) + "px"
|
$("#shuiwen").width(width);
|
$("#shuiwen").height(height);
|
|
|
|
|
|
this.lineChart2(0);
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.systemMonitoring_box {
|
height: 98%;
|
width: 98%;
|
padding: 1%;
|
|
.content_Box {
|
width: 100%;
|
height: 90%;
|
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
.cloumn_Box {
|
width: 100%;
|
height: 38%;
|
|
display: flex;
|
justify-content: space-between;
|
.flex_Box {
|
width: 30.5%;
|
height: 88%;
|
|
border-radius: 5px;
|
padding: 1%;
|
|
|
.image1 {
|
width: 46px;
|
height: 20px;
|
float: left;
|
background: url("../../assets/img/systemMonitoring/图层 38.png")
|
no-repeat;
|
background-size: 100% 100%;
|
}
|
.image2 {
|
width: 34px;
|
height: 34px;
|
float: left;
|
background: url("../../assets/img/systemMonitoring/图层 37.png")
|
no-repeat;
|
background-size: 100% 100%;
|
}
|
.image3 {
|
width: 32px;
|
height: 32px;
|
float: left;
|
background: url("../../assets/img/systemMonitoring/图层 40.png")
|
no-repeat;
|
background-size: 100% 100%;
|
}
|
}
|
.ycsBox {
|
width: 200px;
|
height: 200px;
|
background: url("../../assets/img/systemMonitoring/图层 39.png")
|
no-repeat;
|
background-size: 100% 100%;
|
border: 1px;
|
display: flex;
|
align-items: center;
|
}
|
.ycContent {
|
width: 100%;
|
padding: 1%;
|
height: 80%;
|
display: flex;
|
justify-content: center;
|
}
|
}
|
.imageTitle {
|
float: left;
|
|
margin-left: 10px;
|
}
|
.ycTltle {
|
width: 100%;
|
margin-top: 8%;
|
font-size: 60px;
|
font-family: Microsoft YaHei;
|
font-weight: 300;
|
color: #009cff;
|
text-align: center;
|
}
|
.heteroTitle {
|
width: 100%;
|
text-align: center;
|
font-size: 16px;
|
font-family: Microsoft YaHei;
|
font-weight: 300;
|
color: #ffffff;
|
line-height: 49px;
|
|
// margin-top: 20px;
|
|
// text-align: center;
|
}
|
.top_Box1 {
|
width: 96%;
|
height: 91%;
|
margin-top: 2%;
|
margin-left: 4%;
|
display: flex;
|
justify-content: space-between;
|
.top_box_left {
|
width: 59%;
|
height: 100%;
|
display: flex;
|
justify-content: space-between;
|
.left_title {
|
width: 48%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
.height_title {
|
width: 100%;
|
height: 48%;
|
|
p {
|
|
margin-top: 3%;
|
font-size: 24px;
|
}
|
}
|
}
|
}
|
.top_box_right {
|
width: 39%;
|
height: 100%;
|
}
|
}
|
|
.cloumn_Box1 {
|
width: 100%;
|
height: 58%;
|
|
display: flex;
|
justify-content: space-between;
|
.flex_Box1 {
|
width: 64%;
|
height: 92%;
|
padding: 1%;
|
|
border-radius: 5px;
|
|
}
|
.flex_Box {
|
width: 30.5%;
|
height: 92%;
|
|
border-radius: 5px;
|
padding: 1%;
|
|
}
|
}
|
}
|
|
|
}
|
</style>
|
