跑马灯 directive

src/app/app.scss

@@ -342,5 +342,5 @@ a[disabled], button[disabled], [ion-button][disabled],
   padding-top: 4rem;
   height: 100%;
   background-image: url('../assets/imgs/login-bg.png');
-  background-size: cover;
+  background-size: 100% 100%;
 }
\ No newline at end of file

src/directives/directives.module.ts

 import { NgModule } from '@angular/core';
 import { TabsSlidesDirective } from './tabs-slides/tabs-slides';
+import { LampDirective } from './lamp/lamp';
+import { HorizontaLampDirective } from './horizonta-lamp/horizonta-lamp';
+import { VerticaLampDirective } from './vertica-lamp/vertica-lamp';
 @NgModule({
-	declarations: [TabsSlidesDirective],
+	declarations: [TabsSlidesDirective,
+    LampDirective,
+    HorizontaLampDirective,
+    VerticaLampDirective],
 	imports: [],
-	exports: [TabsSlidesDirective]
+	exports: [TabsSlidesDirective,
+    LampDirective,
+    HorizontaLampDirective,
+    VerticaLampDirective]
 })
 export class DirectivesModule {}

src/directives/horizonta-lamp/horizonta-lamp.ts

+import {Directive, ElementRef} from '@angular/core';
+
+@Directive({
+  selector: '[horizonta-lamp]' // Attribute selector
+})
+export class HorizontaLampDirective {
+
+  move_h = 33;     //移动高度
+  scorllStep = 1;
+  scrollTime = 60;
+  stopTime = 1000;
+  tmpH = 0;
+  constructor(public el:ElementRef) {
+    this.lineChange();
+  }
+
+  //跑马灯
+  lineChange() {
+    let child_div = this.el.nativeElement.children;
+    setTimeout(() => {
+      if (child_div.length > 0) {
+        this.start();
+      }
+    }, 10);
+  }
+
+  start() {
+    if (this.tmpH < this.move_h) {//  tmpH = 0 ; move_h = 33
+      this.tmpH += this.scorllStep;//scorllStep = 1
+      if (this.tmpH > this.move_h) {
+        this.tmpH = this.move_h;
+      }
+      this.el.nativeElement.scrollTop = this.tmpH;
+      setTimeout(() => {
+        this.start()
+      }, this.scrollTime);//stopTime = 3000 ; scrollTime = 30 每移动一个单位延时30ms
+    } else {
+      this.tmpH = 0;
+      this.el.nativeElement.appendChild(this.el.nativeElement.children[0]);
+      setTimeout(() => {
+        this.start()
+      }, this.stopTime);//stopTime = 3000 ; scrollTime = 30 每移动一个单位延时30ms
+    }
+  }
+
+}

src/directives/lamp/lamp.ts

+import {Directive, ElementRef} from '@angular/core';
+@Directive({
+  selector: '[lamp]'
+})
+export class LampDirective {
+
+  move_h = 33;     //移动高度
+  scorllStep = 1;
+  scrollTime = 60;
+  stopTime = 1000;
+  tmpH = 0;
+  constructor(public el:ElementRef) {
+    console.log(el);
+    this.lineChange();
+  }
+
+  //跑马灯
+  lineChange() {
+    let child_div = this.el.nativeElement.children;
+    setTimeout(() => {
+      if (child_div.length > 0) {
+        this.start();
+      }
+    }, 10);
+  }
+
+  start() {
+    if (this.tmpH < this.move_h) {//  tmpH = 0 ; move_h = 33
+      this.tmpH += this.scorllStep;//scorllStep = 1
+      if (this.tmpH > this.move_h) {
+        this.tmpH = this.move_h;
+      }
+      this.el.nativeElement.scrollTop = this.tmpH;
+      setTimeout(() => {
+        this.start()
+      }, this.scrollTime);//stopTime = 3000 ; scrollTime = 30 每移动一个单位延时30ms
+    } else {
+      this.tmpH = 0;
+      this.el.nativeElement.appendChild(this.el.nativeElement.children[0]);
+      setTimeout(() => {
+        this.start()
+      }, this.stopTime);//stopTime = 3000 ; scrollTime = 30 每移动一个单位延时30ms
+    }
+  }
+
+}

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

