827 lines
22 KiB
Vue
827 lines
22 KiB
Vue
<template>
|
||
<div>
|
||
<div class="monitor">
|
||
<div class="top-menu">
|
||
<div class="menu">
|
||
<a href="">首页</a>
|
||
<!-- <a @click="viewMenu()">数算资源</a> -->
|
||
</div>
|
||
<!-- <div class="right">
|
||
<a @click="viewMenu('hpc/hpcOverview')">超算资源</a>
|
||
<a @click="toMonitor()">监控运维</a>
|
||
</div> -->
|
||
</div>
|
||
<div class="top">
|
||
<div class="top-title">
|
||
<h1>算网融合智能协同平台</h1>
|
||
</div>
|
||
</div>
|
||
<div class="floatLeft">
|
||
<div class="left">
|
||
<div class="left_1">
|
||
<div class="title"><p>计算域信息</p></div>
|
||
<ComputeDomain />
|
||
</div>
|
||
<div class="left_2">
|
||
<div class="title"><p>云际组件状态</p></div>
|
||
<el-row class="taskDiv">
|
||
<el-col v-for="(item,index) in taskDetail" :key="'task'+index" :span="12">
|
||
<div class="num">{{ item.num }}</div>
|
||
<div class="name">{{ item.name }}</div>
|
||
</el-col>
|
||
</el-row>
|
||
<!-- <ComputingPowerTrend id="ComputingPowerTrend" :data="tendData" :config="tendConfig" /> -->
|
||
</div>
|
||
<div class="left_3">
|
||
<div class="title"><p>存储资源用量</p></div>
|
||
<StorageResourceUsage :data="powerData" />
|
||
<!-- <ComputingPowerUse id="ComputingPowerUse" :data="centerData" :config="statusConfig" /> -->
|
||
</div>
|
||
<!-- <div class="left_4">
|
||
<div class="title"><p>分布记账</p></div>
|
||
<ChainLink :key="resizeKey" />
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
<div class="floatRight">
|
||
<div class="right">
|
||
<div class="right_1">
|
||
<div class="title"> <el-button class="createBtn" type="primary" size="mini" round @click="toHashCat()"><div>典型应用验证</div></el-button><p>累计任务情况</p></div>
|
||
<CumulativeTasks :data="taskData" />
|
||
</div>
|
||
<div class="right_2">
|
||
<div class="title"><p>计算资源整体负载</p></div>
|
||
<ResourceLoadWhole />
|
||
</div>
|
||
<!-- <div class="right_3">
|
||
<div class="title"><p>计算资源平均负载</p></div>
|
||
<ResourceLoadAverage />
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
<div class="middle">
|
||
<ComputingPowerTotal />
|
||
</div>
|
||
<Earth :key="resizeKey" :center="{name: monitorSettingForm.center, longitude: Number(monitorSettingForm.centerPosition.split(',')[0]), latitude: Number(monitorSettingForm.centerPosition.split(',')[1])}" />
|
||
</div>
|
||
<el-dialog
|
||
title="创建云际跨域任务"
|
||
:visible.sync="dialogVisible"
|
||
width="30%"
|
||
>
|
||
<el-upload
|
||
action="#"
|
||
:http-request="httpRequest"
|
||
:limit="1"
|
||
:on-remove="handleRemove"
|
||
:file-list="fileList"
|
||
>
|
||
<el-button size="small" type="primary">点击选择yaml文件</el-button>
|
||
</el-upload>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="submitFile()">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import moment from 'moment'
|
||
import ComputeDomain from './components/ComputeDomain.vue'
|
||
import ComputingPowerTotal from './components/ComputingPowerTotal.vue'
|
||
import ResourceLoadWhole from './components/ResourceLoadWhole.vue'
|
||
import CumulativeTasks from './components/CumulativeTasks.vue'
|
||
import StorageResourceUsage from './components/StorageResourceUsage.vue'
|
||
import Earth from '@/views/prometheusMonitor/earthDev'
|
||
import { getComputePower, getScreenInfo, getCPUsage } from '@/api/container/monitorSelect.js'
|
||
import { getTaskCount, createScheduleTask } from '@/api/top-menu/TotalNum'
|
||
import { order } from '@/utils/data-process'
|
||
import { getMonitorSetting } from '@/api/container/monitorSelect'
|
||
import { debounce } from '@/utils'
|
||
export default {
|
||
components: { ComputeDomain, ComputingPowerTotal, ResourceLoadWhole, CumulativeTasks, StorageResourceUsage, Earth },
|
||
data() {
|
||
return {
|
||
monitorSettingForm: {
|
||
'title': '广域协同智能计算系统面板',
|
||
'titleColor': '#409EFF',
|
||
'mainColor': '',
|
||
'mainColor2': '',
|
||
'textColor': '',
|
||
'backgroundColor': '',
|
||
'center': '',
|
||
'centerPosition': '',
|
||
'provinceBgColor': ''
|
||
},
|
||
taskDetail: [
|
||
{
|
||
name: 'API每秒请求数 times/s',
|
||
num: 119.083
|
||
},
|
||
{
|
||
name: 'API请求延迟 ms',
|
||
num: 2.71
|
||
},
|
||
{
|
||
name: '调度器 调度次数',
|
||
num: 5
|
||
},
|
||
{
|
||
name: '调度失败的 容器节点',
|
||
num: 1
|
||
}
|
||
],
|
||
resizeKey: 0,
|
||
dialogVisible: false,
|
||
rs: new FormData(),
|
||
fileList: [],
|
||
powerData: {},
|
||
pageSize: 100,
|
||
taskData: {},
|
||
currentDate: '',
|
||
tendData: { used: [], xData: [] },
|
||
centerData: { used: [], xData: [] },
|
||
tendConfig: { unit: '单位: 卡时', status: ['使用量'] },
|
||
statusConfig: { unit: '单位: 卡时', status: ['使用量'] },
|
||
tabLightList: [
|
||
{
|
||
id: 'cluster',
|
||
title: '容器管理',
|
||
icon: 'rongqiguanli',
|
||
path: '/cluster/clusterMapViews'
|
||
},
|
||
{
|
||
id: 'virtual',
|
||
title: '虚拟机管理',
|
||
icon: 'xunijiguanlimokuai',
|
||
path: '/virtual/overview'
|
||
},
|
||
{
|
||
id: 'jccSchedule',
|
||
title: '调度中心',
|
||
icon: 'yunweijiankongmokuai',
|
||
path: '/jccSchedule/resourceLogicView'
|
||
},
|
||
{
|
||
id: 'disk',
|
||
title: '云际存储',
|
||
icon: 'xunijiguanli-juan',
|
||
path: '/disk'
|
||
},
|
||
{
|
||
id: 'functions',
|
||
title: '函数管理',
|
||
icon: 'fuwu',
|
||
path: '/functions/overview'
|
||
},
|
||
{
|
||
id: 'blockChain',
|
||
title: '云际记账',
|
||
icon: 'yunjijizhang',
|
||
path: '/blockChain/blockChainBrowser'
|
||
},
|
||
{
|
||
id: 'hpc',
|
||
title: '超算管理',
|
||
icon: 'fuwu',
|
||
path: '/hpc/hpcOverview'
|
||
},
|
||
{
|
||
id: 'hpc',
|
||
title: '智算管理',
|
||
icon: 'fuwu',
|
||
description: '智算管理描述',
|
||
path: '/modelarts/overview'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
computed: {
|
||
jcceTheme() {
|
||
return localStorage.getItem('jcceTheme')
|
||
},
|
||
filteredLightTab() {
|
||
return this.tabLightList.filter(e => this.menus.includes(e.id))
|
||
}
|
||
},
|
||
created() {
|
||
getMonitorSetting().then(e => {
|
||
this.monitorSettingForm = e.data
|
||
})
|
||
this.getTend()
|
||
this.getAccrueCenter()
|
||
this.getTrainJob()
|
||
this.resize()
|
||
|
||
window.addEventListener('resize', debounce(() => {
|
||
this.resizeKey++
|
||
}, 100))
|
||
},
|
||
mounted() {
|
||
this.getPower()
|
||
// this.scaleListener()
|
||
},
|
||
methods: {
|
||
getPower() {
|
||
getScreenInfo().then((res) => {
|
||
this.powerData = res.data
|
||
})
|
||
},
|
||
toMonitor() {
|
||
window.open('http://192.168.19.164:8181/#/taskList')
|
||
},
|
||
toHashCat() {
|
||
window.open('https://dev.jointcloud.net/hashcat/')
|
||
},
|
||
handleRemove() {
|
||
this.rs.delete('file')
|
||
},
|
||
httpRequest(data) {
|
||
const isJar = data.file.name.indexOf('.yaml') === (data.file.name.length - 5)
|
||
if (!isJar) {
|
||
this.$message.warning('上传文件只能是 yaml 格式!')
|
||
} else {
|
||
this.rs.set('file', data.file)
|
||
}
|
||
},
|
||
submitFile() {
|
||
if (!this.rs.has('file')) {
|
||
this.$message.warning('请上传yaml文件')
|
||
return false
|
||
} else {
|
||
createScheduleTask(this.rs).then(res => {
|
||
if (res.code === 200) {
|
||
this.$message.success('操作成功')
|
||
this.dialogVisible = false
|
||
this.getTrainJob()
|
||
}
|
||
})
|
||
}
|
||
},
|
||
viewMenu(path) {
|
||
path ? this.$store.dispatch('user/setRouteType', path.split('/')[0]) : {}
|
||
this.$router.push({ path: path || `/monitorSelectBk` })
|
||
},
|
||
// scaleListener() {
|
||
// window.addEventListener('resize', this.resize())
|
||
// },
|
||
resize() {
|
||
// 与原来 1080 的比值
|
||
const scale = window.innerHeight / 900
|
||
if (scale >= 1) {
|
||
document.documentElement.style.fontSize = `${16 * scale}px`
|
||
} else {
|
||
document.documentElement.style.fontSize = `${14 * scale}px`
|
||
}
|
||
},
|
||
getCurrentDate() {
|
||
const date = moment().format('yyyy年MM月DD日')
|
||
const week = moment().format('E')
|
||
switch (week) {
|
||
case '1':
|
||
this.currentDate = date + ' ' + '星期一'
|
||
break
|
||
case '2':
|
||
this.currentDate = date + ' ' + '星期二'
|
||
break
|
||
case '3':
|
||
this.currentDate = date + ' ' + '星期三'
|
||
break
|
||
case '4':
|
||
this.currentDate = date + ' ' + '星期四'
|
||
break
|
||
case '5':
|
||
this.currentDate = date + ' ' + '星期五'
|
||
break
|
||
case '6':
|
||
this.currentDate = date + ' ' + '星期六'
|
||
break
|
||
case '0':
|
||
this.currentDate = date + ' ' + '星期日'
|
||
break
|
||
}
|
||
},
|
||
// changePage(type) {
|
||
// if (type === 'left') {
|
||
// // 滑动到最左
|
||
// } else {
|
||
// // 滑到最右
|
||
// }
|
||
// },
|
||
getImg(src) {
|
||
const srcName = src === 'disk' || src === 'jccSchedule' ? 'blockChain' : src
|
||
return require('@/assets/img/' + srcName + '.png')
|
||
},
|
||
selectMonitor(monitor) {
|
||
if (monitor === '/disk') {
|
||
if (this.name === 'admin') {
|
||
window.location.href = '/disk/storage/sourceSetting'
|
||
} else {
|
||
window.location.href = '/disk/storage/diskList'
|
||
}
|
||
}
|
||
this.$store.dispatch('user/setRouteType', monitor.split('/')[1])
|
||
this.$router.push({ path: monitor })
|
||
},
|
||
getTend() {
|
||
getComputePower().then((res) => {
|
||
this.tendData = { used: [], xData: [] }
|
||
if (res.dailyComputerPowers !== null) {
|
||
const timeArr = []// 最近12个月的月份
|
||
for (let i = 0; i < 180; i++) {
|
||
timeArr.push(
|
||
`${moment(new Date()).subtract(i, 'days').format('YYYY-MM-DD')}`
|
||
)
|
||
}
|
||
timeArr.reverse()// 时间排序
|
||
const arr = [] // 模拟一个假数据
|
||
for (let i = 0; i < timeArr.length; i++) {
|
||
arr.push({ date: timeArr[i], computerPower: 0 })
|
||
// 将真实数据塞进arr里面
|
||
for (let j = 0; j < res.dailyComputerPowers.length; j++) {
|
||
if (res.dailyComputerPowers[j].date === timeArr[i]) {
|
||
arr[i] = { date: res.dailyComputerPowers[j].date, computerPower: res.dailyComputerPowers[j].computerPower }
|
||
}
|
||
}
|
||
}
|
||
arr.forEach((item) => {
|
||
this.tendData.used.push(item.computerPower.toFixed(1))
|
||
this.tendData.xData.push(item.date)
|
||
})
|
||
}
|
||
})
|
||
},
|
||
getTaskTotal() {
|
||
// getAccrueCenter().then((res) => {
|
||
// if (res.perCenterComputerPowers) {
|
||
// const data = res.accOtJobInfo
|
||
// this.accrueData = {
|
||
// config1: data.accCardRunSec,
|
||
// config2: data.accOtJobNum,
|
||
// config3: data.accRunSec
|
||
// }
|
||
// }
|
||
// })
|
||
},
|
||
getAccrueCenter() {
|
||
getCPUsage().then((res) => {
|
||
this.centerData = { used: [], xData: [] }
|
||
if (res.perCenterComputerPowers) {
|
||
const data = res.accOtJobInfo
|
||
this.accrueData = {
|
||
config1: data.accCardRunSec,
|
||
config2: data.accOtJobNum,
|
||
config3: data.accRunSec
|
||
}
|
||
const data1 = res.perCenterComputerPowers.filter(item => {
|
||
if (item.computerPower !== 0) {
|
||
return item
|
||
}
|
||
})
|
||
// this.timer = setInterval(() => {
|
||
// this.getTaskTotal()
|
||
// }, 1000)
|
||
data1.sort(order)
|
||
data1.forEach((item) => {
|
||
if (item.computerPower !== 0) {
|
||
this.centerData.used.push(item.computerPower.toFixed(1))
|
||
this.centerData.xData.push(item.centerName)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
getTrainJob() {
|
||
getTaskCount().then(e => {
|
||
this.taskData = {
|
||
tableData: [],
|
||
totalCount: e.data?.allJobCount || 0,
|
||
cardTime: e.data?.allCardRunTime || 0,
|
||
totalRunTime: e.data?.allJobRunTime || 0
|
||
}
|
||
e.data?.trainJobs?.forEach((item) => {
|
||
this.taskData.tableData.push({
|
||
name: item.name,
|
||
status: item.status,
|
||
strategy: item.strategy,
|
||
serviceName: item.serviceName,
|
||
synergyStatus: item.synergyStatus
|
||
// undertaker: this.showUnderTaker(item)
|
||
})
|
||
})
|
||
})
|
||
},
|
||
showUnderTaker(item) {
|
||
if (item.tasks == null) {
|
||
return ''
|
||
} else if (item.tasks.length > 2) {
|
||
return item.tasks[0].centerName[0] + '等'
|
||
} else {
|
||
if (item.tasks[0].centerName == null) {
|
||
return ''
|
||
} else {
|
||
return item.tasks[0].centerName[0]
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "~@/styles/variables.scss";
|
||
|
||
::v-deep {
|
||
.el-dialog {
|
||
background: #2c3a4e !important;
|
||
color: white;
|
||
}
|
||
.el-upload-list__item-name {
|
||
color: #ffffff;
|
||
}
|
||
.el-upload-list__item:hover {
|
||
background-color: rgb(86, 90, 95)
|
||
}
|
||
.el-button--default {
|
||
color: white;
|
||
background: rgba(255,255,255,0.1);
|
||
border-color: rgba(255,255,255,0.01);
|
||
}
|
||
.el-dialog__title {
|
||
color: white;
|
||
}
|
||
}
|
||
|
||
.monitor {
|
||
background: url('../../assets/monitor/monitor_bg.jpeg') no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 100%;
|
||
min-width: 1200px;
|
||
height: 100vh;
|
||
min-height: 900px;
|
||
overflow: hidden;
|
||
color: white;
|
||
font-size: 0.8rem;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
display: block;
|
||
overflow: hidden;
|
||
.top {
|
||
width: 100%;
|
||
height: 8vh;
|
||
// vertical-align: baseline;
|
||
position: absolute;
|
||
z-index: 99;
|
||
background: url(../../assets/monitor/top-bg.png) center top no-repeat;
|
||
background-size: 100% 65%;
|
||
.top-title{
|
||
margin:0 auto;
|
||
// font-weight: bold;
|
||
// font-family: PangMenZhengDao;
|
||
// float: left;
|
||
// padding: 1rem 8rem;
|
||
// padding-right: 0;
|
||
height: 100%;
|
||
background: url(../../assets/monitor/c-top.png) center no-repeat;
|
||
background-size: 55% 10vh;
|
||
h1{
|
||
margin: 0;
|
||
font-size: 2rem;
|
||
line-height: 6vh;
|
||
letter-spacing: 0.3rem;
|
||
text-align: center;
|
||
text-shadow: 3px 5px 0px rgba(17,20,22,0.22);
|
||
background: linear-gradient(0deg, rgba(36,83,152,0.35) 0%, rgba(255,255,255,0.35) 100%);
|
||
background-clip: text;
|
||
-webkit-text-fill-color: #ffffff;
|
||
// background: linear-gradient(0deg, rgba(36,83,152,0.35) 0%, rgba(255,255,255,0.35) 100%);
|
||
// -webkit-background-clip: text;
|
||
// -webkit-text-fill-color: transparent;
|
||
}
|
||
// box-shadow: 0px 20px 10px 0px #02020a96;
|
||
}
|
||
}
|
||
.top-menu{
|
||
width: 100%;
|
||
position: absolute;
|
||
z-index: 100;
|
||
.menu a, .right a {
|
||
float: left;
|
||
font-size: 1.13rem;
|
||
display: block;
|
||
padding: 0.9rem 60px;
|
||
height: 3.5rem;
|
||
letter-spacing: 0.2rem;
|
||
}
|
||
.menu a, .right a{
|
||
&:hover{
|
||
background: url(../../assets/monitor/t-p.png) center no-repeat;
|
||
background-size: auto 70%;
|
||
}
|
||
}
|
||
.menu a:first-child{
|
||
background: url(../../assets/monitor/t-p.png) center no-repeat;
|
||
background-size: auto 70%;
|
||
}
|
||
.right {
|
||
a { float: right;}
|
||
// float: right;
|
||
}
|
||
|
||
}
|
||
.title{
|
||
background: url('../../assets/monitor/title-bg.png') no-repeat left;
|
||
background-size: 105% 100%;
|
||
background-position: -3.5vh;
|
||
height: 4.5vh;
|
||
p{
|
||
font-size: 1.4rem;
|
||
height: 2.8rem;
|
||
line-height: 2.3rem;
|
||
text-indent: 2.8vw;
|
||
margin: 0;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
letter-spacing: 0.2rem;
|
||
text-shadow: 0px 2px 8px rgba(5,28,55,0.42);
|
||
|
||
background: linear-gradient(0deg, rgba(14,197,236,1) 0%, rgba(49,190,255,1) 0%, rgba(239,252,254,1) 58.7646484375%);
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
|
||
}
|
||
}
|
||
.floatLeft, .floatRight{
|
||
margin-top: 5vh;
|
||
}
|
||
.middle{
|
||
width: 38vw;
|
||
position: absolute;
|
||
left: 31vw;
|
||
z-index: 99;
|
||
margin-top: 10vh;
|
||
}
|
||
.floatLeft, .floatRight{
|
||
padding: 0 1vh 0 2vh;
|
||
padding-top: 5vh;
|
||
padding-bottom: 4vh;
|
||
}
|
||
.floatLeft .left::before, .floatRight .right::after{
|
||
// margin-top: 6vh;
|
||
content: '';
|
||
width: 27vw;
|
||
height: 95vh;
|
||
display:block;
|
||
position: absolute;
|
||
top: -5.2vh;
|
||
right: -2vh;
|
||
background: url(../../assets/monitor/left.png) no-repeat;
|
||
background-size: 100% 98%;
|
||
z-index: -1;
|
||
}
|
||
|
||
.floatLeft .left:after, .floatRight .right:before{
|
||
content: '';
|
||
width: 2vw;
|
||
height: 85vh;
|
||
position: absolute;
|
||
right: -3.5vw;
|
||
top: 3px;
|
||
display: block;
|
||
background: url(../../assets/monitor/leftr.png) no-repeat;
|
||
background-size: 100% 98%;
|
||
}
|
||
.floatRight .right:before{
|
||
left: -3.5vw;
|
||
-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
|
||
-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
|
||
-o-transform:matrix(-1,0,0,1,0,0);
|
||
}
|
||
.floatLeft{
|
||
// background: #02020a96;
|
||
// box-shadow: 20px -30px 30px 0px #02020a96;
|
||
width: 27vw;
|
||
display: block;
|
||
// overflow: hidden;
|
||
position: absolute;
|
||
left: 0;
|
||
z-index: 10;
|
||
height: 95vh;
|
||
min-height: 800px;
|
||
.left {
|
||
width: 100%;
|
||
height: 90vh;
|
||
padding-left: 10px;
|
||
display: block;
|
||
position: relative;
|
||
&:before{
|
||
left: -2vh;
|
||
}
|
||
.left_1{
|
||
height: 32vh;
|
||
overflow: hidden;
|
||
}
|
||
.left_2 {
|
||
height: 30vh;
|
||
.taskDiv{
|
||
// display: flex;
|
||
// justify-content: space-between;
|
||
text-align: center;
|
||
margin-bottom: 1%;
|
||
// height: calc(100% - 190px);
|
||
>div{
|
||
background: url('../../assets/images/monitorSelect/data-bg.png') no-repeat center;
|
||
background-size: auto 100%;
|
||
height: 11vh;
|
||
margin-top: 2vh;
|
||
// width: 25%;
|
||
.num{
|
||
font-size: 1.5rem;
|
||
font-family: Impact;
|
||
color: #FFFFFF;
|
||
letter-spacing: 0.1rem;
|
||
font-family: PangMenZhengDao;
|
||
// height: 3vh;
|
||
// line-height: 4vh;
|
||
height: 3vh;
|
||
line-height: 2rem;
|
||
margin-bottom: 1vh;
|
||
}
|
||
.name{
|
||
font-size: 0.8rem;
|
||
letter-spacing: 0.1rem;
|
||
width: 60%;
|
||
margin: auto;
|
||
// font-weight: bold;
|
||
height: 70%;
|
||
// line-height: 300%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.left_3 {
|
||
width: 100%;
|
||
height: 15vh;
|
||
}
|
||
// .left_4{
|
||
// height: 12vh;
|
||
// }
|
||
}
|
||
}
|
||
.floatRight {
|
||
// background: #02020a96;
|
||
// box-shadow: -20px -30px 30px 0px #02020a96;
|
||
background: none;
|
||
width: 27vw;
|
||
display: block;
|
||
// overflow: hidden;
|
||
position: absolute;
|
||
right: 0;
|
||
z-index: 10;
|
||
height: 95vh;
|
||
min-height: 800px;
|
||
padding: 0 2vh 0 1vh;
|
||
padding-top: 5vh;
|
||
padding-bottom: 4vh;
|
||
.createBtn{
|
||
height: 2.5vh;
|
||
line-height: 2.3vh;
|
||
margin: 0;
|
||
padding: 0 1rem;
|
||
position: absolute;
|
||
top: 0.5vh;
|
||
right: 2vh;
|
||
div{
|
||
font-size: 0.9rem;
|
||
@media screen and (max-height: 900px) {
|
||
transform: scale(0.8);
|
||
// transform-origin: 0;
|
||
}
|
||
}
|
||
}
|
||
.right {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding-right: 10px;
|
||
display: block;
|
||
position: relative;
|
||
&:after{
|
||
// padding: 0 20px 0 10px;
|
||
-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
|
||
-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
|
||
-o-transform:matrix(-1,0,0,1,0,0);
|
||
z-index: -1;
|
||
// padding-top: 50px;
|
||
// padding-bottom: 40px;
|
||
}
|
||
.right_1{
|
||
height: 50vh;
|
||
overflow: hidden;
|
||
}
|
||
.right_2{
|
||
// height: 31%;
|
||
height: 40vh;
|
||
}
|
||
.right_3{
|
||
height: 21vh;
|
||
// height: 27%;
|
||
}
|
||
}
|
||
}
|
||
// .fixedBottom {
|
||
// width:50vw;
|
||
// bottom: 0;
|
||
// display: block;
|
||
// position: absolute;
|
||
// z-index: 10;
|
||
// height: 13vh;
|
||
// left: 25vw;
|
||
// .el-row{position:relative; height: 100%}
|
||
// .lightLeft{
|
||
// font-size: 30px;
|
||
// position: absolute;
|
||
// left: -20px;
|
||
// top: 3vh;
|
||
// z-index: 10;
|
||
// color: #DDD;
|
||
// }
|
||
// .lightRight{
|
||
// font-size: 30px;
|
||
// position: absolute;
|
||
// right: -20px;
|
||
// top: 3vh;
|
||
// z-index: 10;
|
||
// color: #DDD;
|
||
// }
|
||
// // display：flex 样式
|
||
// .div-block{
|
||
// display: flex;
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// overflow: hidden;
|
||
// .monitorSelectDiv{
|
||
// display: block;
|
||
// height: 100%;
|
||
// width: 8.33vw;
|
||
// }
|
||
// > div{
|
||
// display: block;
|
||
// width: 100%;
|
||
// max-width: 8.5vw;
|
||
// font-size: 20px;
|
||
// color: #ffffff;
|
||
// height: 100vh;
|
||
// position: relative;
|
||
// text-align: center;
|
||
// &:hover{
|
||
// color: #3182CE;
|
||
// }
|
||
// .svg-icon {
|
||
// font-size: 80px;
|
||
// margin: 0 auto;
|
||
// }
|
||
// .selectTitle {
|
||
// margin-bottom: 24px;
|
||
// font-size: 16px;
|
||
// }
|
||
// span{
|
||
// display: block;
|
||
// padding: 0 100px;
|
||
// font-size: 14px;
|
||
// line-height: 24px;
|
||
// }
|
||
// }
|
||
// }
|
||
// }
|
||
}
|
||
|
||
// @media screen and (min-width: 1921px) {
|
||
// .monitor {
|
||
// font-size: 16px;
|
||
// .top {
|
||
// .top-title {
|
||
// font-size: 32px;
|
||
// padding: 10px 100px;
|
||
// img{
|
||
// top: 35px;
|
||
// }
|
||
// }
|
||
// }
|
||
// .title{
|
||
// font-size: 20px;
|
||
// height: 70px;
|
||
// }
|
||
// .middle, .floatLeft, .floatRight{
|
||
// margin-top: 110px;
|
||
// }
|
||
// }
|
||
// }
|
||
</style>
|
||
|
||
<style lang="less" rel="stylesheet/less">
|
||
@import "../../common/font/font.css";
|
||
</style>
|