xcx

src/pages/animate.scss

@@ -29,3 +29,15 @@
   100% {opacity: 1;}
 }
 
+// 眨眼动画
+@keyframes BlinkAnimation
+{
+  0% {box-shadow: 0 0 0 .02rem rgba(240, 198, 162, .08)}
+  100% {box-shadow: 0 0 .2rem .02rem rgba(240, 198, 162, .08)}
+}
+@-webkit-keyframes BlinkAnimation
+{
+  0% {box-shadow: 0 0 0 .02rem rgba(240, 198, 162, .08)}
+  100% {box-shadow: 0 0 .2rem .02rem rgba(240, 198, 162, .08)}
+}
+

src/pages/zhiNengYuan.vue

@@ -83,15 +83,12 @@
           <br>
           <b>动</b>起来，恣意徜徉。
           <br>
-          <br>
-          浪漫绿袖，寻香花轴，
+          <br>浪漫绿袖，寻香花轴，
           <br>
           <b>静</b>下来，细数时光。
           <br>
-          <br>
-          水岸假日花园、平台尊享花园、山林
-          <br>
-          体验花园，
+          <br>水岸假日花园、平台尊享花园、山林
+          <br>体验花园，
           <br>
           <b>享</b>其乐融融，看岁月之美。
         </span>
@@ -102,7 +99,34 @@
       <div class="bigImg">
         <img src="../assets/images/icon-43.jpg" @load="imgLoad" class="icon43" width="100%" alt>
       </div>
-      <div class="scrollPage"></div>
+      <div class="scrollPage">
+        <img
+          src="../assets/images/icon-49.gif"
+          style="margin-top: .2rem;"
+          @load="imgLoad"
+          class="icon49"
+          width="100%"
+          alt
+        >
+        <div class="dashLine hide" style="margin-top: 0">
+          <div>
+            <div></div>
+          </div>
+        </div>
+        <h4>智慧门禁</h4>
+        <img src="../assets/images/icon-87.gif" @load="imgLoad" class="icon87" width="100%" alt>
+        <b>人脸识别系统：</b>
+        <span>抛弃繁琐方式，解放双手，让出入
+          <br>更加安全便捷。
+        </span>
+        <div class="dashLine">
+          <div>
+            <div></div>
+          </div>
+        </div>
+        <h4>智慧预防</h4>
+        <img src="../assets/images/icon-50.jpg" @load="imgLoad" class="icon50" width="100%" alt>
+      </div>
     </div>
     <div class="foot">
       <span :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[2]}">对接工作与生活，开启今天与明天！
@@ -354,8 +378,8 @@ export default {
       &.active {
         opacity: 1;
       }
-      b{
-        font-size: .12rem;
+      b {
+        font-size: 0.12rem;
         color: #dfa870;
       }
     }
@@ -385,5 +409,75 @@ export default {
       margin-top: 0.35rem;
     }
   }
+  .dashLine {
+    width: 100%;
+    position: relative;
+    overflow: visible;
+    text-align: center;
+    margin-top: .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;
+    }
+  }
+  .box5 {
+    .scrollPage {
+      h4 {
+        width: 100%;
+        text-align: center;
+        font-size: 0.21rem;
+        font-family: "宋体";
+        line-height: 1.5;
+        margin: 0.1rem 0;
+        color: #dea369;
+        font-weight: normal;
+      }
+      >b{
+        width: 100%;
+        display: block;
+        text-align: center;
+        color: #dea369;
+        font-size: .14rem;
+        line-height: 1.5;
+        margin: .05rem auto 0;
+      }
+      >span{
+        width: 100%;
+        display: block;
+        text-align: center;
+        font-size: .11rem;
+        line-height: 1.5;
+      }
+    }
+  }
 }
 </style>