中间页欢迎语滚动处理

src/views/home4Index.vue

@@ -2,10 +2,23 @@
   <div class="login" :style="'background-image:url(' + Background + ');'">
     <div class="topTitle" :style="'background-image:url(' + Title + ');'">
       中和地信企业管理平台
+    
     </div>
     <div class="subTopTitle">
       <h2 :style="'background-image:url(' + Welcome + ');'">
-        <img src="@/assets/home4Index/icon5.png" />中和地信有限公司欢迎您！
+        <img src="@/assets/home4Index/icon5.png" />
+        <div class="wrapper" style="    position: absolute;
+    top: 38px;
+    left: 86px;
+    width: 300px;
+    padding-left: 20px;
+    overflow: hidden;
+"> <div class="floating-text">
+          中和地信有限公司欢迎您！
+      </div>
+
+        </div>
+       
       </h2>
       <h2 @click="navTo('admin')" style="cursor: pointer;">
         <img src="@/assets/home4Index/icon6.png" />管理后台
@@ -124,11 +137,11 @@ export default {
 <style rel="stylesheet/scss" lang="scss">
 @keyframes floatShadow {
   0% {
-    transform: translateX(1300px);
+    transform: translateX(280px);
     display: block;
   }
   100% {
-    transform: translateX(-1300px);
+    transform: translateX(-300px);
     display: none;
   }
 }
@@ -136,15 +149,15 @@ export default {
 .floating-text {
   font-size: 18px;
   line-height: 1;
-  color: #fdd756;
+  color: #fff;
   text-shadow: 0 0 5px #fff;
   animation: floatShadow;
   animation-name: floatShadow;
-  animation-duration: 20s;
+  animation-duration: 10s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
-  position: absolute;
-  top: 8px;
+  // position: absolute;
+  // top: 38px;
 }
 
 .subTopTitle {