xcx

src/pages/zhiNengYuan.vue

@@ -177,10 +177,8 @@
             width="100%"
             alt
           >
-          <div class="dashLine hide" style="margin-top: 0">
-            <div>
-              <div></div>
-            </div>
+          <div class="dashLine" style="margin-top: 0">
+            <img src="../assets/images/icon-108.gif" style="margin-top: -10px;" @load="imgLoad" class="icon108" width="100%" alt>
           </div>
           <h4>智慧门禁</h4>
           <img src="../assets/images/icon-87.gif" @load="imgLoad" class="icon87" width="100%" alt>
@@ -189,9 +187,7 @@
             <br>更加安全便捷。
           </span>
           <div class="dashLine">
-            <div>
-              <div></div>
-            </div>
+            <img src="../assets/images/icon-108.gif" class="icon108" width="100%" alt>
           </div>
           <h4>智慧预防</h4>
           <img src="../assets/images/icon-50.jpg" @load="imgLoad" class="icon50" width="100%" alt>
@@ -200,9 +196,7 @@
             <br>自由随心。
           </span>
           <div class="dashLine">
-            <div>
-              <div></div>
-            </div>
+            <img src="../assets/images/icon-108.gif" class="icon108" width="100%" alt>
           </div>
           <h4>智慧停车</h4>
           <img src="../assets/images/icon-51.jpg" @load="imgLoad" class="icon51" width="100%" alt>
@@ -211,9 +205,7 @@
             <br>出入安全无阻。
           </span>
           <div class="dashLine">
-            <div>
-              <div></div>
-            </div>
+            <img src="../assets/images/icon-108.gif" class="icon108" width="100%" alt>
           </div>
           <h4>智慧充电桩</h4>
           <img src="../assets/images/icon-52.jpg" @load="imgLoad" class="icon52" width="100%" alt>
@@ -221,9 +213,7 @@
             <br>无后顾之忧。
           </span>
           <div class="dashLine">
-            <div>
-              <div></div>
-            </div>
+            <img src="../assets/images/icon-108.gif" class="icon108" width="100%" alt>
           </div>
           <h4>智慧安防</h4>
           <img src="../assets/images/icon-53.jpg" @load="imgLoad" class="icon53" width="100%" alt>
@@ -232,26 +222,20 @@
             <br>保障业主的幸福生活。
           </span>
           <div class="dashLine">
-            <div>
-              <div></div>
-            </div>
+            <img src="../assets/images/icon-108.gif" class="icon108" width="100%" alt>
           </div>
           <h4>智慧货柜</h4>
           <img src="../assets/images/icon-54.jpg" @load="imgLoad" class="icon54" width="100%" alt>
           <span style="margin-top: .1rem;">自助购买生活用品，便捷省心。</span>
           <div class="dashLine">
-            <div>
-              <div></div>
-            </div>
+            <img src="../assets/images/icon-108.gif" class="icon108" width="100%" alt>
           </div>
           <h4>智慧APP</h4>
           <img src="../assets/images/icon-55.gif" @load="imgLoad" class="icon55" width="100%" alt>
           <b>智慧社区APP：</b>
           <span>远程控制，运筹帷幄。</span>
           <div class="dashLine">
-            <div>
-              <div></div>
-            </div>
+            <img src="../assets/images/icon-108.gif" class="icon108" width="100%" alt>
           </div>
           <h4>智慧呼叫系统</h4>
           <img src="../assets/images/icon-56.jpg" @load="imgLoad" class="icon56" width="100%" alt>
@@ -259,10 +243,8 @@
           <span>一键式呼叫，让老者在家更从容，
             <br>儿女更安心。
           </span>
-          <div class="dashLine hideFoot">
-            <div>
-              <div></div>
-            </div>
+          <div class="dashLine" style="margin-top: -5px;">
+            <img src="../assets/images/icon-108.gif" style="transform: translateY(15px);-webkit-transform: translateY(15px);" class="icon108" width="100%" alt>
           </div>
         </div>
       </div>
@@ -632,45 +614,9 @@ export default {
     .dashLine {
       width: 100%;
       position: relative;
-      overflow: visible;
+      overflow: hidden;
       text-align: center;
       margin-top: 0.1rem;
-      > div {
-        display: inline-block;
-        width: 1px;
-        height: 0.55rem;
-        border-left: 2px dashed #dfa870;
-        margin-left: 1px;
-      }
-      &::after,
-      &::before {
-        content: "";
-        width: 0.08rem;
-        height: 0.08rem;
-        display: block;
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-        -webkit-transform: translateX(-50%);
-        background: #dfa870;
-        border-radius: 100%;
-        animation: BlinkAnimation 1s linear;
-        -webkit-animation: BlinkAnimation 1s linear;
-        animation-iteration-count: infinite;
-        -webkit-animation-iteration-count: infinite;
-      }
-      &::after {
-        bottom: 0;
-      }
-      &::before {
-        top: 0;
-      }
-      &.hide::before {
-        display: none;
-      }
-      &.hideFoot::after {
-        display: none;
-      }
     }
     .box5 {
       .scrollPage {