+import {Directive, ElementRef} from '@angular/core';
+
+@Directive({
+  selector: '[vertica-lamp]' // Attribute selector
+})
+export class VerticaLampDirective {
+
+  move_h = 33;     //移动高度
+  scorllStep = 1;
+  scrollTime = 60;
+  stopTime = 1000;
+  tmpH = 0;
+  constructor(public el:ElementRef) {
+    console.log(el);
+    this.lineChange();
+  }
+
+  //跑马灯
+  lineChange() {
+    let child_div = this.el.nativeElement.children;
+    setTimeout(() => {
+      if (child_div.length > 0) {
+        this.start();
+      }
+    }, 10);
+  }
+
+  start() {
+    if (this.tmpH < this.move_h) {//  tmpH = 0 ; move_h = 33
+      this.tmpH += this.scorllStep;//scorllStep = 1
+      if (this.tmpH > this.move_h) {
+        this.tmpH = this.move_h;
+      }
+      this.el.nativeElement.scrollTop = this.tmpH;
+      setTimeout(() => {
+        this.start()
+      }, this.scrollTime);//stopTime = 3000 ; scrollTime = 30 每移动一个单位延时30ms
+    } else {
+      this.tmpH = 0;
+      this.el.nativeElement.appendChild(this.el.nativeElement.children[0]);
+      setTimeout(() => {
+        this.start()
+      }, this.stopTime);//stopTime = 3000 ; scrollTime = 30 每移动一个单位延时30ms
+    }
+  }
+
+}

src/pages/tabs/discover/discover.html

 <ion-header>
   <ion-navbar>
     <ion-buttons start>
-      <button ion-button icon-only>
+      <button ion-button icon-only  (click)="goToSearch()" class="search-button">
         <img class="toolbar-img" src="./assets/imgs/logo.png">
+        <ion-icon  class="search-icon" name="search"></ion-icon>
       </button>
     </ion-buttons>
-    <ion-buttons center class="search-button" (click)="goToSearch()">
-      <ion-searchbar class="toolbar-search" placeholder="搜索"></ion-searchbar>
-      <ion-icon class="search-icon" name="search"></ion-icon>
-    </ion-buttons>
     <ion-buttons end>
       <button ion-button icon-only (click)="goToPublish()" class="toolbar-signUp">
         <ion-icon class="icon-fabu iconfont"></ion-icon>

src/pages/tabs/discover/discover.scss

@@ -9,11 +9,9 @@ page-discover {
     position: relative;
 
     .search-icon {
-      position: absolute;
-      top: 1rem;
-      left: 1.1rem;
       color: #ffffff;
-      font-size: 2rem;
+      font-size: 2.5rem;
+      margin-left: 1rem;
     }
   }
 

src/pages/tabs/home/home.html

 <ion-header>
     <ion-navbar>
         <ion-buttons start>
-            <button ion-button icon-only>
+            <button ion-button icon-only  (click)="goToSearch()" class="search-button">
                 <img class="toolbar-img" src="./assets/imgs/logo.png">
+                <ion-icon  class="search-icon" name="search"></ion-icon>
             </button>
         </ion-buttons>
-        <ion-buttons center class="search-button" (click)="goToSearch()">
-            <ion-searchbar class="toolbar-search" placeholder="搜索"></ion-searchbar>
-            <ion-icon class="search-icon" name="search"></ion-icon>
-        </ion-buttons>
         <ion-buttons end>
             <button ion-button icon-only (click)="signNow()" class="toolbar-signUp">
-                <span class="signUp-span">签到</span>
+                <span class="signUp-span">
+                    <img *ngIf="signObj.isSign == 'no'" class="toolbar-img" src="./assets/imgs/home/no-sign.png">
+                    <img *ngIf="signObj.isSign == 'yes'" class="toolbar-img" src="./assets/imgs/home/yes-sign.png">
+                 </span>
             </button>
         </ion-buttons>
         <ion-buttons end>
@@ -30,7 +30,7 @@
                     <img src="./assets/imgs/flag.png">
                 </ion-col>
                 <ion-col col-10 class="middle-right">
-                    <div #lineChangeEle id="party-bir">
+                    <div horizonta-lamp #lineChangeEle id="party-bir">
                         <div><span class="main-color">{{partyObj?.name}}</span>同志，欢迎您，</div>
                         <div>今天是<span class="main-color">{{partyObj?.now | date:'yyyy年MM月dd日'}}</span>，</div>
                         <div>是您加入中国共产党的第<span class="main-color">{{partyObj?.partytime}}</span>天，</div>

src/pages/tabs/home/home.module.ts

@@ -3,16 +3,18 @@ import { IonicPageModule} from 'ionic-angular';
 
 import { HomePage } from './home';
 import { CalendarModule } from "ion2-calendar";
