gx

src/view/echarts_yl/pie3d.vue

@@ -568,7 +568,7 @@ onBeforeMount(() => {
 
     getOption();
     setChart();
-  }, 400);
+  }, 600);
 });
 </script>
 

src/view/hygiene.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="module">
     <div class="displayFlex left_bg">
-      <div class="flex1" style="flex: 0.5">
+      <div
+        class="flex1"
+        style="flex: 0.5"
+      >
         <div class="yd_title left_1">
           <div class="animate-border">
             <i></i>
@@ -46,7 +49,10 @@
         ></ePie2>
       </div>
 
-      <div class="flex1" style="margin-top: 10px">
+      <div
+        class="flex1"
+        style="margin-top: 10px"
+      >
         <div class="yd_title left_3">
           <div class="animate-border">
             <i></i>
@@ -54,9 +60,15 @@
           </div>
         </div>
         <div class="sm_title_1"></div>
-        <tnb :list="data.lmb.tnbrs" :year="data.lmb.year"></tnb>
+        <tnb
+          :list="data.lmb.tnbrs"
+          :year="data.lmb.year"
+        ></tnb>
         <div class="sm_title_2"></div>
-        <gxy :list="data.lmb.gxyrs" :year="data.lmb.year"></gxy>
+        <gxy
+          :list="data.lmb.gxyrs"
+          :year="data.lmb.year"
+        ></gxy>
       </div>
     </div>
     <div class="displayFlex center_bg">
@@ -69,24 +81,39 @@
         </div>
         <div class="center_top">
           <div class="item">
-            <img src="@/assets/images/hygiene/mjzrc.png" class="left" />
+            <img
+              src="@/assets/images/hygiene/mjzrc.png"
+              class="left"
+            />
             <div class="right">
               <div class="right_top">门急诊人次</div>
-              <img src="@/assets/images/hygiene/jt.png" class="right_center" />
+              <img
+                src="@/assets/images/hygiene/jt.png"
+                class="right_center"
+              />
               <div class="right_bottom">{{ data.mz.mjzrc }}</div>
             </div>
           </div>
           <div class="item">
-            <img src="@/assets/images/hygiene/zyrs.png" class="left" />
+            <img
+              src="@/assets/images/hygiene/zyrs.png"
+              class="left"
+            />
             <div class="right">
               <div class="right_top">住院人数</div>
-              <img src="@/assets/images/hygiene/jt.png" class="right_center" />
+              <img
+                src="@/assets/images/hygiene/jt.png"
+                class="right_center"
+              />
               <div class="right_bottom">{{ data.mz.zyrs }}</div>
             </div>
           </div>
         </div>
       </div>
-      <div class="flex1" style="flex: 0.3">
+      <div
+        class="flex1"
+        style="flex: 0.3"
+      >
         <div class="yd_title center_1">
           <div class="animate-border">
             <i></i>
@@ -97,20 +124,37 @@
           <div class="minTopPart">
             <div class="history2">
               <div class="va">33.67万</div>
-              <img src="@/assets/images/hygiene/shang_left.png" alt="" />
+              <img
+                src="@/assets/images/hygiene/shang_left.png"
+                alt=""
+              />
+              <img
+                class="moveImg"
+                src="@/assets/images/hygiene/shang_left2.png"
+                alt=""
+              />
+              <img
+                class="moveImg2"
+                src="@/assets/images/hygiene/jd.gif"
+                alt=""
+              />
               <div class="historyimg">建档份数</div>
             </div>
           </div>
           <div class="minTopPart2">
             <div class="left">
-              <div class="leftImg"><eP4></eP4></div>
+              <div class="leftImg">
+                <eP4></eP4>
+              </div>
               <div class="left_me">
                 <div>建档率</div>
                 <div class="bo">92.96%</div>
               </div>
             </div>
             <div class="right">
-              <div class="rightImg"><eP4_1></eP4_1></div>
+              <div class="rightImg">
+                <eP4_1></eP4_1>
+              </div>
               <div class="right_me">
                 <div>家庭医生签约率</div>
                 <div class="bo">62.16%</div>
