1.搭建其他目录

2.完成首页布局及css

.gitignore

@@ -0,0 +1 @@
+/unpackage

App.vue

@@ -14,4 +14,8 @@
 
 <style>
 	/*每个页面公共css */
+	page {
+		height: 100%;
+		background: #eee;
+	}
 </style>

pages.json

@@ -3,14 +3,45 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "uni-app"
+				"navigationBarTitleText": "首页"
+			}
+		},
+		{
+			"path": "pages/selfCenter/index",
+			"style": {
+				"navigationBarTitleText": "个人中心"
+			}
+		},
+		{
+			"path": "pages/auth/index",
+			"style": {
+				"navigationBarTitleText": "授权页面"
 			}
 		}
 	],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
+		"navigationBarTitleText": "分销助手",
 		"navigationBarBackgroundColor": "#F8F8F8",
 		"backgroundColor": "#F8F8F8"
+	},
+	"tabBar": {
+		"color": "#d8d8d8",
+		"selectedColor": "#4a4a4a",
+		"borderStyle": "white",
+		"backgroundColor": "#FFFFFF",
+		"list": [{
+				"pagePath": "pages/index/index",
+				"iconPath": "/static/tabbar/house-pic-nor.png",
+				"selectedIconPath": "/static/tabbar/house-pic-nor.png",
+				"text": "首页"
+			},
+			{
+				"pagePath": "pages/selfCenter/index",
+				"iconPath": "/static/tabbar/use-pic-nor.png",
+				"selectedIconPath": "/static/tabbar/use-pic-active.png",
+				"text": "个人中心"
+			}
+		]
 	}
 }

pages/auth/index.vue

@@ -0,0 +1,52 @@
+<template>
+	<view class="content">
+		<image class="logo" src="/static/logo.png"></image>
+		<view class="text-area">
+			<text class="title">{{title}}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				title: 'Hello'
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style>
+	.content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.logo {
+		height: 200upx;
+		width: 200upx;
+		margin-top: 200upx;
+		margin-left: auto;
+		margin-right: auto;
+		margin-bottom: 50upx;
+	}
+
+	.text-area {
+		display: flex;
+		justify-content: center;
+	}
+
+	.title {
+		font-size: 36upx;
+		color: #8f8f94;
+	}
+</style>

pages/index/index.vue

@@ -1,9 +1,39 @@
 <template>
 	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
+		<image class="logo" src="/static/post-bg.png"></image>
+		<view class="share-box">
+			<view>分销商分享给好友，好友购买产品成功后即可获</view>
+			<view>得分享奖励</view>
+			<view>单笔最高可赚￥200.00</view>
+			<view>快去分享吧</view>
+			<button type="default">分享</button>
 		</view>
+		
+		<view class="share-box" style="height: 200upx;margin-top: 2%;">
+			<view>长按复制框内整段文字，打开 [手淘] 即可购买</view>
+			<view>￥kSfsDfrtrEjt￥</view>
+			<button type="default">一键复制</button>
+		</view>
+		
+		<view class="product-title">推荐产品</view>
+	   
+		<view class="recommend-box">
+			<view class="product-box">
+				<image src="/static/bed-bg.png"></image>
+				<view class="detail-box">
+					<view>甜蜜瑞士系列床垫 卧室独立袋弹簧 护脊静音软硬适…</view>
+					<view style="color: #999;">￥11999</view>
+				</view>
+			</view>
+			<view class="product-box">
+				<image src="/static/bed2-bg.png"></image>
+				<view class="detail-box">
+					<view>甜蜜瑞士系列床垫 卧室独立袋弹簧 护脊静音软硬适…</view>
+					<view style="color: #999;">￥13999</view>
+				</view>
+			</view>
+		</view>
+		
 	</view>
 </template>
 
@@ -32,21 +62,67 @@
 	}
 
 	.logo {
-		height: 200upx;
-		width: 200upx;
-		margin-top: 200upx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50upx;
+		height: 400px;
+		width: 100%;
+		margin-bottom: 30upx;
 	}
 
-	.text-area {
+	.share-box {
 		display: flex;
+		flex-direction: column;
 		justify-content: center;
+		align-items: center;
+		width: 80%;
+		height: 300upx;
+		border: 1px dashed red;
+		background: #fff;
+		font-size: 28rpx;
+		padding: 5px;
+	}
+	.share-box button {
+		width: 300rpx;
+		height: 70rpx;
+		line-height: 70rpx;
+		margin-top: 2%;
+		background-color: #27BCEF;
+		color: #fff;
 	}
 
 	.title {
 		font-size: 36upx;
 		color: #8f8f94;
 	}
+	.product-title {
+		margin-left: -75%;
+		margin-top: 5%;
+		margin-bottom: 1%;
+	}
+	.recommend-box {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+	.product-box {
+		width: 90%;
+		height: 200rpx;
+		padding: 20rpx;
+		display: flex;
+		align-items: center;
+		background-color: #fff;
+		border-radius:10px;
+		margin-bottom: 2%;
+	}
+	.product-box image {
+		width: 420rpx;
+		height: 180rpx;
+		margin-right: 5%;
+	}
+	.detail-box {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		font-size: 30rpx;
+		height: 190rpx;
+	}
 </style>

pages/selfCenter/index.vue

@@ -0,0 +1,52 @@
+<template>
+	<view class="content">
+		<image class="logo" src="/static/logo.png"></image>
+		<view class="text-area">
+			<text class="title">{{title}}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				title: 'selfCenter'
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style>
+	.content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.logo {
+		height: 200upx;
+		width: 200upx;
+		margin-top: 200upx;
+		margin-left: auto;
+		margin-right: auto;
+		margin-bottom: 50upx;
+	}
+
+	.text-area {
+		display: flex;
+		justify-content: center;
+	}
+
+	.title {
+		font-size: 36upx;
+		color: #8f8f94;
+	}
+</style>