SmartSubstationPlatform/riis-web/src/layout/components/Navbar.vue

<template>
  <div class="navbar" @mouseleave="mouseovernav">
    <div class="header-nav">
      <div class="nav-box">
        <div style="margin-right: 20px;">
          <div class="header-left-title">
            变电站远程智能巡视系统
          </div>
          <div class="header-left-time" style="padding-bottom: 10px;">
            当前时间：{{ dates }}  {{ times }}
          </div>
        </div>
        <div title="首页" class="homeImgBox" @mousemove="mousemoveNav(navlist[0], 0)"  :class="{'homeImgActive':activeIndex == 0}"   @click="navClick(navlist[0], 0)"></div>
        <div class="nav-list" v-for="(item, index) in navlist" v-show="index != 0 && item.name != '系统管理'"
          :class="{ 'nav-active': activeIndex == index,'iscursorinitial':(item.children != null&&item.children.length != 1 ) }" @click.stop="navClick(item, index)"
          @mousemove="mousemoveNav(item, index)"
          >
          <div class="nav-imgleft"></div>
          <div class="nav-imgtitle">{{ item.name }}</div>
          <div class="nav-imgright"></div>
        </div>
      </div>
      <div class="nav-right-box">
        <div class="nav-right-text" style="margin-right: 20px;">
          <div class="header-left-time" style="padding: 0;">用户名：{{ userStore.username }}</div>
          <div class="header-left-time" style="padding-top: 10px;">变电站：{{ userStore.regionName }}</div>
        </div>
        <div  v-for="(item, index) in navlist" v-show="item.name == '系统管理'"
          @click.stop="navClick(item, index)"  @mousemove="mousemoveNav(item, index)">
          <img title="系统菜单" v-if="activeIndex != index" src="@/assets/newimg/top_xtgl.png" style="width:20px ;margin-right: 10px;cursor: pointer" >
          <img title="系统菜单" v-else src="@/assets/header/top_xtgl.png" style="width:20px ;margin-right: 10px;cursor: pointer" >
        </div>
        <img title="告警信息" src="@/assets/newimg/top_gj.png" style="width: ;height:;margin-right: 10px;cursor: pointer"
          @click="alarmInfoClick">
        <div style="position:relative ;" class="versionbox">
          <img title="查看版本" src="@/assets/newimg/top_bb.png" style="width: ;height:;margin-right: 10px;cursor: pointer">
          <div class="versionsonbox">
            <div class="stationintroducebox">
              <div class="introduceboxtext1">变电站远程智能巡视系统</div>
              <div class="introduceboxtext2">{{ systemInfo.version }}</div>
              <div style="display: flex;align-items: center;padding-bottom: 8px;">
                <div class="introduceboxline"></div>
                <div class="introduceboxtext3">系统功能介绍</div>
              </div>
              <div class="introduceboxtext4 lineclamp">{{ systemInfo.sysdesc }}</div>
              <div style="display: flex;align-items: center;padding-bottom: 8px;">
                <div class="introduceboxline"></div>
                <div class="introduceboxtext3">系统更新说明</div>
              </div>
              <div class="introduceboxtext4 lineclamp" style="height:60px; ">{{ systemInfo.custom1 }}</div>
              <div class="texthover" @click="leadingOut">下载系统操作手册</div>
              <div style="display: flex;align-items: center;padding-bottom: 8px;">
                <div class="introduceboxline"></div>
                <div class="introduceboxtext3">更新时间</div>
              </div>
              <div class="introduceboxtext4" style="padding-bottom: 0;">{{ dateFormat(systemInfo.lastmodifydate) }}</div>
            </div>  
          </div>
        </div>
       

        <img src="@/assets/newimg/top_qp.png"  @click="toggle" v-if="!isFullscreen" style="width: ;height:;margin-right: 10px;cursor: pointer">
        <img src="@/assets/header/top_qp1.png"  @click="toggle" v-if="isFullscreen" style="width: ;height:;margin-right: 10px;cursor: pointer">
        <img src="@/assets/newimg/top_tc.png" style="width: ;height:;margin-right: 5px;cursor: pointer" @click="logout">
      </div>
    </div>
    <div class="header2-nav" v-if="navlist[activeIndex] != null && navlist[activeIndex].children != null && navlist[activeIndex].children.length != 0&& navlist[activeIndex].children.length != 1">
      <div class="header2-navlist"  :class="{ 'nav-active': activeSonIndex == indexs }" 
      v-for="(items, indexs) in navlist[activeIndex].children" @click.stop="navSonClick(navOneInfo, activeIndex, items,indexs)"
      
      @mousemove="mousemoveSonNav(navOneInfo, activeIndex, items,indexs)">
        <div class="header2-imgleft"></div>
          <div class="header2-imgtitle">{{ items.name }}</div>
        <div class="header2-imgright"></div>
      
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {  ref, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
import { useUserStore } from '@/store/modules/user';
import { getOneById,downloadConfigFile} from "@/api/versionVersioning";
import Cookies from 'js-cookie';
import { gettableData} from '@/api/dept';
import { encrypt} from '@/utils/sm4';
import {  updatePersonalInfo, updateEncryptPassword, updateAvatar} from '@/api/user';
import { ElMessageBox, ElMessage, FormInstance} from 'element-plus';
import { useRoute,} from 'vue-router';
import router from '@/router';
import { useTagsViewStore} from '@/store/modules/tagsView';
import { getNotCheckAlarmCount} from '@/api/home';
import { constantRoutes} from '@/router';
import { useFullscreen} from '@vueuse/core';
import { downloadFile } from '@/utils/index';
const tagsViewStore = useTagsViewStore();
const userStore = useUserStore();
const url = userStore.webApiBaseUrl;
const news = ref()
const dates = ref("")
const times = ref("")
const weeks = ref("")
const navlist: any = ref([])
const titleData: any = ref([])
const activeIndex = ref(0) // 一级导航索引
const activeSonIndex = ref(-1) // 二级导航索引
const activeTempInfo:any = ref({}) // 选中二级菜单焦点
const alarmCount = ref(0)
const {
  isFullscreen,
  toggle
} = useFullscreen();
navlist.value = [{
  name: '站端首页',
  opturl: '/dashboard',
  hide: false,
}]
window.addEventListener('keydown', function (e) {
  e = e || window.event
  if (e.keyCode===122) {
    useFullscreen().toggle()
    e.preventDefault()
  }
})
const isElicon: any = ref(true)
function dateFormat(row: any) {
  const daterc = row;
  if (daterc != null) {
    var date = new Date(daterc);
    var year = date.getFullYear();
    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
    date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    // 拼接
    return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
  }
}
function alarmInfoClick() {
  router.push(`/task/alarmInfo/index`)
  let item ={
    name:"告警核认",
    opturl:"/task/alarmInfo/index"
  }
  activeSonIndex.value = 2
  navSonClick(navlist.value[2], 2, item,7)
}
function navSonClick(row: any, index: any, item: any,indexs:any) {
  activeSonIndex.value = indexs
  activeTempInfo.value = {
    name:item.name,
    index:indexs
  }
  isElicon.value = true
  activeIndex.value = index
  // row.hide = false
  if (item.opturl != undefined) {
    router.push(item.opturl)
  }
}
function mousemoveSonNav(row: any, index: any, item: any,indexs:any){
  activeSonIndex.value = indexs
  isElicon.value = true
  activeIndex.value = index
}
const navOneInfo :any = ref({})
function navClick(row: any, index: any) { // 显示二级菜单
  if(row.children != null&&row.children.length != 1){
    return
  }
  activeSonIndex.value = -1
  navOneInfo.value = row
  activeIndex.value = index
  isElicon.value = true
  for (let i = 0; i < navlist.value.length; i++) {
    navlist.value[i].hide = false
  }
  if (row.children == undefined) {
    activeIndex.value = index
    router.push(row.opturl)
    activeSonIndex.value = -1
    activeTempInfo.value = {
      name:"",
      index:-1
    }
  } else {
    if(row.children.length == 1){
      router.push(row.children[0].opturl)
      activeSonIndex.value = -1
      activeTempInfo.value = {
        name:"",
        index:-1
      }
      return
    }
    row.children.forEach((element:any) => {
      if(element.name == activeTempInfo.value.name ){
        activeSonIndex.value = activeTempInfo.value.index
      }
    });
    row.hide = true
  }


}

function mousemoveNav(row: any, index: any){ //鼠标移入
  activeSonIndex.value = -1
  activeIndex.value = index
  isElicon.value = true
  for (let i = 0; i < navlist.value.length; i++) {
    navlist.value[i].hide = false
  }
  if (row.children == undefined) {
    activeSonIndex.value = -1
  } else {
    row.children.forEach((element:any) => {
      if(element.name == activeTempInfo.value.name ){
        activeSonIndex.value = activeTempInfo.value.index
      }
    });
    row.hide = true
  }


}
function mouseovernav(){
  for (let i = 0; i < navlist.value.length; i++) {
    if (navlist.value[i].opturl == routers.path) {
      activeIndex.value = i
      return
    }
    if (navlist.value[i].children != undefined) {
      for (let j = 0; j < navlist.value[i].children.length; j++) {
        if (navlist.value[i].children[j].opturl == routers.path) {
          activeIndex.value = i
          activeSonIndex.value = j
          activeTempInfo.value = {
            name:navlist.value[i].children[j].name,
            index:j
          }
          return
        }
      }
    }
  }
}
const clearTime:any = ref(null)
function getTimes() {  // 获取当前日期
  let date = new Date()
  let year: any = date.getFullYear() //获取年
  let month: any = date.getMonth() + 1 //获取月
  let day: any = date.getDate() //获取日
  let hours: any = date.getHours() //获取时
  let minutes: any = date.getMinutes() //获取分
  let seconds: any = date.getSeconds() //获取秒
  month = month > 9 ? month : "0" + month
  day = day > 9 ? day : "0" + day
  hours = hours > 9 ? hours : "0" + hours
  minutes = minutes > 9 ? minutes : "0" + minutes
  seconds = seconds > 9 ? seconds : "0" + seconds //数据不大于9时在数据前方拼接一个“0”

  let arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
  weeks.value = arr[date.getDay()]
  times.value = hours + ":" + minutes + ":" + seconds
  dates.value = year + " 年 " + month + " 月 " + day + " 日 "
  clearInterval(clearTime.value)
  clearTime.value = setInterval(()=>{
    getHmsTimes()
  },1000)
}
function getHmsTimes() { // 获取当前时间
  let date = new Date()
  let hours: any = date.getHours() //获取时
  let minutes: any = date.getMinutes() //获取分
  let seconds: any = date.getSeconds() //获取秒
  hours = hours > 9 ? hours : "0" + hours
  minutes = minutes > 9 ? minutes : "0" + minutes
  seconds = seconds > 9 ? seconds : "0" + seconds //数据不大于9时在数据前方拼接一个“0”

  let arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
  weeks.value = arr[date.getDay()]
  times.value = hours + ":" + minutes + ":" + seconds
  
}


const systemInfo: any = ref({
  version: ""
})
function getData() {
  getOneById().then((res: any) => {
    systemInfo.value = res
    // if (info.value.version) {
    //     versionNum.value = info.value.version
    //     versionnum.value.majorVersion = info.value.version.split('.')[0]
    //     versionnum.value.subNumber = info.value.version.split('.')[1]
    //     versionnum.value.stageNumber = info.value.version.split('.')[2]
    //     info.value.version.split('.')[3].split('_')
    //     versionnum.value.dateNumber =  info.value.version.split('.')[3].split('_')[0]
    //     versionnum.value.greekNumber =  info.value.version.split('.')[3].split('_')[1]
    // }

  })
}
const routers = useRoute();
onMounted(() => {
  getData()
  getTimes()
  titleData.value = []
  if (userStore.stationData.length > 1) {
    titleData.value = [{
      type: '1',
      stationName: userStore.regionName,
      stationCode: userStore.regionId,
      stationId: userStore.regionId
    }]
  }
  for (let j = 0; j < userStore.stationData.length; j++) {
    titleData.value.push(userStore.stationData[j])
  }

  if (userStore.stationId != undefined && userStore.stationId != "") {
    getNotCheckAlarmCount({
      stationId: userStore.stationId
    }).then((res: any) => {
      alarmCount.value = res.data.count
      userStore.alarmCount = res.data.count
    })
  }

  navlist.value = navlist.value.concat(userStore.menuArr)
  
  for (let i = 0; i < navlist.value.length; i++) {
    if (navlist.value[i].opturl == routers.path) {
      activeIndex.value = i
      return
    }
    if (navlist.value[i].children != undefined) {
      for (let j = 0; j < navlist.value[i].children.length; j++) {
        if (navlist.value[i].children[j].opturl == routers.path) {
          activeIndex.value = i
          activeSonIndex.value = j
          activeTempInfo.value = {
            name:navlist.value[i].children[j].name,
            index:j
          }
          return
        }
      }
    }
  }

})
function logout() {
  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userStore.logout().then(() => {
      tagsViewStore.delAllViews();
    }).then(() => {
      Cookies.set('stationIds', '');
      router.push(`/login`);
    });
  });
}
function leadingOut() {// 下载系统操作手册
  const params ={
    fileName:systemInfo.value.custom2
  }
  downloadConfigFile(params).then((response: any) => {
    downloadFile(response, '系统操作手册', 'pdf')
  }).catch(() => {
  });
}
</script>


