登录页面；

pages.json

@@ -220,6 +220,14 @@
 			"style": {
 				"navigationBarTitleText": "钱包设置"
 			}
+		},
+		{
+			"path" : "pages/self/login",
+			"style" : 
+			{
+				"navigationBarTitleText" : "登录",
+				"backgroundColor": "#fff"
+			}
 		}
 	],
 	"globalStyle": {

pages/appCenter/index.vue

@@ -1,21 +1,130 @@
 <template>
 	<view class="page-wrap">
-		<view class="app-item">
-			<view class="icon">
-				<image src="../../static/svg/app_1.svg"></image>
+		<view class="app-item" v-for="(item, index) in navList" :key="index">
+			<view :class="'icon icon-'+item.value">
+				<image :src="`../../static/svg/app_${item.value}.svg`"></image>
 			</view>
-			<view class="text">记账报税</view>
+			<view class="text">{{item.label}}</view>
 		</view>
 	</view>
 </template>
 
 <script>
+export default {
+	components: {},
+	data() {
+		return {
+			navList: [
+				{
+					label: '记账报税',
+					value: 1
+				},
+				{
+					label: '税控托管',
+					value: 2
+				},
+				{
+					label: '社保代缴',
+					value: 3
+				},
+				{
+					label: '其他服务',
+					value: 4
+				},
+				{
+					label: '我的合同',
+					value: 5
+				},
+				{
+					label: '财务管家',
+					value: 6
+				},
+				{
+					label: '设置',
+					value: 7
+				},
+				{
+					label: '我的消息',
+					value: 8
+				},
+				{
+					label: '意见反馈',
+					value: 9
+				},
+				{
+					label: '服务电话',
+					value: 10
+				}
+			]
+		};
+	}
+};
 </script>
 
 <style lang="scss" scoped>
-	.page-wrap {
-		min-height: 100%;
-		box-sizing: border-box;
-		background: #fff;
+.page-wrap {
+	min-height: 100%;
+	box-sizing: border-box;
+	background: #fff;
+	display: flex;
+	flex-wrap: wrap;
+	align-content: flex-start;
+	padding: 27.47rpx 13.74rpx;
+	box-sizing: border-box;
+}
+.app-item {
+	flex: 0 0 25%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin-bottom: 27.47rpx;
+	.icon {
+		width: 118.13rpx;
+		height: 118.13rpx;
+		border-radius: 50%;
+		background: #f7f7f7;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		&-1{
+			background: #ff7356;
+		}
+		&-2{
+			background: #06d276;
+		}
+		&-3{
+			background: #52abfd;
+		}
+		&-4{
+			background: #fcb203;
+		}
+		&-5{
+			background: #566c8b;
+		}
+		&-6{
+			background: #4484ae;
+		}
+		&-7{
+			background: #889fff;
+		}
+		&-8{
+			background: #f7922a;
+		}
+		&-9{
+			background: #1ed2c7;
+		}
+		&-10{
+			background: #fcb203;
+		}
+		image {
+			width: 68.68rpx;
+			height: 68.68rpx;
+			color: #fff;
+		}
+	}
+	.text {
+		font-size: 24.73rpx;
+		margin-top: 13.74rpx;
 	}
-</style>
+}
+</style>

pages/self/index.vue

@@ -11,7 +11,7 @@
 			<button v-else class="btn" @click.stop="handleOpenLogin">登录</button>
 		</view>
 		<view class="menu-panel">
-			<view class="item" v-for="(item, index) in manuList" :key="index" @click="handleMenu(item.value)">
+			<view class="item" v-for="(item, index) in menuList" :key="index" @click="handleMenu(item.value)">
 				<image class="icon" :src="`../../static/svg/user_menu_${item.value}.svg`"></image>
 				{{ item.label }}
 				<view class="badge" v-if="item.value === 2">4</view>
@@ -42,7 +42,7 @@ export default {
 	data() {
 		return {
 			userInfo: '',
-			manuList: [
+			menuList: [
 				{
 					label: '我的订单',
 					value: 1
@@ -142,11 +142,14 @@ export default {
 	onShow() {},
 	methods: {
 		handleOpenLogin() {
-			this.userInfo = {
-				name: 'Caocao',
-				company: '天津超易达胜科技',
-				avatar: avatar
-			};
+			// this.userInfo = {
+			// 	name: 'Caocao',
+			// 	company: '天津超易达胜科技',
+			// 	avatar: avatar
+			// };
+			uni.navigateTo({
+				url: 'login'
+			});
 		},
 		handleOpenInfo() {
 			if (!this.userInfo) return;

pages/self/login.vue

@@ -0,0 +1,101 @@
+<template>
+	<view class="page-wrap">
+		<view class="title-row">手机号登录</view>
+		<view class="input-row">
+			<input placeholder-style="color: #ABABAB" class="input" type="number" placeholder="手机号" maxlength="11" />
+		</view>
+		<view class="input-row code-row">
+			<input placeholder-style="color: #ABABAB" class="input" type="number" placeholder="验证码" maxlength="6" />
+			<button class="btn">获取验证码</button>
+		</view>
+		<view class="tips-row">您的手机号将做为登录账号使用并仅用于接收验证码，我们不会在任何地方泄露。</view>
+		<button class="login-btn">登　录</button>
+		<view class="agreement-row">
+			<checkbox checked style="transform:scale(0.6)"/>
+			同意我们的
+			<text class="link">用户协议</text>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {};
+	},
+	methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+.page-wrap {
+	min-height: 100%;
+	box-sizing: border-box;
+	background: #fff;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 109.89rpx;
+	box-sizing: border-box;
+	.title-row {
+		font-size: 38.46rpx;
+		color: #00bcd2;
+		margin-bottom: 41.21rpx;
+	}
+	.input-row {
+		width: 523.35rpx;
+		height: 68.68rpx;
+		font-size: 24.73rpx;
+		border-bottom: 1rpx solid #ababab;
+		box-sizing: border-box;
+		display: flex;
+		margin-bottom: 27.47rpx;
+		.input {
+			width: 100%;
+			height: 100%;
+			padding: 0 27.47rpx;
+			box-sizing: border-box;
+		}
+		&.code-row {
+			.input {
+				width: 370.88rpx;
+			}
+		}
+		.btn {
+			font-size: 24.73rpx;
+			color: #f97631;
+			background: no-repeat;
+			padding: 0;
+			height: 100%;
+			line-height: 65.93rpx;
+		}
+	}
+	.tips-row {
+		font-size: 24.73rpx;
+		color: #999;
+		line-height: 38.46rpx;
+		padding: 0 27.47rpx;
+	}
+	.login-btn {
+		width: 521.98rpx;
+		height: 75.55rpx;
+		line-height: 75.55rpx;
+		background: #f97631;
+		border-radius: 8.24rpx;
+		font-size: 30.22rpx;
+		color: #fff;
+		margin: 82.42rpx auto 0;
+	}
+	.agreement-row{
+		font-size: 24.73rpx;
+		display: flex;
+		align-items: center;
+		color: #999;
+		margin-top: 27.47rpx;
+		.link{
+			color: #0384D6;
+			margin-left: 8.24rpx;
+		}
+	}
+}
+</style>