zc

src/views/components/subcomponent/titleComponent.vue

@@ -11,9 +11,14 @@
       <img class="img-1-dh" src="@/assets/ZDimages/icon_zhuanquan@1x.png">
       <p>{{titleData.name}}</p>
     </div>
-    <img class="bottom-img-box img-top" v-if="titleData.type == 'top'" src="@/assets/ZDimages/btdh_1.gif">
-    <img class="bottom-img-box img-left-right" v-if="titleData.type == 'left' || titleData.type == 'right'" src="@/assets/ZDimages/btdh_2.gif">
-    <img class="bottom-img-box img-bottom" v-if="titleData.type == 'bottom1' || titleData.type == 'bottom2'" src="@/assets/ZDimages/btdh_2.gif">
+    <div class="glow-max-box">
+      <div class="glow-box">
+        <p class="glow-p"></p>
+      </div>
+    </div>
+    <!--<img class="bottom-img-box img-top" v-if="titleData.type == 'top'" src="@/assets/ZDimages/btdh_1.gif">-->
+    <!--<img class="bottom-img-box img-left-right" v-if="titleData.type == 'left' || titleData.type == 'right'" src="@/assets/ZDimages/btdh_2.gif">-->
+    <!--<img class="bottom-img-box img-bottom" v-if="titleData.type == 'bottom1' || titleData.type == 'bottom2'" src="@/assets/ZDimages/btdh_2.gif">-->
   </div>
 </template>
 <script>
@@ -46,9 +51,10 @@
   .titleComponent{
     display: flex;
     position: relative;
+    overflow: hidden;
     .titleComponent-page{
       display: flex;
-      height:80px;
+      height:82px;
       overflow: hidden;
       position: relative;
       .img-1{
@@ -136,5 +142,36 @@
       width:800px;
       height:10px;
     }
+    .glow-max-box{
+      position: absolute;
+      bottom:0;
+      width:100%;
+      left:100px;
+      overflow: hidden;
+      .glow-box{
+        position: relative;
+        height:2px;
+        width:100%;
+        background-color: #0B2F50;
+        .glow-p{
+          content: '';
+          position: absolute;
+          bottom:0px;
+          height: 2px;
+          width: 180px;
+          background: linear-gradient(to right, transparent, #0191FF);
+          animation: glow 6s 0s infinite;
+        }
+        @keyframes glow {
+          0% {
+            left: -180px;
+          }
+
+          100% {
+            left: calc(100% + 180px);
+          }
+        }
+      }
+    }
   }
 </style>