<style lang="scss" scoped>
.navbar {

  padding:0 15px;
  padding-top: 9px;
  width: 100%;
  position: relative;
  background-color: rgb(19, 26, 37);
  // display: -webkit-flex;
  // display: flex;
  // align-items: center;
  // -webkit-align-items: center;
  // justify-content: space-between;
  // -webkit-justify-content: space-between; 
  // box-shadow: 0px 0px 10px rgb(219 225 236);
  // z-index: 98;
}
.header-box {
  position: relative;
  z-index: 1002;
  height: 90px;
  width: 100%;
  display: flex;
}

.texthover {
  color: #fff;
  text-decoration: underline;
  cursor: pointer;
}

.texthover:hover {
  color: #409eff;
  text-decoration: underline;
}

.header-img-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 73px;
}

.header-left {
  position: relative;
  display: flex;
  align-items: center;
  width: 630px;
  height: 75px;
  padding-left: 20px;
}

.header-left-title {
  position: relative;
  font-size: 24px;
  // background-image: linear-gradient(#ffffff 20%, rgb(0, 249, 162));
  background: #fff;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  /*需要文字透明*/
  font-family: "汉仪综艺体简";
  font-weight: bold;
}
.header-left-time{
  padding-top: 5px;
  font-family: "MicrosoftYaHei Regular", MicrosoftYaHei;
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    color: rgb(181, 215, 255);
    line-height: 9px;
    font-kerning: normal;
}
.header-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // padding-top: 20px;
  // align-items: center;
  background-image:url(@/assets/newimg/top_bj.png);
  background-size: 100% 100%;
  width: 100%;
  height: 81px;
  // padding-left: 11px;
  

  .times {
    font-family: '微软雅黑';
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #FFFFFF;
  }

  .dates {
    font-family: '微软雅黑';
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #FFFFFF;
    padding-top: 4px;
    // font-family: '微软雅黑';
    // font-weight: 400;
    // font-style: normal;
    // font-size: 12px;
    // color: #FFFFFF;
  }

  .nav-box {
    display: flex;
    align-items: center;
    // padding-left: 20px;

    .nav-list {
      display: flex;
    /* align-items: center; */
    position: relative;
    height: 37px;
    line-height: 40px;
    font-family: "Arial Normal", "Arial";
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #B5D7FF;
    text-align: center;
    margin-right: 18px;
    cursor: pointer;
      // background: url(@/assets/newimg/nav.png);
    }
    .nav-imgleft{
      width: 9px;
      height: 37px;
      background: url(@/assets/header/cd_zuo.png);
    }
    .nav-imgright{
      width: 26px;
      height: 37px;
      background: url(@/assets/header/cd_yuo.png);
    }
    .nav-imgtitle{
      height: 34px;
      line-height: 34px;
      padding-left: 12px;
      background: rgba(152, 224, 255, 0.2);
      border-top: 1px solid rgba(181, 215, 255, 0.3);
      border-bottom: 1px solid rgba(181, 215, 255, 0.3);
      margin-top: 3px;
    }
    .nav-active .nav-imgleft{
      background: url(@/assets/header/cd_zuo.png);
      background: url(@/assets/header/cd_zuo1.png);
    }
    .nav-active .nav-imgright{
      background: url(@/assets/header/cd_yuo.png);
      background: url(@/assets/header/cd_yuo1.png);
      
    }
    .nav-active .nav-imgtitle{
      background:rgba(21, 69, 119,0.8) ;
    }
    .nav-list:hover {
      color: rgb(255, 255, 255);
    }

    .nav-active {
      // font-weight: bold;
      color: rgb(255, 255, 255);
      // background: url(@/assets/newimg/navactive.png) !important;
      // background-size: 100% 100%;
    }
  }
}
.header2-nav{
  height: 60px;
  display: flex;
  align-items: center;
  .header2-navlist{
    display: flex;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 0;
    margin-right: 16px;
    font-family: "Arial Normal", Arial;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    // border-width: 1px;
    // border-style: solid;
    // border-color: rgb(181, 215, 255);
    color: rgb(181, 215, 255);
    text-align: center;
    cursor: pointer;
  }
  .header2-imgleft{
      width: 4px;
      height: 30px;
      background: url(@/assets/header/cd_er_zuo.png);
    }
    .header2-imgright{
      width: 4px;
      height: 30px;
      background: url(@/assets/header/cd_er_you.png);
    }
    .header2-imgtitle{
      height: 30px;
      line-height: 30px;
      padding:0 12px;
      background: rgba(152, 224, 255, 0.2);
      border-top: 1px solid rgba(181, 215, 255, 0.2);
      border-bottom: 1px solid rgb(181, 215, 255, 0.2);
    }
    .nav-active .header2-imgleft{
      background: url(@/assets/header/cd_er_zuo1.png);
    }
    .nav-active .header2-imgright{
      background: url(@/assets/header/cd_er_you1.png);
    }
    .nav-active .header2-imgtitle{
      background:rgba(21, 69, 119,0.8) ;
    }
  .nav-active {
    background-color: rgb(21, 69, 119);
    color: #fff;
  }
}
.header-right {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 70px;
  padding-right: 25px;

  .header-information {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 25px;
    width: 30px;
    height: 30px;
    background: url(@/assets/monitorsystem/top_gj.png);

    .header-informationImg {
      width: 18px;
      height: 18px;
      background: url(@/assets/monitorsystem/top_gj1.png);
    }

    .header-informationDian {
      position: absolute;
      top: 5px;
      left: 15px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: red;

    }
  }

  .header-information1 {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 25px;
    width: 30px;
    height: 30px;
  }
}

