bangumi page && css concat

WhiteBlue · Nov 13, 2016 · bf5d093 · bf5d093
1 parent a49371e
commit bf5d093
Show file tree

Hide file tree

Showing 14 changed files with 723 additions and 141 deletions.
diff --git a/demo/bangumi_index.html b/demo/bangumi_index.html
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+
+  <link rel="stylesheet" href="../dist/css/main.css">
+  <link rel="stylesheet" href="../assets/unslider/css/unslider.css">
+
+</head>
+
+<body>
+
+<div id="main-header" class="hidden-background">
+  <div class="main-header-nav">
+    <div class="main-header-image"
+         style="background-image: url('http://i0.hdslb.com/group1/M00/B7/30/oYYBAFcjKTGANfoVAAGAcG7aL64682.jpg');"></div>
+    <div class="header-container needstick">
+      <ul class="main-header-nav-body">
+        <li class="nav-li floatleft now">
+          <a href="#">首页</a>
+        </li>
+
+        <li class="nav-li floatleft">
+          <a href="#">分类</a>
+          <div class="nav-li-list">
+            <a href="#">音乐</a>
+            <a href="#">动画</a>
+          </div>
+        </li>
+
+        <li class="nav-li floatleft">
+          <a href="#">新番</a>
+        </li>
+
+        <li class="nav-li floatleft">
+          <a href="#">移动端</a>
+        </li>
+
+        <li class="nav-li floatleft">
+          <a href="#">项目</a>
+        </li>
+
+        <li class="nav-li floatleft">
+          <a href="#">关于</a>
+        </li>
+
+        <div class="header-search floatright">
+          <form action="#" method="post">
+            <input name="content" placeholder="这里搜索">
+            <input type="submit" value="搜 索" title="搜索" class="btn-search">
+          </form>
+        </div>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<div id="main-container" class="concat">
+
+  <div class="area">
+    <div class="bangumi-banner-block">
+      <div class="bangumi-banner block-banner">
+        <ul>
+          <li>
+            <a href="#" target="_blank">
+              <img src="http://i0.hdslb.com/bfs/archive/0325d5fa3fe3d0f29dd78f1c66b6d73631b08ef5.jpg" />
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="area">
+    <div class="area-inner">
+      <div class="area-banner">
+        <h2>番剧推荐</h2>
+      </div>
+
+      <div class="list-video-block">
+        <div class="video-block floatleft">
+          <a href="#" class="video-block-main">
+            <img src="http://cdn.aixifan.com/dotnet/artemis/u/cms/www/201604/0413024317241glv.jpg"/>
+          </a>
+          <div class="video-block-time">20:04</div>
+          <a href="#" class="video-block-info">
+            标题: 【东方手绘剧场】东方现世幻想侭 -预告-【莳乃汉化组】
+            UP主: 莳乃字幕屋
+          </a>
+          <div class="video-block-info-hidden">
+            <div class="left floatleft">
+              播放: 2333
+            </div>
+            <div class="right floatright">
+              弹幕: 233
+            </div>
+          </div>
+        </div>
+
+        <div class="clear"></div>
+      </div>
+
+    </div>
+  </div>
+
+
+  <div class="area">
+    <div class="area-inner">
+      <div class="area-banner">
+        <h2>番剧列表</h2>
+      </div>
+      <div class="list-bangumi-block">
+        <a href="#">
+        <div class="bangumi_item floatleft">
+          <div class="img-small floatleft">
+            <img src="http://i0.hdslb.com/bfs/bangumi/3c3f4544bb6f8175d24c6022a23fc9bd4bc4ce59.jpg">
+          </div>
+          <div class="info floatleft">
+            <p class="title">乌冬面之国的金色毛球</p>
+            <p class="other">更新到: 第10集</p>
+          </div>
+          <div class="clear"></div>
+        </div>
+        </a>
+        <div class="bangumi_item floatleft hidden">
+          <div class="img-small floatleft">
+            <img src="http://i0.hdslb.com/bfs/bangumi/3c3f4544bb6f8175d24c6022a23fc9bd4bc4ce59.jpg">
+          </div>
+          <div class="info floatleft">
+            <p class="title">乌冬面之国的金色毛球</p>
+            <p class="other">更新到: 第10集</p>
+          </div>
+          <div class="clear"></div>
+        </div>
+        <div class="clear"></div>
+      </div>
+
+      <div class="toggle-btn">
+        <a class="active_toggle" action="hidden" href="javascript:void(0)">显示/隐藏</a>
+      </div>
+
+    </div>
+  </div>
+
+</div>
+
+<script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
+<script type="text/javascript" src="../assets/js/stickup.min.js"></script>
+<script type="text/javascript" src="../assets/js/slider.min.js"></script>
+
+<script type="text/javascript">
+  $(document).ready(function () {
+
+    $('.needstick').stickUp({});
+
+    $('.bangumi-banner').unslider({
+      animation: 'vertical',
+      autoplay: true,
+      arrows: false
+    });
+
+    $('.active_toggle').click(function () {
+      $('.' + $(this).attr('action')).slideToggle();
+    });
+
+  });
+</script>
+
+</body>
+</html>
diff --git a/demo/index.html b/demo/index.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <title>Title</title>
 
