mirror of
https://github.com/wu736139669/vczero.github.io.git
synced 2026-08-05 06:23:38 +00:00
add search
This commit is contained in:
wlh
+31
-8
@@ -5,13 +5,17 @@ body{
|
||||
font-family:"微软雅黑";
|
||||
}
|
||||
|
||||
|
||||
input{
|
||||
-webkit-appearance:none;
|
||||
outline:none
|
||||
outline:none;
|
||||
border-radius:0;
|
||||
}
|
||||
|
||||
|
||||
a{
|
||||
color: #525252;
|
||||
}
|
||||
|
||||
header div:nth-child(1){
|
||||
position: absolute;
|
||||
left:3px;
|
||||
@@ -39,6 +43,7 @@ header div:nth-child(2){
|
||||
width:50px;
|
||||
height:43px;
|
||||
border:0;
|
||||
margin-left: 2px;
|
||||
background-color:#0091FF;
|
||||
border-left:0;
|
||||
border:0;
|
||||
@@ -56,22 +61,29 @@ footer{
|
||||
height:40px;
|
||||
line-height:40px;
|
||||
text-align:center;
|
||||
color:#2BB2A3;
|
||||
/*color:#2BB2A3;*/
|
||||
color: #FFF;
|
||||
border-top: 1px solid #DDD8CE;
|
||||
background-color:#F0EFED;
|
||||
/*background-color:#F0EFED;*/
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
footer div:nth-child(1){
|
||||
footer a{
|
||||
cursor: pointer;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
footer a:nth-child(1){
|
||||
width: 33%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
footer div:nth-child(2){
|
||||
footer a:nth-child(2){
|
||||
width: 33%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
footer div:nth-child(3){
|
||||
footer a:nth-child(3){
|
||||
width: 33%;
|
||||
float: right;
|
||||
}
|
||||
@@ -92,6 +104,10 @@ section{
|
||||
border-bottom: 1px solid #A8A8A8;
|
||||
}
|
||||
|
||||
section .list_item:last-child{
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.list_img{
|
||||
width:104px;
|
||||
height: 144px;
|
||||
@@ -119,18 +135,21 @@ section{
|
||||
.list_author{
|
||||
color:#666666;
|
||||
margin-left:10px;
|
||||
height: 64px;
|
||||
line-height:17px;
|
||||
height: 51px;
|
||||
width:120px;
|
||||
}
|
||||
|
||||
.overflow{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.fl{float: left;}
|
||||
.fr{float: right;}
|
||||
|
||||
.list_bookprice{
|
||||
margin-top: 20px;
|
||||
margin-left:5px;
|
||||
color:#2BB2A3;
|
||||
}
|
||||
@@ -144,6 +163,10 @@ section{
|
||||
top:120px;
|
||||
}
|
||||
|
||||
.list_bookname_a{
|
||||
height:150px;display:block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
+4
-32
@@ -16,40 +16,12 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section ng-controller="BookListController">
|
||||
|
||||
<div class="list_item" ng-repeat="data in list">
|
||||
<div class="list_img overflow fl">
|
||||
<img class="list_img" ng-src="{{data.image}}"/>
|
||||
</div>
|
||||
<div class="list_content overflow fl">
|
||||
<div class="list_bookname overflow">
|
||||
{{data.origin_title}}
|
||||
</div>
|
||||
<div class="list_author overflow">
|
||||
{{data.author}} {{data.publisher}}
|
||||
</div>
|
||||
<div class="list_bookprice">
|
||||
<span class="list_price_num">
|
||||
{{data.price}}
|
||||
</span>
|
||||
<span>元</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list_other overflow fr">
|
||||
<span>
|
||||
{{data.pages}}页
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height: 55px;"></div>
|
||||
</section>
|
||||
<div ng-view></div>
|
||||
|
||||
<footer>
|
||||
<div>图书</div>
|
||||
<div>音乐</div>
|
||||
<div>电影</div>
|
||||
<a >图书</a>
|
||||
<a>音乐</a>
|
||||
<a>电影</a>
|
||||
</footer>
|
||||
|
||||
<script type="text/javascript" src="../js/angular.js"></script>
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,33 @@
|
||||
|
||||
<section ng-controller="BookListController">
|
||||
<div>
|
||||
<div class="list_item" ng-repeat="data in list">
|
||||
<a class="list_bookname_a" bookname = "{{data.origin_title}}" href="#/list/{{data.origin_title}}">
|
||||
<div class="list_img overflow fl">
|
||||
<img class="list_img" ng-src="{{data.image}}"/>
|
||||
</div>
|
||||
<div class="list_content overflow fl">
|
||||
<div class="list_bookname overflow">
|
||||
{{data.origin_title}}
|
||||
</div>
|
||||
<div class="list_author overflow">
|
||||
{{data.author}} {{data.publisher}}
|
||||
</div>
|
||||
<div class="list_bookprice">
|
||||
<span class="list_price_num">
|
||||
{{data.price}}
|
||||
</span>
|
||||
<span>元</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list_other overflow fr">
|
||||
<span>
|
||||
{{data.pages}}页
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:45px;"></div>
|
||||
</section>
|
||||
|
||||
+23
-4
@@ -1,11 +1,30 @@
|
||||
var app = angular.module('app', ['ngRoute']);
|
||||
|
||||
|
||||
var app = angular.module('app', []);
|
||||
app.config(['$routeProvider', function ($routeProvider) {
|
||||
$routeProvider
|
||||
.when('/list', {
|
||||
templateUrl: 'view/list.html',
|
||||
controller: 'BookListController'
|
||||
})
|
||||
.when('/list/book', {
|
||||
templateUrl: 'view/list.html',
|
||||
controller: 'BookListController'
|
||||
})
|
||||
.when('/list/:id', {
|
||||
templateUrl: 'view/detail.html',
|
||||
controller: 'BookListController'
|
||||
})
|
||||
.otherwise({
|
||||
redirectTo: '/',
|
||||
templateUrl: 'view/list.html',
|
||||
controller: 'BookListController'
|
||||
});
|
||||
}]);
|
||||
|
||||
app.controller('BookListController', function($http, $scope){
|
||||
$http.jsonp('https://api.douban.com/v2/book/search?callback=TEST&q=C%E8%AF%AD%E8%A8%80');
|
||||
|
||||
window.TEST = function(data){
|
||||
$http.jsonp('https://api.douban.com/v2/book/search?callback=showList&q=C%E8%AF%AD%E8%A8%80');
|
||||
window.showList = function(data){
|
||||
var list = [];
|
||||
for(var i = 0; i < data.books.length; i++){
|
||||
var book = data.books[i];
|
||||
|
||||
Reference in New Issue
Block a user