live head and live api

bilibili-api/app/routes/live.js

@@ -1,12 +1,13 @@
 import Router from 'koa-router'
 import axios from 'axios'
-import { live } from './urlConfig'
+import { liveXhr } from './urlConfig'
 
 const router = Router()
 
 // 直播
 router.get('/live', async (ctx, next) => {
-  let response = await axios.get(live)
+	console.log("789asdkjashdkjhaskjdh")
+  let response = await axios.get(liveXhr)
   ctx.body = response.data
 })
 

src/api/index.js

@@ -28,3 +28,12 @@ export const promoteApi = {
 	}
 }
 
+// 直播
+export const liveApi = {
+	live() {
+		return axios.get(url.live).then((response) => {
+			return response.data
+		})
+	}
+}
+

src/api/urlConfig.js

@@ -8,4 +8,7 @@ export const ranking3 = serverRoot + '/ranking3'
 
 // 推广
 export const promote = serverRoot + '/promote'
-export const promoteAd = serverRoot + '/promoteAd'
+
+// 直播
+export const live = serverRoot + '/live'
+

src/components/content/BContent.vue

@@ -16,7 +16,7 @@
 		</div>
 		<!-- 直播 -->
 		<div class="container-row">
-			
+			<BLive></BLive>
 		</div>
 		<!-- 各分类具体内容 -->
 		<div>
@@ -29,11 +29,13 @@
 import Banner from 'components/banner/Banner'
 import BContentTop from 'components/contentTop/BContentTop'
 import BPromote from 'components/promote/BPromote'
+import BLive from 'components/live/BLive'
 export default {
 	components: {
 		Banner,
 		BContentTop,
-		BPromote
+		BPromote,
+		BLive
 	}
 }
 </script>