:deep(.el-badge__content.is-fixed) {
  // top: -14px;
  background: red;
  border: 1px solid red;
}

.stationBox {
  position: absolute;
  top: 40px;
  background-color: #0a2420 !important;
  border: 1px solid rgb(12, 65, 52) !important;
  box-shadow: rgb(0 249 162 / 30%) 0px 0px 5px !important;
}

@media (max-width: 1795px) {
  .header-nav .dates {
    display: none;
  }
}

@media (max-width: 1643px) {
  .header-left {
    width: 400px;
  }
}

@media (max-width: 1419px) {
  .header-nav .nav-box {
    padding-left: 0px;
  }
}

@media (max-width: 1370px) {
  .header-nav .nav-box .nav-list {
    margin-right: 10px;
  }
}

.homeactive {
  background-color: rgba(0, 249, 162, 0.2) !important;
}
.versionsonbox{
  display: none;
  position: absolute;
  top: 10px;
  right: -80px;
}
.stationintroducebox {
  position:relative;
  top: 10px;
  width: 430px;
  height: 437px;
  background: url(@/assets/header/banben.png);
  padding: 45px 30px 0;

  .introduceboxtext1 {
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    color: #FFFFFF;
    font-size: 24px;
    text-align: left;
    padding-bottom: 10px;
  }

  .introduceboxtext2 {
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #FFFFFF;
    padding-bottom: 20px;
  }

  .introduceboxline {
    width: 4px;
    height: 10px;
    background: inherit;
    background-color: #409eff;
    border: none;
    border-radius: 0px;
    margin-right: 5px;
  }

  .introduceboxtext3 {
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    color: #409eff;
  }

  .introduceboxtext4 {
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 20px;
    margin-bottom: 10px;
  }

  .lineclamp {
    height: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }
}