+import {DirectivesModule} from "../../../directives/directives.module";
 
 
 @NgModule({
   declarations: [
     HomePage,
   ],
-  imports: [
-    IonicPageModule.forChild(HomePage),
-      CalendarModule
-  ],
+    imports: [
+        IonicPageModule.forChild(HomePage),
+        CalendarModule,
+        DirectivesModule
+    ],
   entryComponents: [
     HomePage,
   ],

src/pages/tabs/home/home.scss

@@ -37,11 +37,9 @@ page-home {
     position: relative;
 
     .search-icon {
-      position: absolute;
-      top: 1rem;
-      left: 1.1rem;
       color: #ffffff;
-      font-size: 2rem;
+      font-size: 2.5rem;
+      margin-left: 1rem;
     }
   }
 
@@ -59,20 +57,20 @@ page-home {
 
   .toolbar-signUp {
     .signUp-span {
-      color: #fff;
-      border: 1px solid #fff;
-      font-size: 1.2rem;
-      padding: 2px 5px;
-      border-radius: 4px;
-      position: relative;
-      margin-right: .4rem;
+     position: relative;
+    }
+
+    img.toolbar-img{
+      width: 2rem;
+      margin-top: 2px;
+      margin-right: 1rem;
     }
 
     .signUp-span::after {
       content: '';
       position: absolute;
-      right: -8px;
-      top: 1px;
+      right: 2px;
+      top: 6px;
       height: 15px;
       width: 1px;
       background-color: #fff;

src/pages/tabs/home/home.ts

@@ -55,13 +55,6 @@ export class HomePage {
 
     slideTitle;
 
-    move_h = 33;     //移动高度
-    scorllStep = 1;
-    scrollTime = 60;
-    stopTime = 1000;
-    tmpH = 0;
-
-
     constructor(public navCtrl: NavController, public tts: TextToSpeech, public datePipe: DatePipe,
                 public commonSer: CommonService, public emitSer: EmitService,
                 public ngZone:NgZone,
@@ -75,36 +68,6 @@ export class HomePage {
         });
     }
 
-    //跑马灯
-    lineChange() {
-        let child_div = this.lineChangeEle.nativeElement.children;
-        setTimeout(() => {
-            if (child_div.length > 0) {
-                this.start();
-            }
-        }, 10);
-
-    }
-
-    start() {
-        if (this.tmpH < this.move_h) {//  tmpH = 0 ; move_h = 33
-            this.tmpH += this.scorllStep;//scorllStep = 1
-            if (this.tmpH > this.move_h) {
-                this.tmpH = this.move_h;
-            }
-            this.lineChangeEle.nativeElement.scrollTop = this.tmpH;
-            setTimeout(() => {
-                this.start()
-            }, this.scrollTime);//stopTime = 3000 ; scrollTime = 30 每移动一个单位延时30ms
-        } else {
-            this.tmpH = 0;
-            this.lineChangeEle.nativeElement.appendChild(this.lineChangeEle.nativeElement.children[0]);
-            setTimeout(() => {
-                this.start()
-            }, this.stopTime);//stopTime = 3000 ; scrollTime = 30 每移动一个单位延时30ms
-        }
-    }
-
 
     ionViewDidLoad() {
         this.tabsSer.signNow().subscribe(
@@ -173,7 +136,6 @@ export class HomePage {
                     let message = this.partyObj.name + "同志，欢迎您，今天是" + this.datePipe.transform(this.partyObj.now, 'yyyy年MM月dd日') + "，是您加入中国共产党的第" + this.partyObj.partytime + "天，希望您不忘初心，牢记使命，永远奋斗。";
                     this.commonSer.alert2(message,'',()=>{
                         this.isTips = false;
-                        this.lineChange();
                     });
                 }
             );

src/pages/tabs/serve/serve.html

@@ -27,9 +27,9 @@
     <div class="item3-2" (click)="goToNotice()">
       <ion-col col-2 class="card3">
         <span *ngIf="hasNew.message == 1" class="img-tips"></span>
-        <img src="./assets/imgs/home/icon-mail.png" >
+        <img src="./assets/imgs/home/icon-tips.png" >
       </ion-col>
-      <ion-col col-9 class="card3" >
+      <ion-col col-9 class="card3" lamp>
         <div class="card3-item" *ngFor="let item of noticeList;">
           <span *ngIf="noticeTips > 0" class="tips"></span>
           <span class="color-996">{{item.title}}</span>