-  <link rel="stylesheet" href="../assets/css/main.css">
+  <link rel="stylesheet" href="../dist/css/main.css">
   <link rel="stylesheet" href="../assets/unslider/css/unslider.css">
 
 </head>
@@ -63,7 +63,7 @@
     <div class="area-inner">
       <div class="left-block floatleft">
         <div class="unslider-banner floatleft">
-          <div class="block-banner">
+          <div class="block-banner index-banner">
             <ul>
               <li><a href="/v/ac2718399" target="_blank">
                 <img src="http://cdn.aixifan.com/dotnet/artemis/u/cms/www/201605/051101120guvds4e.jpg"></a></li>
@@ -295,9 +295,10 @@ <h3>音乐</h3>
   </div>
 </div>
 
-<script type="text/javascript" src="../assets/js/jquery.js"></script>
-<script type="text/javascript" src="../assets/js/stickup.js"></script>
-<script type="text/javascript" src="../assets/unslider/js/unslider-min.js"></script>
+<script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
+<script type="text/javascript" src="../assets/js/stickup.min.js"></script>
+<script type="text/javascript" src="../assets/js/slider.min.js"></script>
+
 <script type="text/javascript">
   $(document).ready(function () {
 

diff --git a/gulpfile.babel.js b/gulpfile.babel.js
@@ -11,6 +11,7 @@ import imagemin from 'gulp-imagemin';
 import pngquant from 'imagemin-pngquant';
 import runSequence from 'run-sequence';
 import ghPages from 'gulp-gh-pages';
+import concatCss from 'gulp-concat-css';
 
 const paths = {
   bundle: 'app.js',
@@ -53,6 +54,7 @@ gulp.task('browserify_debug', () => {
 
 gulp.task('styles', () => {
   gulp.src(paths.srcCss)
+    .pipe(concatCss("main.css"))
     .pipe(cleancss({advanced: false}))
     .pipe(gulp.dest(paths.distCss))
 });

diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "babelify": "^7.2.0",
     "browserify": "^13.0.0",
     "gulp": "^3.9.0",
+    "gulp-concat-css": "^2.3.0",
     "gulp-gh-pages": "^0.5.4",
     "gulp-imagemin": "^2.4.0",
     "gulp-rename": "^1.2.2",

diff --git a/src/index.html b/src/index.html
@@ -7,7 +7,6 @@
   <meta name="description" content="BiliBili-html5，视频源解析，纯Html5播放器">
 
   <link rel="stylesheet" href="css/main.css">
-  <link rel="stylesheet" href="css/player.css">
   <link rel="stylesheet" href="css/slider.css">
   <link rel="stylesheet" href="//cdn.bootcss.com/video.js/5.13.0/alt/video-js-cdn.min.css">
 </head>
@@ -34,7 +33,7 @@
         </li>
 
         <li class="nav-li floatleft">
-          <a href="#/sort/13">番剧</a>
+          <a href="#/bangumiindex">番剧</a>
           <div class="nav-li-list">
             <a href="#/sort/33">连载动画</a>
             <a href="#/sort/32">完结动画</a>
@@ -155,17 +154,20 @@
   </div>
 </div>
 
-<script src="js/app.js"></script>
 
 <!--other depends-->
 <script src="//cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
 <script src="js/stickup.min.js"></script>
 <script src="js/slider.min.js"></script>
 
+<script src="js/app.js"></script>
+
+
 <script>
   $(document).ready(function () {
     $('.needstick').stickUp({});
 
+
     $('#search_form').on('submit', function (e) {
       e.preventDefault();
       var content = $(this).children('#search_content').val();

diff --git a/src/js/Config.js b/src/js/Config.js
@@ -1,6 +1,6 @@
 module.exports = {
-  // base_url: "http://localhost:8080/",
-  base_url: "http://api.bilibilih5.club/",
+  base_url: "http://localhost:8080/",
+  // base_url: "http://api.bilibilih5.club/",
   routes: {
     INDEX_RANK: "top/",
     TOP_RANK: "toprank",
@@ -9,6 +9,8 @@ module.exports = {
     VIDEO_URL: "video/",
     SORT_VIDEOS: "sort/",
     BANGUMI_INFO: "bangumiinfo/",
+    BANGUMI_INDEX: "bangumiindex",
+    BANGUMI_LIST: "bangumi",
     SEARCH: "search",
     SEARCH_BY_TYPE: "searchbytype"
   },

diff --git a/src/js/Index.js b/src/js/Index.js
@@ -6,7 +6,9 @@ var App = require('./App');
 var ViewPage = require('./page/ViewPage');
 var SortPage = require('./page/SortPage');
 var SearchPage = require('./page/SearchPage');
-var BangumiPage = require('./page/BangumiPage');
+var BangumiInfoPage = require('./page/BangumiInfoPage');
+var BangumiIndexPage = require('./page/BangumiIndexPage');
+
 
 
 render(
@@ -15,7 +17,8 @@ render(
       <Route path="/sort/:tid" component={SortPage}/>
       <Route path="/view/:aid" component={ViewPage}/>
       <Route path="/search/:keyword" component={SearchPage}/>
-      <Route path="/bangumi/:seasonId" component={BangumiPage}/>
+      <Route path="/bangumi/:seasonId" component={BangumiInfoPage}/>
+      <Route path="/bangumiindex" component={BangumiIndexPage}/>
     </Route>
   </Router>), document.getElementById('root')
 );