.versionbox:hover .versionsonbox {
  display: block;
}

.el-overlay {
  position: fixed;
  z-index: 2023;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: auto;

  .examinationboxline {
    width: 4px;
    height: 10px;
    background: inherit;
    background-color: #409eff;
    border: none;
    border-radius: 0px;
    margin-right: 5px;
  }

  .examinationboxtext {
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    color: #409eff;
  }

  .notification {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    // margin: auto;
    /* background: url(/src/assets/monitorsystem/xsri_yltu.png); */
    background-size: 100% 100%;

    .notification-title {
      text-align: center;
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
      font-weight: 700;
      font-style: normal;
      font-size: 18px;
      color: #FFFFFF;
      height: 40px;
      line-height: 38px;
    }

    .notification-body {
      position: absolute;
      bottom: 15px;
      left: 0;
      right: 0;
    }
  }

  .examination {
    width: 900px;
    height: 590px;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    margin: auto;
    background: url(@/assets/monitorsystem/ejectbg/xsri_xz.png);
    background-size: 100% 100%;

    .examination-title {
      text-align: center;
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
      font-weight: 700;
      font-style: normal;
      font-size: 18px;
      color: #FFFFFF;
      height: 40px;
      line-height: 38px;
    }

    .examination-body {
      position: absolute;
      bottom: 15px;
      left: 0;
      right: 0;
    }
  }
}

