解决启动时终端warning警告，温湿度，风速图表问题解决
This commit is contained in:
BianLzhaoMin
parent
d7eac118cc
commit
65fbfb1fff
|
|
@ -1,104 +1,104 @@
|
|||
<template>
|
||||
<div class="tit-cont">
|
||||
<div class="inner-tit">
|
||||
<div
|
||||
v-for="item in titList"
|
||||
:key="item.id"
|
||||
:class="[ 'single-tit', { isActive: currentIndex === item.id } ]"
|
||||
@click="changeTitle(item)"
|
||||
>
|
||||
<h4>
|
||||
<span v-if="item.title !== null">{{ item.title }}</span>
|
||||
<img
|
||||
v-if="item.title !== null && currentIndex === item.id"
|
||||
src="../assets/img/tit-bottom.png"
|
||||
alt=""/>
|
||||
<img
|
||||
v-if="item.title !== null && currentIndex !== item.id"
|
||||
src="../assets/img/title-nosel.png"
|
||||
alt=""/>
|
||||
</h4>
|
||||
</div>
|
||||
<!-- <div class="tit-cen"></div>
|
||||
<div class="tit-cont">
|
||||
<div class="inner-tit">
|
||||
<div
|
||||
v-for="item in titList"
|
||||
:key="item.id"
|
||||
:class="['single-tit', { isActive: currentIndex === item.id }]"
|
||||
@click="changeTitle(item)"
|
||||
>
|
||||
<h4>
|
||||
<span v-if="item.title !== null">{{ item.title }}</span>
|
||||
<img
|
||||
v-if="item.title !== null && currentIndex === item.id"
|
||||
src="../assets/img/tit-bottom.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
v-if="item.title !== null && currentIndex !== item.id"
|
||||
src="../assets/img/title-nosel.png"
|
||||
alt=""
|
||||
/>
|
||||
</h4>
|
||||
</div>
|
||||
<!-- <div class="tit-cen"></div>
|
||||
<div class="tit-rig">2</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'globalBar',
|
||||
props: {
|
||||
indexCount: {
|
||||
type: Number,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
titList: [
|
||||
{ title: '首页', id: 1, path: '/Home/index' },
|
||||
{ title: '变电', id: 2, path: '/substation/index' },
|
||||
{ title: null, id: null },
|
||||
{ title: null, id: null },
|
||||
{ title: '线路', id: 3, path: '/line/index' },
|
||||
{ title: '工作台', id: 4, path: '/workbench/index' },
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeTitle(val) {
|
||||
// console.log(val, this.$router)
|
||||
this.currentIndex = val.id
|
||||
this.$router.push({
|
||||
path: val.path
|
||||
})
|
||||
}
|
||||
}
|
||||
name: 'globalBar',
|
||||
props: {
|
||||
indexCount: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
titList: [
|
||||
{ title: '首页', id: 1, path: '/Home/index' },
|
||||
{ title: '变电', id: 2, path: '/substation/index' },
|
||||
{ title: null, id: null },
|
||||
{ title: null, id: null },
|
||||
{ title: '线路', id: 3, path: '/line/index' },
|
||||
{ title: '工作台', id: 4, path: '/workbench/index' },
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeTitle(val) {
|
||||
// console.log(val, this.$router)
|
||||
this.currentIndex = val.id
|
||||
this.$router.push({
|
||||
path: val.path,
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.tit-cont{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
background: url(../assets/img/title.png) no-repeat center;
|
||||
|
||||
.inner-tit{
|
||||
.tit-cont {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: end;
|
||||
height: 110px;
|
||||
background: url(../assets/img/title.png) no-repeat center;
|
||||
|
||||
.single-tit{
|
||||
font-size: 22px;
|
||||
width: 10%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
color: #ABB0B8;
|
||||
cursor: pointer;
|
||||
h4{
|
||||
.inner-tit {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
align-items: flex-end;
|
||||
|
||||
.single-tit {
|
||||
font-size: 22px;
|
||||
width: 10%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
color: #abb0b8;
|
||||
cursor: pointer;
|
||||
h4 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.isActive {
|
||||
color: #2859b4;
|
||||
}
|
||||
}
|
||||
}
|
||||
.isActive{
|
||||
color: #2859B4;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,78 +1,116 @@
|
|||
<template>
|
||||
<div class="homePage">
|
||||
<div class="container" v-if="!showSubView">
|
||||
<!-- 左侧数据模块列表 -->
|
||||
<div class="leftModuleBox">
|
||||
<div style="height: 200px; margin-bottom: 10px" >
|
||||
<LeftOne :key="childKey" @openDialog="handleDialog"></LeftOne>
|
||||
</div>
|
||||
<div style="height: 430px; margin-bottom: 10px">
|
||||
<LeftTwo :key="childKey" @openDialog="handleDialog"></LeftTwo>
|
||||
</div>
|
||||
<div style="height: 300px">
|
||||
<LeftThree :key="childKey" @openDialog="handleDialog"></LeftThree>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中间3D效果展示 -->
|
||||
<div class="centerModuleBox">
|
||||
<div class="center-top">
|
||||
<!-- 宁夏地图 -->
|
||||
<CountryMap
|
||||
:send-height="'627px'"
|
||||
:send-geo="geoData"
|
||||
@closeMap="handleCloseMap"
|
||||
></CountryMap>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧数据模块列表 -->
|
||||
<div class="rightModuleBox">
|
||||
<div style="height: 470px; margin-bottom: 10px">
|
||||
<RightOne :key="childKey" @openDialog="handleDialog"></RightOne>
|
||||
</div>
|
||||
<div style="height: 470px">
|
||||
<rightTwo :key="childKey" @openDialog="handleDialog"></rightTwo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 地图点击二级页面 -->
|
||||
<div class="page-cont" v-if="showSubView">
|
||||
<div class="lef-secs">
|
||||
<div style="display: flex;margin-bottom: 20px;align-items: center;">
|
||||
<img src="../../assets/img/back.png" alt="" @click="handelCloseSub">
|
||||
<div style="color: #000;font-size: 24px;font-weight: bold;margin-left: 20px;">{{ lefSendMsg.projName }}</div>
|
||||
<div class="homePage">
|
||||
<div class="container" v-if="!showSubView">
|
||||
<!-- 左侧数据模块列表 -->
|
||||
<div class="leftModuleBox">
|
||||
<div style="height: 200px; margin-bottom: 10px">
|
||||
<LeftOne
|
||||
:key="childKey"
|
||||
@openDialog="handleDialog"
|
||||
></LeftOne>
|
||||
</div>
|
||||
<div style="height: 430px; margin-bottom: 10px">
|
||||
<LeftTwo
|
||||
:key="childKey"
|
||||
@openDialog="handleDialog"
|
||||
></LeftTwo>
|
||||
</div>
|
||||
<div style="height: 300px">
|
||||
<LeftThree
|
||||
:key="childKey"
|
||||
@openDialog="handleDialog"
|
||||
></LeftThree>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="['single-sec', { isActive: currentLefIndex === item.id }]" v-for="item in searchLefSec" :key="item.id" @click="changeLefSec(item)">
|
||||
{{ item.title }}
|
||||
|
||||
<!-- 中间3D效果展示 -->
|
||||
<div class="centerModuleBox">
|
||||
<div class="center-top">
|
||||
<!-- 宁夏地图 -->
|
||||
<CountryMap
|
||||
:send-height="'627px'"
|
||||
:send-geo="geoData"
|
||||
@closeMap="handleCloseMap"
|
||||
></CountryMap>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧数据模块列表 -->
|
||||
<div class="rightModuleBox">
|
||||
<div style="height: 470px; margin-bottom: 10px">
|
||||
<RightOne
|
||||
:key="childKey"
|
||||
@openDialog="handleDialog"
|
||||
></RightOne>
|
||||
</div>
|
||||
<div style="height: 470px">
|
||||
<rightTwo
|
||||
:key="childKey"
|
||||
@openDialog="handleDialog"
|
||||
></rightTwo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 地图点击二级页面 -->
|
||||
<div class="page-cont" v-if="showSubView">
|
||||
<div class="lef-secs">
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<img
|
||||
src="../../assets/img/back.png"
|
||||
alt=""
|
||||
@click="handelCloseSub"
|
||||
/>
|
||||
<div
|
||||
style="
|
||||
color: #000;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-left: 20px;
|
||||
"
|
||||
>{{ lefSendMsg.projName }}</div
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
:class="[
|
||||
'single-sec',
|
||||
{ isActive: currentLefIndex === item.id },
|
||||
]"
|
||||
v-for="item in searchLefSec"
|
||||
:key="item.id"
|
||||
@click="changeLefSec(item)"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rig-components">
|
||||
<man-detect
|
||||
v-if="currentLefIndex === 1"
|
||||
:send-msg="lefSendMsg"
|
||||
></man-detect>
|
||||
<envir-detect
|
||||
v-if="currentLefIndex === 2"
|
||||
:send-msg="lefSendMsg"
|
||||
></envir-detect>
|
||||
<tower-detect
|
||||
v-if="currentLefIndex === 3"
|
||||
:send-msg="lefSendMsg"
|
||||
></tower-detect>
|
||||
<pit-detect
|
||||
v-if="currentLefIndex === 4"
|
||||
:send-msg="lefSendMsg"
|
||||
></pit-detect>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rig-components">
|
||||
<man-detect
|
||||
v-if="currentLefIndex === 1"
|
||||
:send-msg="lefSendMsg"
|
||||
></man-detect>
|
||||
<envir-detect
|
||||
v-if="currentLefIndex === 2"
|
||||
:send-msg="lefSendMsg"
|
||||
></envir-detect>
|
||||
<tower-detect
|
||||
v-if="currentLefIndex === 3"
|
||||
:send-msg="lefSendMsg"
|
||||
></tower-detect>
|
||||
<pit-detect
|
||||
v-if="currentLefIndex === 4"
|
||||
:send-msg="lefSendMsg"
|
||||
></pit-detect>
|
||||
</div>
|
||||
<!-- 弹窗统一控制组件 -->
|
||||
<common-dialog ref="dialogRef"></common-dialog>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- 弹窗统一控制组件 -->
|
||||
<common-dialog ref="dialogRef"></common-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -97,365 +135,346 @@ import ManDetect from '../../components/substation/manDetect.vue'
|
|||
import EnvirDetect from '../../components/substation/envirDetect.vue'
|
||||
import TowerDetect from '../../components/substation/towerDetect.vue'
|
||||
import PitDetect from '../../components/substation/pitDetect.vue'
|
||||
import {
|
||||
querySubProjInfoApi
|
||||
} from '@/api/substation/substation'
|
||||
import { querySubProjInfoApi } from '@/api/substation/substation'
|
||||
export default {
|
||||
components: {
|
||||
GlobalBar,
|
||||
LeftOne,
|
||||
LeftTwo,
|
||||
LeftThree,
|
||||
LeftFour,
|
||||
RightOne,
|
||||
rightTwo,
|
||||
rightThree,
|
||||
RightFour,
|
||||
CenterBottom,
|
||||
Center3DMap,
|
||||
CenterTop,
|
||||
CountryMap,
|
||||
CenterFold,
|
||||
CommonDialog,
|
||||
DipDialog,
|
||||
EnvirDialog,
|
||||
ManDetect,
|
||||
EnvirDetect,
|
||||
TowerDetect,
|
||||
PitDetect
|
||||
},
|
||||
name: 'Home',
|
||||
data() {
|
||||
return {
|
||||
childKey: 0,
|
||||
currentIndex: 1,
|
||||
geoData: undefined,
|
||||
currentLefIndex: null,
|
||||
searchIpt: undefined,
|
||||
lefSecList: [
|
||||
{ title: '人员检测类', id: 1 },
|
||||
{ title: '环境检测类', id: 2 },
|
||||
{ title: '组塔检测类', id: 3 },
|
||||
{ title: '基坑检测类', id: 4 },
|
||||
],
|
||||
lefSendMsg: undefined,
|
||||
showSubView:false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// const map = new BMap.Map('map-container')
|
||||
// this.map = map
|
||||
},
|
||||
components: {
|
||||
GlobalBar,
|
||||
LeftOne,
|
||||
LeftTwo,
|
||||
LeftThree,
|
||||
LeftFour,
|
||||
RightOne,
|
||||
rightTwo,
|
||||
rightThree,
|
||||
RightFour,
|
||||
CenterBottom,
|
||||
Center3DMap,
|
||||
CenterTop,
|
||||
CountryMap,
|
||||
CenterFold,
|
||||
CommonDialog,
|
||||
DipDialog,
|
||||
EnvirDialog,
|
||||
ManDetect,
|
||||
EnvirDetect,
|
||||
TowerDetect,
|
||||
PitDetect,
|
||||
},
|
||||
name: 'Home',
|
||||
data() {
|
||||
return {
|
||||
childKey: 0,
|
||||
currentIndex: 1,
|
||||
geoData: undefined,
|
||||
currentLefIndex: null,
|
||||
searchIpt: undefined,
|
||||
lefSecList: [
|
||||
{ title: '人员检测类', id: 1 },
|
||||
{ title: '环境检测类', id: 2 },
|
||||
{ title: '组塔检测类', id: 3 },
|
||||
{ title: '基坑检测类', id: 4 },
|
||||
],
|
||||
lefSendMsg: undefined,
|
||||
showSubView: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// const map = new BMap.Map('map-container')
|
||||
// this.map = map
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getGeoData()
|
||||
setInterval(() => {
|
||||
this.childKey++
|
||||
this.getGeoData()
|
||||
}, 1000 * 60)
|
||||
/* this.geoData = [
|
||||
mounted() {
|
||||
this.getGeoData()
|
||||
setInterval(() => {
|
||||
this.childKey++
|
||||
this.getGeoData()
|
||||
}, 1000 * 60)
|
||||
/* this.geoData = [
|
||||
{ name: '北京市', projName: '王府井工程', itemStyle: { normal: { areaColor: '#7DDEFF' } }, value: [116.407526, 39.90403] },
|
||||
{ name: '上海市', projName: '外滩工程', itemStyle: { normal: { areaColor: '#7DDEFF' } }, value: [121.473701, 31.230416] },
|
||||
{ name: '云南省', projName: '香格里拉工程', itemStyle: { normal: { areaColor: '#7DDEFF' } }, value: [102.103365, 24.235567] },
|
||||
{ name: '陕西省', projName: '大雁塔工程', itemStyle: { normal: { areaColor: '#7DDEFF' } }, value: [108.551244, 34.150234] },
|
||||
{ name: '新疆维吾尔自治区', projName: '喀什工程', itemStyle: { normal: { areaColor: '#7DDEFF' } }, value: [87.627704, 43.793026] },
|
||||
] */
|
||||
},
|
||||
computed: {
|
||||
searchLefSec() {
|
||||
if(!this.searchIpt) {
|
||||
return this.lefSecList
|
||||
}
|
||||
return this.lefSecList.filter(item => {
|
||||
return item.title.includes(this.searchIpt)
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getGeoData() {
|
||||
let res = await querySubProjInfoApi()
|
||||
console.log(res, 'geo')
|
||||
this.geoData = res.data.data.map(item => {
|
||||
console.log(item)
|
||||
return {
|
||||
name: item.projectName,
|
||||
// province: item.areaName,
|
||||
projName: item.projectName,
|
||||
projectId: item.projectId,
|
||||
devTypeNum: item.devTypeNum,
|
||||
devNum: item.devNum,
|
||||
successNum: item.successNum,
|
||||
errorNum: item.errorNum,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#7DDEFF'
|
||||
},
|
||||
computed: {
|
||||
searchLefSec() {
|
||||
if (!this.searchIpt) {
|
||||
return this.lefSecList
|
||||
}
|
||||
},
|
||||
value: [
|
||||
Number(item.lon),
|
||||
Number(item.lat)
|
||||
],
|
||||
currentLefIndex: null,
|
||||
lefSecList: [
|
||||
{ title: '人员检测类', id: 1 },
|
||||
{ title: '环境检测类', id: 2 },
|
||||
{ title: '组塔检测类', id: 3 },
|
||||
{ title: '基坑检测类', id: 4 },
|
||||
],
|
||||
lefSendMsg: undefined,
|
||||
}
|
||||
})
|
||||
return this.lefSecList.filter((item) => {
|
||||
return item.title.includes(this.searchIpt)
|
||||
})
|
||||
},
|
||||
},
|
||||
handleDialog(val) {
|
||||
this.$refs.dialogRef.setOpen({
|
||||
open: true,
|
||||
param: val
|
||||
})
|
||||
methods: {
|
||||
async getGeoData() {
|
||||
let res = await querySubProjInfoApi()
|
||||
console.log(res, 'geo')
|
||||
this.geoData = res.data.data.map((item) => {
|
||||
console.log(item)
|
||||
return {
|
||||
name: item.projectName,
|
||||
// province: item.areaName,
|
||||
projName: item.projectName,
|
||||
projectId: item.projectId,
|
||||
devTypeNum: item.devTypeNum,
|
||||
devNum: item.devNum,
|
||||
successNum: item.successNum,
|
||||
errorNum: item.errorNum,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#7DDEFF',
|
||||
},
|
||||
},
|
||||
value: [Number(item.lon), Number(item.lat)],
|
||||
currentLefIndex: null,
|
||||
lefSecList: [
|
||||
{ title: '人员检测类', id: 1 },
|
||||
{ title: '环境检测类', id: 2 },
|
||||
{ title: '组塔检测类', id: 3 },
|
||||
{ title: '基坑检测类', id: 4 },
|
||||
],
|
||||
lefSendMsg: undefined,
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDialog(val) {
|
||||
this.$refs.dialogRef.setOpen({
|
||||
open: true,
|
||||
param: val,
|
||||
})
|
||||
},
|
||||
handleCloseMap(val) {
|
||||
console.log(val, 'closeMap')
|
||||
this.lefSendMsg = val.value
|
||||
this.currentLefIndex = 1
|
||||
this.showSubView = true
|
||||
},
|
||||
changeLefSec(val) {
|
||||
this.currentLefIndex = val.id
|
||||
},
|
||||
//关闭二级页面
|
||||
handelCloseSub() {
|
||||
this.showSubView = false
|
||||
this.getGeoData()
|
||||
},
|
||||
},
|
||||
handleCloseMap(val) {
|
||||
console.log(val, 'closeMap')
|
||||
this.lefSendMsg=val.value;
|
||||
this.currentLefIndex=1
|
||||
this.showSubView=true;
|
||||
},
|
||||
changeLefSec(val) {
|
||||
this.currentLefIndex = val.id
|
||||
},
|
||||
//关闭二级页面
|
||||
handelCloseSub(){
|
||||
this.showSubView = false
|
||||
this.getGeoData()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
<style lang="less" scoped>
|
||||
.homePage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(../../assets/img/bgd.png) no-repeat center;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
.tit-cont{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
background: url(../../assets/img/title.png) no-repeat center;
|
||||
|
||||
.inner-tit{
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: end;
|
||||
|
||||
.single-tit{
|
||||
font-size: 22px;
|
||||
width: 10%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
color: #ABB0B8;
|
||||
cursor: pointer;
|
||||
h4{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.isActive{
|
||||
color: #2859B4;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
// .homePage_title {
|
||||
// position: absolute;
|
||||
// left: 40.3%;
|
||||
// // top: 27%;
|
||||
// div {
|
||||
// width: 410px;
|
||||
// height: 55px;
|
||||
// font-size: 40px;
|
||||
// font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
||||
// font-weight: 800;
|
||||
// line-height: 60px;
|
||||
// letter-spacing: 8px;
|
||||
// text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
|
||||
// background-image: linear-gradient(
|
||||
// to bottom,
|
||||
// #f6fcff 50%,
|
||||
// #a5deff 75%; #69c9ff 100%
|
||||
// );
|
||||
// color: transparent;
|
||||
// background-clip: text;
|
||||
// }
|
||||
// }
|
||||
.container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 85px);
|
||||
|
||||
.leftModuleBox {
|
||||
width: 520px;
|
||||
padding-left: 26px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.centerModuleBox {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin: 0 15px;
|
||||
position: relative;
|
||||
|
||||
.homePage-fold {
|
||||
height: 100%;
|
||||
background: url(../../assets/img/bgd.png) no-repeat center;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
.tit-cont {
|
||||
position: absolute;
|
||||
left: 45%;
|
||||
top: -2%;
|
||||
width: 949px;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.buttom-box {
|
||||
position: absolute;
|
||||
left: 72%;
|
||||
top: 59%;
|
||||
|
||||
.buttonTop {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.buttom1 {
|
||||
width: 129px;
|
||||
height: 56px;
|
||||
background: url(../../assets/img/myImage/no_active.png) no-repeat
|
||||
center;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
line-height: 56px;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
color: #979bb2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.buttom1.on {
|
||||
width: 129px;
|
||||
height: 56px;
|
||||
background: url(../../assets/img/myImage/active.png) no-repeat center;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
line-height: 56px;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center-top {
|
||||
width: 100%;
|
||||
height: 755px;
|
||||
}
|
||||
|
||||
.center-bottom {
|
||||
min-height: calc(100vh - 85px - 655px);
|
||||
}
|
||||
|
||||
.rightModuleBox {
|
||||
width: 520px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
padding-right: 26px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-cont{
|
||||
width: 100%;
|
||||
height: 940px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.lef-secs{
|
||||
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
background-color: #F3F7FF;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #EFF2FC;
|
||||
box-shadow: 2px 2px 2px #D9E0F3;
|
||||
overflow-y: auto;
|
||||
|
||||
.single-sec{
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
height: 110px;
|
||||
background: url(../../assets/img/title.png) no-repeat center;
|
||||
|
||||
.inner-tit {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: flex-end;
|
||||
|
||||
.single-tit {
|
||||
font-size: 22px;
|
||||
width: 10%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
color: #abb0b8;
|
||||
cursor: pointer;
|
||||
h4 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.isActive {
|
||||
color: #2859b4;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .homePage_title {
|
||||
// position: absolute;
|
||||
// left: 40.3%;
|
||||
// // top: 27%;
|
||||
// div {
|
||||
// width: 410px;
|
||||
// height: 55px;
|
||||
// font-size: 40px;
|
||||
// font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
||||
// font-weight: 800;
|
||||
// line-height: 60px;
|
||||
// letter-spacing: 8px;
|
||||
// text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
|
||||
// background-image: linear-gradient(
|
||||
// to bottom,
|
||||
// #f6fcff 50%,
|
||||
// #a5deff 75%; #69c9ff 100%
|
||||
// );
|
||||
// color: transparent;
|
||||
// background-clip: text;
|
||||
// }
|
||||
// }
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #000;
|
||||
font-size: 18px;
|
||||
background-color: #DEECFF;
|
||||
border: 1px solid #D1E1FF;
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 85px);
|
||||
|
||||
}
|
||||
.leftModuleBox {
|
||||
width: 520px;
|
||||
padding-left: 26px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.isActive{
|
||||
.centerModuleBox {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin: 0 15px;
|
||||
position: relative;
|
||||
|
||||
background-color: #EFF4FE;
|
||||
box-shadow: -3px -3px 2px #CBDCF6,
|
||||
2px 2px 2px #F8F9FE,
|
||||
-2px -2px 2px #CBDCF6,
|
||||
2px 2px 2px #F8F9FE;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
.homePage-fold {
|
||||
position: absolute;
|
||||
left: 45%;
|
||||
top: -2%;
|
||||
width: 949px;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
}
|
||||
.buttom-box {
|
||||
position: absolute;
|
||||
left: 72%;
|
||||
top: 59%;
|
||||
|
||||
.buttonTop {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.buttom1 {
|
||||
width: 129px;
|
||||
height: 56px;
|
||||
background: url(../../assets/img/myImage/no_active.png)
|
||||
no-repeat center;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
line-height: 56px;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
color: #979bb2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.buttom1.on {
|
||||
width: 129px;
|
||||
height: 56px;
|
||||
background: url(../../assets/img/myImage/active.png)
|
||||
no-repeat center;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
line-height: 56px;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center-top {
|
||||
width: 100%;
|
||||
height: 755px;
|
||||
}
|
||||
|
||||
.center-bottom {
|
||||
min-height: calc(100vh - 85px - 655px);
|
||||
}
|
||||
|
||||
.rightModuleBox {
|
||||
width: 520px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
padding-right: 26px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.rig-maps, .rig-components{
|
||||
.page-cont {
|
||||
width: 100%;
|
||||
height: 940px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
width: 79%;
|
||||
height: 100%;
|
||||
.lef-secs {
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
background-color: #f3f7ff;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #eff2fc;
|
||||
box-shadow: 2px 2px 2px #d9e0f3;
|
||||
overflow-y: auto;
|
||||
|
||||
.single-sec {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #000;
|
||||
font-size: 18px;
|
||||
background-color: #deecff;
|
||||
border: 1px solid #d1e1ff;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.isActive {
|
||||
background-color: #eff4fe;
|
||||
box-shadow: -3px -3px 2px #cbdcf6, 2px 2px 2px #f8f9fe,
|
||||
-2px -2px 2px #cbdcf6, 2px 2px 2px #f8f9fe;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.rig-maps,
|
||||
.rig-components {
|
||||
width: 79%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue