样式调整

src/directives/vertica-lamp/vertica-lamp.ts

@@ -13,12 +13,30 @@ export class VerticaLampDirective {
   lineChange() {
     let child_div = this.el.nativeElement.children;
     setTimeout(()=>{
-      if(child_div.length > 0 ){
+      console.log(child_div[0].offsetWidth)
+      if(child_div.length > 0 && child_div[0].offsetWidth > 700 ){
         // this.start();
       }
-    },10)
+    },1000)
   }
 
+  //横向跑马灯
+  start() {
+    let child_div = this.el.nativeElement.children;
+    const scrollWidth = this.el.nativeElement.offsetWidth;
+    const textWidth = child_div[0].offsetWidth;
+    console.log(child_div[0]);
+
+
+    let i = scrollWidth;
+    setInterval(()=>{
+      i--;
+      if(i < -textWidth){
+        i = scrollWidth;
+      }
+      child_div[0].style.left = i + 'px';
+    },20)
+  }
 
 
 }

src/pages/tabs/home/home.html

@@ -24,7 +24,7 @@
 </ion-header>
 <ion-content #content>
     <div #topHeight>
-        <div class="home-middle-tips">
+        <div #homeMiddleTips class="home-middle-tips">
             <ion-row>
                 <ion-col col-2 class="middle-left">
                     <img src="./assets/imgs/flag.png">

src/pages/tabs/home/home.scss

@@ -86,10 +86,16 @@ page-home {
 
   //中间
   .home-middle-tips {
-    padding: 1rem;
     font-size: 1.5rem;
     line-height: 1.6rem;
     font-weight: 400;
+    height: 0px;
+    overflow: hidden;
+    -webkit-transition: height 500ms;
+    -moz-transition: height 500ms;
+    -ms-transition: height 500ms;
+    -o-transition: height 500ms;
+    transition: height 500ms;
 
     ion-row {
       padding: .5rem 0;

src/pages/tabs/home/home.ts

@@ -26,6 +26,7 @@ export class HomePage {
     @ViewChild('verticaLamp') verticaLamp: ElementRef;
     @ViewChild('tabSpan') tabSpan: ElementRef;
     @ViewChild('topHeight') topHeight: ElementRef;
+    @ViewChild('homeMiddleTips') homeMiddleTips: ElementRef;
 
     picture: string = AppGlobal.domain + '/wisdomgroup';
     slidersItems = [];
@@ -143,6 +144,8 @@ export class HomePage {
 
     //横向跑马灯
     start() {
+        this.homeMiddleTips.nativeElement.style.height = "80px";
+        this.homeMiddleTips.nativeElement.style.padding = "1rem";
         let child_div = this.verticaLamp.nativeElement.children;
         const scrollWidth = this.verticaLamp.nativeElement.offsetWidth;
         const textWidth = child_div[0].offsetWidth;

src/pages/tabs/mine/mine.scss

@@ -42,20 +42,20 @@ page-mine {
       display: flex;
       align-items: center;
       justify-content: center;
+      padding-bottom: 1rem;
     }
     .group-right {
       display: flex;
       flex-flow: row;
       align-items: center;
       border-bottom: 1px solid #eee;
-
+      padding-bottom: 1rem;
       ion-icon {
         margin-left: auto;
       }
     }
     ion-row{
       padding-top: .6rem;
-      padding-bottom: .6rem;
     }
     img{
       width: 2.5rem;