2420 lines
56 KiB
Vue
2420 lines
56 KiB
Vue
<template>
|
||
<ScaleBox
|
||
:width="1920"
|
||
:height="1080"
|
||
bgc="transparent"
|
||
:delay="100"
|
||
:isFlat="true"
|
||
>
|
||
<div class="main2">
|
||
<video class="fullscreenvideo" id="bgvid" playsinline="" autoplay="" muted="" loop="">
|
||
<!-- <source src="@/assets/image/bg2.mp4" type="video/mp4">-->
|
||
<source src="http://fxnsp.sxcooh.com/lh-api/sys/common/static/v/bg2.mp4" type="video/mp4">
|
||
</video>
|
||
<div class="nav">
|
||
<span class="nav_ti nav_mag">{{DetailList.stationName}}</span>
|
||
<span class="nav_tit">治理效果评价和监测一张图</span>
|
||
</div>
|
||
<div class="nav_btn">
|
||
<div class="btn_left">
|
||
<img src="@/assets/image/return.png" class="returnimg" alt="" onClick="javaScript:history.go(-1)">
|
||
<span class="btn_left_time"> {{ nowTime }}</span> <span class="btn_left_tianq" style="z-index: 9999;"><hefentianqi /></span>
|
||
</div>
|
||
<div class="btn_right">
|
||
<img src="@/assets/image/quanping.png" class="quanping" v-if="fullscreen==false" @click="screen" alt="">
|
||
<img src="@/assets/image/quanpingtui.png" class="quanping" @click="screen" alt="" v-else>
|
||
<span class="btn_right_time"><img src="@/assets/image/header.png" @click="dialogVisible = true" class="peoimg" alt=""></span>
|
||
</div>
|
||
<!-- 退出登录弹窗 -->
|
||
<div class="login logintc">
|
||
<el-dialog
|
||
title="退出登录"
|
||
:visible.sync="dialogVisible"
|
||
width="10%"
|
||
>
|
||
<span class="infornameclas">{{inforname}}，您好！</span>
|
||
<el-button type="primary" @click="handleClosetuichu" class="logintc_tc">
|
||
退出登录
|
||
</el-button>
|
||
</el-dialog>
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<div class="centerBox">
|
||
<div class="baseBox centerMainBox1" style="height:100%">
|
||
<div class="baseBoxLeft left baseBoxHjleft">
|
||
<img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt="">
|
||
<img src="@/assets/image/kuang_youshang.png" class="in2con_zys" alt="">
|
||
<img src="@/assets/image/kuang_zuoxia.png" class="in2con_zzx" alt="">
|
||
<img src="@/assets/image/kuang_youxia.png" class="in2con_zyx" alt="">
|
||
<img src="@/assets/image/sanguang.png" class="sanguang" alt="">
|
||
<div>
|
||
<div class="in1con_lf_tit " style="position: relative;">
|
||
<span class="in1con_lf_titshow">站点信息</span>
|
||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||
<!-- <img src="@/assets/image/moreinfor.png" class="in1con_lf_moreimg" alt="" @click="zdinfor"> -->
|
||
<span class="in1con_lf_moreimg" @click="zdinfor">详情>></span>
|
||
</div>
|
||
<div class="jczcov">
|
||
<div class="jczcov_lf" v-for="value in DetailList.deviceList" :key="value.id">
|
||
<div class="jczimg" :id="value.deployCode">
|
||
|
||
</div>
|
||
<!-- <img src="@/assets/image/jkimg.png" class="jczimg" alt=""> -->
|
||
</div>
|
||
</div>
|
||
<div class="jctc_add">
|
||
<img src="@/assets/image/jctcicon1.png" class="jctcicon1" alt="">
|
||
<span class="jctcvban_tit">站点名称：{{DetailList.stationName}}</span>
|
||
</div>
|
||
<div class="jctc_add">
|
||
<img src="@/assets/image/jctcicon2.png" class="jctcicon1" alt="">
|
||
<span class="jctcvban_tit">建站时间：{{DetailList.buildTime}}</span>
|
||
</div>
|
||
<div class="jctc_add">
|
||
<img src="@/assets/image/jctcicon3.png" class="jctcicon1" alt="">
|
||
<span class="jctcvban_tit">站点位置：{{DetailList.stationLocation}} </span>
|
||
</div>
|
||
<!-- <div class="jctc_add">
|
||
<img src="@/assets/image/jctcicon2.png" class="jctcicon1" alt="">
|
||
<span class="jctcvban_tit">监测范围：{{DetailList.survRange}}</span>
|
||
</div> -->
|
||
<div class="jctc_add" style="height:auto;">
|
||
<img src="@/assets/image/jctcicon4.png" class="jctcicon1" alt="">
|
||
<span class="jctcvban_tit">监测指标</span>
|
||
<span class="jctc_text" v-for="(item,index) in DetailList.survColorItems" :key="index" :style="{background:(item.color)}" style="background: #445fb4;padding-right:10px;">{{item.name}}</span>
|
||
<!-- <span class="jctc_text" style="background: #52ac2a;">土壤墒情</span>
|
||
<span class="jctc_text" style="background: #ac4f2a;">气象环境</span> -->
|
||
</div>
|
||
</div>
|
||
<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 1.15vw;"></div>
|
||
<div style="margin:1vw 0">
|
||
<div class="in1con_lf_img">
|
||
<div class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
|
||
<img src="@/assets/image/sbsl.png" class="in1con_lf_imgone" alt="">
|
||
<span class="in1con_lf_imglf_tit">设备数量</span>
|
||
<!-- <span class="in1con_lf_imglf_num"><span class="in1con_lf_imglf_num_jix">{{DetailList.deviceCount}}</span>个</span> -->
|
||
<span class="in1con_lf_imglf_num"><span class="in1con_lf_imglf_num_jix">5</span>个</span>
|
||
</div>
|
||
<div class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
|
||
<img src="@/assets/image/sbsl02.png" class="in1con_lf_imgone" alt="">
|
||
<span class="in1con_lf_imglf_tit">监测项</span>
|
||
<span class="in1con_lf_imglf_num">
|
||
<!-- <span class="in1con_lf_imglf_num_jix">{{DetailList.deviceCount}}</span> -->
|
||
<span class="in1con_lf_imglf_num_jix">5</span>
|
||
项
|
||
</span>
|
||
</div>
|
||
<div class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
|
||
<img src="@/assets/image/sbsl03.png" class="in1con_lf_imgone" alt="">
|
||
<span class="in1con_lf_imglf_tit">监测频率</span>
|
||
<span class="in1con_lf_imglf_num"><span class="in1con_lf_imglf_num_jix">{{DetailList.survFrequency}}</span>天</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
|
||
<div>
|
||
<div class="in1con_lf_tit ">
|
||
<span class="in1con_lf_titshow">重要污染实时监测</span>
|
||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||
</div>
|
||
<ul class="liMarqueeUp" style="height:14vw;overflow:hidden;" @click.stop="handleClick($event)">
|
||
<vue-seamless-scroll :data="DetailList.latestData" class="wp-1 hp-1" :class-option="classOption">
|
||
<li class="jcsssj2" v-for="(item,index) in DetailList.latestData" :key="index" :data-survItem="item.survItem">
|
||
<img src="@/assets/image/xian2.png" class="jcsssj_xian2" alt="">
|
||
<div class="jcsssj_rt" @click="tczxtc(item.survItem)">
|
||
<div style="float: left;width: 59%;">
|
||
<span class="jcsssj_rtbiao" :style="{background:(item.color)}">{{item.name}}</span>
|
||
<span class="jcsssj_rt_num"><span class="in1con_lf_imglf_num_jix">{{item.value}}</span>{{item.unit}}</span>
|
||
<!-- <img src="@/assets/image/up.png" class="jcsssj_rt_up" alt=""> -->
|
||
</div>
|
||
<span class="jcsssj_rt_time">{{item.dataDateTime}}</span>
|
||
</div>
|
||
</li>
|
||
</vue-seamless-scroll>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zlxg_btm">
|
||
<img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt="">
|
||
<img src="@/assets/image/kuang_youshang.png" class="in2con_zys" alt="">
|
||
<img src="@/assets/image/kuang_zuoxia.png" class="in2con_zzx" alt="">
|
||
<img src="@/assets/image/kuang_youxia.png" class="in2con_zyx" alt="">
|
||
<img src="@/assets/image/sanguang.png" class="sanguang2" alt="">
|
||
<img src="@/assets/image/sanguang.png" class="sanguangbt2" alt="">
|
||
<div class="zywr_lf_tit " >
|
||
<span class="zywr_titshow">重要污染物趋势图</span>
|
||
<!-- <div class="zywr_titrt">
|
||
<img src="@/assets/image/zywricon1.png" class="zywricon1" alt="">
|
||
<span class="zywricon1_tit">总磷</span>
|
||
<img src="@/assets/image/zywricon2.png" class="zywricon1" alt="">
|
||
<span class="zywricon1_tit">总氮</span>
|
||
<img src="@/assets/image/zywricon3.png" class="zywricon1" alt="">
|
||
<span class="zywricon1_tit">硝态氮</span>
|
||
</div> -->
|
||
</div>
|
||
<div id="chart1" ref="echarts"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="leftBox right baseBoxHjleft" style="width:22.5%;">
|
||
<img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt="">
|
||
<img src="@/assets/image/kuang_youshang.png" class="in2con_zys" alt="">
|
||
<img src="@/assets/image/kuang_zuoxia.png" class="in2con_zzx" alt="">
|
||
<img src="@/assets/image/kuang_youxia.png" class="in2con_zyx" alt="">
|
||
<img src="@/assets/image/sanguang.png" class="sanguang" alt="">
|
||
<img src="@/assets/image/sanguang.png" class="sanguangbt" alt="">
|
||
<div>
|
||
<div class="home_dlhj" style="position:relative;">
|
||
<div class="in1con_lf_tit ">
|
||
<span class="in1con_lf_titshow">治理效果综合评价</span>
|
||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||
</div>
|
||
<!-- <img src="@/assets/image/zhpjimg2.png" class="zhpjimg2" alt="">-->
|
||
<img src="http://fxnsp.sxcooh.com/lh-api/sys/common/static/bs/zhpjimg2.png" class="zhpjimg2" alt="">
|
||
<span class="zhpjtit" >{{DisplayListdetailList.detailValue}}</span>
|
||
</div>
|
||
</div>
|
||
<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 1.15vw;"></div>
|
||
<div >
|
||
<div class="in1con_lf_tit ">
|
||
<span class="in1con_lf_titshow">畜禽粪污处理</span>
|
||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||
</div>
|
||
<div class="qxfwzcl">
|
||
<div class="qxfwzcl_left">
|
||
<div class="qxfwzcl_left_tit">
|
||
{{DisplayListdetailList0.detailCode}}
|
||
</div>
|
||
<span class="qxfwzcl_left_num in1con_lf_imglf_num_jix">{{DisplayListdetailList0.detailValue}}</span>
|
||
<div class="qxfwzcl_left_tit">
|
||
{{DisplayListdetailList2.detailCode}}
|
||
</div>
|
||
<span class="qxfwzcl_left_num in1con_lf_imglf_num_jix">{{DisplayListdetailList2.detailValue}}</span>
|
||
</div>
|
||
<div class="qxfwzcl_rit">
|
||
<img src="@/assets/image/png01_iSpt.png" class="png01_iSpt" alt="">
|
||
<img src="@/assets/image/qcshuj.png" class="qcshuj" alt="">
|
||
<span class="qxfwzcl_rit_smt">{{DisplayListdetailList1.detailCode}}</span>
|
||
<span class="qxfwzcl_rit_num in1con_lf_imglf_num_jix">{{DisplayListdetailList1.detailValue}} <span style="font-size: 0.5vw;">万头</span> </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 1.15vw;"></div>
|
||
<div>
|
||
<div class="in1con_lf_tit ">
|
||
<span class="in1con_lf_titshow">恶臭气体实时监测</span>
|
||
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
|
||
</div>
|
||
<div class="ecqtssjc" >
|
||
<img src="@/assets/image/ecjcbak.png" class="ecjcbak" alt="">
|
||
<div class="ecqtssjc_con animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
|
||
<span class="ecqtssjc_con_tit">{{DisplayListstinkList4.detailValue}}</span>
|
||
<span class="ecqtssjc_con_sma">空气质量</span>
|
||
</div>
|
||
<div class="ecqtssjc_lettp animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
|
||
<button type="button" @click="startAnimate()" style="display:none;"> </button>
|
||
<span class="ecqtssjc_lettp_tit in1con_lf_imglf_num_jix" v-if="latestStinkData==''||latestStinkData==undefined||latestStinkData==null">0</span>
|
||
<span class="ecqtssjc_lettp_tit in1con_lf_imglf_num_jix" v-else>
|
||
<animate-number class="in1con_lf_imglf_num_jix" ref="myNum1" from="0" :to="latestStinkData[0].dataOu" :key="latestStinkData[0].dataOu" duration="3000" :formatter="formatter"></animate-number>
|
||
</span>
|
||
<span class="ecqtssjc_lettp_sma">臭气浓度</span>
|
||
</div>
|
||
<div class="ecqtssjc_lettb animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
|
||
<span class="ecqtssjc_lettp_tit in1con_lf_imglf_num_jix" v-if="latestStinkData==''||latestStinkData==undefined||latestStinkData==null">0</span>
|
||
<span class="ecqtssjc_lettb_tit in1con_lf_imglf_num_jix" v-else>
|
||
<animate-number class="in1con_lf_imglf_num_jix" ref="myNum2" from="0" :to="latestStinkData[0].dataNh3" :key="latestStinkData[0].dataNh3" duration="3000" :formatter="formatter"></animate-number>
|
||
</span>
|
||
<span class="ecqtssjc_lettb_sma"> 氨气</span>
|
||
</div>
|
||
<div class="ecqtssjc_ritp animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
|
||
<span class="ecqtssjc_lettp_tit in1con_lf_imglf_num_jix" v-if="latestStinkData==''||latestStinkData==undefined||latestStinkData==null">0</span>
|
||
<span class="ecqtssjc_ritp_tit in1con_lf_imglf_num_jix" v-else>
|
||
<animate-number class="in1con_lf_imglf_num_jix" ref="myNum3" from="0" :to="latestStinkData[0].dataH2s" :key="latestStinkData[0].dataH2s" duration="3000" :formatter="formatter"></animate-number>
|
||
</span>
|
||
<span class="ecqtssjc_ritp_sma">硫化氢 </span>
|
||
</div>
|
||
<div class="ecqtssjc_ritb animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
|
||
<span class="ecqtssjc_lettp_tit in1con_lf_imglf_num_jix" v-if="latestStinkData==''||latestStinkData==undefined||latestStinkData==null">0</span>
|
||
<span class="ecqtssjc_ritb_tit in1con_lf_imglf_num_jix" v-else>
|
||
<animate-number class="in1con_lf_imglf_num_jix" ref="myNum4" from="0" :to="latestStinkData[0].dataTvoc" :key="latestStinkData[0].dataTvoc" duration="3000" :formatter="formatter"></animate-number>
|
||
</span>
|
||
<span class="ecqtssjc_ritb_sma">总挥发性有机物</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 台账禽畜弹窗 -->
|
||
<el-dialog width="60%" :visible.sync="qczddialogTableVisible" >
|
||
<div class="tz_cov">
|
||
<img src="@/assets/image/guanbi.png" class="guanbiann" @click="qcguanbi" alt="">
|
||
<div class="tz_cov_top">
|
||
<span class="tz_cov_top_tit">监测站信息</span>
|
||
</div>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<div class="grid-content bg-purple" style="width:80%;margin-left:10%;">
|
||
<el-carousel indicator-position="outside">
|
||
<el-carousel-item v-for="(item,index) in DetailList.stationPic" :key="index">
|
||
<viewer :images="DetailList.stationPic">
|
||
<img :src="urlimg+item" alt="" style="width:100%;height:100%">
|
||
</viewer>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="grid-content bg-purple-light">
|
||
<span class="tctit">{{DetailList.stationName}}</span>
|
||
<span class="tcgldwList">管理单位：{{DetailList.stationIntro}}</span>
|
||
<span class="tcgldwList">建站时间：{{DetailList.buildTime}}</span>
|
||
<span class="tcgldwList">站点介绍：{{DetailList.stationOrg}}</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 曲线弹窗 -->
|
||
<el-dialog
|
||
width="70%"
|
||
top="16vh"
|
||
:visible.sync="trqxzxdialogTableVisible"
|
||
:modal-append-to-body="false"
|
||
>
|
||
<div class="tz_cov" style="height: 35vw">
|
||
<div style="width:100%;height:100%;margin:0 auto;position: absolute;top:0;left:0;z-index:444;background:rgba(0,0,0,0.4);" v-if="trbgzhuanq"></div>
|
||
<img src="@/assets/image/loading.gif" alt="" style="width:150px;height:150px;margin:0 auto;position: absolute;top:280px;left:45%;z-index: 555;" v-if="trbgzhuanq">
|
||
<img
|
||
src="@/assets/image/guanbi.png"
|
||
class="guanbiann"
|
||
@click="qcguanbi"
|
||
alt=""
|
||
/>
|
||
<div class="tz_cov_top">
|
||
<span class="tz_cov_top_tit">{{ descriptionValue }}</span>
|
||
</div>
|
||
<div class="trwdcov jgdhei">
|
||
<div class="trwdcov_top">
|
||
<span class="trwdcov_top_tit">时间范围</span>
|
||
<el-date-picker
|
||
class="trwdcov_top_time"
|
||
v-model="timetr"
|
||
type="daterange"
|
||
@blur="timetrpicker"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
>
|
||
</el-date-picker>
|
||
<span class="trwdcov_top_tit">展示方式</span>
|
||
|
||
<el-radio-group v-model="radiotr" @change="agreeChange">
|
||
<el-radio label="1">折线</el-radio>
|
||
<el-radio label="2">表格</el-radio>
|
||
</el-radio-group>
|
||
</div>
|
||
<el-table
|
||
:data="formListVlaue"
|
||
v-if="trzx"
|
||
height="480"
|
||
border
|
||
style="margin-top: 1vw; background: none"
|
||
>
|
||
<el-table-column prop="date" label="时间"> </el-table-column>
|
||
<el-table-column prop="name" :label="'数值单位：' + unitValue">
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<template v-else>
|
||
<div id="maintczxtc" style="width: 100%; height: 500px" v-if="trbg"></div>
|
||
</template>
|
||
</div>
|
||
<img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt="">
|
||
<img src="@/assets/image/kuang_youshang.png" class="in2con_zys" alt="">
|
||
<img src="@/assets/image/kuang_zuoxia.png" class="in2con_zzx" alt="">
|
||
<img src="@/assets/image/kuang_youxia.png" class="in2con_zyx" alt="">
|
||
<img src="@/assets/image/sanguang.png" class="tzsanguang" alt="">
|
||
<img src="@/assets/image/sanguang.png" class="tzsanguangbt" alt="">
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</ScaleBox>
|
||
</template>
|
||
|
||
<script>
|
||
import ScaleBox from 'vue2-scale-box'
|
||
import { getStationDetail, getStationDisplay, getIndexSummry,survItemSummary } from '@/api';
|
||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||
import { ModelFbx } from "vue-3d-model";
|
||
import hefentianqi from '@/pages/weather/weather.vue'
|
||
export default {
|
||
components: {
|
||
ModelFbx,
|
||
vueSeamlessScroll,
|
||
hefentianqi,
|
||
ScaleBox
|
||
},
|
||
name: "CqyzList",
|
||
data(){
|
||
return {
|
||
urlimg:'https://fxnsp.sxcooh.com/lh-api/sys/common/static/',
|
||
player: null,
|
||
enableZ:false, //默认关闭电子放大
|
||
play: false, //默认停止播放
|
||
qczddialogTableVisible:false,
|
||
nowTime: '',
|
||
DetailList:'',
|
||
DisplayList:'',
|
||
DisplayListdetailList:'',
|
||
DisplayListdetailList0:'',
|
||
DisplayListdetailList2:'',
|
||
DisplayListdetailList1:'',
|
||
DisplayListstinkList4:'',
|
||
DisplayListstinkList3:'',
|
||
DisplayListstinkList2:'',
|
||
DisplayListstinkList1:'',
|
||
DisplayListstinkList0:'',
|
||
inforname:'',
|
||
dialogVisible: false,
|
||
rotation: {
|
||
x: 0,
|
||
y: 450,
|
||
z: 0
|
||
},
|
||
latestStinkData:[],
|
||
fullscreen: false, //全屏
|
||
dataStr:'',
|
||
trqxzxdialogTableVisible:false,
|
||
trbgzhuanq:false,
|
||
radiotr: '1',
|
||
trbg:null,
|
||
trzx:false,
|
||
timetr: [new Date(), new Date()],
|
||
descriptionValue:null,
|
||
};
|
||
},
|
||
created(){
|
||
let stationCode = this.$route.query.stationCode
|
||
getStationDisplay(stationCode).then(val=>{
|
||
this.DisplayList = val.result
|
||
this.DisplayListdetailList = val.result.effect_assess[0].detailList[3]
|
||
this.DisplayListdetailList0 = val.result.effect_assess[0].detailList[0]
|
||
this.DisplayListdetailList2 = val.result.effect_assess[0].detailList[2]
|
||
this.DisplayListdetailList1 = val.result.effect_assess[0].detailList[1]
|
||
this.DisplayListstinkList4 = val.result.stink[0].detailList[4]
|
||
this.DisplayListstinkList3 = val.result.stink[0].detailList[3]
|
||
this.DisplayListstinkList2 = val.result.stink[0].detailList[2]
|
||
this.DisplayListstinkList1 = val.result.stink[0].detailList[1]
|
||
this.DisplayListstinkList0 = val.result.stink[0].detailList[0]
|
||
})
|
||
getIndexSummry(stationCode).then(res=>{
|
||
if (res.code == '200' && res.result.length > 0) {
|
||
this.NHSummry = res.result[0].NHSummry
|
||
this.TNSummry = res.result[0].TNSummry
|
||
this.TPSummry = res.result[0].TPSummry
|
||
this.CODSummry = res.result[0].CODSummry
|
||
this.dataStr = res.result[1].dataStr
|
||
}
|
||
})
|
||
|
||
this.infor()
|
||
setInterval(this.startAnimate,10000);
|
||
},
|
||
computed: {
|
||
classOption() {
|
||
return {
|
||
step: 0.6, // 数值越大速度滚动越快
|
||
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
|
||
hoverStop: true, // 是否开启鼠标悬停stop
|
||
direction: 1, // 0向下 1向上 2向左 3向右
|
||
openWatch: true, // 开启数据实时监控刷新dom
|
||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
|
||
};
|
||
},
|
||
},
|
||
mounted(){
|
||
// 实时时间
|
||
this.getNowTime();
|
||
setTimeout(() =>{this.drawChart();}, 1000)
|
||
this.getliststation()
|
||
},
|
||
beforeDestroy(){
|
||
if(this.play)this.player.stop();
|
||
},
|
||
methods:{
|
||
// 所有弹窗
|
||
handleClick(e){
|
||
const item = e.target.closest(".jcsssj2"); // 定位元素
|
||
if (item) { // 是否是滚动组件的某一行/列
|
||
let survitem = item.dataset.survitem
|
||
this.tczxtc(survitem)
|
||
}
|
||
},
|
||
tczxtc(survItem){
|
||
this.descriptionValue = ''
|
||
this.stationCode = this.$route.query.stationCode
|
||
this.survItem = survItem
|
||
this.trqxzxdialogTableVisible = true
|
||
this.trbgzhuanq = true
|
||
setTimeout(() =>{
|
||
this.deviceSummaryApi()
|
||
this.trbgzhuanq = false
|
||
this.trbg = true;
|
||
}, 1500)
|
||
},
|
||
agreeChange(val){
|
||
let that = this
|
||
this.trbg = false;
|
||
if (val=='1') {
|
||
this.trbg = true
|
||
this.trbgzhuanq = true
|
||
this.trzx = false
|
||
setTimeout(() =>{
|
||
this.trbgzhuanq = false
|
||
that.$nextTick(() => {
|
||
that.deviceSummaryApi()
|
||
// this.drawChartTc();
|
||
})
|
||
}, 1200)
|
||
} else if(val=='2'){
|
||
this.trbgzhuanq = true
|
||
setTimeout(() =>{
|
||
that.deviceSummaryApi()
|
||
this.trbgzhuanq = false
|
||
this.trzx = true
|
||
this.trbg = false
|
||
}, 1200)
|
||
}
|
||
|
||
that.btnstatus=(val==='1')?true:false;
|
||
},
|
||
// 历史数据曲线弹唱
|
||
deviceSummaryApi(){
|
||
let obj = {
|
||
stationCode:this.stationCode,
|
||
endTime:this.endTime,
|
||
startTime:this.startTime,
|
||
survItem:this.survItem,
|
||
// auths:this.auths,
|
||
}
|
||
survItemSummary(obj).then(res=>{
|
||
let that = this
|
||
this.dataListVlaue = res.result.dataList
|
||
this.timeListVlaue = res.result.timeList
|
||
this.formListVlaue = res.result.formList
|
||
this.unitValue = res.result.itemInfo.unit
|
||
// this.limitStrValue = res.result.itemInfo.limitStr
|
||
this.descriptionValue = res.result.itemInfo.description
|
||
if (this.timeListVlaue) {
|
||
setTimeout(() =>{
|
||
that.$nextTick(() => {
|
||
that.drawChartTc();
|
||
})
|
||
}, 700)
|
||
}
|
||
})
|
||
},
|
||
drawChartTc() {
|
||
// 基于准备好的dom，初始化echarts实例 这个和上面的main对应
|
||
let myChart1 = this.$echarts.init(document.getElementById("maintczxtc"));
|
||
// 指定图表的配置项和数据
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
label: {
|
||
backgroundColor: '#3c6ae1'
|
||
}
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['']
|
||
},
|
||
toolbox: {
|
||
},
|
||
areaStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [ // 渐变颜色
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(85,111,253,0.70)',
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(85,111,253,0.20)',
|
||
},
|
||
],
|
||
global: false,
|
||
},
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: this.timeListVlaue.reverse(),
|
||
axisLabel: {
|
||
//x轴文字的配置
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
axisLabel: {
|
||
//x轴文字的配置
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: this.descriptionValue,
|
||
animationDurationUpdate: 1000, // 更新动画时长为 1s
|
||
animationEasingUpdate: 'quinticInOut', // 更新动画缓动效果为 'quinticInOut'
|
||
type: 'line',
|
||
stack: 'Total',
|
||
smooth:true,
|
||
areaStyle: {},
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
lineStyle: {
|
||
color: '#3c6ae1' // 设置线的颜色为红色
|
||
},
|
||
data: this.dataListVlaue.reverse(),
|
||
},
|
||
],
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart1.clear();
|
||
myChart1.setOption(option);
|
||
},
|
||
// 时间
|
||
timetrpicker(data){
|
||
this.startTime = data.displayValue[0],
|
||
this.endTime = data.displayValue[1],
|
||
this.deviceSummaryApi()
|
||
},
|
||
formatter: function (num) {
|
||
return num.toFixed(2)
|
||
},
|
||
startAnimate() {
|
||
console.log("this.$refs",this.$refs)
|
||
if (this.$refs.myNum1) {
|
||
this.$refs.myNum1.start()
|
||
this.$refs.myNum2.start()
|
||
this.$refs.myNum3.start()
|
||
this.$refs.myNum4.start()
|
||
}
|
||
},
|
||
getliststation(){
|
||
let stationCode = this.$route.query.stationCode
|
||
getStationDetail(stationCode).then(res=>{
|
||
this.DetailList = res.result
|
||
this.latestStinkData = res.result.latestStinkData
|
||
// 视频
|
||
this.DetailList.deviceList.forEach((itm) => {
|
||
setTimeout(() =>{
|
||
this.player = new EZUIKit.EZUIKitPlayer({
|
||
id: itm.deployCode, // 视频容器ID
|
||
accessToken: itm.ysToken,
|
||
url: itm.deviceUrl,
|
||
template: "security", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
|
||
audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
|
||
autoplay: true,
|
||
width:430,
|
||
height:231,
|
||
})
|
||
}, 2000)
|
||
})
|
||
})
|
||
},
|
||
|
||
// 弹窗退出登录
|
||
handleClosetuichu(done) {
|
||
this.dialogVisible = false
|
||
// window.sessionStorage.clear();
|
||
localStorage.clear()
|
||
this.$router.push({path: '/Login'})
|
||
},
|
||
// 弹窗个人信息
|
||
infor(){
|
||
var onformation = JSON.parse(window.sessionStorage.getItem('password'));
|
||
if(onformation){
|
||
this.inforname = onformation.realname
|
||
}
|
||
},
|
||
// 实时时间
|
||
getNowTime () {
|
||
let speed = 1000
|
||
let that = this
|
||
let theNowTime = function () {
|
||
that.nowTime = that.timeNumber()
|
||
}
|
||
setInterval(theNowTime, speed)
|
||
},
|
||
timeNumber () {
|
||
let today = new Date()
|
||
let date = today.getFullYear() + '年' + this.twoDigits(today.getMonth() + 1) + '月' + this.twoDigits(today.getDate())+ '日'
|
||
let time = this.twoDigits(today.getHours()) + ':' + this.twoDigits(today.getMinutes()) + ':' + this.twoDigits(today.getSeconds())
|
||
let wk = new Date().getDay()
|
||
let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
||
let week = weeks[wk]
|
||
return date + ' ' + week + ' ' + time
|
||
},
|
||
twoDigits (val) {
|
||
if (val < 10) return '0' + val
|
||
return val
|
||
},
|
||
drawChart() {
|
||
// 折线图1
|
||
let myChart = this.$echarts.init(document.getElementById('chart1'));
|
||
let optionLine = {
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
grid: {
|
||
top:'14%',
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '9%',
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
padding:[0,50,0,0],
|
||
x:'right', //可设定图例在左、右、居中
|
||
y:'top', //可设定图例在上、下、居中
|
||
// data: ['总氮', '总磷', '氨氮', '化学需氧量'],
|
||
textStyle:{
|
||
fontSize: 12,//字体大小
|
||
color: '#ffffff',//字体颜色
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap:false,
|
||
// data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
|
||
data:this.dataStr,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#2295ee', //x轴的颜色
|
||
width: 1, //轴线的宽度
|
||
},
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
/*min:0,
|
||
max:60,
|
||
splitNumber:6*/
|
||
splitLine: {
|
||
lineStyle: {
|
||
// 设置背景横线
|
||
color: '#2295ee'
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#2295ee', //x轴的颜色
|
||
width: 1, //轴线的宽度
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name:'总氮',
|
||
type:'line',
|
||
stack: '总量1',
|
||
data:this.TNSummry,
|
||
lineStyle: {
|
||
color: '#009DB2' // 设置线的颜色为红色
|
||
},
|
||
smooth:true,
|
||
},
|
||
{
|
||
name:'总磷',
|
||
type:'line',
|
||
stack: '总量1',
|
||
data:this.TPSummry,
|
||
lineStyle: {
|
||
color: '#00FF89' // 设置线的颜色为红色
|
||
},
|
||
smooth:true,
|
||
},
|
||
{
|
||
name:' 氨氮',
|
||
type:'line',
|
||
stack: '总量1',
|
||
data:this.NHSummry,
|
||
lineStyle: {
|
||
color: '#FF0D00' // 设置线的颜色为红色
|
||
},
|
||
smooth:true,
|
||
},
|
||
{
|
||
name:' 化学需氧量',
|
||
type:'line',
|
||
stack: '总量1',
|
||
data:this.CODSummry,
|
||
lineStyle: {
|
||
color: '#FFC100' // 设置线的颜色为红色
|
||
},
|
||
smooth:true,
|
||
}
|
||
]
|
||
};
|
||
//为echarts对象加载数据
|
||
myChart.setOption(optionLine);
|
||
},
|
||
zdinfor(){
|
||
this.qczddialogTableVisible = true
|
||
},
|
||
qcguanbi(){
|
||
this.qczddialogTableVisible = false
|
||
this.trqxzxdialogTableVisible = false
|
||
},
|
||
// 开启/关闭 电子放大
|
||
toggleZoom(){
|
||
if(!this.player || !this.play) return;
|
||
switch (this.enableZ) {
|
||
case true:
|
||
this.player.closeZoom();
|
||
this.enableZ = false;
|
||
break;
|
||
case false:
|
||
this.player.enableZoom();
|
||
this.enableZ = true;
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
},
|
||
// 播放/停止 监控
|
||
togglePlay(){
|
||
if(!this.player) return;
|
||
switch (this.play) {
|
||
case true:
|
||
this.player.stop();
|
||
this.play = false;
|
||
break;
|
||
case false:
|
||
this.player.play();
|
||
this.play = true;
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
},
|
||
// 视频截图
|
||
isCapturePicture(){
|
||
if(!this.player || !this.play) return;
|
||
this.player.capturePicture();
|
||
},
|
||
// 全屏
|
||
isFullScreen(){
|
||
if(!this.player || !this.play) return;
|
||
this.player.fullScreen();
|
||
},
|
||
screen() {
|
||
let element = document.documentElement;
|
||
if (this.fullscreen) {
|
||
if (document.exitFullscreen) {
|
||
document.exitFullscreen();
|
||
} else if (document.webkitCancelFullScreen) {
|
||
document.webkitCancelFullScreen();
|
||
} else if (document.mozCancelFullScreen) {
|
||
document.mozCancelFullScreen();
|
||
} else if (document.msExitFullscreen) {
|
||
document.msExitFullscreen();
|
||
}
|
||
} else {
|
||
if (element.requestFullscreen) {
|
||
element.requestFullscreen();
|
||
} else if (element.webkitRequestFullScreen) {
|
||
element.webkitRequestFullScreen();
|
||
} else if (element.mozRequestFullScreen) {
|
||
element.mozRequestFullScreen();
|
||
} else if (element.msRequestFullscreen) {
|
||
// IE11
|
||
element.msRequestFullscreen();
|
||
}
|
||
}
|
||
this.fullscreen = !this.fullscreen;
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.quanping{
|
||
width: 1.6vw;
|
||
margin-right: 3%;
|
||
margin-top: 0.2vw;
|
||
position: absolute;
|
||
right: 1%;
|
||
z-index: 999;
|
||
}
|
||
.fullscreenvideo {
|
||
position: absolute;
|
||
width: 100%;
|
||
height:100%;
|
||
}
|
||
.videocontainer:before {
|
||
content: "";
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
z-index: -1;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
.returnimg{
|
||
float: left;
|
||
width: 2vw;
|
||
margin-left: 3%;
|
||
cursor: pointer;
|
||
}
|
||
.btn_left_time {
|
||
position : relative;
|
||
float : left;
|
||
width : 42%;
|
||
height : 1.6vw;
|
||
text-align : center;
|
||
line-height : 1.6vw;
|
||
font-size : .8vw;
|
||
color : #bcd3f5;
|
||
letter-spacing: .1vw;
|
||
cursor : pointer;
|
||
}
|
||
.btn_left_tianq{
|
||
position : relative;
|
||
float : left;
|
||
width : 40%;
|
||
height : 1.6vw;
|
||
text-align : left;
|
||
line-height : 1.6vw;
|
||
font-size : .8vw;
|
||
color : #bcd3f5;
|
||
letter-spacing: .1vw;
|
||
cursor : pointer;
|
||
}
|
||
.btn_right_time{
|
||
position : relative;
|
||
float : right;
|
||
//width : 97%;
|
||
height : 1.6vw;
|
||
text-align : right;
|
||
line-height : 1.6vw;
|
||
font-size : .8vw;
|
||
color : #bcd3f5;
|
||
letter-spacing: .1vw;
|
||
cursor : pointer;
|
||
margin-right: 3%;
|
||
}
|
||
.in1con_lf_imglf_num_jix{
|
||
font-size: 1vw;
|
||
font-weight: 300;
|
||
font-family: HYChangLiSongKeBen;
|
||
letter-spacing:0.1vw
|
||
}
|
||
.peoimg{
|
||
width: 2vw;
|
||
margin-left: 3%;
|
||
}
|
||
.nav_ti {
|
||
text-align: center;
|
||
line-height: 1vw!important;
|
||
color: #fff;
|
||
font-size: 1.4vw;
|
||
letter-spacing: .2vw;
|
||
text-shadow: 0 6px 12px rgba(0,12,37,.82), 0 1px 0 #004c4e, 0 2px 0 #003435, 0 6px 16px rgba(0,220,228,.58), 1px -3px 12px #00e0ec;
|
||
font-family: douyuFont;
|
||
}
|
||
.nav_mag {
|
||
margin-top: 1vw;
|
||
display: inline-block;
|
||
}
|
||
.nav_tit {
|
||
font-size: 0.8vw;
|
||
color: #FFFF90;
|
||
display: block;
|
||
line-height: 5px;
|
||
letter-spacing: .2vw;
|
||
margin-top: 1vw;
|
||
font-weight: bold;
|
||
text-shadow: 0 6px 12px rgba(0,12,37,.82), 0 1px 0 #004c4e, 0 2px 0 #003435, 0 6px 16px rgba(0,220,228,.58), 1px -3px 12px #00e0ec;
|
||
}
|
||
.baseBoxHjleft{
|
||
border: 1px solid #0169d0;
|
||
position: relative;
|
||
background: rgba(16, 45, 80, 0.9);
|
||
box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.in2con_zlf{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
.in2con_zys{
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
}
|
||
.in2con_zzx{
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
}
|
||
.in2con_zyx{
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
}
|
||
.sanguang{
|
||
position: absolute;
|
||
top: -1.5vw;
|
||
right: 15%;
|
||
}
|
||
.sanguangbt{
|
||
position: absolute;
|
||
bottom: -1.5vw;
|
||
right: 15%;
|
||
}
|
||
.sanguang2{
|
||
position: absolute;
|
||
top: -1.5vw;
|
||
right: 35%;
|
||
}
|
||
.sanguangbt2{
|
||
position: absolute;
|
||
bottom: -1.5vw;
|
||
right: 35%;
|
||
}
|
||
.in1con_lf_tit{
|
||
width: 100%;
|
||
height: 3vw;
|
||
text-align: center;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
.in1con_lf_titshow{
|
||
font-size: 1vw;
|
||
color: #fff;
|
||
text-shadow: 0px 2px 0px rgba(4,49,52,0.55);
|
||
display: block;
|
||
margin-top: 0.9vw;
|
||
font-family: douyuFont;
|
||
}
|
||
.in1con_lf_titimg{
|
||
width: 50%;
|
||
height: 0.9vw;
|
||
position: absolute;
|
||
top: 1.8vw;
|
||
left: 25%;
|
||
}
|
||
.in1con_lf_tit_show{
|
||
font-size: 0.6vw;
|
||
color: #0891a1;
|
||
position: absolute;
|
||
top:2.2vw;
|
||
right: 3%;
|
||
}
|
||
.home_lcgk{
|
||
width: 80%;
|
||
height: 6vw;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
overflow: auto;
|
||
}
|
||
/* 定义滚动条样式 */
|
||
.home_lcgk::-webkit-scrollbar {
|
||
width: 2px;
|
||
height: 2px;
|
||
background-color: rgba(4, 111, 220, 0.1);
|
||
}
|
||
/*定义滚动条轨道 内阴影+圆角*/
|
||
.home_lcgk::-webkit-scrollbar-track {
|
||
box-shadow: inset 0 0 0px rgba(4, 111, 220, .5);
|
||
border-radius: 10px;
|
||
background-color: rgba(4, 111, 220, .5);
|
||
}
|
||
/*定义滑块 内阴影+圆角*/
|
||
.home_lcgk::-webkit-scrollbar-thumb {
|
||
border-radius: 10px;
|
||
box-shadow: inset 0 0 0px rgba(4, 111, 220, .8);
|
||
background-color: rgba(4, 111, 220, .8);
|
||
}
|
||
.home_lcgk p {
|
||
font-size: 0.8vw;
|
||
color: #fff;
|
||
line-height: 27px;
|
||
text-indent: 2rem;
|
||
}
|
||
.in1con_lf_img{
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
.in1con_lf_imglf{
|
||
width: 33.33%;
|
||
float: left;
|
||
}
|
||
.in1con_lf_imgone{
|
||
width: 60%;
|
||
margin-left: 20%;
|
||
}
|
||
.in1con_lf_imglf_tit{
|
||
display:block;
|
||
font-size: 0.6vw;
|
||
color: #bcd3f5;
|
||
text-align: center;
|
||
}
|
||
.in1con_lf_imglf_num{
|
||
display:block;
|
||
font-size: 0.8vw;
|
||
color: #d8e714;
|
||
text-align: center;
|
||
}
|
||
.qhhjcov{
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
.qhhjcov_lf{
|
||
width: 33%;
|
||
float: left;
|
||
}
|
||
.qhhjcov_lfimg{
|
||
margin-top: 0.2vw;
|
||
margin-left: 5%;
|
||
}
|
||
.qhhjcov_lf_tit{
|
||
font-size: 0.8vw;
|
||
color: #fff;
|
||
}
|
||
.qhhjcov_time{
|
||
font-size: 1vw;
|
||
color: #00f6ff;
|
||
display: block;
|
||
text-align: center;
|
||
}
|
||
.sx_cov{
|
||
width: 100%;
|
||
height: 6vw;
|
||
margin: 0 auto;
|
||
border: 1px solid rgba(69,233,248,0.41);
|
||
border-radius: 0.5vw;
|
||
margin-top: 1.5vw;
|
||
box-shadow: inset 0px 0px 16px 0px rgba(11, 153, 173, 1);
|
||
cursor: pointer;
|
||
}
|
||
.sx_covtit{
|
||
font-size: 1vw;
|
||
font-weight: bold;
|
||
color: #00F6FF;
|
||
display: block;
|
||
text-align: center;
|
||
margin-top: 0.5vw;
|
||
}
|
||
.sx_cov_lt{
|
||
width: 33.33%;
|
||
text-align: center;
|
||
float: left;
|
||
margin-top: 0.5vw;
|
||
}
|
||
.sx_cov_lt_tit{
|
||
font-size:0.8vw ;
|
||
color: #ACC5E2;
|
||
display: block;
|
||
}
|
||
.sx_cov_lt_num{
|
||
color:#00F6FF;
|
||
font-size: 0.9vw;
|
||
}
|
||
.home_dlhj{
|
||
width: 88%;
|
||
min-height: 2vw!important;
|
||
height: 15vw!important;
|
||
margin: 0 auto;
|
||
}
|
||
.home_dlhj .layui-carousel{
|
||
background:none;
|
||
}
|
||
.home_dlhj .layui-carousel>[carousel-item]:before {
|
||
position: absolute;
|
||
content: '\e63d';
|
||
left: 50%;
|
||
top: 50%;
|
||
width: 0px;
|
||
line-height: 1vw;
|
||
margin: -0.5vw 0 0 -2.5vw;
|
||
text-align: center;
|
||
color: #c2c2c2;
|
||
font-family: layui-icon!important;
|
||
font-size: 30px;
|
||
font-style: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
display: none;
|
||
}
|
||
.home_dlhj .layui-carousel{
|
||
background:none;
|
||
}
|
||
.home_dlhj .layui-carousel>[carousel-item]>*{
|
||
background:none;
|
||
}
|
||
.home_dlhj .layui-carousel>[carousel-item]:before {
|
||
position: absolute;
|
||
content: '\e63d';
|
||
left: 50%;
|
||
top: 50%;
|
||
width: 0px;
|
||
line-height: 1vw;
|
||
margin: -0.5vw 0 0 -2.5vw;
|
||
text-align: center;
|
||
color: #c2c2c2;
|
||
font-family: layui-icon!important;
|
||
font-size: 1.5vw;
|
||
font-style: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
display: none;
|
||
}
|
||
.jczcov{
|
||
width: 96%;
|
||
height:12vw;
|
||
overflow: hidden;
|
||
margin-left: 2%;
|
||
}
|
||
.jczcov_lf{
|
||
width: 100%;
|
||
height: 100%;
|
||
float: left;
|
||
margin-left: 1%;
|
||
margin-right: 2%;
|
||
}
|
||
.jczcov_lftit{
|
||
font-size: 0.8vw;
|
||
color: #fff;
|
||
display: block;
|
||
text-align: center;
|
||
}
|
||
.jczimg{
|
||
width: 100%;
|
||
height: 6vw;
|
||
}
|
||
.jczbtm{
|
||
width: 100%;
|
||
height: 6vw;
|
||
overflow: hidden;
|
||
}
|
||
.jczbtm_lf{
|
||
width: 33.3%;
|
||
height: 3vw;
|
||
float: left;
|
||
overflow: hidden;
|
||
}
|
||
.tpimg{
|
||
width: 1.8vw;
|
||
float: left;
|
||
margin-top: 0.8vw;
|
||
}
|
||
.jczbtm_lf_rt{
|
||
width: 70%;
|
||
float: right;
|
||
}
|
||
.jczbtm_lf_rttit{
|
||
display: block;
|
||
text-align: left;
|
||
font-size: 0.8vw;
|
||
margin-top: 0.4vw;
|
||
color: #fff;
|
||
}
|
||
.jczbtm_lf_rtnum{
|
||
display: block;
|
||
text-align: left;
|
||
font-size: 0.8vw;
|
||
color: #27ddfe;
|
||
}
|
||
.mywrcov_one{
|
||
width:33%;
|
||
height: 4.5vw;
|
||
position: absolute;
|
||
top: 0.4vw;
|
||
left: 3%;
|
||
}
|
||
.mywrcov_two{
|
||
width:33%;
|
||
height: 4.5vw;
|
||
position: absolute;
|
||
top: 0.4vw;
|
||
right: 3%;
|
||
text-align: right;
|
||
}
|
||
.mywrcov_onetit{
|
||
font-size: 0.8vw;
|
||
color: #fff;
|
||
display: block;
|
||
}
|
||
.mywrcov_onenum{
|
||
font-size: 1.4vw;
|
||
color:#cce21d ;
|
||
display: block;
|
||
}
|
||
.mywrcov_three{
|
||
width:33%;
|
||
height: 4.5vw;
|
||
position: absolute;
|
||
bottom: 0.4vw;
|
||
left: 3%;
|
||
}
|
||
.mywrcov_four{
|
||
width:33%;
|
||
height: 4.5vw;
|
||
position: absolute;
|
||
bottom: 0.4vw;
|
||
right: 3%;
|
||
text-align: right;
|
||
}
|
||
.mywrcovcen{
|
||
width:33%;
|
||
height: 4.5vw;
|
||
position: absolute;
|
||
top: 2.4vw;
|
||
left: 33%;
|
||
text-align: center;
|
||
}
|
||
.mywrcovcen_tit{
|
||
font-size: 2vw;
|
||
color: #5aff8b;
|
||
display: block;
|
||
}
|
||
.mywrcovcen_con{
|
||
font-size: 0.6vw;
|
||
color:#fff;
|
||
}
|
||
.jcsssj{
|
||
width: 94%;
|
||
height:4vw;
|
||
margin: 0 auto;
|
||
}
|
||
.jcsssj2{
|
||
width: 94%;
|
||
height:3.4vw;
|
||
margin: 0 auto;
|
||
}
|
||
.jcsssj_xian{
|
||
width: 0.9vw;
|
||
height: 4vw;
|
||
float: left;
|
||
}
|
||
.jcsssj_xian2{
|
||
width: 0.9vw;
|
||
height: 3.4vw;
|
||
float: left;
|
||
}
|
||
.jcsssj_rt{
|
||
width: 94%;
|
||
height: 2.4vw;
|
||
background: #0c2139;
|
||
float: right;
|
||
}
|
||
.jcsssj_rt_tit{
|
||
font-size: 0.8vw;
|
||
display: block;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
color: #fff;
|
||
margin-top: 0.2vw;
|
||
margin-left: 1%;
|
||
margin-bottom: 0.5vw;
|
||
}
|
||
.jcsssj_rt_time{
|
||
font-size: 0.8vw;
|
||
display: inline-block;
|
||
width: 40%;
|
||
overflow: hidden;
|
||
color: #dbe8fb;
|
||
margin-right: 0.2vw;
|
||
/* float: right; */
|
||
margin-top: 0.4vw;
|
||
text-align: right;
|
||
}
|
||
.jcsssj_rtbiao{
|
||
float: left;
|
||
font-size: 0.8vw;
|
||
color: #fff;
|
||
background:#46a385 ;
|
||
border-radius: 0.2vw;
|
||
padding: 0 0.2vw;
|
||
margin-left: 2%;
|
||
margin-top: 0.6vw;
|
||
}
|
||
.jcsssj_rt_num{
|
||
display: inline-block;
|
||
font-size: 0.8vw;
|
||
color: #fff;
|
||
margin-left: 5%;
|
||
text-align: right;
|
||
margin-top: 0.6vw;
|
||
}
|
||
.zlxg{
|
||
position: relative;
|
||
}
|
||
.jcsssj_rt_up{
|
||
margin-top: 0.7vw;
|
||
}
|
||
.zlxg_btm{
|
||
width: 69%;
|
||
height: 15vw;
|
||
border: 1px solid #0169d0;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 31.5%;
|
||
z-index: 66;
|
||
background: rgba(16, 45, 80, 0.9);
|
||
box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1);
|
||
}
|
||
.zywr_lf_tit{
|
||
width: 100%;
|
||
height: 3vw;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
.zywr_titshow{
|
||
font-size: 1vw;
|
||
color: #fff;
|
||
text-shadow: 0px 2px 0px rgba(4,49,52,0.55);
|
||
font-weight: bold;
|
||
margin-top: 0.9vw;
|
||
float: left;
|
||
margin-left: 3%;
|
||
font-family: douyuFont;
|
||
}
|
||
.zywr_titrt{
|
||
width: 25%;
|
||
height: 3vw;
|
||
float: right;
|
||
line-height: 3vw;
|
||
}
|
||
.zywricon1{
|
||
width: 1vw;
|
||
margin-top: 1vw;
|
||
}
|
||
.zywricon1_tit{
|
||
font-size: 0.7vw;
|
||
color: #fff;
|
||
margin-right: 4%;
|
||
}
|
||
.zlxg_btm .layui-tab .layui-tab-title li {
|
||
width: 19%;
|
||
margin-left: 2%!important;
|
||
border-radius: 0.4vw;
|
||
background: #0e2c3f;
|
||
color: #fff!important;
|
||
}
|
||
.zlxg_btm .layui-this{
|
||
width: 19%;
|
||
margin-left: 2%!important;
|
||
border-radius: 0.4vw;
|
||
background: #0e2c3f;
|
||
color: #fff!important;
|
||
border: 1px solid #2fbdff;
|
||
box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1);
|
||
}
|
||
.zlxg_btm .layui-this:after {
|
||
border: none!important;
|
||
}
|
||
.zlxg_btm .layui-tab .layui-tab-title {
|
||
position: relative;
|
||
left: 0;
|
||
height: 40px;
|
||
white-space: nowrap;
|
||
font-size: 0;
|
||
border-bottom-width:0;
|
||
border-bottom-style: solid;
|
||
transition: all .2s;
|
||
-webkit-transition: all .2s;
|
||
}
|
||
#chart1{height:12vw;}
|
||
.scdlist{
|
||
width: 9vw;
|
||
height: 2vw;
|
||
line-height: 2vw;
|
||
background: rgba(0,0,0,0.6);
|
||
border-radius: 0.4vw;
|
||
border: 1px solid #4b677c;
|
||
position: absolute;
|
||
bottom: 16vw;
|
||
left: 0;
|
||
}
|
||
.scdlist2{
|
||
width: 9vw;
|
||
height: 2vw;
|
||
line-height: 2vw;
|
||
background: rgba(0,0,0,0.6);
|
||
border-radius: 0.4vw;
|
||
border: 1px solid #4b677c;
|
||
//position: absolute;
|
||
bottom: 19vw;
|
||
left: 0;
|
||
}
|
||
.scdlist3{
|
||
width: 9vw;
|
||
height: 2vw;
|
||
line-height: 2vw;
|
||
background: rgba(0,0,0,0.6);
|
||
border-radius: 0.4vw;
|
||
border: 1px solid #4b677c;
|
||
//position: absolute;
|
||
bottom: 22vw;
|
||
left: 0;
|
||
}
|
||
.xcdimg{
|
||
width: 0.9vw;
|
||
margin-top: 0.4vw;
|
||
margin-left: 0.4vw;
|
||
margin-right: 0.4vw;
|
||
}
|
||
.xcd2img{
|
||
width: 0.9vw;
|
||
margin-top: 0.1vw;
|
||
margin-left: 0.4vw;
|
||
margin-right: 0.4vw;
|
||
}
|
||
.scdlist_tit{
|
||
font-size: 0.7vw;
|
||
color: #fff;
|
||
text-shadow: 2px 2px 0 #163796,
|
||
-2px 2px 0 #163796,
|
||
2px -2px 0 #163796,
|
||
-2px -2px 0 #163796;
|
||
}
|
||
.jctc{
|
||
width: 17.5vw;
|
||
height: 29vw;
|
||
background: url(../../assets/image/jctc.png)no-repeat;
|
||
background-size: cover;
|
||
position: absolute;
|
||
right: 3%;
|
||
top: 0;
|
||
}
|
||
.jctcvban{
|
||
width: 90%;
|
||
height: 9vw;
|
||
margin: 0 auto;
|
||
margin-top: 0.4vw;
|
||
background: url(../../assets/image/jctc_banner.png)no-repeat;
|
||
background-size: cover;
|
||
margin-left: 6%;
|
||
}
|
||
.jctc_add{
|
||
height: 1vw;
|
||
padding-left: 3%;
|
||
margin-top: 0.6vw;
|
||
}
|
||
.jctcicon1{
|
||
width: 0.7vw;
|
||
margin-top: 0.1vw;
|
||
}
|
||
.jctcvban_tit{
|
||
font-size: 0.7vw;
|
||
color: #fff;
|
||
}
|
||
.jctc_text{
|
||
padding: 0.1vw 0.4vw;
|
||
border-radius: 0.2vw;
|
||
background: #46a385;
|
||
margin-left: 0.8vw;
|
||
margin-top: 0vw;
|
||
color: #fff;
|
||
}
|
||
.ljjr{
|
||
width: 40%;
|
||
margin-left: 30%;
|
||
margin-top: 2vw;
|
||
}
|
||
.cenimg2{
|
||
width: 94%;
|
||
margin-left: 3%;
|
||
margin-top: 2vw;
|
||
}
|
||
.no3{
|
||
width: 10%;
|
||
float: left;
|
||
}
|
||
.no4{
|
||
width: 7%;
|
||
float: left;
|
||
margin-left: 35%;
|
||
}
|
||
.no5{
|
||
width: 10%;
|
||
float: right;
|
||
}
|
||
.baseBoxRight_no{
|
||
width: 100%;
|
||
height: 8vw;
|
||
margin-top: 1vw;
|
||
}
|
||
.baseBoxRight_zhuan{
|
||
width: 100%;
|
||
height: 24vw;
|
||
position: relative;
|
||
}
|
||
.no3btn{
|
||
width: 80%;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 10%;
|
||
z-index: 1;
|
||
}
|
||
.nohome{
|
||
width: 100%;
|
||
position: absolute;
|
||
bottom: 4vw;
|
||
left: 0%;
|
||
z-index: 2;
|
||
}
|
||
.zhpjimg2{
|
||
width:94%;
|
||
height: 84%;
|
||
margin-left: 3%;
|
||
}
|
||
.mywrcov{
|
||
width: 94%;
|
||
min-height: 12vw;
|
||
margin-left: 3%;
|
||
position: relative;
|
||
}
|
||
.mywrcov_lf{
|
||
width: 20%;
|
||
height: 3.7vw;
|
||
float: left;
|
||
}
|
||
.mywrcov_lfposi{
|
||
position: relative;
|
||
width: 100%;
|
||
height: 3.7vw;
|
||
/* overflow: hidden; */
|
||
}
|
||
.mywrcov_lf_num{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
font-size: 0.6vw;
|
||
color: #86ffa2;
|
||
}
|
||
.mywrcov_lf_hen{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 35%;
|
||
font-size: 0.8vw;
|
||
color: #71d3ff;
|
||
}
|
||
.jcxianimg2{
|
||
width: 1.6vw;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 45%;
|
||
}
|
||
.jiaintou2{
|
||
width:1vw;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 75%;
|
||
}
|
||
.mywrcov_rt{
|
||
width: 80%;
|
||
float: right;
|
||
overflow: hidden;
|
||
}
|
||
.mywrcov_rt_con{
|
||
width: 33.33%;
|
||
height: 3vw;
|
||
float: left;
|
||
position: relative;
|
||
margin-top: 0.7vw;
|
||
}
|
||
.mywrcov_rt_con1{
|
||
width: 33.33%;
|
||
height: 1vw;
|
||
float: left;
|
||
position: relative;
|
||
text-align: center;
|
||
}
|
||
.sjjcimg2{
|
||
position: absolute;
|
||
bottom:0;
|
||
left: 0;
|
||
width: 100%;
|
||
}
|
||
.mywrcov_rt_con_tit{
|
||
font-size: 0.7vw;
|
||
color: #fff;
|
||
}
|
||
.mywrcov_rt_con_num{
|
||
font-size: 1.4vw;
|
||
text-align: center;
|
||
display: block;
|
||
}
|
||
/* fallback for IE */
|
||
.mywrcov_rt_con_num {
|
||
color: #fff;
|
||
}
|
||
/* gradient text for modern browsers */
|
||
@supports (background-clip: text) {
|
||
.mywrcov_rt_con_num {
|
||
background-image: linear-gradient(0deg, #fff, #fff);
|
||
background-clip: text;
|
||
color: transparent;
|
||
}
|
||
}
|
||
|
||
.ecqtssjc{
|
||
width: 100%;
|
||
height: 16.2vw;
|
||
position: relative;
|
||
}
|
||
.ecjcbak{
|
||
position: absolute;
|
||
width: 60%;
|
||
top: 1vw;
|
||
left: 20%;
|
||
z-index: 1;
|
||
}
|
||
.ecqtssjc_con{
|
||
position: absolute;
|
||
width: 7vw;
|
||
height: 7vw;
|
||
top: 2.8vw;
|
||
left: 34%;
|
||
z-index: 2;
|
||
background: url(../../assets/image/eckqzl.png)no-repeat;
|
||
background-size: cover;
|
||
}
|
||
.ecqtssjc_con_tit{
|
||
font-size: 1vw;
|
||
color: #1ad35f;
|
||
display: block;
|
||
text-align: center;
|
||
margin-top: 2.4vw;
|
||
font-weight: bold;
|
||
}
|
||
.ecqtssjc_con_sma{
|
||
font-size: 0.8vw;
|
||
color: #bcd3f5;
|
||
display: block;
|
||
text-align: center;
|
||
}
|
||
.ecqtssjc_lettp{
|
||
position: absolute;
|
||
width: 6vw;
|
||
height: 6vw;
|
||
top: 0.4vw;
|
||
left: 10%;
|
||
z-index: 2;
|
||
background: url(../../assets/image/eckqzltopleft.png)no-repeat;
|
||
background-size: cover;
|
||
}
|
||
.ecqtssjc_lettp_tit{
|
||
font-size: 1vw;
|
||
color: #ffd4d4;
|
||
display: block;
|
||
text-align: center;
|
||
margin-top: 2.4vw;
|
||
font-weight: bold;
|
||
}
|
||
.ecqtssjc_lettp_sma{
|
||
font-size: 0.8vw;
|
||
color: #bcd3f5;
|
||
display: block;
|
||
text-align: center;
|
||
margin-top: 1.4vw;
|
||
}
|
||
.ecqtssjc_lettb{
|
||
position: absolute;
|
||
width: 6vw;
|
||
height: 6vw;
|
||
top: 6.4vw;
|
||
left: 8%;
|
||
z-index: 2;
|
||
background: url(../../assets/image/eckqzltoplefb.png)no-repeat;
|
||
background-size: cover;
|
||
}
|
||
.ecqtssjc_lettb_tit{
|
||
font-size: 1vw;
|
||
color: #f9ffd0;
|
||
display: block;
|
||
text-align: center;
|
||
margin-top: 2.4vw;
|
||
font-weight: bold;
|
||
}
|
||
.ecqtssjc_lettb_sma{
|
||
font-size: 0.8vw;
|
||
color: #bcd3f5;
|
||
display: block;
|
||
text-align: center;
|
||
margin-top: 1.4vw;
|
||
}
|
||
.ecqtssjc_ritp{
|
||
position: absolute;
|
||
width: 6vw;
|
||
height: 6vw;
|
||
top: 0.4vw;
|
||
right: 8%;
|
||
z-index: 2;
|
||
background: url(../../assets/image/eckqzltopritb.png)no-repeat;
|
||
background-size: cover;
|
||
}
|
||
.ecqtssjc_ritp_tit{
|
||
font-size: 1vw;
|
||
color: #f9ffd0;
|
||
display: block;
|
||
text-align: center;
|
||
margin-top: 2.4vw;
|
||
font-weight: bold;
|
||
}
|
||
.ecqtssjc_ritp_sma{
|
||
font-size: 0.8vw;
|
||
color: #fff4d1;
|
||
display: block;
|
||
text-align: center;
|
||
margin-top: 1.4vw;
|
||
}
|
||
.ecqtssjc_ritb{
|
||
position: absolute;
|
||
width: 6vw;
|
||
height: 6vw;
|
||
top: 7.4vw;
|
||
right: 14%;
|
||
z-index: 2;
|
||
background: url(../../assets/image/eckqzltopritp.png)no-repeat;
|
||
background-size: cover;
|
||
}
|
||
.ecqtssjc_ritb_tit{
|
||
font-size: 1vw;
|
||
color: #ccffe9;
|
||
display: block;
|
||
text-align: center;
|
||
margin-top: 2.4vw;
|
||
font-weight: bold;
|
||
}
|
||
.ecqtssjc_ritb_sma{
|
||
font-size: 0.8vw;
|
||
color: #bcd3f5;
|
||
display: block;
|
||
text-align: center;
|
||
margin-top: 1.4vw;
|
||
}
|
||
|
||
.qxfwzcl{
|
||
width: 100%;
|
||
margin-top: 1vw;
|
||
overflow: hidden;
|
||
}
|
||
.qxfwzcl_left{
|
||
width: 40%;
|
||
float: left;
|
||
}
|
||
.qxfwzcl_rit{
|
||
width: 60%;
|
||
float: right;
|
||
position: relative;
|
||
}
|
||
.qxfwzcl_left_tit{
|
||
width: 90%;
|
||
height: 1.4vw;
|
||
line-height: 1.4vw;
|
||
background: url(../../assets/image/qctit.png)no-repeat;
|
||
background-size: cover;
|
||
margin-left: 5%;
|
||
color:#e5eefa ;
|
||
padding-left: 0.6vw;
|
||
font-size: 0.7vw;
|
||
}
|
||
.qxfwzcl_left_num{
|
||
width: 100%;
|
||
display: block;
|
||
text-align: center;
|
||
font-size: 1.8vw;
|
||
color: #f1ff0d;
|
||
margin-top: 0.2vw;
|
||
margin-bottom: 1vw;
|
||
}
|
||
.qcshuj{
|
||
width: 100%;
|
||
position: absolute;
|
||
top: -2vw;
|
||
left: 0;
|
||
z-index: 1;
|
||
}
|
||
.qxfwzcl_rit_smt{
|
||
font-size: 0.7vw;
|
||
color: #fff;
|
||
position: absolute;
|
||
top: 8.4vw;
|
||
left: 25%;
|
||
z-index: 2;
|
||
}
|
||
.qxfwzcl_rit_num{
|
||
font-size: 2vw;
|
||
color: #f1ff0d;
|
||
position: absolute;
|
||
top:4.4vw;
|
||
left: 34%;
|
||
z-index: 2;
|
||
}
|
||
.png01_iSpt{
|
||
width: 150%;
|
||
position: absolute;
|
||
top: -3vw;
|
||
left: -34%;
|
||
z-index: 2;
|
||
}
|
||
|
||
|
||
.boxRader {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 80%;
|
||
}
|
||
|
||
.centerBox {
|
||
width: 76%;
|
||
margin-right: 15px;
|
||
background: transparent;
|
||
}
|
||
|
||
.boxFont {
|
||
font-size: 1.2vw;
|
||
}
|
||
|
||
.centerMainBox1 {
|
||
width: 100%;
|
||
height: 60.5%;
|
||
}
|
||
|
||
.centerMainBox2 {
|
||
width: 100%;
|
||
height: 38.5%;
|
||
position: relative;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.centerMainBox2 img {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.boxTitle2 {
|
||
width: 100%;
|
||
height: 10%;
|
||
font-size: .6vw;
|
||
text-align: center;
|
||
line-height: 10%;
|
||
margin-top: 1vw;
|
||
color: #0efcff;
|
||
}
|
||
|
||
.boxLis {
|
||
width: 70%;
|
||
height: 1.5vw;
|
||
margin-left: 3vw;
|
||
margin-top: 1vw;
|
||
border-bottom: .02vw solid rgb(40, 229, 233);
|
||
}
|
||
|
||
.boxLis>li {
|
||
width: 4vw;
|
||
height: 1.4vw;
|
||
display: block;
|
||
background: rgba(40, 229, 233, .5);
|
||
margin-right: .5vw;
|
||
color: #fff;
|
||
line-height: 1.4vw;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.active {
|
||
border-bottom: .02vw solid #040A18;
|
||
border-top: .02vw solid rgb(40, 229, 233);
|
||
border-right: .02vw solid rgb(40, 229, 233);
|
||
border-left: .02vw solid rgb(40, 229, 233);
|
||
}
|
||
|
||
.contList {
|
||
position: relative;
|
||
width: 70%;
|
||
height: 7vw;
|
||
margin: 1vw auto 0;
|
||
}
|
||
|
||
.content1 li {
|
||
display: none;
|
||
}
|
||
|
||
.baseBox {
|
||
width: 100%;
|
||
border: none;
|
||
background: none;
|
||
}
|
||
|
||
.boxTitle {
|
||
font-size: .8vw;
|
||
width: 38%;
|
||
margin-top: 1vw;
|
||
text-align: center;
|
||
}
|
||
|
||
.right {
|
||
float: right;
|
||
}
|
||
|
||
.baseBoxLeft {
|
||
width: 30%;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.baseBoxRight {
|
||
width: 68%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* .baseBoxLeft img {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
} */
|
||
|
||
.maps {
|
||
width: 100%;
|
||
height: 95%;
|
||
margin-top: 2%;
|
||
background: pink;
|
||
}
|
||
|
||
.baseBox1,
|
||
.baseBox2,
|
||
.baseBox3 {
|
||
position: relative;
|
||
}
|
||
|
||
.baseBox1 img,
|
||
.baseBox2 img,
|
||
.baseBox3 img {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.csbaseBox1 {
|
||
position: relative;
|
||
z-index: 999;
|
||
}
|
||
.liSpan {
|
||
width: 100%;
|
||
margin-top: 3.2%;
|
||
text-align: center;
|
||
color: rgb(40, 229, 233);
|
||
}
|
||
|
||
.liP {
|
||
width: 66%;
|
||
margin: .3vw auto 0;
|
||
text-align: left;
|
||
font-size: .5vw;
|
||
color: rgb(40, 229, 233);
|
||
}
|
||
|
||
a:hover {
|
||
text-decoration: none
|
||
}
|
||
|
||
.titleName {
|
||
color: #0EFCFF;
|
||
}
|
||
|
||
.plant {
|
||
width: 90%;
|
||
height: 5.5vw;
|
||
margin: 2% auto 0;
|
||
display: -webkit-flex;
|
||
display: -moz-flex;
|
||
/* -webkit-justify-content: space-between;
|
||
-moz-justify-content: space-between; */
|
||
}
|
||
|
||
.plant>li {
|
||
width: 15%;
|
||
height: 100%;
|
||
}
|
||
|
||
.jumps {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 235, 255, .08);
|
||
display: -webkit-flex;
|
||
/* -webkit-flex-direction: column;
|
||
-webkit-justify-content: space-between; */
|
||
display: -moz-flex;
|
||
/* -moz-flex-direction: column;
|
||
-moz-justify-content: space-between; */
|
||
}
|
||
|
||
.jumps>div>img {
|
||
width: .88vw;
|
||
height: .88vw;
|
||
float: right;
|
||
}
|
||
|
||
.jumps>p {
|
||
width: 90%;
|
||
font-size: 1.3vw;
|
||
color: #fff;
|
||
margin: auto;
|
||
}
|
||
|
||
.jumps>div {
|
||
width: 90%;
|
||
margin: 5% auto 0;
|
||
}
|
||
|
||
.jumps>div>span {
|
||
font-size: .6vw;
|
||
color: #0efcff;
|
||
float: left;
|
||
}
|
||
|
||
.spans0 {
|
||
width: 80%;
|
||
height: 5%;
|
||
background: #03DA8D;
|
||
}
|
||
|
||
.spans1 {
|
||
width: 80%;
|
||
height: 5%;
|
||
background: #0efcff;
|
||
}
|
||
|
||
.spans2 {
|
||
width: 80%;
|
||
height: 5%;
|
||
background: #FE0000;
|
||
}
|
||
|
||
.spans3 {
|
||
width: 80%;
|
||
height: 5%;
|
||
background: #F78001;
|
||
}
|
||
|
||
.boxVideo {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.boxVideo video {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.baseDatas {
|
||
width: 70%;
|
||
height: 2vw;
|
||
display: -webkit-flex;
|
||
/* -webkit-justify-content: space-between; */
|
||
margin: 1vw 0 0 5vw;
|
||
}
|
||
|
||
.baseDatas li {
|
||
width: 10%;
|
||
}
|
||
|
||
.baseDatas li a {
|
||
color: #fff;
|
||
font-size: .8vw;
|
||
}
|
||
|
||
.active2 a>span {
|
||
color: rgb(40, 229, 233);
|
||
}
|
||
|
||
.baseDatas li a:hover>span {
|
||
color: rgb(40, 229, 233);
|
||
}
|
||
|
||
.baseDatas li a:hover>.borderRight {
|
||
border-left-color: rgb(40, 229, 233);
|
||
}
|
||
|
||
.tableDetalis {
|
||
width: 92%;
|
||
color: #fff;
|
||
margin-left: 2vw;
|
||
}
|
||
|
||
.tableDetalis tr {
|
||
height: 1.3vw;
|
||
font-size: .8vw;
|
||
}
|
||
|
||
.tableDetalis tr>td {
|
||
text-align: center;
|
||
}
|
||
|
||
.tableDetalis tr>td:nth-child(7) {
|
||
text-align: right;
|
||
}
|
||
|
||
.borderRight {
|
||
width: 0;
|
||
height: 0;
|
||
float: left;
|
||
border: .4vw solid transparent;
|
||
border-left-color: #fff;
|
||
margin-top: .2vw;
|
||
}
|
||
|
||
.borderActive {
|
||
border-left-color: rgb(40, 229, 233);
|
||
}
|
||
|
||
.equipment_table {
|
||
width: 85%;
|
||
height: 25%;
|
||
margin: auto;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: .5vw;
|
||
}
|
||
|
||
.equipment_table tr:nth-child(1) {
|
||
color: #0EFCFF;
|
||
}
|
||
|
||
.equipment_table tr {
|
||
border: 1px solid#0EFCFF;
|
||
}
|
||
|
||
.equipment_table tr:nth-child(1) {
|
||
font-size: .8vw;
|
||
}
|
||
|
||
.equipment_table img {
|
||
width: 1vw;
|
||
}
|
||
|
||
.env_table {
|
||
height: 35%;
|
||
margin-top: 5%;
|
||
}
|
||
|
||
.env_table td {
|
||
border: 1px solid#0EFCFF;
|
||
}
|
||
|
||
.env_table tr:nth-child(1) {
|
||
background: rgba(14, 252, 255, .3);
|
||
}
|
||
|
||
.map img {
|
||
width: 80%;
|
||
margin-left: 10%;
|
||
}
|
||
|
||
.map img {
|
||
width: 80%;
|
||
margin-left: 10%;
|
||
}
|
||
|
||
.mapActived1 {
|
||
position: absolute;
|
||
top: 41.5%;
|
||
left: 61%;
|
||
width: 3.5vw;
|
||
height: 5.5vw;
|
||
border-radius: 90px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.mapActived2 {
|
||
position: absolute;
|
||
top: 60%;
|
||
right: 16%;
|
||
width: 4.5vw;
|
||
height: 2.5vw;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.mapActived3 {
|
||
position: absolute;
|
||
top: 57%;
|
||
right: 9%;
|
||
width: 2.5vw;
|
||
height: 7vw;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.mapContent1 {
|
||
position: absolute;
|
||
height: 6vw;
|
||
width: 8vw;
|
||
left: 65%;
|
||
top: 33%;
|
||
background: rgba(255, 255, 255, .2);
|
||
}
|
||
|
||
.mapContent2 {
|
||
position: absolute;
|
||
height: 6vw;
|
||
width: 8vw;
|
||
left: 70%;
|
||
top: 35%;
|
||
background: rgba(255, 255, 255, .2);
|
||
display: none;
|
||
}
|
||
|
||
.mapContent3 {
|
||
position: absolute;
|
||
height: 6vw;
|
||
width: 8vw;
|
||
right: 1%;
|
||
top: 35%;
|
||
background: rgba(255, 255, 255, .2);
|
||
display: none;
|
||
}
|
||
|
||
.mapContentFont {
|
||
width: 85%;
|
||
margin-left: 12%;
|
||
font-size: .6vw;
|
||
color: #0efcff;
|
||
letter-spacing: .05vw;
|
||
margin-bottom: .3vw;
|
||
}
|
||
|
||
.mapContentFont:nth-child(1) {
|
||
margin-top: .6vw;
|
||
}
|
||
|
||
.mapContentFont span {
|
||
color: white;
|
||
}
|
||
|
||
.video-js {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.video-js:hover .vjs-big-play-button {
|
||
background: none;
|
||
}
|
||
|
||
.video-js .vjs-big-play-button:hover {
|
||
background: none;
|
||
}
|
||
|
||
.video-js .vjs-big-play-button {
|
||
border: none;
|
||
background: none;
|
||
}
|
||
.zhpjtit{
|
||
position:absolute;left:0;top:5vw;color:#2ff06f;width:100%;text-align:center;font-size:2vw;font-weight:bold;
|
||
}
|
||
.in1con_lf_moreimg{
|
||
position: absolute;
|
||
right: 3%;
|
||
top: 0.8vw;
|
||
z-index: 3;
|
||
cursor: pointer;
|
||
color: #b0bbc2;
|
||
}
|
||
.in1con_lf_moreimg:hover{
|
||
position: absolute;
|
||
right: 3%;
|
||
top: 0.8vw;
|
||
z-index: 3;
|
||
cursor: pointer;
|
||
color: #efff5d;
|
||
}
|
||
/* 弹窗样式 */
|
||
.tctit{
|
||
font-size: 1.2vw;
|
||
color: #fff;
|
||
font-weight: bold;
|
||
display: block;
|
||
margin-bottom: 1.6vw;
|
||
}
|
||
.tcgldwList{
|
||
font-size: 1vw;
|
||
color: #fff;
|
||
line-height: 2vw;
|
||
display: block;
|
||
}
|
||
.tz_cov{
|
||
width: 100%;
|
||
height: 25vw;
|
||
margin: 0 auto;
|
||
/* margin-top: 4vw; */
|
||
border: 1px solid #0169d0;
|
||
position: relative;
|
||
background: rgba(16, 45, 80, 0.9);
|
||
box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1);
|
||
}
|
||
.tz_cov_top{
|
||
width: 40%;
|
||
height: 3vw;
|
||
margin: 0 auto;
|
||
background: url(../../assets/image/tz_tltle_bg.png)no-repeat;
|
||
background-size: cover;
|
||
text-align: center;
|
||
line-height: 3vw;
|
||
margin-bottom: 2vw;
|
||
}
|
||
.tz_cov_top_tit{
|
||
font-size: 1vw;
|
||
color: #fff;
|
||
text-shadow: 0px 2px 0px rgba(4,49,52,0.55);
|
||
font-family: douyuFont;
|
||
}
|
||
.guanbiann{
|
||
width: 2vw;
|
||
height: 2vw;
|
||
position: absolute;
|
||
right: 2%;
|
||
top: 1vw;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|