@@ -119,7 +163,10 @@
           </div>
         </div>
       </div>
-      <div class="flex1" style="margin-top: 20px">
+      <div
+        class="flex1"
+        style="margin-top: 20px"
+      >
         <div class="yd_title familyPlanning">
           <div class="animate-border">
             <i></i>
@@ -132,7 +179,10 @@
       </div>
     </div>
     <div class="displayFlex right_bg">
-      <div class="flex1" style="flex: 0.9">
+      <div
+        class="flex1"
+        style="flex: 0.9"
+      >
         <div class="yd_title mechanism">
           <div class="animate-border">
             <i></i>
@@ -142,24 +192,46 @@
         <div class="history">
           <div class="history1">
             <div class="va">{{ data.fyglrs.ycfrc }}</div>
-            <img src="@/assets/images/hygiene/yf.png" alt="" />
+            <img
+              src="@/assets/images/hygiene/fy.png"
+              alt=""
+            />
+            <img
+              src="@/assets/images/hygiene/fy1.png"
+              alt=""
+              class="fyMove"
+            />
             <div class="historyimg">孕产妇系统管理人数</div>
           </div>
           <div class="history1">
             <div class="va">{{ data.fyglrs.etrs }}</div>
-            <img src="@/assets/images/hygiene/et.png" alt="" />
+            <img
+              src="@/assets/images/hygiene/fy.png"
+              alt=""
+            />
+            <img
+              src="@/assets/images/hygiene/fy2.png"
+              alt=""
+              class="fyMove"
+            />
             <div class="historyimg">0-6岁儿童系统管理人数</div>
           </div>
         </div>
       </div>
-      <div class="flex1" style="flex: 1.1">
+      <div
+        class="flex1"
+        style="flex: 1.1"
+      >
         <div class="yd_title service">
           <div class="animate-border">
             <i></i>
             <i></i>
           </div>
         </div>
-        <eP7 :list="data.jktj.jktjrs" :year="data.jktj.year"></eP7>
+        <eP7
+          :list="data.jktj.jktjrs"
+          :year="data.jktj.year"
+        ></eP7>
       </div>
       <div class="flex1">
         <div class="yd_title last">
@@ -175,7 +247,10 @@
           @mouseenter="stopAutoScroll"
           @mouseleave="startAutoScroll"
         >
-          <div class="item" v-for="item in data.jkhd">
+          <div
+            class="item"
+            v-for="item in data.jkhd"
+          >
             {{ item.jkhd }}
           </div>
         </div>
@@ -729,6 +804,31 @@ const getData = async () => {
     display: flex;
     flex-direction: column;
     align-items: center;
+    position: relative;
+    .fyMove{
+      position: absolute;
+      top: 60px;
+      width: 60px;
+      height: 64px;
+      animation: example 3s infinite linear;
+    }
+    @keyframes example {
+      0% {
+        transform: translateY(0);
+      }
+      25% {
+        transform: translateY(-4px);
+      }
+      50% {
+        transform: translateY(0);
+      }
+      75% {
+        transform: translateY(4px);
+      }
+      100% {
+        transform: translateY(0);
+      }
+    }
     .va {
       margin-top: 27px;
       margin-bottom: 10px;
@@ -901,14 +1001,41 @@ const getData = async () => {
   text-align: center;
   font-style: normal;
   font-family: PangMenZhengDao;
-
   display: flex;
   flex-direction: column;
   align-items: center;
+  position: relative;
+  .moveImg {
+    position: absolute;
+    top: 60px;
+    width: 64px;
+    height: 64px;
+    animation: example 3s infinite linear;
+  }
+  @keyframes example {
+    0% {
+      transform: translateY(0);
+    }
+    25% {
+      transform: translateY(-4px);
+    }
+    50% {
+      transform: translateY(0);
+    }
+    75% {
+      transform: translateY(4px);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+  .moveImg2 {
+    position: absolute;
+    top: 70px;
+  }
   .va {
     margin-top: 27px;
     margin-bottom: 20px;
-
     font-family: TCloudNumber, TCloudNumber;
     font-weight: bold;
     font-size: 20px;