fix

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@element-plus/icons": "^0.0.11",
+    "animate.css": "^4.1.1",
     "axios": "^0.24.0",
     "clsx": "^1.1.1",
     "core-js": "^3.6.5",

src/components/MapView/index.tsx

@@ -9,6 +9,18 @@ import icon_sys_sjyxjc from '@/assets/icons/syslink/sjyxjc.png';
 /** @ts-ignore */
 import icon_sys_jtyjzh from '@/assets/icons/syslink/jtyjzh.png';
 
+/** @ts-ignore */
+import icon_sys_dlyxjc from '@/assets/icons/syslink/dlyxjc.png';
+
+/** @ts-ignore */
+import icon_sys_ghyxjc from '@/assets/icons/syslink/ghyxjc.png';
+
+/** @ts-ignore */
+import icon_sys_up from '@/assets/icons/syslink/up.png';
+
+/** @ts-ignore */
+import icon_sys_down from '@/assets/icons/syslink/down.png';
+
 
 let ispro = process.env.NODE_ENV === 'production';
 export default defineComponent({
@@ -18,6 +30,8 @@ export default defineComponent({
   setup(props, ctx) {
     const mapRef = ref<Element>();
 
+    const isopen = ref(true);
+
     let tipcontentRef = ref<Element>();
 
     const linksysdata = reactive([
@@ -41,8 +55,32 @@ export default defineComponent({
         image: icon_sys_jtyjzh,
         url: 'http://sqpchd.xt.wenhq.top:8083/#/home',
       },
+      {
+        name: '道路运行监测',
+        image: icon_sys_dlyxjc,
+        url: 'http://sqpchd.xt.wenhq.top:8083/#/home',
+      },
+      {
+        name: '港行运行监测',
+        image: icon_sys_ghyxjc,
+        url: 'http://sqpchd.xt.wenhq.top:8083/#/home',
+      },
     ]);
 
+    const openclose = () => { 
+      isopen.value = !isopen.value;
+
+    }
+
+    const classindex=ref("")
+    const enter = (index) => {
+      console.log(index)
+      classindex.value = index;
+    };
+    const leave = (index) => {
+      console.log(index);
+      classindex.value = '';
+    };
 
     onMounted(() => {
       const map = new window.minemap.Map({
@@ -63,23 +101,52 @@ export default defineComponent({
     return () => (
       <>
         <div id="map" style={{ height: '100%' }} ref={mapRef} />{' '}
-        <div class="othersystem">
-          
-            {linksysdata.map((i, index) => (
-              <div class="sys-item" datatype={`${index+1 == linksysdata.length?"1":'0'}`}>
-                <a href={i.url}>
-                  <div class="sys-item-img">
-                    <img src={i.image} />
-                  </div>
-                  <div class="sys-item-title">{i.name}</div>
-                </a>
-              </div>
-            ))}
-          </div>{' '}
-          <div class="maptip" ref={tipcontentRef}>
-            {' '}
-          </div>
-        
+        <div
+          class={
+            'othersystem ' +
+            (isopen.value
+              ? 'animate__animated animate__fadeInUp'
+              : 'animate__animated animate__fadeOutDown')
+          }>
+          {linksysdata.map((i, index) => (
+            <div
+              onMouseenter={(w) => {
+                enter(index);
+              }}
+              onMouseleave={(w) => {
+                leave(index);
+              }}
+              class={
+                'sys-item ' +
+                (index.toString() == classindex.value
+                  ? 'animate__animated animate__shakeY'
+                  : '')
+              }
+              datatype={`${index + 1 == linksysdata.length ? '1' : '0'}`}>
+              <a href={i.url}>
+                <div class="sys-item-img">
+                  <img src={i.image} />
+                </div>
+                <div class="sys-item-title">{i.name}</div>
+              </a>
+            </div>
+          ))}
+        </div>
+        <div class="openclose " onClick={openclose}>
+          <img
+            style={!isopen.value ? 'display:block' : 'display:none'}
+            class="animate__animated animate__fadeInUp"
+            src={icon_sys_up}
+          />
+          <img
+            style={!isopen.value ? 'display:none' : 'display:block'}
+            class="animate__animated animate__fadeInDown"
+            src={icon_sys_down}
+          />
+        </div>
+        <div class="maptip" ref={tipcontentRef}>
+          {' '}
+        </div>
       </>
     );
   },

src/components/MarkerMap/index.scss

@@ -45,7 +45,7 @@
         color: white;
         width: 100%;
         left: 0;
-        font-size: px2rem(20px * 2);
+        font-size: px2rem(18px * 2);
         text-align: center;
         >div {
             max-width: 3rem;
@@ -67,11 +67,33 @@
             }
         }
     }
+    .openclose {
+        position: absolute;
+        bottom: 0.5%;
+        text-align: center;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        // animation: myanimation 1s infinite;
+        // @keyframes myanimation {
+        //     from {
+        //         bottom: 0.8%;
+        //     }
+        //     to {
+        //         bottom: 1.3%;
+        //     }
+        // }
+        img {
+            width: px2rem(48px * 2);
+            height: px2rem(48px * 2);
+            margin: auto;
+            animation-iteration-count: infinite;
+        }
+    }
     .othersystem {
         position: absolute;
-        bottom: 4%;
-        left: 35%;
-        width: 30%;
+        bottom: 6%;
+        left: 27.5%;
+        width: 45%;
         height: 15%;
         text-align: center;
         flex-direction: row;
@@ -95,14 +117,42 @@
         a:hover {
             cursor: pointer;
         }
+        @keyframes shakeY {
+            from,
+            to {
+                transform: translate3d(0, 0, 0);
+            }
+            20%,
+            60% {
+                transform: translate3d(0, -10px, 0);
+            }
+            40%,
+            80% {
+                transform: translate3d(0, 10px, 0);
+            }
+        }
+        .shakeY {
+            animation-name: shakeY;
+        }
+        .sys-item:hover:after {
+            content: '';
+            background: rgba(255, 255, 255, 0.1);
+            width: px2rem(90px * 4);
+            height: px2rem(69px * 4);
+            position: absolute;
+            z-index: -1;
+            border-radius: px2rem(40px * 4);
+            ;
+        }
         .sys-item {
+            animation-duration: 1.5s;
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
             // margin-right: px2rem(20px * 2);
             color: white;
-            font-size: px2rem(20px * 2);
+            font-size: px2rem(18px * 2);
             font-weight: bold;
             .sys-item-img>img {
                 width: px2rem(75px * 2);
@@ -131,7 +181,7 @@
                 box-sizing: border-box;
                 // background: #003a8c;
                 // border-radius: 1px;
-                font-size: px2rem(20px * 2);
+                font-size: px2rem(18px * 2);
                 color: #00e9ff;
             }
             .action {
@@ -249,7 +299,7 @@
             padding-bottom: px2rem(40px);
             &>span {
                 font-size: 14px;
-                font-size: px2rem(16px * 2);
+                font-size: px2rem(15px * 2);
                 font-weight: 400;
             }
             .tipicon {

src/main.ts

@@ -3,14 +3,17 @@ import ElementPlus from 'element-plus';
 import { createPinia } from 'pinia';
 import App from './App';
 import router from './router';
+import animated from 'animate.css';
 
 // import 'nprogress/nprogress.css';
 import './styles/element/index.scss';
 import './styles/global.scss';
 import '@/utils/flexible';
 
+
 createApp(App)
   .use(createPinia())
   .use(ElementPlus)
+  .use(animated)
   .use(router)
   .mount('#app');

src/views/IncidentDetail/index.scss

@@ -117,9 +117,9 @@
                     max-height: px2rem(56px * 2);
                     line-height: px2rem(56px * 2);
                     text-align: center;
-                    font-size: px2rem(22px * 2);
+                    font-size: px2rem(19px * 2);
                     font-weight: 700;
-                    color: #0ed0ff;
+                    color: #FFFD4A;
                 }
                 .info-container {
                     padding-top: px2rem(30px * 2);
@@ -137,7 +137,7 @@
                     }
                     line-height: px2rem(50px * 2);
                     height: px2rem(50px * 2);
-                    font-size: px2rem(18px * 2);
+                    font-size: px2rem(16px * 2);
                     flex: 1;
                     width: 100%;
                     .info-item-lebel {
@@ -205,7 +205,7 @@
                         align-items: center;
                         justify-content: center;
                         .title {
-                            font-size: px2rem(17px * 2);
+                            font-size: px2rem(15px * 2);
                             color: #feb459;
                             padding-bottom: px2rem(13px * 2);
                         }
@@ -328,7 +328,7 @@
                         background-repeat: no-repeat;
                         text-align: center;
                         line-height: px2rem(50px * 2);
-                        font-size: px2rem(16px * 2);
+                        font-size: px2rem(14px * 2);
                         &[datatype='0'] {
                             margin-bottom: px2rem(10px * 2);
                         }
@@ -403,7 +403,7 @@
                         }
                     }
                     .plan-content {
-                        font-size: px2rem(18px * 2);
+                        font-size: px2rem(17px * 2);
                         font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                         font-weight: 400;
                         text-align: left;
@@ -420,16 +420,16 @@
                         }
                         .plan-c {
                             margin-left: px2rem(49px * 2);
-                            margin-top: px2rem(17px * 2);
+                            margin-top: px2rem(0px * 2);
                             opacity: 0.66;
-                            font-size: px2rem(16px * 2);
+                            font-size: px2rem(14px * 2);
                             font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                             font-weight: 400;
                             text-align: left;
                             color: #ffffff;
                             .plan-comm,
                             .plan-cmd {
-                                margin-top: px2rem(10px * 2);
+                                margin-top: px2rem(5px * 2);
                                 .pc {
                                     max-width: 80%;
                                 }
@@ -685,7 +685,7 @@
                             padding-bottom: px2rem(28px * 2);
                             z-index: 1;
                             position: relative;
-                            font-size: px2rem(18px * 2);
+                            font-size: px2rem(17px * 2);
                             font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                             font-weight: 400;
                             .pdesc {
@@ -697,7 +697,7 @@
                             }
                             .exdesc {
                                 opacity: 0.6;
-                                font-size: px2rem(16px * 2);
+                                font-size: px2rem(15px * 2);
                                 font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                                 font-weight: 400;
                             }
@@ -709,7 +709,7 @@
                                 background-size: 100% 100%;
                                 line-height: px2rem(48px * 2);
                                 text-align: right;
-                                font-size: px2rem(24px * 2);
+                                font-size: px2rem(21px * 2);
                                 font-weight: 500;
                                 span {
                                     padding-right: px2rem(40px * 2);
@@ -769,7 +769,7 @@
                 }
             }
             &-bg-emergency-plan {
-                font-size: px2rem(18px * 2);
+                font-size: px2rem(16px * 2);
                 font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                 font-weight: 400;
                 text-align: left;
@@ -800,6 +800,8 @@
                     text-align: center;
                     margin-top: px2rem(-35px * 2);
                     right: px2rem(5px * 2);
+                    font-size: px2rem(20px * 2);
+                    ;
                 }
                 .dl {
                     display: inline-block;

yarn.lock

@@ -648,6 +648,11 @@ ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+animate.css@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmmirror.com/animate.css/download/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
+  integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
+
 ansi-escapes@^4.2.1:
   version "4.3.2"
   resolved "https://registry.npm.taobao.org/ansi-escapes/download/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"