Hello world.

components/BookCard.vue

 <template name="BookCard">
-	<view>
-		<text>这是一段测试文字</text>
+	<view class="CardContent">
+		<view class="BookName">{{BookName}}</view>
+		<DivLine></DivLine>
+		<view class="BookContent">
+			<image class="BookPic" mode="aspectFit" :src="BookPic"></image>
+			<view>{{BookContent}}</view>
+		</view>
 	</view>
 </template>
 
 <script>
+	import DivLine from "./DivLine.vue"
 	export default {
-		name:"BookCard",
-		data() {
-			return {
-				
-			};
+		name: "BookCard",
+		props: {
+			BookName: {
+				type: String,
+				default: "书名"
+			},
+			BookContent: {
+				type: String,
+				default: "这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气！新书等级制度：斗者，斗师，大斗师，斗灵，斗王，斗皇，斗宗，斗尊，斗圣，斗帝。"
+			},
+			BookPic: {
+				type: String,
+				default: "/static/logo.png"
+			}
+		},
+		components: {
+			DivLine
 		}
 	}
 </script>
 
-<style>
+<style scoped>
+	.CardContent {
+		/*背景颜色*/
+		background: #007AFF;
+		/*圆角设置*/
+		border-radius: 15upx;
+		/*边框宽度*/
+		/*padding: 5upx;*/
+		/*宽度设置*/
+		width: 95%;
+		/*背景颜色*/
+		display: flex;
+		flex-direction: column;
+	}
+
+	.BookName,
+	.BookContent,
+	.BookPic {
+		margin: 5upx 5upx 5upx 5upx;
+	}
 
+	.BookContent {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.BookPic {
+		min-width: 33%;
+		max-width: 40%;
+		max-height: 250upx;
+	}
 </style>

components/DivLine.vue

+<template name="DivLine">
+	<view class="division">
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"DivLine"
+	}
+</script>
+
+<style scoped>
+	.division {
+		width: 100%;
+		height: 5upx;
+		margin-top: 10upx;
+		margin-bottom: 10upx;
+		background-color: #4CD964;
+	}
+</style>

pages.json

@@ -12,5 +12,59 @@
 		"navigationBarTitleText": "Reader",
 		"navigationBarBackgroundColor": "#5E00FF",
 		"backgroundColor": "#5E00FF"
+	},
+
+	"tabBar": {
+		"color": "#cdcdcd",
+		"selectedColor": "#39cffc",
+		"borderStyle": "black",
+		"backgroundColor": "#ffffff",
+		"list": [{
+				"pagePath": "pages/index/index",
+				"iconPath": "static/logo.png",
+				"selectedIconPath": "static/logo.png",
+				"text": "首页"
+			}, {
+				"pagePath": "pages/find/find",
+				"iconPath": "static/logo.png",
+				"selectedIconPath": "static/logo.png",
+				"text": "发现"
+			},
+			{
+				"pagePath": "pages/nav/nav",
+				"iconPath": "static/logo.png",
+				"selectedIconPath": "static/logo.png",
+				"text": "导航"
+			}, {
+				"pagePath": "pages/person/person",
+				"iconPath": "static/logo.png",
+				"selectedIconPath": "static/logo.png",
+				"text": "我的"
+			}
+		]
+	},
+	"condition": { //模式配置，仅开发期间生效
+		"current": 1, //当前激活的模式（list 的索引项）
+		"list": [{
+				"name": "首页", //模式名称
+				"path": "pages/index/index", //启动页面，必选
+				"query": "" //启动参数，在页面的onLoad函数里面得到。uid=100&t=1535987051
+			},
+			{
+				"name": "发现", //模式名称
+				"path": "pages/index/index", //启动页面，必选
+				"query": "" //启动参数，在页面的onLoad函数里面得到。
+			},
+			{
+				"name": "导航", //模式名称
+				"path": "pages/index/index", //启动页面，必选
+				"query": "" //启动参数，在页面的onLoad函数里面得到。uid=100&t=1535987051
+			},
+			{
+				"name": "我的", //模式名称
+				"path": "pages/index/index", //启动页面，必选
+				"query": "" //启动参数，在页面的onLoad函数里面得到。
+			}
+		]
 	}
 }

pages/index/index.vue

@@ -4,7 +4,7 @@
 		<view class="text-area">
 			<text class="title">{{title}}</text>
 		</view>
-		<BookCard></BookCard>
+		<BookCard :BookName="BookName"></BookCard>
 	</view>
 </template>
 
@@ -16,6 +16,7 @@
 		},
 		data() {
 			return {
+				BookName: "这是一段测试书名",
 				title: 'Hello'
 			}
 		},
@@ -54,4 +55,9 @@
 		font-size: 36rpx;
 		color: #8f8f94;
 	}
+	
+		
+	BookCard{
+		width: 100%;
+	}
 </style>