gx

src/view/education.vue

@@ -11,7 +11,11 @@
         <eP1 :list="data.xsql"></eP1>
         <div class="t_1"></div>
         <div class="t_2">
-          <div class="t_2_1" v-for="(item, index) in data.zdgz" :key="index">
+          <div
+            class="t_2_1"
+            v-for="(item, index) in data.zdgz"
+            :key="index"
+          >
             <div class="top">{{ item.value }}</div>
             <div class="t_3">
               <div :class="item.cls"></div>
@@ -20,7 +24,10 @@
           </div>
         </div>
       </div>
-      <div class="flex1" style="margin-top: 30px">
+      <div
+        class="flex1"
+        style="margin-top: 30px"
+      >
         <div class="yd_title left_2">
           <div class="animate-border">
             <i></i>
@@ -90,6 +97,16 @@
             </div>
           </div>
           <div class="schoolb">
+            <img
+              src="../assets/eduImg/xxgkTop.png"
+              class="gkTop"
+              alt=""
+            >
+            <img
+              src="../assets/eduImg/xxgk.gif"
+              class="gkMove"
+              alt=""
+            >
             <div class="grade">
               <div class="schoolbs">
                 <span class="spot">初中</span>
@@ -127,7 +144,10 @@
         <div style="width: 100%; display: flex; flex-wrap: wrap">
           <edie :list="data.xzncxxsl"></edie>
           <div class="rating">
-            <edXX :list="data.schoolData" :active="selectData.active"></edXX>
+            <edXX
+              :list="data.schoolData"
+              :active="selectData.active"
+            ></edXX>
             <div class="ratingBtn">
               <!-- <div class="onImg" :class="{ ratingImg: selectData.active === '城市' }">
                 <span @click="ratingBtn('城市')">城市</span>
@@ -202,7 +222,10 @@
             <div>
               <span class="green">16</span>
             </div>
-            <img src="@/assets/eduImg/jyImg10.png" alt="" />
+            <img
+              src="@/assets/eduImg/jyImg10.png"
+              alt=""
+            />
             <div class="historyimg historyimg1">
               <span>绿色预警</span>
             </div>
@@ -211,7 +234,10 @@
             <div>
               <span class="yellow">239</span>
             </div>
-            <img src="@/assets/eduImg/jyImg9.png" alt="" />
+            <img
+              src="@/assets/eduImg/jyImg9.png"
+              alt=""
+            />
             <div class="historyimg historyimg2">
               <span>黄色预警</span>
             </div>
@@ -220,7 +246,10 @@
             <div>
               <span class="red">139</span>
             </div>
-            <img src="@/assets/eduImg/jyImg8.png" alt="" />
+            <img
+              src="@/assets/eduImg/jyImg8.png"
+              alt=""
+            />
             <div class="historyimg historyimg3">
               <span>红色预警</span>
             </div>
@@ -1241,7 +1270,38 @@ onMounted(() => {
     flex-direction: column;
     padding: 10px 0;
     box-sizing: border-box;
+    position: relative;
 
+    .gkTop {
+      position: absolute;
+      top: 4px;
+      left: 170px;
+      animation: example 3s infinite linear;
+    }
+    @keyframes example {
+      0% {
+        transform: translateY(0);
+      }
+      25% {
+        transform: translateY(-3px);
+      }
+      50% {
+        transform: translateY(0);
+      }
+      75% {
+        transform: translateY(3px);
+      }
+      100% {
+        transform: translateY(0);
+      }
+    }
+    .gkMove {
+      position: absolute;
+      top: 4px;
+      left: -2px;
+      width: 98%;
+      height: 96%;
+    }
     span {
       font-weight: 500;
       font-size: 14px;