the module of promote was finished

bilibili-api/app/routes/promote.js

@@ -8,7 +8,7 @@ const router = Router()
 router.get('/promote', async (ctx, next) => {
   let response = await axios.get(promote)
   let ad = await axios.get(promoteAd)
-  response.data.ad = ad.data.data
+  response.data.promoteAd = ad.data.data
   ctx.body = response.data
 })
 

src/components/contentRow/BRowHead.vue

@@ -0,0 +1,17 @@
+<template>
+	<div class="b-head">
+		<span class="b-head-i"></span>
+		<span class="b-head-t"></span>
+		<div class="pmt-list"></div>
+	</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="stylus">
+	
+</style>

src/components/promote/BPromote.vue

@@ -1,17 +1,73 @@
 <template>
 	<div class="b_promote">
 		<div class="b-l">
-			
+			<div class="b-head">
+				<span class="b-head-i"></span>
+				<span class="b-head-t">
+					<h2>推广</h2>
+				</span>
+				<div class="pmt-list">
+					<div class="pmt-link">
+						<a href="//www.bilibili.com/blackboard/activity-sharks.html" target="_blank" data-loc-id="1550">最光荣的时刻，就是现在</a>
+					</div>
+				</div>
+			</div>
+			<div class="b-body" v-if="promotelist">
+				<ul class="rm-list">
+					<div>
+						<BPromoteItem v-for="item in promotelist" :promoteItem="item"></BPromoteItem>
+					</div>
+				</ul>
+			</div>
 		</div>
-
 		<div class="b-r">
-			
+			<div class="b-head">
+				<div class="index-online">
+					<span class="web-online">
+						<a href="">
+							在线人数:
+							<em>12123</em>
+						</a>
+					</span>
+					<i class="s-line"></i>
+					<span class="new-video">
+						<a href="">
+							最新投稿:
+							<em>10086</em>
+						</a>
+					</span>
+				</div>
+			</div>
+			<div class="b-body" v-if="promoteAd.length > 0">
+				<div class="index-promote">
+					<div class="pmt-item pmt-mid">
+						<a :href="promoteAd[0].url" data-target-url="" target="_blank">
+							<img :src="promoteAd[0].pic">
+						</a>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
 </template>
 <script>
+import BPromoteItem from 'components/promote/BPromoteItem'
+import { mapGetters } from 'vuex'
 export default {
-	
+	components: {
+		BPromoteItem
+	},
+	computed: {
+		...mapGetters([
+			'requesting',
+			'error',
+			'promotelist',
+			'promoteAd'
+		])
+	},
+	mounted() {
+		this.$store.dispatch('promote')
+	}
 }
 </script>
 
@@ -20,8 +76,107 @@ export default {
 		.b-l
 			float left
 			width 700px
+			.b-head
+				margin 4px 0 6px
+				height 24px
+				white-space nowrap
+				position relative
+				.b-head-i
+					position absolute
+					left 0px
+					top -8px
+					background  url(../../assets/images/icons.png) no-repeat
+					background-position -141px -75px
+					width 40px
+					height 39px
+					display inline-block
+					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
+					h2
+						font-size 24px!important
+						line-height 24px
+						font-weight normal
+				.pmt-list
+					display inline-block
+					vertical-align bottom 
+					margin-left 10px
+					margin-top 10px
+					.pmt-link
+						display inline-block
+						vertical-align top
+						padding 0 10px
+						a
+							display block
+							line-height 16px
+							color #6d757a
+			.b-body
+				margin-right -20px
+				clear both
+				.rm-list
+					padding-top 10px
+					height 150px
+					overflow hidden
+					&:after
+						content ''
+						display block
+						visibility hidden
+						height 0
+						clear both
+						font-size 0
 		.b-r
 			float right 
 			width 260px
 			margin-bottom 50px
+			height 195px
+			min-height 195px
+			.b-head
+				position relative
+				.index-online
+					position relative
+					height 34px
+					padding-top 0 10px 0 10px
+					border-radius 4px
+					text-align center
+					background #e5e9ef
+					white-space nowrap
+					i.s-line
+						display inline-block
+						border-left 1px solid #b8c0cc
+						height 10px
+						line-height 10px
+						margin 12px 15px 0
+						vertical-align top
+					span
+						display inline-block
+						line-height 34px
+						text-align left
+						color #6d757a
+						a
+							color #6d757a
+							em
+								font-style normal
+								font-weight normal
+			.b-body
+				clear both
+				.index-promote
+					width 260px
+					height 150px
+					margin-top 10px
+					a
+						display block
+						width 100%
+						height 100%
+					.pmt-promote, img
+						border-radius 4px
+						width 100%
+						height 100%
+
 </style>

src/components/promote/BPromoteItem.vue

@@ -0,0 +1,92 @@
+<template>
+	<li>
+		<div class="v">
+			<a class="preview cover-preview" :href="promoteItem.url" target="_blank">
+				<div class="border"></div>
+				<img :src="promoteItem.pic">
+
+				<!-- 背景图随鼠标运动变化 -->
+				<div class="back">
+					<div style=""></div>
+				</div>
+				<!-- 进度条 -->
+				<div class="fore">
+					<span data-loading=false></span>
+					<div class="bar">
+						<div style="width: 50%"></div>
+					</div>
+				</div>
+				<!-- 时间 -->
+				<div class="x">
+					<b class="x2">70.41</b>
+				</div>
+				<div class="fake_danmu_gen_shared">弹幕</div>
+			</a>
+			<a href="" target="_blank" title="[帝国的黎明]">
+				<div class="t">{{promoteItem.name}}</div>
+			</a>
+		</div>
+	</li>
+</template>
+
+<script>
+export default {
+	props: {
+		promoteItem: {
+			type: Object
+		}
+	}
+}
+</script>
+
+<style lang="stylus" scoped>
+li
+	float left
+	width 160px
+	margin-bottom 20px
+	margin-right 20px
+	.v
+		position relative
+		width 160px
+		height 148px
+		font-size 12px
+		overflow hidden
+		.preview
+			width 160px
+			height 100px
+			display block
+			overflow hidden
+			text-align center
+			transition .2s all linear
+			box-sizing border-box
+			z-index 0
+			border-radius 4px
+			.boeder
+				position absolute
+				width 158px
+				height 98px
+				border 1px solid #e5e9ef
+				top 0px
+				left 0px
+				z-index 1
+				transition .2s all linear
+			img
+				width 100%
+				height 100%
+				display block
+				margin 0 auto
+				outline 0
+		.t
+			height 40px
+			margin-bottom 8px
+			padding-top 8px
+			line-height 20px
+			transition .2s all linear
+			color #222
+			word-wrap break-word
+			word-break break-all
+			overflow hidden
+			text-align left
+		&:hover .t
+			color #00a1d6
+</style>

src/store/modules/promoteStore.js

@@ -2,11 +2,15 @@ import { promoteApi } from 'api'
 import * as TYPE from '../actionType/promoteType'
 
 const state = {
-	promote: {}
+	promote: {},
+	promotelist: [],
+	promoteAd: []
 }
 
 const getters = {
-	promote: state => state.promotelist
+	promote: state => state.promote,
+	promotelist: state => state.promotelist,
+	promoteAd: state => state.promoteAd
 }
 
 const actions = {
@@ -29,6 +33,8 @@ const mutations = {
 	},
 	[TYPE.PROMOTE_LIST_SUCCESS] (state, response) {
 		state.promote = response
+		state.promotelist = response.data
+		state.promoteAd = response.promoteAd
 	},
 	[TYPE.PROMOTE_LIST_FAILURE] (state) {