weather component unfinished

Author: bknds

src/app/shared/components/weather/weather.component.html

@@ -1,32 +1,16 @@
 <div class="weather-wrap">
   <div class="weather-content">
-    <i class="icon iconfont icon-duoyun type"></i>
-    <span class="date">03-04</span>
-    <span class="low-high">29.0℃ ~ 22.0℃</span>
+    <i class="icon iconfont icon-{{today.type}} type"></i>
+    <span class="low-high">{{today.low}} ~ {{today.high}}</span>
     <span class="wind">
       <i class="icon iconfont icon-tianqizitiku09"></i>
-      <3级</span>
+      {{today.fl}}</span>
   </div>
   <div class="weather-bottom">
-    <div class="forecast-item-wrap">
-      <i class="icon iconfont icon-duoyun"></i>
-      <span>03-04</span>
-    </div>
-    <div class="forecast-item-wrap">
-      <i class="icon iconfont icon-duoyun"></i>
-      <span>03-05</span>
-    </div>
-    <div class="forecast-item-wrap">
-      <i class="icon iconfont icon-xiaoyu"></i>
-      <span>03-06</span>
-    </div>
-    <div class="forecast-item-wrap">
-      <i class="icon iconfont icon-xiaoyu"></i>
-      <span>03-07</span>
-    </div>
-    <div class="forecast-item-wrap">
-      <i class="icon iconfont icon-qing"></i>
-      <span>03-08</span>
-    </div>
+    <button class="switch-btn forecast-item-wrap" [ngClass]="{'active':item.isSelect}" *ngFor="let item of data;let i = index"
+      (click)="switch(i)">
+      <i class="icon iconfont icon-{{item.type}}"></i>
+      <span>{{item.date}}</span>
+    </button>
   </div>
 </div>

src/app/shared/components/weather/weather.component.scss

@@ -2,13 +2,21 @@
 .weather-wrap {
     display: flex;
     flex-direction: column;
+    background: url(https://api.dujin.org/bing/1366.php);
 }
 
 .weather-content {
     flex: 1;
     height: 200px;
     .type {
+        display: block;
         font-size: 10em;
+        text-align: center;
+    }
+    .low-high {
+        display: block;
+        font-size: 2em;
+        text-align: center;
     }
 }
 
@@ -17,11 +25,15 @@
     flex-direction: row;
     flex-wrap: nowrap;
     width: 100%;
-    height: 70px;
+    height: 100px;
+    background: rgba($card-bg, .8);
     border-top: 1px solid $border-color;
     .forecast-item-wrap {
         flex: 1;
+        background: transparent;
+        border: none;
         border-right: 1px solid $border-color;
+        outline: none;
         text-align: center;
         .icon {
             font-size: 3em;
@@ -31,7 +43,10 @@
             font-size: $sm-text;
         }
         &:last-child {
-            border: none;
+            border-right: none;
         }
     }
+    .active {
+        border-top: 2px solid $primary;
+    }
 }

src/app/shared/components/weather/weather.component.ts

@@ -9,14 +9,23 @@ import { WeatherService } from './weather.service';
 })
 export class WeatherComponent implements OnInit {
 
+  today;
   data: Array<any>;
   constructor(private _weatherService: WeatherService) { }
 
   ngOnInit() {
     /* this._weatherService.getJSON().subscribe(data => {
       console.log(data);
     }); */
-    this.data = this._weatherService.DATA.data.forecast;
+    this.data = this._weatherService.DATA;
+    this.switch(0);
   }
 
+  switch(index) {
+    this.data.forEach(item => {
+      item.isSelect = false;
+    });
+    this.data[index].isSelect = true;
+    this.today = this.data[index];
+  }
 }

src/app/shared/components/weather/weather.service.ts

@@ -17,91 +17,36 @@ export class WeatherService {
     }
 
 
-    DATA = {
-        "date": "20180404",
-        "message": "Success !",
-        "status": 200,
-        "city": "深圳",
-        "count": 410,
-        "data": {
-            "shidu": "87%",
-            "pm25": 28.0,
-            "pm10": 51.0,
-            "quality": "良",
-            "wendu": "21",
-            "ganmao": "极少数敏感人群应减少户外活动",
-            "yesterday": {
-                "date": "03日星期二",
-                "sunrise": "06:16",
-                "high": "高温 29.0℃",
-                "low": "低温 21.0℃",
-                "sunset": "18:40",
-                "aqi": 47.0,
-                "fx": "无持续风向",
-                "fl": "<3级",
-                "type": "多云",
-                "notice": "阴晴之间，谨防紫外线侵扰"
-            },
-            "forecast": [{
-                "date": "04日星期三",
-                "sunrise": "06:15",
-                "high": "高温 29.0℃",
-                "low": "低温 22.0℃",
-                "sunset": "18:40",
-                "aqi": 31.0,
-                "fx": "无持续风向",
-                "fl": "<3级",
-                "type": "多云",
-                "notice": "阴晴之间，谨防紫外线侵扰"
-            },
-            {
-                "date": "05日星期四",
-                "sunrise": "06:14",
-                "high": "高温 30.0℃",
-                "low": "低温 19.0℃",
-                "sunset": "18:40",
-                "aqi": 26.0,
-                "fx": "无持续风向",
-                "fl": "<3级",
-                "type": "多云",
-                "notice": "阴晴之间，谨防紫外线侵扰"
-            },
-            {
-                "date": "06日星期五",
-                "sunrise": "06:13",
-                "high": "高温 25.0℃",
-                "low": "低温 16.0℃",
-                "sunset": "18:41",
-                "aqi": 36.0,
-                "fx": "北风",
-                "fl": "3-4级",
-                "type": "阵雨",
-                "notice": "阵雨来袭，出门记得带伞"
-            },
-            {
-                "date": "07日星期六",
-                "sunrise": "06:13",
-                "high": "高温 21.0℃",
-                "low": "低温 15.0℃",
-                "sunset": "18:41",
-                "aqi": 74.0,
-                "fx": "无持续风向",
-                "fl": "<3级",
-                "type": "阵雨",
-                "notice": "阵雨来袭，出门记得带伞"
-            },
-            {
-                "date": "08日星期日",
-                "sunrise": "06:12",
-                "high": "高温 25.0℃",
-                "low": "低温 17.0℃",
-                "sunset": "18:42",
-                "aqi": 74.0,
-                "fx": "无持续风向",
-                "fl": "<3级",
-                "type": "晴",
-                "notice": "愿你拥有比阳光明媚的心情"
-            }]
-        }
-    }
+    DATA = [
+        {
+            "date": "03-04",
+            "high": "29.0℃",
+            "low": "22.0℃",
+            "fl": "<3级",
+            "type": "dayu",
+        }, {
+            "date": "03-05",
+            "high": "29.0℃",
+            "low": "22.0℃",
+            "fl": "<3级",
+            "type": "duoyun",
+        }, {
+            "date": "03-06",
+            "high": "29.0℃",
+            "low": "22.0℃",
+            "fl": "<3级",
+            "type": "leidian",
+        }, {
+            "date": "03-07",
+            "high": "29.0℃",
+            "low": "22.0℃",
+            "fl": "<3级",
+            "type": "qing",
+        }, {
+            "date": "03-08",
+            "high": "29.0℃",
+            "low": "22.0℃",
+            "fl": "<3级",
+            "type": "yintian",
+        }]
 }