banner

src/App.vue

@@ -2,17 +2,20 @@
   <div id="app">
     <TopContainer></TopContainer>
     <BHeader></BHeader>
+    <Content></Content>
   </div>
 </template>
 
 <script>
 import TopContainer from 'components/common/TopContainer.vue'
 import BHeader from 'components/common/BHeader.vue'
+import Content from 'components/content/Content.vue'
 export default {
   name: 'app',
   components: {
     TopContainer,
-    BHeader
+    BHeader,
+    Content
   }
 }
 </script>

src/components/banner/Banner.vue

@@ -1,10 +1,26 @@
 <template>
-	<div>
-		
+	<div class="banner">
+		<div class="topic-preview-wrapper">
+			<div class="topic-preview-list-wrapper">
+				<ul class="topic-preview" style="width: 500%;"> 
+					
+				</ul>
+			</div>
+			<a class="more-topic" href="/topic/integrated-1.html" target="_blank">更多
+				<i class="b-icon b-icon-arrow-r"></i>
+			</a>
+			<div class="s-bottom"></div>
+		</div>
 	</div>
 </template>
 <script>
 export default {
 	
 }
-</script>
+</script>
+
+<style lang="stylus" scoped="">
+	.banner
+		height 220px
+		background-color red
+</style>

src/components/content/Content.vue

@@ -1,11 +1,43 @@
 <template>
 	<div class="content">
-		
+		<div class="container-top-wrapper">
+			<div class="container-top">
+				<div class="b-l">
+					<Banner></Banner>
+				</div>
+				<div class="b-r">
+					
+				</div>
+			</div>
+		</div>
+		<div class="container-row"></div>
 	</div>
 </template>
 
 <script>
+import Banner from 'components/banner/Banner'
 export default {
-	
+	components: {
+		Banner
+	}
 }
-</script>
+</script>
+
+<style lang="stylus" scoped="">
+	.content
+		zoom 1
+		.container-top
+			padding 0
+			margin-bottom 20px
+			margin 0 auto
+			zoom 1
+			width 980px
+			.b-l
+				float left
+				width 440px
+			.b-r
+				float right
+				width 540px
+				height 220px
+				background-color green
+</style>