lcw

src/App.vue

@@ -3,10 +3,12 @@
     <keep-alive :include="store.getters.keepLiiveRoute">
       <Watermark :text="content" :color="'rgba(0, 0, 0, .15)'">
         <Component :is="Component"></Component>
+
       </Watermark>
     </keep-alive>
   </router-view>
-<Fzq />
+  <Fzq />
+
 </template>
 <script setup>
 import Watermark from "@/components/Watermark.vue";
@@ -128,12 +130,14 @@ v-deep .el-loading-mask {
   font-weight: normal;
   font-style: normal;
 }
+
 @font-face {
   font-family: "仿宋_GB2312";
   src: url("~@/assets/font/仿宋_GB2312.ttf");
   font-weight: normal;
   font-style: normal;
 }
+
 .bk_drawer_box {
   .el-drawer__header {
     background: #fff !important;
@@ -154,14 +158,16 @@ v-deep .el-loading-mask {
   left: -10px;
   transform: translateY(-50%) translateX(-50%);
 }
-.popupCustomBox{
+
+.popupCustomBox {
   width: 130px;
   position: relative;
   background: rgba(2, 55, 114, 0.99);
   color: #fff;
   border-radius: 4px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-  .popupCustomTitle_title{
+
+  .popupCustomTitle_title {
     padding: 4px;
     box-sizing: border-box;
     font-size: 12px;
@@ -174,7 +180,8 @@ v-deep .el-loading-mask {
     align-items: center;
     flex-wrap: nowrap;
   }
-  &::after{
+
+  &::after {
     content: '';
     position: absolute;
     bottom: -10px;
@@ -186,18 +193,65 @@ v-deep .el-loading-mask {
     border-right: 10px solid transparent;
     border-top: 10px solid rgba(2, 55, 114, 0.99);
   }
-  .popupCustomTitle_li{
+
+  .popupCustomTitle_li {
     font-size: 12px;
     line-height: 22px;
     text-transform: none;
     margin-bottom: 0;
     display: flex;
     justify-content: space-between;
-    span{
+
+    span {
       display: inline-block;
       width: 60px;
       text-align: center;
     }
   }
 }
+
+.blink-animation {
+  width: 10px !important;
+  height: 10px !important;
+  min-width: 10px;
+  min-height: 10px;
+  max-width: 10px;
+  max-height: 10px;
+  display: inline-block;
+  border-radius: 50%;
+  background: radial-gradient(circle, #ff4d4f 0%, #ff1f1f 60%, #b30000 100%);
+  transform: scaleY(0.58);
+  transform-origin: center center;
+  animation: alarmFlash 1.1s ease-in-out infinite, quakeRings 1.9s linear infinite;
+}
+
+@keyframes alarmFlash {
+
+  0%,
+  100% {
+    opacity: 0.95;
+    background: radial-gradient(circle, #ff6666 0%, #ff1f1f 62%, #b30000 100%);
+  }
+
+  50% {
+    opacity: 0.72;
+    background: radial-gradient(circle, #ff5252 0%, #e81919 62%, #990000 100%);
+  }
+}
+
+@keyframes quakeRings {
+  0% {
+    box-shadow:
+      0 0 0 0 rgba(255, 31, 31, 0.6),
+      0 0 0 0 rgba(255, 31, 31, 0.42),
+      0 0 0 0 rgba(255, 31, 31, 0.25);
+  }
+
+  100% {
+    box-shadow:
+      0 0 0 16px rgba(255, 31, 31, 0),
+      0 0 0 34px rgba(255, 31, 31, 0),
+      0 0 0 52px rgba(255, 31, 31, 0);
+  }
+}
 </style>