Merge remote-tracking branch 'origin/visu_forest_0_1' into visu_forest_0_1

# Conflicts:
#	src/views/forest.vue

src/components/supermap.vue

@@ -1290,6 +1290,11 @@
 					duration: 2
 				})
 			},
+			dropLocation: function(lat, lng,leve) { //落点定位
+				this.map.flyTo([lat, lng], leve, {
+					duration: 2
+				})
+			},
 			dropLocation10: function(lat, lng) { //落点定位
 				this.map.flyTo([lat, lng], 10, {
 					duration: 2

src/dahua/TVWalllib/main.ts

@@ -530,4 +530,4 @@ function getScrollbarWidth() {
 	document.body.removeChild(scrollDiv);
 
 	return scrollbarWidth;
-}
+}

src/views/bigdata/bigdata.vue

@@ -372,7 +372,6 @@ export default {
 
       getEventInfoList(){
         getEventInfoList().then(res => {
-          debugger
           for(let i in res.data){
             const data = [];
             data.push(res.data[i].areaTotal);

src/views/eventdetailsdialog.vue

@@ -285,7 +285,7 @@
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="事件类型" v-if="eventStatusButton=='qs'">
+        <el-form-item label="事件类型" v-if="eventStatusButton=='qs'&& eventTypeXl == null">
           <el-select v-model="sendEventType" placeholder="请选择事件类型！" clearable>
             <el-option
               v-for="item in eventTypeList"
@@ -1186,6 +1186,7 @@ export default {
       eventName: null,
       longitude: null,
       latitude: null,
+      eventTypeXl:null,
       eventLog: null,
       eventLogList: [],
       visuForestCloudYuAnBo: null,
@@ -1263,6 +1264,10 @@ export default {
   },
   methods: {
     /************************************责任制-开始****************************************/
+    //初始化责任制数据列表
+    initDutysystemTableData(){
+      this.dutysystemTableData = [];
+    },
     addLine: function() {//添加负责人行数
       var newValue = {
         id: '',//主键
@@ -1334,6 +1339,7 @@ export default {
       centereventtdepteventList(param).then(res => {
         this.depteventList = res.data
         this.showResponsibilityDialog = true
+        this.initDutysystemTableData();
       })
     },
     closeResponsibilityDialog() {//责任制关闭
@@ -1662,12 +1668,16 @@ export default {
         if (eventStatus == 'qs') {//签收
           that.eventConfirmTitle = '事件签收'
           let param = { parentId: that.eventType }
-          await listSJfl(param).then(res => {
-            //事件类型
-            if (res.code == 200) {
-              that.eventTypeList = res.data
-            }
-          })
+          if(that.eventTypeXl != null){
+            that.sendEventType = that.eventTypeXl;
+          }else{
+            await listSJfl(param).then(res => {
+              //事件类型
+              if (res.code == 200) {
+                that.eventTypeList = res.data
+              }
+            })
+          }
           await listYuAn().then(res => {
             //关联预案
             if (res.code == 200) {
@@ -1893,6 +1903,7 @@ export default {
       let that = this
       //获取事件详情
       getEventDetail({ eventCode: eventCode }).then(res => {
+
         that.eventDialog = true
         that.eventLogList = res.data.eventlog//日志列表
         that.visuForestCloudYuAnBo = res.data.visuForestCloudYuAnBo//应急预案
@@ -1905,6 +1916,7 @@ export default {
         that.longitude = res.data.catalogue.longitude
         that.latitude = res.data.catalogue.latitude
         that.eventName = res.data.catalogue.eventName
+        that.eventTypeXl = res.data.catalogue.eventTypeXl
         let markersMap = {
           lng: 124.59,
           lat: 43.02,
@@ -1989,6 +2001,7 @@ export default {
         that.latitude = res.data.catalogue.latitude
         that.longitude = res.data.catalogue.longitude
         that.eventName = res.data.catalogue.eventName
+        that.eventTypeXl = res.data.catalogue.eventTypeXl
         let markersMap = {
           lng: 124.59,
           lat: 43.02,
@@ -2020,7 +2033,7 @@ export default {
           markersMap.radius = res.data.eventdetail[0].fireRadius
         }
         setTimeout(() => {
-          that.$refs.supermapDialog.clearM(false)
+          that.$refs.supermapDialog.clearM(true)
           if (res.data.eventdetail != null && res.data.eventdetail.length > 0 && res.data.eventdetail[0].fireRadius != null && res.data.eventdetail[0].fireRadius != '' && res.data.eventdetail[0].fireRadius > 0) {
             that.$refs.supermapDialog.setMarkersRadius([markersMap])
           } else {

src/views/forest.vue

@@ -106,7 +106,7 @@
       <supermap ref="supermap" style="width: 100%;height: 100vh;" class="indexSupermapClass" :mapDiv="'forestMap'"
                 :dynamicPlotting="false"
                 :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"
-                @showEventDialog="showEventDialog"></supermap>
+                @showEventDialog="showEventDialog" ></supermap>
       <!-- 右侧 -->
       <div class="rightbar rightbar-index" ref="right">
         <div class="right-item1">
@@ -388,14 +388,13 @@
           <div class="forthis">
             <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
               <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
-              <div class="this-title" style="cursor: pointer"
-                   @click="setEventTypeId({eventTypeIdDl: [], eventTypeId: []})">
+              <div class="this-title">
                 <span>事件分类</span>
                 <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
               </div>
               <div class="i-list-con small-bottom-margin h-19">
-                <chart v-if="showEventKind" :config="eventKind" @setEventTypeId="setEventTypeId"
-                       style="width: 90%;height: 18vh; padding:.5rem 1rem"/>
+                <dv-capsule-chart v-if="showEventKind" :config="eventKind"
+                                  style="width: 90%;height: 18vh; padding:.5rem 1rem"/>
               </div>
             </dv-border-box-13>
           </div>
@@ -434,101 +433,98 @@
 </template>
 
 <script>
-import chart from "./from/dvCapsuleChart.vue";
-
-import dateChoose from '@/views/date.vue' //日历
-/** ----------------------------------weosocket开始------------------------------------- */
-import Cookies from 'js-cookie'
-/** ----------------------------------weosocket结束------------------------------------- */
+  import dateChoose from '@/views/date.vue' //日历
+  /** ----------------------------------weosocket开始------------------------------------- */
+  import Cookies from 'js-cookie'
+  /** ----------------------------------weosocket结束------------------------------------- */
 
-import {
-  getBaseInfo,
-  getTodayEvents,
-  getDeptEventCount,
-  getWeather,
-  getEventList,
-  getEventByEventType,
-  getEventByReportorOrder,
-  getExposureStage
-} from '@/api/forest'
-import {
-  getNearEvent
-} from '@/api/event'
-import supermap from '@/components/supermap' //超图
-// import supermapNotProcessed from '@/components/supermap' //超图
-// import supermapProcessed from '@/components/supermap' //超图
-import vheader from '@/components/v-header.vue' //一体化共用头部
-import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
-import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
-import TVWall from '@/components/TVWall.vue' //电视墙弹窗
-import wrj from '@/components/wrj.vue' //无人机
-import eventdetailsdialog from '@/views/eventdetailsdialog.vue' //事件详情弹窗
-import firespread from '@/views/firespread.vue' //事件详情弹窗
+  import {
+    getBaseInfo,
+    getTodayEvents,
+    getDeptEventCount,
+    getWeather,
+    getEventList,
+    getEventByEventType,
+    getEventByReportorOrder,
+    getExposureStage
+  } from '@/api/forest'
+  import {
+    getNearEvent
+  } from '@/api/event'
+  import supermap from '@/components/supermap' //超图
+  // import supermapNotProcessed from '@/components/supermap' //超图
+  // import supermapProcessed from '@/components/supermap' //超图
+  import vheader from '@/components/v-header.vue' //一体化共用头部
+  import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
+  import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
+  import TVWall from '@/components/TVWall.vue' //电视墙弹窗
+  import wrj from '@/components/wrj.vue' //无人机
+  import eventdetailsdialog from '@/views/eventdetailsdialog.vue' //事件详情弹窗
+  import firespread from '@/views/firespread.vue' //事件详情弹窗
 
-/** ----------------------------------摄像头预览开始------------------------------------- */
-import {getDahuaVideoServer} from '@/api/dahua/dahua'
-import DHWs from '@/dahua/lib/DHWs'
-import Firespread from "./firespread";
+  /** ----------------------------------摄像头预览开始------------------------------------- */
+  import { getDahuaVideoServer } from '@/api/dahua/dahua'
+  import DHWs from '@/dahua/lib/DHWs'
+  import Firespread from "./firespread";
 
-/** ----------------------------------摄像头预览结束------------------------------------- */
+  /** ----------------------------------摄像头预览结束------------------------------------- */
 
-let echarts = require('echarts')
-export default {
-  components: {
-    Firespread,
-    supermap,
-    // supermapNotProcessed,
-    // supermapProcessed,
-    vheader,
-    chart,
-    vBottomMenu,
-    eventLocation,
-    TVWall,
-    wrj,
-    dateChoose,
-    eventdetailsdialog,
-    firespread
-  },
-  created() {
-    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
-    window.showDialog = this.showDialog
-    window.choseLayerSwitching = this.choseLayerSwitching
-    window.choseLayerSwitchingList = this.choseLayerSwitchingList
-    window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data
-    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
-    const DHWsInstance = DHWs.getInstance();
-    this.ws = DHWsInstance;
-  },
-  mounted() {
-    this.getBaseInfo()
-    this.getTodayEvents(this.getCurrentDataStr())
-    this.getDeptEventCount(this.getCurrentDataStr())
-    this.getWeather(this.getCurrentDataStr())
-    this.getEventList(this.getCurrentDataStr(), this.pageSize, this.pageNum)
-    this.getEventByEventType(this.getCurrentDataStr())
-    this.getEventByReportorOrder(this.getCurrentDataStr())
-    this.getExposureStage(this.getCurrentDataStr())
-    this.getSupermap(this.getCurrentDataStr())
-    /** ----------------------------------weosocket开始------------------------------------- */
-    // this.initWebSocket()
-    /** ----------------------------------weosocket结束------------------------------------- */
-    setInterval(() => {
-      if (this.calendarDay == this.getCurrentDataStr()) {
-        this.getTodayEvents(this.getCurrentDataStr(), true);
-        this.getDeptEventCount(this.getCurrentDataStr(), true);
-        this.getEventList(this.getCurrentDataStr(), this.pageSize, this.pageNum, '', true);
-        this.getEventByEventType(this.getCurrentDataStr(), true);
-        this.getEventByReportorOrder(this.getCurrentDataStr(), true);
-        this.getExposureStage(this.getCurrentDataStr(), true);
-        this.getSupermap(this.getCurrentDataStr(), true);
-      }
-    }, 4000)
-    this.bottomMenuList() //获取底部公共组件消息和任务
-  },
-  data() {
-    return {
-      //警报MP3文件
-      audioSrc: require('@/assets/jingbao.mp3'),
+  let echarts = require('echarts')
+  export default {
+    components: {
+      Firespread,
+      supermap,
+      // supermapNotProcessed,
+      // supermapProcessed,
+      vheader,
+      vBottomMenu,
+      eventLocation,
+      TVWall,
+      wrj,
+      dateChoose,
+      eventdetailsdialog,
+      firespread
+    },
+    created() {
+      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+      window.showDialog = this.showDialog
+      window.choseLayerSwitching = this.choseLayerSwitching
+      window.choseLayerSwitchingList = this.choseLayerSwitchingList
+      window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data
+      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+      const DHWsInstance = DHWs.getInstance();
+      this.ws = DHWsInstance;
+    },
+    mounted() {
+      this.getBaseInfo()
+      this.getTodayEvents(this.getCurrentDataStr())
+      this.getDeptEventCount(this.getCurrentDataStr())
+      this.getWeather(this.getCurrentDataStr())
+      this.getEventList(this.getCurrentDataStr(), this.pageSize, this.pageNum)
+      this.getEventByEventType(this.getCurrentDataStr())
+      this.getEventByReportorOrder(this.getCurrentDataStr())
+      this.getExposureStage(this.getCurrentDataStr())
+      this.getSupermap(this.getCurrentDataStr())
+      /** ----------------------------------weosocket开始------------------------------------- */
+      // this.initWebSocket()
+      /** ----------------------------------weosocket结束------------------------------------- */
+      setInterval(() => {
+        if (this.calendarDay == this.getCurrentDataStr()) {
+          this.getTodayEvents(this.getCurrentDataStr(), true);
+          this.getDeptEventCount(this.getCurrentDataStr(), true);
+          this.getEventList(this.getCurrentDataStr(), this.pageSize, this.pageNum, '', true);
+          this.getEventByEventType(this.getCurrentDataStr(), true);
+          this.getEventByReportorOrder(this.getCurrentDataStr(), true);
+          this.getExposureStage(this.getCurrentDataStr(), true);
+          this.getSupermap(this.getCurrentDataStr(), true);
+        }
+      }, 4000)
+      this.bottomMenuList() //获取底部公共组件消息和任务
+    },
+    data() {
+      return {
+        //警报MP3文件
+        audioSrc: require('@/assets/jingbao.mp3'),
 
       calendarDay: this.getCurrentDataStr(),
       //基本情况
@@ -1163,159 +1159,158 @@ export default {
       if (this.calendarDay == this.getCurrentDataStr() && data != e.data) {
         this.getWebSocketEvent(e.data);
 
-        // this.getEventListNew();
-        // this.getTodayEvents(this.getCurrentDataStr());
-        // this.getDeptEventCount(this.getCurrentDataStr());
-        // this.getEventByEventType(this.getCurrentDataStr());
-        // this.getEventByReportorOrder(this.getCurrentDataStr());
+          // this.getEventListNew();
+          // this.getTodayEvents(this.getCurrentDataStr());
+          // this.getDeptEventCount(this.getCurrentDataStr());
+          // this.getEventByEventType(this.getCurrentDataStr());
+          // this.getEventByReportorOrder(this.getCurrentDataStr());
 
-        // this.$refs.bottomMenu.updateAlert();
-        // this.$refs.up.play();
-        // thes.$refs.up.pause();//停止播放音乐
-      }
-    },
-    websocketsend(Data) { //数据发送
-      this.websock.send(Data)
-    },
-    websocketclose(e) { //关闭
-      console.log('断开连接', e)
-      // clearInterval(this.setIntervalWesocketPush)
-      this.weosocket = false
-    },
-    /**发送心跳
-     * @param {number} time 心跳间隔毫秒 默认5000
-     * @param {string} ping 心跳名称 默认字符串ping
-     */
-    sendPing(time = 60000, ping = {
-      'fromId': 'forest',
-      'fromUserId': Cookies.get('username'),
-      'toUserId': Cookies.get('username')
-    }) {
-      clearInterval(this.setIntervalWesocketPush)
-      this.setIntervalWesocketPush = setInterval(() => {
-        if (this.weosocket) {
-          this.websock.send(JSON.stringify(ping))
-        } else {
-          this.initWebSocket()
+          // this.$refs.bottomMenu.updateAlert();
+          // this.$refs.up.play();
+          // thes.$refs.up.pause();//停止播放音乐
         }
-      }, time)
-    },
-    stopAudio() {
-      this.$refs.up.pause(); //停止播放音乐
-      this.$refs.up.currentTime = 0;
-    },
-    /** ----------------------------------weosocket结束------------------------------------- */
+      },
+      websocketsend(Data) { //数据发送
+        this.websock.send(Data)
+      },
+      websocketclose(e) { //关闭
+        console.log('断开连接', e)
+        // clearInterval(this.setIntervalWesocketPush)
+        this.weosocket = false
+      },
+      /**发送心跳
+       * @param {number} time 心跳间隔毫秒 默认5000
+       * @param {string} ping 心跳名称 默认字符串ping
+       */
+      sendPing(time = 60000, ping = {
+        'fromId': 'forest',
+        'fromUserId': Cookies.get('username'),
+        'toUserId': Cookies.get('username')
+      }) {
+        clearInterval(this.setIntervalWesocketPush)
+        this.setIntervalWesocketPush = setInterval(() => {
+          if (this.weosocket) {
+            this.websock.send(JSON.stringify(ping))
+          } else {
+            this.initWebSocket()
+          }
+        }, time)
+      },
+      stopAudio() {
+        this.$refs.up.pause(); //停止播放音乐
+        this.$refs.up.currentTime = 0;
+      },
+      /** ----------------------------------weosocket结束------------------------------------- */
 
-    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
-    bottomMenuList() {
-      this.$refs.bottomMenu.selectTaskList()//获取任务列表
-      this.$refs.bottomMenu.selectMessageList()//获取消息列表
-    },
-    showDialog(click) {
-      if (click == 'eventLocation') {
-        this.$refs.eventLocation.showEventLocation()
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-      } else if (click == 'editableLayers') {
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.supermap.isEditableLayers) {
-          this.$refs.supermap.isEditableLayers = true
-        } else {
+      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+      bottomMenuList() {
+        this.$refs.bottomMenu.selectTaskList()//获取任务列表
+        this.$refs.bottomMenu.selectMessageList()//获取消息列表
+      },
+      showDialog(click) {
+        if (click == 'eventLocation') {
+          this.$refs.eventLocation.showEventLocation()
           this.$refs.supermap.isEditableLayers = false
-        }
-      } else if (click == 'layerSwitching') {
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.bottomMenu.showChild) {
-          this.$refs.bottomMenu.showChild = true
-        } else {
           this.$refs.bottomMenu.showChild = false
-        }
-      } else if (click == 'TVWall') {
-        this.$refs.TVWall.showTVWall();
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-      } else if (click == 'wrj') {
-        this.$refs.wrj.showWrj();
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-      } else if (click == 'forestban') {
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.bottomMenu.showBanChild) {
-          this.$refs.bottomMenu.showBanChild = true
-        } else {
           this.$refs.bottomMenu.showBanChild = false
-        }
-      } else if (click == 'forestchang') {
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChild = false
-        if (!this.$refs.bottomMenu.showChangChild) {
-          this.$refs.bottomMenu.showChangChild = true
-        } else {
           this.$refs.bottomMenu.showChangChild = false
+        } else if (click == 'editableLayers') {
+          this.$refs.bottomMenu.showChild = false
+          this.$refs.bottomMenu.showBanChild = false
+          this.$refs.bottomMenu.showChangChild = false
+          if (!this.$refs.supermap.isEditableLayers) {
+            this.$refs.supermap.isEditableLayers = true
+          } else {
+            this.$refs.supermap.isEditableLayers = false
+          }
+        } else if (click == 'layerSwitching') {
+          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showBanChild = false
+          this.$refs.bottomMenu.showChangChild = false
+          if (!this.$refs.bottomMenu.showChild) {
+            this.$refs.bottomMenu.showChild = true
+          } else {
+            this.$refs.bottomMenu.showChild = false
+          }
+        } else if (click == 'TVWall') {
+          this.$refs.TVWall.showTVWall();
+          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showChild = false
+          this.$refs.bottomMenu.showBanChild = false
+          this.$refs.bottomMenu.showChangChild = false
+        } else if (click == 'wrj') {
+          this.$refs.wrj.showWrj();
+          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showChild = false
+          this.$refs.bottomMenu.showBanChild = false
+          this.$refs.bottomMenu.showChangChild = false
+        } else if (click == 'forestban') {
+          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showChild = false
+          this.$refs.bottomMenu.showChangChild = false
+          if (!this.$refs.bottomMenu.showBanChild) {
+            this.$refs.bottomMenu.showBanChild = true
+          } else {
+            this.$refs.bottomMenu.showBanChild = false
+          }
+        } else if (click == 'forestchang') {
+          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showBanChild = false
+          this.$refs.bottomMenu.showChild = false
+          if (!this.$refs.bottomMenu.showChangChild) {
+            this.$refs.bottomMenu.showChangChild = true
+          } else {
+            this.$refs.bottomMenu.showChangChild = false
+          }
         }
-      }
 
-    },
-    //选择图层
-    choseLayerSwitching(url, isClear) {
-      this.$refs.supermap.layerSwitching(url, isClear)
-    },
-    //选择图层(传递数组)
-    choseLayerSwitchingList(urlList) {
-      this.$refs.supermap.layerSwitchingList(urlList)
-    },
-    //选择图层(传递数组)  带数据
-    choseLayerSwitchingList_Data(urlList) {
-      this.$refs.supermap.layerSwitchingList_Data(urlList)
-    },
-    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+      },
+      //选择图层
+      choseLayerSwitching(url, isClear) {
+        this.$refs.supermap.layerSwitching(url, isClear)
+      },
+      //选择图层(传递数组)
+      choseLayerSwitchingList(urlList) {
+        this.$refs.supermap.layerSwitchingList(urlList)
+      },
+      //选择图层(传递数组)  带数据
+      choseLayerSwitchingList_Data(urlList) {
+        this.$refs.supermap.layerSwitchingList_Data(urlList)
+      },
+      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+    }
   }
-}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-@import '@/assets/styles/base.scss';
-
-.paging {
-  padding: .5rem .3rem;
-  display: flex;
-  justify-content: center;
-  align-content: center;
+  @import '@/assets/styles/base.scss';
 
-  span {
-    color: #2bacf7;
+  .paging {
+    padding: .5rem .3rem;
     display: flex;
-    align-items: center;
-    padding: 0 1rem;
-  }
+    justify-content: center;
+    align-content: center;
 
-  button {
-    padding: 0 0.3rem;
-    height: 1.5rem;
-    background-color: #112543;
-    color: #2bacf7;
-    border: 1px solid #33467f;
-  }
+    span {
+      color: #2bacf7;
+      display: flex;
+      align-items: center;
+      padding: 0 1rem;
+    }
 
-  button:hover {
-    padding: 0 0.3rem;
-    height: 1.5rem;
-    background-color: #112543;
-    color: #0ff7c5;
-    border: 1px solid #1d657f;
+    button {
+      padding: 0 0.3rem;
+      height: 1.5rem;
+      background-color: #112543;
+      color: #2bacf7;
+      border: 1px solid #33467f;
+    }
+    button:hover {
+      padding: 0 0.3rem;
+      height: 1.5rem;
+      background-color: #112543;
+      color: #0ff7c5;
+      border: 1px solid #1d657f;
+    }
   }
-}
 </style>