diff --git a/t/css/main.css b/t/css/main.css index b751a1a..487d919 100644 --- a/t/css/main.css +++ b/t/css/main.css @@ -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; +} + diff --git a/t/html/index.html b/t/html/index.html index f7ed211..66fa37d 100644 --- a/t/html/index.html +++ b/t/html/index.html @@ -2,7 +2,7 @@ - + 天天爱搜索 @@ -24,12 +24,13 @@ 电影 -
+
+ \ No newline at end of file diff --git a/t/html/view/book_detail.html b/t/html/view/book_detail.html new file mode 100644 index 0000000..c5a8df7 --- /dev/null +++ b/t/html/view/book_detail.html @@ -0,0 +1,49 @@ + +
+
+
+
+ +
+
+
+ 书名：{{data.title}} +
+
+ 作者：{{data.author[0]}} +
+
+ 出版社：{{data.publisher}} +
+
+ 价格：{{data.price}} +
+
+ 页码：{{data.pages}}页 +
+
+
+ +
+
+
+ 书籍简介 +
+ + {{data.summary}} + +
+ +
+
作者简介
+ + {{data.author_intro}} + +
+
+
+
+
+ + + diff --git a/t/html/view/book_list.html b/t/html/view/book_list.html new file mode 100644 index 0000000..ad68cc0 --- /dev/null +++ b/t/html/view/book_list.html @@ -0,0 +1,35 @@ + +
+
+
+ +
+ +
+
+
+ {{data.origin_title}} +
+
+ {{data.author}} {{data.publisher}} +
+
+ + {{data.price}} + + 元 +
+
+
+ + {{data.pages}}页 + +
+ +
+
+
+
+ + + diff --git a/t/lib/config.js b/t/lib/config.js new file mode 100644 index 0000000..7dd47aa --- /dev/null +++ b/t/lib/config.js @@ -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); + diff --git a/t/lib/index.js b/t/lib/index.js index 9af8900..e758db7 100644 --- a/t/lib/index.js +++ b/t/lib/index.js @@ -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; + }; +});