@@ -41,12 +43,27 @@ export default {
 <style lang="stylus" scoped>
 	.content
 		zoom 1
+		.container-top-wrapper
+			&:after
+				content ''
+				display block
+				visibility hidden
+				height 0
+				clear both
+				font-size 0
 		.container-top
 			padding 0
 			margin-bottom 20px
 			margin 0 auto
 			zoom 1
 			width 980px
+			&:after
+				content ''
+				display block
+				visibility hidden
+				height 0
+				clear both
+				font-size 0
 			.b-l
 				float left
 				width 440px
@@ -58,4 +75,11 @@ export default {
 			margin 0 auto
 			zoom 1
 			width 980px
+			&:after
+				content ''
+				display block
+				visibility hidden
+				height 0
+				clear both
+				font-size 0
 </style>

src/components/live/BLive.vue

@@ -0,0 +1,161 @@
+<template>
+	<div class="b-live">
+		<div class="b-l">
+			<div class="b-head">
+				<div class="left">
+					<span class="b-head-i"></span>
+					<span class="b-head-t">
+						<a href="//live.bilibili.com/" target="_blank">
+							<h2>正在直播</h2>
+						</a>
+					</span>
+					<span class="b-head-s">
+						当前共有<em>6647</em>个在线直播
+					</span>
+				</div>
+				<div class="right">
+					<div class="b-link-more">
+						<a href="//live.bilibili.com" target="_blank">更多<i class="b-icon b-icon-arrow-r"></i></a>
+					</div>
+				</div>
+				<div class="read-push">
+					<span class="icon-refresh"></span>
+					<span class="info">
+						<b>49834</b>
+						<em>条新动态</em>
+					</span>
+				</div>
+			</div>
+			<div class="b-body"></div>
+		</div>
+		<div class="b-r"></div>
+	</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="stylus">
+	.b-live
+		.b-l
+			float left
+			width 700px
+			.b-head
+				position relative
+				height 24px
+				white-space nowrap
+				.left
+					float left
+					.b-head-i
+						position absolute
+						left 0px
+						top -8px
+						width 40px
+						height 39px
+						display inline-block
+						background url(../../assets/images/icons.png) no-repeat
+						background-position -141px -652px
+						vertical-align middle
+						margin-right 10px
+					.b-head-t
+						margin-left 46px
+						float left
+						vertical-align middle
+						display inline-block
+						font-size 18px
+						line-height 24px
+						color #222 
+						a
+							color #222
+						h2
+							font-size 24px!important
+							line-height 24px
+							font-weight normal
+					.b-head-s
+						float left
+						margin-top 10px
+						color #99a2aa
+						margin-left 20px
+						display inline-block
+						vertical-align bottom
+						font-family "Lucida Console",Monaco,monospace
+						em
+							color #00a1d6
+							font-style normal
+							font-weight normal
+							padding 0
+							margin 0
+				.right
+					float right
+					.b-link-more
+						float right
+						text-align center
+						margin-left 10px
+						a
+							display block
+							width 52px
+							height 22px
+							line-height 22px
+							background-color #fff
+							border 1px solid #ccd0d7
+							color #555
+							border-radius 4px
+							.b-icon-arrow-r
+								display inline-block
+								vertical-align middle
+								background  url(../../assets/images/icons.png) no-repeat
+								width 6px
+								height 12px
+								margin -2px 0 0 5px
+								background-position -478px -218px
+				.read-push
+					float right
+					cursor pointer
+					background-color #fff
+					border 1px solid #ccd0d7
+					border-radius 4px
+					height 22px
+					padding 0 10px
+					&:after
+						content ''
+						display block
+						visibility hidden
+						height 0
+						clear both
+						font-size 0
+					.icon-refresh
+						background  url(../../assets/images/icons.png) -475px -89px no-repeat
+						display inline-block
+						width 12px
+						height 13px
+						vertical-align top
+						transition .2s
+						margin-top 5px
+					.info
+						display inline-block
+						vertical-align top
+						line-height 22px
+						margin-left 5px
+						b
+							font-weight bold
+						em
+							font-style normal
+							font-weight normal
+		.b-r
+			float right
+			width 260px
+			margin-bottom 50px
+			min-height 360px
+			height 360px
+			overflow hidden
+		&:after
+			content ''
+			display block
+			visibility hidden
+			height 0
+			clear both
+			font-size 0
+</style>

src/components/live/BLiveItem.vue

@@ -0,0 +1,15 @@
+<template>
+	<div>
+		
+	</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="stylus">
+	
+</style>

src/components/live/BLiveRank.vue

@@ -0,0 +1,15 @@
+<template>
+	<div>
+		
+	</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="stylus">
+	
+</style>

src/components/live/BLiveRankItem.vue

@@ -0,0 +1,15 @@
+<template>
+	<div>
+		
+	</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="stylus">
+	
+</style>

src/store/actionType/liveType.js

@@ -0,0 +1,3 @@
+export const LIVE_REQUEST = 'LIVE_REQUEST'
+export const LIVE_SUCCESS = 'LIVE_SUCCESS'
+export const LIVE_FAILURE = 'LIVE_FAILURE'

src/store/index.js

@@ -7,6 +7,7 @@ Vue.use(Vuex)
 import bannerStore from './modules/bannerStore'
 import rankStore from './modules/rankStore'
 import promoteStore from './modules/promoteStore'
+import liveStore from './modules/liveStore'
 
 
 const state = {
@@ -25,6 +26,7 @@ export default new Vuex.Store({
 	modules: {
 		bannerStore,
 		rankStore,
-		promoteStore
+		promoteStore,
+		liveStore
 	}
 })

src/store/modules/liveStore.js

@@ -0,0 +1,54 @@
+import { liveApi } from 'api'
+import * as TYPE from '../actionType/liveType'
+
+const state = {
+	online_total: 0, //在线直播数
+	dynamic: 0, // 动态数
+	recommend: [], // 推荐列表
+	ranking: [], //排行
+	preview: [], // 为你推荐预览
+	recommendAnchor: [] //为你推荐
+}
+
+const getters = {
+	online_total: state => state.bannerlist,
+	dynamic: state => state.dynamic,
+	recommend: state => state.recommend,
+	ranking: state => state.ranking,
+	preview: state => state.preview,
+	recommendAnchor: state => state.recommendAnchor
+}
+
+const actions = {
+	live({commit, state, rootState}) {
+		rootState.requesting = true
+		commit(TYPE.LIVE_REQUEST)
+		liveApi.live().then((response) => {
+			rootState.requesting = false
+			commit(TYPE.LIVE_SUCCESS, response)
+		}, (error) => {
+			rootState.requesting = false
+			commit(TYPE.LIVE_FAILURE)
+		})
+	}
+}
+
+const mutations = {
+	[TYPE.LIVE_REQUEST] (state) {
+
+	},
+	[TYPE.LIVE_SUCCESS] (state, response) {
+		state.online_total = 0
+		state.dynamic = 0
+	},
+	[TYPE.LIVE_FAILURE] (state) {
+
+	}
+}
+
+export default {
+	state,
+	getters,
+	actions,
+	mutations
+}