home.html

<ion-header>
    <ion-navbar>
        <ion-buttons start>
            <button ion-button icon-only>
                <img class="toolbar-img" src="./assets/imgs/logo.png">
            </button>
        </ion-buttons>
        <ion-buttons center (click)="goToSearch()">
            <ion-searchbar class="toolbar-search" placeholder="搜索"></ion-searchbar>
        </ion-buttons>
        <ion-buttons end>
            <button ion-button icon-only (click)="isSign = true" class="toolbar-signUp">
                <span class="signUp-span" >签到</span>
            </button>
        </ion-buttons>
        <ion-buttons end>
            <button ion-button icon-only class="toolbar-icon">
                <ion-icon name="mail"></ion-icon>
                <span class="num">2</span>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>
<ion-content>
    <div style="height: 160px">
        <ion-slides #slides *ngIf="slidersItems.length>0" pager loop="true" autoplay="2000" speed="1500">
            <ion-slide style="height:160px;width: 100%;position: relative" *ngFor="let item of slidersItems;">
                <img src="{{picture+item.pictureId}}" class="slide-image" (click)="go(item)">
                <p class="slides-title">{{item.title}}</p>
            </ion-slide>
        </ion-slides>
    </div>
    <div class="home-middle-tips">
        <ion-row>
            <ion-col col-2 class="middle-left">
                <img src="./assets/imgs/flag.png">
            </ion-col>
            <ion-col col-10 class="middle-right">
                <span class="main-color">王小红</span>,欢迎您，今天是 <span class="main-color">2019年4月22日</span>，
                今天是您加入中国共产党的 <span class="main-color">520</span>天，希望您不忘初心，牢记使命，
                永远奋斗。
            </ion-col>
        </ion-row>
    </div>
    <div class="news-content">
        <div class="tabs-parent">
            <div *ngFor="let item of tabsList;let i = index" (click)="change(i)" class="tabs-children">
                <span [style.color]="index == i ? '#e12724':''">{{item.name}}</span>
            </div>
            <span #tips id="tips"></span>
        </div>
    </div>
    <div class="main-news">
        <ng-container *ngFor="let new of newList;">
            <ion-row class="news-item" (click)="goToDetail(new)">
                <ion-col col-8 class="news-left">
                    <p class="news-title">{{new.title}}</p>
                    <p class="news-end">
                        <span>{{new.source}}</span>
                        <span>{{new.publishTime | date:'yyyy-MM-dd'}}</span>
                    </p>
                </ion-col>
                <ion-col col-4 class="news-right">
                    <img src="./assets/imgs/demo.png">
                </ion-col>
            </ion-row>
        </ng-container>
    </div>
</ion-content>
<div *ngIf="isSign" class="signMask">
    <div class="mask-content">
        <div class="record-conten">
            "进入新时代，国际国内形势发生广泛而深刻的变化，改革发展面临着新形势新任务新挑战，
            我们要抓住机遇、迎接挑战，关键在于高举新时代改革开放旗帜，继续全面深化改革。"
        </div>
        <div class="mask-button">
            <button class="submit-btn submit" (click)="signUp()">签到</button>
        </div>
    </div>
</div>