hybridstart
Version:
A hybrid application development framework
81 lines (71 loc) • 2.46 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="format-detection" content="telephone=no">
<link href="../../../sdk/ui.css" rel="stylesheet">
<style>
.banner{
overflow: hidden;
position: relative;
background-color: #ccc;
background-position: center;
}
.banner img{
width: 100%;
height: auto;
}
.banner .title{
position: absolute;
z-index: 11;
bottom: 15px;
left: 15px;
font-size: 16px;
font-weight: 400;
line-height: 21px;
width: 90%;
color: white;
}
.banner_title{position: absolute;left: 0;bottom:0;padding:.5em;color:#fff;}
</style>
</head>
<body class="flex-col scroll_cont list">
<div class="banner" id="banner">
<div class="rect-50">
<img class="_full block-holder" src="../../../res/img/placeholder.jpg" />
<textarea template style="display: none">
<img class="_full" src="${banner.cover}" />
<h2 class="banner_title">${banner.title}</h2>
</textarea>
</div>
</div>
<ul class="list" id="list">
<li class="item item-avatar">
<img src="../../../res/img/placeholder.jpg" class="block-holder">
<h2 class="block-holder">holder</h2>
<p class="block-holder">holder</p>
</li>
<li class="item item-avatar">
<img src="../../../res/img/placeholder.jpg" class="block-holder">
<h2 class="block-holder">holder</h2>
<p class="block-holder">holder</p>
</li>
<li class="item item-avatar">
<img src="../../../res/img/placeholder.jpg" class="block-holder">
<h2 class="block-holder">holder</h2>
<p class="block-holder">holder</p>
</li>
<textarea template style="display: none">
<!-- for: ${data} as ${item} -->
<li class="item item-avatar" data-guid="${item.guid}" active>
<img src="${item.cover}">
<h2 class="title">${item.title}</h2>
<p>作者：<span class="author">${item.author}</span> </p>
</li>
<!-- /for -->
</textarea>
</ul>
</body>
<script src="../../../sdk/loader.js" data-script="content"> </script>
</html>