Merge branch 'qzc-dev'

t # Please enter a commit message to explain why this merge is necessary,

src/config.js

@@ -9,6 +9,7 @@ const isShYjDebug = false;
 const config = {
   address,
   title: '麻城市智慧水利一张图',
+  title2: '麻城市防汛一张图',
   ADCD,
   ADCD6,
   ADCD12,

src/models/map/layout.js

@@ -232,7 +232,7 @@ export default function calcLayout(view, rightStack, hidePanels) {
     } else {
       if (view === 0) {
         right = [
-          { key: '警报' },
+          // { key: '警报' },
           { key: '防汛基本情况右侧', style: { height: '50rem',flexGrow: 1 } },
         ];
         rightFullHeight = true;

src/views/Home/InfoDlg/index.js

@@ -48,6 +48,7 @@ import ShuichangguanwangDlg from './ShuichangguanwangDlg';
 import FlowjcDlg from './FlowjcDlg'
 import EditFaDlg from './EditFaDlg'
 import AllSkDlg from './AllSkDlg'
+import SpjkDlg from './spjkDlg'
 function InfoDlg() {
   const infoDlg = useSelector(getInfoDlg);
   const dispatch = useDispatch();
@@ -155,6 +156,8 @@ function InfoDlg() {
     return <EditFaDlg record={properties} onClose={handleClose} />
   }else if (layerId === 'allSkFaLayer') {
     return <AllSkDlg record={properties} onClose={handleClose} />
+  }else if (layerId === 'spjkFaLayer') {
+    return <SpjkDlg record={properties} onClose={handleClose} />
   }
   
 

src/views/Home/InfoDlg/spjkDlg/index.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import DpTab from '../../../../layouts/mui/DpTab';
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
+import DpTabs from '../../../../layouts/mui/DpTabs';
+import DpAppBar from '../../../../layouts/mui/DpAppBar';
+import { useDispatch, useSelector } from 'react-redux';
+import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
+import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
+import SkPicReal from '../../../Mgr/xqjs/SkPicReal2';
+import { makeStyles } from '@material-ui/core/styles';
+
+
+const useStyles = makeStyles((theme) => ({
+  modal: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: "80%",
+    marginLeft: "10%",
+  },
+  paper: {
+    backgroundColor: theme.palette.background.paper,
+    border: '1px solid rgba(41, 182, 246, 0.4)',
+    boxShadow: theme.shadows[5],
+    padding: theme.spacing(2, 4, 3),
+    width: "100%",
+  },
+}));
+
+
+function HDStDlg({ record, onClose }) {
+  const [value, setValue] = React.useState(0);
+  const classes = useStyles();
+
+  const dispatch = useDispatch();
+
+ 
+  return (
+    <Dialog
+      open={true}
+      onClose={onClose}
+      maxWidth="xl"
+      style={{ borderRadius: 0 }}
+      PaperComponent={DpPaperComponent}
+      BackdropComponent={DpBackgroundDrop}
+    >
+      <div className="boxhead"></div>
+      <DialogContent style={{ padding: 0, width: '85rem', overflowX: 'hidden' }}>
+        <DpAppBar position="sticky">
+          <DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
+            <DpTab label="视频监控" />
+          </DpTabs>
+          <DpCloseButton onClick={onClose} />
+        </DpAppBar>
+        <div className={classes.paper}>
+          <SkPicReal />
+        </div>
+      </DialogContent>
+      <div className="boxfoot"></div>
+    </Dialog>
+  )
+}
+
+export default React.memo(HDStDlg);

src/views/Home/MapCtrl/index.js

@@ -158,6 +158,20 @@ export default function MapCtrl({ initParams, onLoad }) {
           }
           // dispatch.runtime.setFeaturePop({ type: 'RealSkPop', properties: record, coordinates: [record.lgtd, record.lttd] });
         }
+
+        if (feature.layer.id === '流域站点_drp') {
+          const record = feature.properties
+          dispatch.runtime.setFeaturePop({ type: 'RealDrpPop', properties: record, coordinates: [record.lgtd, record.lttd] });
+        }
+        if (feature.layer.id === '流域站点_hd') {
+          const record = feature.properties
+          dispatch.runtime.setFeaturePop({ type: 'RealHDPop', properties: record, coordinates: [record.lgtd, record.lttd] });
+        }
+        if (feature.layer.id === '流域站点_sk') {
+          const record = feature.properties
+          dispatch.runtime.setFeaturePop({ type: 'RealSkPop', properties: record, coordinates: [record.lgtd, record.lttd] });
+        }
+        
       }
     });
 

