This commit is contained in:
wlh
2014-12-05 00:03:26 +08:00
parent 078c119a15
commit 507c6aa6e2
6 changed files with 170 additions and 17 deletions
+54 -3
View File
@@ -3,6 +3,7 @@ body{
width:100%;
background-color:#FAFBFB;
font-family:"微软雅黑";
min-width:308px;
}
input{
@@ -41,10 +42,9 @@ header div:nth-child(2){
}
#search_btn{
width:50px;
height:42px;
height:46px;
line-height:45px;
text-align:center;
margin-left:3px;
background-color:#0091FF;
border-left:0;
border:0;
@@ -95,7 +95,7 @@ section{
right:5px;
left:5px;
border-top:1px solid #CCCCCC;
background-color:#FFFFFF;
/*background-color:#FFFFFF;*/
font-size:12px;
}
@@ -103,6 +103,8 @@ section{
margin-top:5px;
height:150px;
border-bottom: 1px solid #A8A8A8;
background-color: #FFF;
min-width:290px;
}
section .list_item:last-child{
@@ -168,6 +170,55 @@ section .list_item:last-child{
height:150px;display:block;
}
#loading{
position:absolute;top:170px;left:110px;z-index:2;
}
/* book detail*/
#book_detail_info{
width:100%;min-height:164px;
font-size:14px;
background-color: #FFF;
min-width:308px;
border-bottom: 1px dashed #CCCCCC;
}
.book_detail_pic{
margin-top: 5px;
margin-left:5px;
width:104px;
height:144px;
}
.book_detail_title{
color:#0091FF;
margin-left: 10px;
line-height:23px;
}
.book_detail_sum{
background-color: #FFF;
margin-top:10px;font-size:14px;
border-bottom: 1px dashed #CCCCCC;
}
.book_detail_sum div{
border:1px solid #2BB2A3;
border-radius:2px;
color: #2BB2A3;
width:80px;
height:30px;
text-align: center;
line-height:30px;
}
.book_detail_t_w{
max-width:120px;
height:23px;
line-height:33px;
display: inline-block;
}
+3 -2
View File
@@ -2,7 +2,7 @@
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title>天天爱搜索</title>
<link rel="stylesheet" type="text/css" href="../css/main.css">
</head>
@@ -24,12 +24,13 @@
<a>电影</a>
</footer>
<div style="position:absolute;top:170px;left:110px;z-index:2;">
<div id="loading">
<img src="../imgs/loading.gif" />
</div>
<script type="text/javascript" src="../js/angular.js"></script>
<script type="text/javascript" src="../js/angular-route.js" ></script>
<script type="text/javascript" src="../lib/config.js"></script>
<script type="text/javascript" src="../lib/index.js"></script>
</body>
</html>
+49
View File
@@ -0,0 +1,49 @@
<section ng-controller="BookDetailController">
<div>
<div id="book_detail_info">
<div class="fl book_detail_pic">
<img class="book_detail_pic" ng-src="{{data.image}}"/>
</div>
<div class="fl">
<div>
<span class="book_detail_title">书名:</span><span class="overflow book_detail_t_w">{{data.title}}</span>
</div>
<div>
<span class="book_detail_title">作者:</span><span class="overflow book_detail_t_w">{{data.author[0]}}</span>
</div>
<div>
<span class="book_detail_title">出版社:</span><span class="overflow book_detail_t_w">{{data.publisher}}</span>
</div>
<div>
<span class="book_detail_title">价格:</span><span class="overflow book_detail_t_w">{{data.price}}</span>
</div>
<div>
<span class="book_detail_title">页码:</span><span class="overflow book_detail_t_w">{{data.pages}}页</span>
</div>
</div>
</div>
<div>
<div class="book_detail_sum">
<div>
书籍简介
</div>
<span>
{{data.summary}}
</span>
</div>
<div class="book_detail_sum">
<div>作者简介</div>
<span>
{{data.author_intro}}
</span>
</div>
</div>
</div>
<div style="height:45px;"></div>
</section>
+35
View File
@@ -0,0 +1,35 @@
<section ng-controller="BookListController">
<div>
<div class="list_item" ng-repeat="data in list">
<a class="list_bookname_a" href="#/list/book/{{data.id}}">
<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>
+9
View File
@@ -0,0 +1,9 @@
(function(global){
var config = {
book_search: 'https://api.douban.com/v2/book/search',
book_search_id: 'https://api.douban.com/v2/book/'
};
global.CONFIG_SERVER = config;
})(window);
+20 -12
View File
@@ -3,34 +3,34 @@ var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/list', {
templateUrl: 'view/list.html',
controller: 'BookListController'
})
.when('/list/book', {
templateUrl: 'view/list.html',
templateUrl: 'view/book_list.html',
controller: 'BookListController'
})
.when('/list/:id', {
templateUrl: 'view/detail.html',
controller: 'BookListController'
.when('/list/book/:id', {
templateUrl: 'view/book_detail.html',
controller: 'BookDetailController'
})
.otherwise({
redirectTo: '/',
templateUrl: 'view/list.html',
templateUrl: 'view/book_list.html',
controller: 'BookListController'
});
}]);
app.controller('BookListController', function($http, $scope){
$http.jsonp('https://api.douban.com/v2/book/search?callback=showList&q=C%E8%AF%AD%E8%A8%80');
window.showList = function(data){
$http.jsonp(window.CONFIG_SERVER.book_search + '?callback=showBookList&count=10&q=C%E8%AF%AD%E8%A8%80');
window.showBookList = function(data){
if(data.books){
document.getElementById('loading').style.visibility = 'hidden';
}
var list = [];
for(var i = 0; i < data.books.length; i++){
var book = data.books[i];
var item = {
id: book.id,
image: book.image,
origin_title: book.origin_title || '书名未共享',
origin_title: book.title || '书名未共享',
author: book.author[0] || '作者未知',
publisher: book.publisher || '出版社未知',
price: book.price.split('.')[0] || '未知',
@@ -41,3 +41,11 @@ app.controller('BookListController', function($http, $scope){
$scope.list = list;
}
});
app.controller('BookDetailController', function($http, $scope, $location){
var id = $location.path().split('/book/')[1] || '';
$http.jsonp(window.CONFIG_SERVER.book_search_id + '' + id + '?callback=showBookDeatil');
window.showBookDeatil = function(data){
$scope.data = data;
};
});