182 lines
5.1 KiB
HTML
Executable File
182 lines
5.1 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<title>我的生活</title>
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
|
|
<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
|
|
<link rel="stylesheet" href="./css/index.css">
|
|
<link rel="stylesheet" href="./css/clear.css">
|
|
<script src="http://at.alicdn.com/t/font_1152627_w9suf9d944j.js"></script>
|
|
<style>
|
|
body,
|
|
.fg_title{
|
|
color: #fff !important;
|
|
}
|
|
.fg_content {
|
|
background: linear-gradient(315deg, #571c94 0%, #e609cf 100%);
|
|
}
|
|
.bar-nav~.content {
|
|
top: 0 !important;
|
|
padding-top: 2.2rem;
|
|
}
|
|
.fg_bar,
|
|
.fg_bar:after{
|
|
background-color: #f7f7f800 !important;
|
|
}
|
|
.fg_bar .icon {
|
|
color: #fff;
|
|
}
|
|
.icon {
|
|
width: 2em;
|
|
height: 2em;
|
|
vertical-align: -0.15em;
|
|
fill: currentColor;
|
|
overflow: hidden;
|
|
}
|
|
.address input {
|
|
color: #000;
|
|
}
|
|
.back-fff {
|
|
background: #fff;
|
|
}
|
|
.search input{
|
|
width: 100%;
|
|
padding: 10px;
|
|
color: #8d8d8d;
|
|
border: none;
|
|
border-bottom: 1px solid #eaeaea;
|
|
}
|
|
.search_tips p{
|
|
margin: 0;
|
|
color: #8d8d8d;
|
|
padding: 5px 0 10px 10px;
|
|
border-bottom: 1px solid #e2dfdf;
|
|
}
|
|
.item-title {
|
|
color: #5f646e;
|
|
}
|
|
.address .list-block {
|
|
margin: 0.2rem 0;
|
|
}
|
|
.address .icon{
|
|
color: #000;
|
|
padding-top: 6px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<div class="page-group">
|
|
<!-- 单个page ,第一个.page默认被展示-->
|
|
<div class="page">
|
|
<!-- 标题栏 -->
|
|
<header class="bar bar-nav fg_bar">
|
|
<a class="icon icon-me pull-left open-panel"></a>
|
|
<a class="icon icon-edit pull-right open-city"></a>
|
|
<h1 class="title fg_title">合肥</h1>
|
|
</header>
|
|
|
|
<!-- 这里是页面内容区 -->
|
|
<div class="content fg_content">
|
|
<div class="weather_top">
|
|
<div class="top_number">
|
|
19°
|
|
</div>
|
|
<div class="top_bottom">
|
|
晴 | 空气 | 良
|
|
</div>
|
|
</div>
|
|
<div class="weather_info">
|
|
<ul>
|
|
<li>
|
|
<svg class="icon" aria-hidden="true">
|
|
<use xlink:href="#icon-tianqi"></use>
|
|
</svg>
|
|
<p>天气</p>
|
|
</li>
|
|
<li>
|
|
<svg class="icon" aria-hidden="true">
|
|
<use xlink:href="#icon-thermometer"></use>
|
|
</svg>
|
|
<p>温度</p>
|
|
</li>
|
|
<li>
|
|
<svg class="icon" aria-hidden="true">
|
|
<use xlink:href="#icon-feng"></use>
|
|
</svg>
|
|
<p>风力</p>
|
|
</li>
|
|
<li>
|
|
<svg class="icon" aria-hidden="true">
|
|
<use xlink:href="#icon-fangxiangpai"></use>
|
|
</svg>
|
|
<p>风向</p>
|
|
</li>
|
|
<li>
|
|
<svg class="icon" aria-hidden="true">
|
|
<use xlink:href="#icon-shidu"></use>
|
|
</svg>
|
|
<p>湿度</p>
|
|
</li>
|
|
<li>
|
|
<svg class="icon" aria-hidden="true">
|
|
<use xlink:href="#icon-taiyangrichu"></use>
|
|
</svg>
|
|
<p>紫外线</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="weather_list">
|
|
<ul>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="popup popup-city">
|
|
<header class="bar bar-nav">
|
|
<a class="icon icon-left pull-left close-popup"></a>
|
|
<h1 class="title">城市管理</h1>
|
|
</header>
|
|
<div class="content address">
|
|
<div class="list-block">
|
|
<ul>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel-overlay"></div>
|
|
<!-- Left Panel with Reveal effect -->
|
|
<div class="panel back-fff panel-left panel-reveal">
|
|
<div class="content">
|
|
<div class="search">
|
|
<input type="text" placeholder="请输入搜索城市">
|
|
</div>
|
|
<div class="search_tips"></div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
|
|
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
|
|
<script src="./js/index.js"></script>
|
|
<script>
|
|
var weather = new _weather();
|
|
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html> |