src/views/Home/components/ActionDock/index.js

@@ -32,16 +32,16 @@ const VIEWS = [
     ]
   },
   // { id: 200, title: '水库', img: process.env.PUBLIC_URL+'/assets/menu/水库专题.png'},
-  {
+  // {
-    id: 300, title: '水厂', img: process.env.PUBLIC_URL + '/assets/menu/水利设施.png', children: [
+  //   id: 300, title: '水厂', img: process.env.PUBLIC_URL + '/assets/menu/水利设施.png', children: [
-      { id: 301, title: '供水态势', img: process.env.PUBLIC_URL + '/assets/menu/降雨中心.png' },
+  //     { id: 301, title: '供水态势', img: process.env.PUBLIC_URL + '/assets/menu/降雨中心.png' },
-      { id: 302, title: '水质安全', img: process.env.PUBLIC_URL + '/assets/menu/水情监测.png' },
+  //     { id: 302, title: '水质安全', img: process.env.PUBLIC_URL + '/assets/menu/水情监测.png' },
-      { id: 303, title: '水厂运行', img: process.env.PUBLIC_URL + '/assets/menu/水库管理.png' },
+  //     { id: 303, title: '水厂运行', img: process.env.PUBLIC_URL + '/assets/menu/水库管理.png' },
-      { id: 306, title: '管网健康诊断', img: process.env.PUBLIC_URL + '/assets/menu/水利设施.png' },
+  //     { id: 306, title: '管网健康诊断', img: process.env.PUBLIC_URL + '/assets/menu/水利设施.png' },
-      { id: 307, title: '应急指挥调度', img: process.env.PUBLIC_URL + '/assets/menu/病险水库.png' },
+  //     { id: 307, title: '应急指挥调度', img: process.env.PUBLIC_URL + '/assets/menu/病险水库.png' },
-      // { id: 305, title: '决策支持与报表', img: process.env.PUBLIC_URL+'/assets/menu/辅助决策.png' },
+  //     // { id: 305, title: '决策支持与报表', img: process.env.PUBLIC_URL+'/assets/menu/辅助决策.png' },
-    ]
+  //   ]
-  },
+  // },
   {
     id: 400, title: '灌区', img: process.env.PUBLIC_URL + '/assets/menu/预警分析.png', children: [
       { id: 501, title: '灌区监测', img: process.env.PUBLIC_URL + '/assets/menu/防洪形势.png' },
@@ -125,6 +125,10 @@ export default function ActionDock({ }) {
           <BootstrapTooltip key={o.id} title={<Typography variant="h6"><span style={{ color: '#fff' }}>{o.title}</span></Typography>}>
             <div className="dock-item" onClick={() => {
               if (o.children) {
+                if(o.id===400){
+                  window.open("https://axhub.im/ax9/eec435b86544bac8/#id=arlcql&p=%E7%81%8C%E5%8C%BA%E6%80%BB%E8%A7%88&sc=1&c=1")
+                  return
+                }
                 //一级菜单
                 dispatch.map.setView(o.children[0].id)
                 setViewKey(o.id)

src/views/Home/components/Title/index.js

@@ -77,6 +77,14 @@ export default function Title() {
     dispatch.runtime.setHome();
   }
 
+  const getTitle = (view)=>{
+    if(view===1||view===3||view===4||view===5||view===6||view===8){
+      return `${ config.title2 }`
+    }else{
+      return `${ config.title }`
+    }
+  }
+
   return (
     <div className="dp-title">
       <div className="action">
@@ -97,7 +105,7 @@ export default function Title() {
           </IconButton>
         </div>
       </div>
-      <div className="title">{`${config.title}`}</div>
+      <div className="title">{getTitle(view)}</div>
       <div className="action">
         <div className="menu-bar">
           <Link style={{ color: '#00deff' }} to={mgrHomePage()}>管理平台</Link>

src/views/Home/index.js

@@ -25,6 +25,7 @@ export default function Demo1() {
   const showGw = useSelector(s => s.runtime.showGw)
   const yuananType = useSelector(s => s.runtime.yuananType);
   const xiayou = useSelector(s => s.runtime.xiayouxh);
+  const jbqkKey = useSelector(s=>s.runtime.jbqkKey)
   console.log('wg', wg);
 
 
@@ -98,6 +99,9 @@ export default function Demo1() {
           <TransitionGroup className={clsx('right', 'dp-panel-container', layout.rightFullHeight && 'fullheight')}>
             {
               layout.right.map(({ key, ...params }) => {
+                if(key==='防汛基本情况右侧'&&jbqkKey===''){
+                  return
+                }
                 if (key != '网格' && key != '单个预案') {
                   return (
                     <CSSTransition key={key} unmountOnExit exit={false} timeout={500} classNames="dp-panelgroup">

src/views/Home/panels/DrpReal/index.js

@@ -1,7 +1,8 @@
 import React, { useMemo, useState } from 'react';
 import useRequest from '../../../../utils/useRequest';
 import PanelBox from '../../components/PanelBox';
-
+import HighlightOff from '@material-ui/icons/HighlightOff';
+import SkPicReal from '../../../Mgr/xqjs/SkPicReal2';
 import Table from '@material-ui/core/Table';
 import TableContainer from '@material-ui/core/TableContainer';
 import TableBody from '@material-ui/core/TableBody';
@@ -19,11 +20,37 @@ import Setting from './Setting';
 import { InfoPopNames } from '../../InfoPops';
 import config from '../../../../config';
 
+
+import Modal from '@material-ui/core/Modal';
+import { makeStyles } from '@material-ui/core/styles';
+import Backdrop from '@material-ui/core/Backdrop';
+import Fade from '@material-ui/core/Fade';
+
+const useStyles = makeStyles((theme) => ({
+  modal: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: "80%",
+    marginLeft: "10%",
+  },
+  paper: {
+    backgroundColor: theme.palette.background.paper,
+    border: '1px solid rgba(41, 182, 246, 0.4)',
+    boxShadow: theme.shadows[5],
+    padding: theme.spacing(2, 4, 3),
+    width: "100%",
+  },
+}));
+
+
 function DrpReal({ style }) {
   const dispatch = useDispatch();
   const tableDrpFilter = useSelector(s => s.realview.tableDrpFilter);
   const tableDrpSorter = useSelector(s => s.realview.tableDrpSorter);
   const drpAutoRefresh = useSelector(s => s.realview.drpAutoRefresh);
+  const [open, setOpen] = React.useState(false);
+  const classes = useStyles();
   const t = useRefresh(drpAutoRefresh ? 20 * 1000 : 0);
   const { data } = useRequest(DrpRealPromise.get, t);
   const [setting, showSetting] = useState(false);
@@ -57,6 +84,13 @@ function DrpReal({ style }) {
       });
     }
   }
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
 
   const toggleStType = (type) => {
     const visible = !tableDrpFilter[type];
@@ -90,8 +124,11 @@ function DrpReal({ style }) {
       }
       extra={
         <>
-          <i style={{ marginRight: '0.5rem', color: drpAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
+          <i style={{ marginRight: '0.5rem' }} className="ionicons image cursor-pointer" onClick={()=>{
-          <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i>
+            dispatch?.runtime.setInfoDlg({ layerId: 'spjkFaLayer', properties: {} })
+          }}></i> 
+          {/* <i style={{ marginRight: '0.5rem', color: drpAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
+          {/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
         </>
       }
     >
@@ -132,6 +169,27 @@ function DrpReal({ style }) {
       {
         setting && <Setting onClose={() => showSetting(false)} />
       }
+
+      {/*水库图片弹窗*/}
+      <Modal
+        aria-labelledby="transition-modal-title"
+        aria-describedby="transition-modal-description"
+        className={classes.modal}
+        open={open}
+        onClose={handleClose}
+        closeAfterTransition
+        BackdropComponent={Backdrop}
+        BackdropProps={{
+          timeout: 500,
+        }}
+      >
+        <Fade in={open}>
+          <div className={classes.paper}>
+            <HighlightOff style={{ color: "#fff", position: "absolute", right: "1rem", fontSize: "2rem", cursor: "pointer" }} onClick={handleClose} />
+            <SkPicReal />
+          </div>
+        </Fade>
+      </Modal>
     </PanelBox>
   )
 }

src/views/Home/panels/JbqkLeft/index.js

@@ -43,14 +43,15 @@ function DrpReal({ style }) {
   useEffect(()=>{
     getSkData()
 
-    // return ()=>{
+    return ()=>{
-    //   const map = window.__mapref;
+      dispatch.runtime.setJbqkKey('')
-    //   const layer = map.getLayer('临时水库tz')
+      // const map = window.__mapref;
-    //   if(layer){
+      // const layer = map.getLayer('临时水库tz')
-    //       map.removeLayer('临时水库tz');
+      // if(layer){
-    //       map.removeSource('临时水库tz');
+      //     map.removeLayer('临时水库tz');
-    //   }
+      //     map.removeSource('临时水库tz');
-    // }
+      // }
+    }
   },[])
 
   const getSkData = async()=>{
@@ -138,7 +139,7 @@ function DrpReal({ style }) {
 
       <CollapsePage type={'2'} name={'河流水系'} skType={skType} setSkType={setSkType} icon={'河流水系.png'}/>
       <Collapse in={skType==='2'}  timeout="auto" unmountOnExit>
-        <div style={{display:'flex',justifyContent:'flex-start',alignItems:'center' , color:jbqkKey==='2'?'rgb(80, 177, 249)':'#ffffff',fontSize:'1rem',lineHeight:'1rem',padding:'0.8rem 2rem',background:'rgba(255, 255, 255, 0.08)',cursor:'pointer'}} onClick={()=>dispatch.runtime.setJbqkKey('2')}>
+        {/* <div style={{display:'flex',justifyContent:'flex-start',alignItems:'center' , color:jbqkKey==='2'?'rgb(80, 177, 249)':'#ffffff',fontSize:'1rem',lineHeight:'1rem',padding:'0.8rem 2rem',background:'rgba(255, 255, 255, 0.08)',cursor:'pointer'}} onClick={()=>dispatch.runtime.setJbqkKey('2')}>
           <img src={`${process.env.PUBLIC_URL}/assets/icon/河流水系.png`} width={15} height={15} alt="" style={{marginRight:'0.5rem'}}/>
           {'>500平方公里'}
         </div>
@@ -149,6 +150,11 @@ function DrpReal({ style }) {
         <div style={{display:'flex',justifyContent:'flex-start',alignItems:'center' , color:jbqkKey==='4'?'rgb(80, 177, 249)':'#ffffff',fontSize:'1rem',lineHeight:'1rem',padding:'0.8rem 2rem',background:'rgba(255, 255, 255, 0.08)',cursor:'pointer'}} onClick={()=>{}}>
           <img src={`${process.env.PUBLIC_URL}/assets/icon/河流水系.png`} width={15} height={15} alt="" style={{marginRight:'0.5rem'}}/>
           {'<50平方公里'}
+        </div>  */}
+        <div style={{width:'100%',display:'flex',fontSize:'0.9rem', color:'#ffffff',padding:'0.5rem 0.5rem 0.5rem 2rem',borderRadius:'5px',background:'#132a4b',alignItems:'center',marginBottom:'2px',cursor:'pointer'}} onClick={()=>dispatch.runtime.setJbqkKey('2')}>
+            <img src={`${process.env.PUBLIC_URL}/assets/icon/河流水系.png`} width={15} height={15} alt=""/>
+            <div style={{flex:1,paddingLeft:'0.8rem',marginBottom:'-0.1rem'}}>浮桥河</div>
+            <div style={{marginBottom:'-0.1rem'}}>{518}平方千米</div>
         </div>
       </Collapse>
 

src/views/Mgr/xqjs/SkPicReal2/index.less

@@ -0,0 +1,14 @@
+.myCached{
+  color: #fff;
+  border: 1px solid #fff;
+  border-radius: 8px;
+  padding: 2px 5px;
+  margin: 15px 0 0 20px;
+  cursor: pointer;
+  &:hover{
+    color:#00deff;
+    border-color:#00deff;
+  }
+}
+
+

src/views/Mgr/xqjs/SkPicReal2/picList.js

@@ -0,0 +1,172 @@
+import React, { useMemo,useState } from 'react'
+import moment from 'moment';
+import { renderDrp,renderSkArz } from '../../../../utils/renutils';
+import { KrM100Render } from '../../../../utils/tools';
+import { Card,CardActionArea,CardContent,CardMedia,Typography,Grid,Modal } from '@material-ui/core/index';
+import HighlightOff from '@material-ui/icons/HighlightOff';
+import '../SkPicReal/picList.less';
+import DefalutImg from '../../../../assets/defalut.png';
+import Backdrop from "@material-ui/core/Backdrop/Backdrop";
+import MgrCardContent from '../../../../layouts/mgrmui/MgrCardContent'
+import Fade from "@material-ui/core/Fade/Fade";
+import {makeStyles} from "@material-ui/core/styles";
+
+
+const useStyles = makeStyles((theme) => ({
+    modal: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width:"60%",
+        marginLeft:"20%",
+    },
+    paper: {
+        backgroundColor: theme.palette.background.paper,
+        border: '1px solid rgba(41, 182, 246, 0.4)',
+        boxShadow: theme.shadows[5],
+        padding: theme.spacing(2, 4, 3),
+        width:"100%",
+    },
+    txt: {
+        color:theme.palette.type === "dark"?"#fff":"#333"
+    }
+}));
+
+function PicList({itemData}) {
+    const classes = useStyles();
+
+    const info = useMemo(() => {
+        const pic = itemData.pic || [];
+        pic[0] = pic[0] || {};
+        pic[1] = pic[1] || {};
+        return {
+            pic1: pic[0].url?pic[0].url:DefalutImg,
+            pic2: pic[1].url?pic[1].url:DefalutImg,
+            pic1Tm: pic[0].tm ? moment(pic[0].tm).format('MM-DD HH:mm') : '-',
+            pic2Tm: pic[1].tm ? moment(pic[1].tm).format('MM-DD HH:mm') : '-',
+        }
+    }, [itemData]);
+
+    const [flipPic, setFlipPic] = useState(false);
+
+    const changePic = () => {
+        setFlipPic(!flipPic);
+    }
+
+    const [open, setOpen] = React.useState(false);
+
+    const handleOpen = () => {
+        setOpen(true);
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    const { pic1, pic2, pic1Tm, pic2Tm } = info;
+
+    return (
+        <div className="lf cardItem">
+            <Card>
+                <CardActionArea>
+                    <div style={{position:"relative",overflow:"hidden"}}>
+                        <CardMedia
+                            className="media"
+                            image={flipPic ? pic1 : pic2}
+                            title={itemData.stnm}
+                            onClick={handleOpen}
+                        />
+                        {
+                            itemData.pic?<div style={{ position: 'absolute', left: '0px', bottom: '-7px', right: '70%', borderTop: '4px solid white', borderRight: '4px solid white' }}>
+                                <img onClick={e => changePic(e)} alt={itemData.stcd} src={flipPic ? pic2 : pic1} style={{ width: '100%', cursor: 'pointer' }} />
+                            </div>:""
+                        }
+                    </div>
+                    <MgrCardContent>
+                        <Typography gutterBottom variant="h5" component="h2" className="clearFloat">
+                            <span className="lf">{itemData.stnm}</span>
+                            <span className="rf">{flipPic ? pic1Tm : pic2Tm}</span>
+                        </Typography>
+                        <div style={{color:"#999",fontSize:"0.8rem"}}>
+                            <Grid container spacing={3}>
+                                <Grid item xs={4}>
+                                    <strong>实时水位</strong>
+                                </Grid>
+                                <Grid item xs={2} style={{ textAlign: 'right' }}>
+                                    {itemData.rz}
+                                </Grid>
+                                <Grid item xs={4}>
+                                    <strong>01小时雨量</strong>
+                                </Grid>
+                                <Grid item xs={2} style={{ textAlign: 'right' }}>
+                                    {renderDrp(itemData, 'h1')}
+                                </Grid>
+
+                                <Grid item xs={4}>
+                                    <strong>汛限水位</strong>
+                                </Grid>
+                                <Grid item xs={2} style={{ textAlign: 'right' }}>
+                                    {itemData.fsltdz}
+                                </Grid>
+                                <Grid item xs={4}>
+                                    <strong>03小时雨量</strong>
+                                </Grid>
+                                <Grid item xs={2} style={{ textAlign: 'right' }}>
+                                    {renderDrp(itemData, 'h3')}
+                                </Grid>
+
+                                <Grid item xs={4}>
+                                    <strong>超汛限</strong>
+                                </Grid>
+                                <Grid item xs={2} style={{ textAlign: 'right' }}>
+                                    {renderSkArz(itemData)}
+                                </Grid>
+                                <Grid item xs={4}>
+                                    <strong>06小时雨量</strong>
+                                </Grid>
+                                <Grid item xs={2} style={{ textAlign: 'right' }}>
+                                    {renderDrp(itemData, 'h6')}
+                                </Grid>
+
+                                <Grid item xs={4}>
+                                    <strong>实时库容</strong>
+                                </Grid>
+                                <Grid item xs={2} style={{ textAlign: 'right' }}>
+                                    {KrM100Render(itemData)}
+                                </Grid>
+                                <Grid item xs={4}>
+                                    <strong>24小时雨量</strong>
+                                </Grid>
+                                <Grid item xs={2} style={{ textAlign: 'right' }}>
+                                    {renderDrp(itemData, 'h24')}
+                                </Grid>
+                            </Grid>
+                        </div>
+                    </MgrCardContent>
+                </CardActionArea>
+            </Card>
+
+            {/*水库图片弹窗*/}
+            <Modal
+                aria-labelledby="transition-modal-title"
+                aria-describedby="transition-modal-description"
+                className={classes.modal}
+                open={open}
+                onClose={handleClose}
+                closeAfterTransition
+                BackdropComponent={Backdrop}
+                BackdropProps={{
+                    timeout: 500,
+                }}
+            >
+                <Fade in={open}>
+                    <div className={classes.paper}>
+                        <HighlightOff style={{position:"absolute",right: "1rem",fontSize:"2rem",cursor:"pointer" }} className={classes.txt} onClick={handleClose}/>
+                        <img src={flipPic ? pic1 : pic2} alt="" style={{width:"80%",marginLeft:"10%"}}/>
+                    </div>
+                </Fade>
+            </Modal>
+        </div>
+    );
+}
+export default PicList

src/views/Mgr/xqjs/SkPicReal2/picList.less

@@ -0,0 +1,34 @@
+.cardList{
+  width:100%;
+  .cardItem{
+    width: calc( (100% - 3rem)/4 );
+    margin:0 1rem 1rem 0;
+    &:nth-child(4n){
+      margin-right:0;
+    }
+    .MuiGrid-item {
+      padding: 2px 12px;
+    }
+    .MuiCard-root{
+      box-shadow: none;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+    }
+  }
+  .media {
+    height:270px
+  }
+}
+
+.myCached{
+  color: #fff;
+  border: 1px solid #fff;
+  border-radius: 8px;
+  padding: 2px 5px;
+  margin: 15px 0 0 20px;
+  cursor: pointer;
+  &:hover{
+    color:#00deff;
+    border-color:#00deff;
+  }
+}