.justifycenter {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;

  .justifycentername {
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #FFFFFF;
    text-align: right;
    width: 80px;

  }


}

.readonlybox {
  :deep(.el-input__wrapper) {
    background: rgb(12, 65, 50);
    box-shadow: 0 0 0 1px rgb(8 100 70) inset;
  }

  :deep(.is-focus.el-input__wrapper) {
    background: rgb(12, 65, 50);
    box-shadow: 0 0 0 1px rgb(8 100 70) inset !important;
  }
}

.input-box {

  :deep(.el-input__wrapper) {
    background: transparent;
    box-shadow: 0 0 0 1px rgba(8, 100, 70, 1) inset;
    border-radius: 1px;
  }

  :deep(.el-input__wrapper:hover) {
    box-shadow: 0 0 0 1px rgba(8, 100, 70, 1) inset;
  }

  :deep(.el-input__wrapper .el-input__icon) {
    color: rgb(7, 168, 114);
  }
}

:deep(.el-form-item__label) {
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #FFFFFF;
  text-align: right;
}

:deep(.el-input__inner) {
  color: #fff;
}
.homeImgBox{
  width: 34px;
  height: 34px;
  background: url(@/assets/newimg/top_sy.png);
  background-size: 100% 100%;
  margin-right: 20px;
  cursor: pointer;
}
.homeImgActive{
  background: url(@/assets/header/home.png);
  background-size: 100% 100%;
}
.nav-right-box{
  display: flex;
  align-items: center;
}
.iscursorinitial{
  cursor: initial !important;
}
</style>