-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
122 lines (117 loc) · 6.11 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="app/css/home.css">
<link rel="stylesheet" href="lib/node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="lib/font-awesome-4.5.0/css/font-awesome.css">
<link rel="stylesheet" href="lib/node_modules/angular-ui-bootstrap/dist/ui-bootstrap-csp.css">
<script src="lib/bower_components/angular/angular.min.js"></script>
<script src="lib/node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js"></script>
<script src="lib/node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>
<script src="app/js/weatherDetail.js"></script>
</head>
<body ng-app="myapp" ng-controller="indexController">
<div class="nav navbar nav-margin">
<div class="navbar-header icon-color">
<span class=" navbar-brand fa fa-home " ng-click="open()" >
<span class="city-border"> {{weather.city||"北京"}}天气</span></span>
<ul class="pull-right">
<li class="glyphicon glyphicon-map-marker navbar-brand icon-size"></li>
<li class="fa fa-refresh navbar-brand icon-size"
ng-class="{'fa-spin':refreshLoading}"
ng-click="checkRefresh()"></li>
</ul>
</div>
</div>
<!--整体内容-->
<div class="container weather-bg" style="">
<div class="col-">
<!-- 城市名称布局-->
<div class=" col-sm-6 col-md-6 col-xs-6" >
<div class="col-sm-4">
<h3>{{weather.city||"北京"}}</h3>
<h4>今天发布</h4>
<h4>温度：{{weather.wendu}}℃</h4>
</div>
</div>
<!--pm2.5-->
<div class="col-sm-6 col-md-6 col-xs-6 paddingLeft-1">
<img class="img-cold img-responsive" src="/weather/app/img/cold.png">
<span class="col-xs-8 padding-ganmao" >{{weather.ganmao}}</span>
</div>
</div>
<!-- 当天天气布局-->
<div class="col-sm-12 col-xs-12 text-center">
<div class="col-xs-4 marginTop-1">
<span ng-if="today.type==='多云'"><img src="/weather/app/img/cloud_good.png" class="img-weather-60"></span>
<span ng-if="today.type==='阴'" class="fa fa-cloud today-img"></span>
<span ng-if="today.type==='晴'" class="good"><img src="/weather/app/img/good.png" class="img-weather-60"></span>
<span ng-if="today.type==='阵雨'||today.type==='小雨'" class="good" ><img src="/weather/app/img/rain.png" class="img-weather-60"></span>
</div>
<div class="col-xs-8">
<h3>今天</h3>
<h3>{{today.low | limitTo : -4 }}- {{today.high | limitTo :-4 }}</h3>
<h4>{{today.type}}</h4>
<h4>{{today.fengli}}</h4>
</div>
</div>
<!-- 未来四天布局-->
<div class="">
<div ng-repeat=" forecast in forecasts " ng-if="$index > 0 &&$index <4">
<div class="col-xs-4 ">
<h3>{{forecast.date| limitTo : -3}}</h3>
<span ng-if="forecast.type==='多云'" >
<img src="/weather/app/img/cloud_good.png" class="img-weather"></span>
<span ng-if="forecast.type==='阴'" >
<img src="/weather/app/img/cloud.png" class="img-weather">
</span>
<span ng-if="forecast.type==='晴'" class="good"><img src="/weather/app/img/good.png" class="img-weather"></span>
<span ng-if="forecast.type.indexOf('雨')!==-1" ><img src="/weather/app/img/rain.png" class="img-weather"></span>
<h5>{{forecast.low | limitTo : -4}}-{{forecast.high | limitTo : -4}}</h5>
<h4>{{forecast.type}}</h4>
<h4>{{forecast.fengli}}</h4>
</div>
</div>
</div>
</div>
<script type="text/ng-template" id="myModalCity.html">
<div class="modal-bg">
<div class="modal-header">
<div class="modal-title">
<span class="glyphicon glyphicon-chevron-left pull-left" ng-click="cancel()"></span>
<h3 class="text-center">请选择城市</h3>
</div>
</div>
<div class="modal-body">
<form class="navbar-form navbar-left col-sm-12 col-md-12 col-xs-12" role="search">
<div class="col-xs-8 col-sm-8 ">
<input type="text" class="form-control" ng-model="city"
name="city"
placeholder="请输入城市名称">
</div>
<div class="col-xs-4 col-sm-4 ">
<button type="submit" class="btn btn-default" ng-click="inputCity()">搜索</button>
</div>
</form>
<ul class="city-list" >
<li style="list-style-type: none;border-bottom: 1px solid #e2e2e2;padding: 10px" ng-repeat="cityList in cityLists">
<a href="#"
ng-click="ok(cityList);">
{{ cityList.d2 | limitTo:10 }}</a>
</li>
</ul>
<b>{{ selected.cityList }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</div>
</script>
</body>
</html>