From a605dd0aac8d3f7e87c2e8858cce944e2a2f43fe Mon Sep 17 00:00:00 2001
From: Liuyi <candymxq888@outlook.com>
Date: 星期六, 21 九月 2024 17:33:49 +0800
Subject: [PATCH] 完成主页布局样式，添加余额记录页面，封装navbar组件

---
 unpackage/dist/dev/mp-weixin/static/images/index/vip-add.png |    0 
 components/navbar/navbar.vue                                 |   45 +
 unpackage/dist/dev/mp-weixin/pages/index/index.js            |   64 +
 unpackage/dist/dev/mp-weixin/pages/balanceRecord/index.js    |   27 +
 unpackage/dist/dev/mp-weixin/components/navbar/navbar.json   |    4 
 main.js                                                      |   10 
 unpackage/dist/dev/mp-weixin/static/images/addCard/code.png  |    0 
 unpackage/dist/dev/mp-weixin/pages/addCard/index.js          |   55 ++
 unpackage/dist/dev/mp-weixin/pages/addCard/index.json        |    6 
 unpackage/dist/dev/mp-weixin/pages/balanceRecord/index.json  |    6 
 pages/index/index.vue                                        |  436 +++++++++++++++-
 static/images/addCard/code.png                               |    0 
 unpackage/dist/dev/mp-weixin/pages/balanceRecord/index.wxss  |   29 +
 pages/balanceRecord/index.vue                                |   19 
 unpackage/dist/dev/mp-weixin/pages/balanceRecord/index.wxml  |    1 
 static/images/index/vip-add.png                              |    0 
 unpackage/dist/dev/mp-weixin/pages/login/index.wxml          |    2 
 unpackage/dist/dev/mp-weixin/pages/index/index.wxss          |  298 +++++++++++
 pages.json                                                   |   13 
 unpackage/dist/dev/mp-weixin/pages/index/index.wxml          |    2 
 unpackage/dist/dev/mp-weixin/pages/login/index.wxss          |    2 
 unpackage/dist/dev/mp-weixin/app.js                          |    4 
 unpackage/dist/dev/mp-weixin/app.json                        |    8 
 pages/addCard/index.vue                                      |  181 +++++++
 pages/login/index.vue                                        |    5 
 static/images/addCard/back.png                               |    0 
 unpackage/dist/dev/mp-weixin/components/navbar/navbar.js     |   29 +
 unpackage/dist/dev/mp-weixin/static/images/addCard/back.png  |    0 
 unpackage/dist/dev/mp-weixin/pages/addCard/index.wxml        |    1 
 unpackage/dist/dev/mp-weixin/components/navbar/navbar.wxml   |    1 
 unpackage/dist/dev/mp-weixin/pages/addCard/index.wxss        |  131 +++++
 unpackage/dist/dev/mp-weixin/components/navbar/navbar.wxss   |   45 +
 unpackage/dist/dev/mp-weixin/pages/login/index.js            |    4 
 unpackage/dist/dev/mp-weixin/common/assets.js                |   28 +
 34 files changed, 1,370 insertions(+), 86 deletions(-)

diff --git a/components/navbar/navbar.vue b/components/navbar/navbar.vue
new file mode 100644
index 0000000..78ecbbe
--- /dev/null
+++ b/components/navbar/navbar.vue
@@ -0,0 +1,45 @@
+<template>
+	<view class="navbar">
+		<image src="../../static/images/addCard/back.png" alt="" @click="navBackToChild()"></image>
+		<text>{{title}}</text>
+	</view>
+</template>
+
+<script setup>
+	import { ref } from 'vue'
+	const emit = defineEmits(['navBackTo'])
+	function navBackToChild(){
+		emit('navBackTo')
+	}
+	const props = defineProps({
+		title:{
+			type:String,
+			default:''
+		}
+	})
+	const title = ref(props.title)
+</script>
+
+<style lang="scss">
+   .navbar{
+	   width:100%;
+	   height:176rpx;
+	   background: linear-gradient(to bottom,#5EA1FA,#8BC1FC);
+	   display: flex;
+	   align-items: flex-end;
+	   padding-bottom:24rpx;
+	   box-sizing: border-box;
+	   image{
+		   width:20rpx;
+		   height:40rpx;
+		   margin-left:32rpx;
+	   }
+	   text{
+		   font-weight: 400;
+		   font-size: 36rpx;
+		   color: #000000;
+		   margin-left: 234rpx;
+		   
+	   }
+   }
+</style>
\ No newline at end of file
diff --git a/main.js b/main.js
index 782f8c2..d6eab51 100644
--- a/main.js
+++ b/main.js
@@ -1,9 +1,11 @@
 import App from './App'
+import navbar from './components/navbar/navbar.vue'
 
 import { createSSRApp } from 'vue'
 export function createApp() {
-  const app = createSSRApp(App)
-  return {
-    app
-  }
+	const app = createSSRApp(App)
+	app.component('navbar', navbar)
+	  return {
+		app
+	  }
 }
diff --git a/pages.json b/pages.json
index 2a2be56..abf6a93 100644
--- a/pages.json
+++ b/pages.json
@@ -11,6 +11,18 @@
 			"style": {
 				"navigationStyle":"custom"
 			}
+		},
+		{
+			"path" : "pages/addCard/index",
+			"style": {
+				"navigationStyle":"custom"
+			}
+		},
+		{
+			"path" : "pages/balanceRecord/index",
+			"style": {
+				"navigationStyle":"custom"
+			}
 		}
 	],
 	"globalStyle": {
@@ -19,6 +31,7 @@
 		// "navigationBarBackgroundColor": "#F8F8F8",
 		// "backgroundColor": "#F8F8F8",
 		"navigationStyle": "custom"
+		// "autoscan": true
 	},
 	// "uniIdRouter": {},
 	"easycom": {
diff --git a/pages/addCard/index.vue b/pages/addCard/index.vue
new file mode 100644
index 0000000..c3a1b07
--- /dev/null
+++ b/pages/addCard/index.vue
@@ -0,0 +1,181 @@
+<template>
+	<view class="container">
+		<view class="content">
+			<navbar @navBackTo="navBackTo()" title="绑定会员卡"></navbar>
+			<view class="main">
+				<view class="title">请填写卡及个人信息</view>
+				<view class="form">
+					<view class="form-item card-item">
+						<text>卡号：</text>
+						<input v-model="form.cardNumber" placeholder="请输入卡号"/>
+						<image src="../../static/images/addCard/code.png" alt=""></image>
+					</view>
+					<view class="form-item">
+						<text>姓名：</text>
+						<input v-model="form.cardNumber" placeholder="请输入姓名"/>
+					</view>
+					<view class="form-item">
+						<text>联系方式：</text>
+						<input v-model="form.cardNumber" placeholder="请输入手机号"/>
+					</view>
+					<view class="form-item">
+						<text>区域：</text>
+						<input v-model="form.cardNumber" placeholder="请选择区域"/>
+					</view>
+					<view class="form-item">
+						<text>地址：</text>
+						<input v-model="form.cardNumber" placeholder="请输入地址"/>
+					</view>
+					<view class="form-item">
+						<text>备注：</text>
+						<input v-model="form.cardNumber" placeholder="请输入内容"/>
+					</view>
+				</view>
+				<view class="tips">
+					<text>1、完成实名认证，方便遗失挂失及补卡等。</text>
+					<text>2、绑卡后，运营商可以看到您实名时填写的 姓名和电话。</text>
+				</view>
+				<view class="subBtn" @click="submit()">提交信息</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { onMounted,ref} from 'vue';
+//状态栏高度
+// const statusBarHeight = ref()
+//返回
+function navBackTo(){
+	uni.navigateBack()
+}
+const form = ref({
+    cardNumber:'',
+    name:'',
+    phone:'',
+    address:'',
+    remark:'',
+})
+function submit(){
+	console('res')
+}
+onMounted(() =>{
+	// if(uni.getMenuButtonBoundingClientRect){
+	// 	statusBarHeight.value = uni.getMenuButtonBoundingClientRect().top * 2
+	// }
+})
+</script>
+
+<style lang="scss" scoped>
+	   .container{
+		   width:100%;
+		   height:100vh;
+		   .content{
+			   width:100%;
+			   height:100vh;
+			   .navbar{
+				   width:100%;
+				   height:176rpx;
+				   background: linear-gradient(to bottom,#5EA1FA,#8BC1FC);
+				   display: flex;
+				   align-items: flex-end;
+				   padding-bottom:24rpx;
+				   box-sizing: border-box;
+				   image{
+					   width:20rpx;
+					   height:40rpx;
+					   margin-left:32rpx;
+				   }
+				   text{
+					   font-weight: 400;
+					   font-size: 36rpx;
+					   color: #000000;
+					   margin-left: 234rpx;
+					   
+				   }
+			   }
+		   .main{
+			   width:100%;
+			   height: calc(100vh - 176rpx);
+			   background:linear-gradient(to top,#FFFFFF,#E8EFFF);
+			   padding:0 32rpx 38rpx;
+			   box-sizing:border-box;
+			   .title{
+				   width:100%;
+				   height:130rpx;
+				   text-align:left;
+				   line-height:130rpx;
+				   // background: #e6e6e6; 
+			   }
+			   .form{
+				   height: 700rpx;
+				   width:100%;
+				   background: #FFFFFF;
+				   border-radius: 24rpx;
+				   .form-item{
+					   height:100rpx;
+					   width:96%;
+					   border-bottom:1px solid rgba(226,226,226,0.6);
+					   display: flex;
+					   justify-content:space-between;
+					   align-items: center;
+					   margin: 0 auto;
+					   text{
+						   width:160rpx;
+						   font-weight:400;
+						   font-size: 32rpx;
+						   color: #000000;
+						   margin-left: 24rpx;
+						   // margin-right: 82rpx;
+					   }
+					   input{
+						   width: 450rpx;
+						   :deep(.uni-input-placeholder ){
+							   font-weight: 300;
+							   font-size:32rpx;
+							   color: #ccc;
+						   }
+					   }
+				   }
+				   .card-item{
+					   input{
+						 width:375rpx;
+						 }
+						 image{
+							 width:44rpx;
+							 height:44rpx;
+						 }
+				   }
+			   }
+			   .tips{
+				   width: 100%;
+				   padding:0 20rpx;
+				   box-sizing: border-box;
+				   display: flex;
+				   justify-content: space-between;
+				   align-items: flex-start;
+				   flex-direction: column;
+				   margin-top:56rpx;
+				   font-weight: 300;
+				   font-size: 32rpx;
+				   color: #484848;
+				   text:first-child{
+					   margin-bottom:28rpx;
+				   }
+			   }
+			   .subBtn{
+				   width: 100%;
+				   height: 98rpx;
+				   background-color:#5EA1FA;
+				   border-radius: 50rpx;
+				   font-weight: 300;
+				   font-size: 36rpx;
+				   color: #FFFFFF;
+				   text-align: center;
+				   line-height:98rpx;
+				   margin-top: 236rpx;
+			   }
+		   }
+	   }
+   }
+</style>
diff --git a/pages/balanceRecord/index.vue b/pages/balanceRecord/index.vue
new file mode 100644
index 0000000..014538d
--- /dev/null
+++ b/pages/balanceRecord/index.vue
@@ -0,0 +1,19 @@
+<template>
+	<view class="container">
+		<navbar @navBackTo="navBackTo()" title="余额记录"></navbar>
+	</view>
+</template>
+
+<script setup>
+	//返回
+	function navBackTo(){
+		uni.navigateBack()
+	}
+</script>
+
+<style lang="scss">
+	  .container{
+		  width: 100%;
+		  height: 100vh;
+	  } 
+</style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 338815f..c217f91 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -3,13 +3,56 @@
 <template>
 	<view class="container">
 		<view class="content">
-			<view class="card-box" :style="{paddingTop:capsuleHeight + 'rpx'}">
-				<view class="card"></view>
+			<view class="card-box" :style="{paddingTop:topHeight + 'rpx'}">
+				<view class="card">
+					<view class="card-content" @click="navToAddCard()">
+						<view v-if="isVip" class="card-title">
+							<view>会员卡</view>
+							<image src="../../static/images/index/code1.png" alt=""></image>
+						</view>
+						<view v-else class="card-add">
+							<view>
+								<image src="../../static/images/index/vip-add.png" alt=""></image>
+								<text>添加会员卡</text>
+							</view>
+						</view>
+						<view class="card-info">
+							<view class="info-head"><image src="../../static/images/index/hend1.png" alt=""></image></view>
+							<view class="info-content">
+								<view class="info-content-top">
+									<view>张大左</view>
+									<view>vip1</view>
+								</view>
+								<view class="info-content-bottom">YL123654987521</view>
+							</view>
+							<view class="info-more"><image src="../../static/images/index/back.png"></image></view>
+						</view>
+						<view class="card-bottom">
+							<view>我的积分：200</view>
+							<view>消费折扣：9.9折</view>
+						</view>
+					</view>
+				</view>
 			</view>
 			<view class="function-box1">
-				<view class="box1-bg"></view>
-				<view class="box1-bg"></view>
-				<view class="box1-bg"></view>
+				<view class="box1-bg box1-one">
+					<image src="../../static/images/index/home21.png" alt=""></image>
+					<view>送水到家</view>
+				</view>
+				<view class="box1-bg box1-two">
+					<view>账户余额（元)</view>
+					<view class="recharge">
+						<text>￥</text>
+						<text>120.00</text>
+					</view>
+					<view>
+						充值
+					</view>
+				</view>
+				<view class="box1-bg box1-three">
+					<image src="../../static/images/index/icon23.png" alt=""></image>
+					<view>送水到家</view>
+				</view>
 			</view>
 			<view class="function-box2">
 				<view class="box2-title"><text>功能列表</text></view>
@@ -22,39 +65,74 @@
 					</block>
 				</view>
 			</view>
+			<view class="advertisement-box"><image src="../../static/images/index/bg4.png" alt=""></image></view>
+			<view class="service-box">
+				<view class="service-title"><text>服务指南</text></view>
+				<view class="service-content">
+					<view class="service-bg">
+						<view>
+							<image src="../../static/images/index/icon51.png" alt=""></image>
+							<text>附近站点</text>
+						</view>
+						<view class="service-info">蔡家供水服务中心正在营业中……</view>
+						<view>
+							<text>查看更多</text>
+							<image src="../../static/images/index/more-info5.png" alt=""></image>
+						</view>
+					</view>
+					<view class="service-bg">
+							<view>
+								<image src="../../static/images/index/notice5.png" alt=""></image>
+								<text>公示公告</text>
+							</view>
+							<view class="service-info">停水公告的部分摘要的内容展示……</view>
+							<view>
+								<text>查看更多</text>
+								<image src="../../static/images/index/more-info5.png" alt=""></image>
+							</view>
+					</view>
+				</view>
+			</view>
 		</view>
-		<button @click="back()"></button>
 	</view>
 </template>
 
 <script setup>
     import { onMounted, ref } from "vue"
-	const back = () =>{
-		// uni.navigateBack()
+	//胶囊高度
+	const topHeight = ref(0)
+	/**
+	 * 会员卡相关
+	 */
+	const isVip = ref(false)
+	function navToAddCard(){
 		uni.navigateTo({
-			url:"/pages/login/index"
+			url:'/pages/addCard/index'
 		})
 	}
-	//胶囊高度
-	const capsuleHeight = ref(0)
-	onMounted(() =>{
-		if(uni.getMenuButtonBoundingClientRect){
-			capsuleHeight.value = (uni.getMenuButtonBoundingClientRect().top + uni.getMenuButtonBoundingClientRect().height) * 2
-		}
-	})
 	/**
 	 * 功能列表相关
 	 */
 	const functionList = ref([
-		{text:'余额',icon:'../../static/images/index/icon31.png',url:'/pages/login/index'},
-		{text:'余额',icon:'../../static/images/index/icon32.png',url:'/pages/login/index'},
-		{text:'余额',icon:'../../static/images/index/icon33.png',url:'/pages/login/index'},
-		{text:'余额',icon:'../../static/images/index/icon34.png',url:'/pages/login/index'},
-		{text:'余额',icon:'../../static/images/index/icon35.png',url:'/pages/login/index'},
-		{text:'余额',icon:'../../static/images/index/icon36.png',url:'/pages/login/index'},
-		{text:'余额',icon:'../../static/images/index/icon37.png',url:'/pages/login/index'},
-		{text:'余额',icon:'../../static/images/index/icon38.png',url:'/pages/login/index'},
+		{text:'余额记录',icon:'../../static/images/index/icon31.png',url:'/pages/balanceRecord/index'},
+		{text:'消费记录',icon:'../../static/images/index/icon32.png',url:'/pages/login/index'},
+		{text:'充值记录',icon:'../../static/images/index/icon33.png',url:'/pages/login/index'},
+		{text:'账户共享',icon:'../../static/images/index/icon34.png',url:'/pages/login/index'},
+		{text:'优惠卷',icon:'../../static/images/index/icon35.png',url:'/pages/login/index'},
+		{text:'电子发票',icon:'../../static/images/index/icon36.png',url:'/pages/login/index'},
+		{text:'联系客服',icon:'../../static/images/index/icon37.png',url:'/pages/login/index'},
+		{text:'推广分佣',icon:'../../static/images/index/icon38.png',url:'/pages/login/index'},
 	])
+	function navTo(itemUrl){
+		uni.navigateTo({
+			url:itemUrl
+		})
+	}
+	onMounted(() =>{
+		if(uni.getMenuButtonBoundingClientRect){
+			topHeight.value = (uni.getMenuButtonBoundingClientRect().top + uni.getMenuButtonBoundingClientRect().height) * 2
+		}
+	})
 	
 </script>
 
@@ -82,18 +160,149 @@
 			background-image: url("../../static/images/index/card1.png");
 			background-repeat: no-repeat;
 			background-size: 100%;
-			
+			.card-content{
+				width: 100%;
+				height: 100%;
+				box-sizing: border-box;
+				// background: #AFD5FF;
+				padding: 14rpx 42rpx 64rpx 22rpx;
+				.card-title{
+					width:100%;
+					height:64rpx;
+					display: flex;
+					justify-content: flex-end;
+					// background: #82fec5;
+					align-items: center;
+					view{
+						font-weight:300;
+						font-size: 36rpx;
+						color: #FFFFFF;
+						letter-spacing:5rpx;
+						text-align: left;
+					}
+					image{
+						width:64rpx;
+						height:64rpx;
+					}
+				}
+				.card-add{
+					width:100%;
+					height:64rpx;
+					display: flex;
+					justify-content: flex-end;
+					align-items: center;
+					view{
+						width: 172rpx;
+						height:38rpx;
+						border-radius:24rpx;
+						background: #fff;
+						display: flex;
+						justify-content:flex-start;
+						align-items:center;
+						image{
+							width:22rpx;
+							height:22rpx;
+							margin-left:15rpx;
+						}
+						text{
+							font-weight: 300;
+							font-size: 20rpx;
+							color: #0088FF;
+							margin-left:15rpx;
+						}
+					}
+				}
+				.card-info{
+					width: 100%;
+					height:100rpx;
+					// background: #8ff6c3;
+					margin-top: 18rpx;
+					display: flex;
+					justify-content: flex-start;
+					align-items: center;
+					.info-head{
+						width: 100rpx;
+						height:100rpx;
+						margin-right: 20rpx;
+						image{
+							width: 100rpx;
+							height:100rpx;
+						}
+					}
+					.info-content{
+						width: 216rpx;//108+86+22
+						height:100rpx;
+						// background: #54dac4;
+						display: flex;
+						flex-direction: column;
+						justify-content: flex-start;
+						align-items: flex-start;
+						.info-content-top{
+							width: 100%;
+							display: flex;
+							justify-content:space-between;
+							align-items:center;
+							margin-bottom:8rpx;
+							view:first-child{
+								width: 108rpx;
+								height: 50rpx;
+								font-weight: 400;
+								font-size: 36rpx;
+								color: #FFFFFF;
+								text-align: left;
+							}
+							view:last-child{
+								width: 86rpx;
+								height: 32rpx;
+								font-weight:300;
+								font-size: 26rpx;
+								color: #FFFFFF;
+								text-align: center;
+								background-image: url('../../static/images/index/vip1.png');
+							}
+						}
+						.info-content-bottom{
+							width: 100%;
+							font-weight: 300;
+							font-size: 20rpx;
+							color: #FFFFFF;
+							letter-spacing:5rpx;
+							text-align: left;
+						}
+					}
+					.info-more{
+						width: 12rpx;
+						height: 28rpx;
+						margin-left:274rpx;
+						image{
+							width: 12rpx;
+							height: 28rpx;
+						}
+					}
+				}
+				.card-bottom{
+					margin-top:36rpx;
+					width:100%;
+					display: flex;
+					justify-content:space-evenly;
+					font-weight: 300;
+					font-size: 20rpx;
+					color: #D8D8D8;
+					line-height: 0rpx;
+					text-align: center;
+				}
+			}
 		}
 	}
 	.function-box1{
 		width:100%;
 		box-sizing:border-box;
-		height: 264rpx;
-		padding: 32rpx;
+		height: 227rpx;
+		padding: 20rpx 32rpx 15rpx;
 		// background: rgba(85, 170, 0, 0.1);
-		display: flex;
+		display:flex;
 		justify-content: space-between;
-		align-items: center;
+		align-items:center;
 		.box1-bg{
 			width:212rpx;
 			height:200rpx;
@@ -101,12 +310,83 @@
 			background: #fff;
 			box-shadow:0 0 12rpx 2rpx rgba(13,118,255,0.16);
 		}
+		.box1-one{
+			font-weight: 300;
+			font-size: 32rpx;
+			color: #000000;
+			text-align: center;
+			display: flex;
+			flex-direction:column;
+			align-items: center;
+			justify-content: center;
+			image{
+				width: 86rpx;
+				height: 78rpx;
+				margin-bottom:20rpx;
+			}
+		}
+		.box1-two{
+			box-sizing: border-box;
+			padding:25rpx 0 10rpx;
+			display: flex;
+			flex-direction:column;
+			align-items:center;
+			justify-content:space-around;
+			view:first-child{
+				font-weight: 300;
+				font-size: 24rpx;
+				color: #464646;
+				text-align: center;
+				margin-bottom:10rpx;
+			}
+			.recharge{
+				text:first-child{
+					font-weight: 500;
+					font-size: 32rpx;
+					color: #000;
+				}
+				text:last-child{
+					font-weight: 300;
+					font-size: 32rpx;
+					color: #2269E5;
+				}
+			}
+			view:last-child{
+				width: 140rpx;
+				height: 80rpx;
+				font-weight:300;
+				font-size: 24rpx;
+				color: #000141;
+				background-image: url('../../static/images/index/icon22.png');
+				background-repeat: no-repeat;
+				background-position: center;
+				background-size: 100% 100%;
+				text-align:center;
+				line-height:80rpx;
+				margin-top:10rpx;
+			}
+		}
+		.box1-three{
+			font-weight: 300;
+			font-size: 32rpx;
+			color: #000000;
+			text-align: center;
+			display: flex;
+			flex-direction:column;
+			align-items: center;
+			justify-content: center;
+			image{
+				width: 83rpx;
+				height:83rpx;
+				margin-bottom:20rpx;
+			}
+		}
 	}
 	.function-box2{
 		width:100%;
 		box-sizing:border-box;
-		height: 460rpx;//374 + 44 + 距离 + 底部padding32
-		padding:0 32rpx 32rpx;
+		height: 443rpx;//374 + 44 + 距离 + 底部padding32
+		padding:0 32rpx 15rpx;
 		// background: rgba(46, 121, 170, 0.5);
 		.box2-title{
 			width: 100%;
@@ -119,7 +399,7 @@
 		}
 		.box2-content{
 			box-sizing: border-box;
-			padding:30rpx 50rpx;
+			padding:22rpx 35rpx;
 			width: 686rpx;
 			height:374rpx;
 			background: #fff;
@@ -130,12 +410,15 @@
 			justify-content: space-between;
 			align-items: center;
 			.box2-item{
-				width: 120rpx;
-				height:130rpx;
+				width: 146rpx;
+				height:143rpx;
+				display: flex;
+				flex-direction:column;
+				justify-content:space-between;
+				align-items: center;
 				image{
 					width: 90rpx;
 					height:90rpx;
-					margin: 0 auto;
 				}
 				.box2-item-text{
 					width:100%;
@@ -148,8 +431,85 @@
 			}
 		}
 	}
-	button{
-		width:100rpx;
-		height:50rpx
+	.advertisement-box{
+		width:100%;
+		height: 188rpx;
+		padding:0 32rpx 10rpx; 
+		box-sizing: border-box;
+		image{
+			width:100%;
+			height: 178rpx;
+		}
+	}
+	.service-box{
+		width: 100%;
+		height: 255rpx;
+		// background: #D2F2FE;
+		padding:0 32rpx;
+		box-sizing: border-box;
+		.service-title{
+			height: 44rpx;
+			font-weight: 300;
+			font-size: 32rpx;
+			color: #000000;
+			text-align: left;
+			margin-bottom: 5rpx;
+			margin-left: 30rpx;
+		}
+		.service-content{
+			width: 100%;
+			height: 206rpx;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			.service-bg{
+				width: 330rpx;
+				height: 206rpx;
+				background: linear-gradient(to bottom,#AFD5FF,#FFFFFF);
+				border-radius: 24rpx;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items:flex-start;
+					view:first-child{
+						display: flex;
+						align-items: center;
+						margin-left:40rpx;
+						image{
+							width:48rpx;
+							height:48rpx;
+							margin-right:10rpx;
+						}
+						text{
+							font-weight: 300;
+							font-size: 28rpx;
+							color: #000000;
+						}
+					}
+					.service-info{
+						width: 214rpx;
+						font-weight: 300;
+						font-size: 24rpx;
+						color: #4D4B4B;
+						margin-left:96rpx;
+					}
+					view:last-child{
+						margin-left: 174rpx;
+						margin-top: 18rpx;
+						display: flex;
+						align-items: center;
+						image{
+							width:32rpx;
+							height:32rpx;
+						}
+						text{
+							font-weight: 300;
+							font-size: 24rpx;
+							color: #4D4B4B;
+							margin-right: 10rpx;
+						}
+					}
+			}
+		}
 	}
 </style>
diff --git a/pages/login/index.vue b/pages/login/index.vue
index 698932e..6c16648 100644
--- a/pages/login/index.vue
+++ b/pages/login/index.vue
@@ -38,7 +38,7 @@
 					<view class="line"></view>
 				</view>
 				<view class="other-login">
-					<img src="../../static/images/login/wechat.png" alt="" @click="wxLoginPopup()"/>
+					<image src="../../static/images/login/wechat.png" alt="" @click="wxLoginPopup()"></image>
 				</view>
 			</view>
 		</view>
@@ -189,7 +189,7 @@
 					display: flex;
 					justify-content:center;
 					align-items: center;
-					img{
+					image{
 						width:76rpx;
 						height:76rpx;
 						/* background: #345DB1; */
@@ -197,7 +197,6 @@
 				}
 			}
 		 }
-		 
 		 .popup-content {
 		 	height: 560rpx;
 		 	position: relative;
diff --git a/static/images/addCard/back.png b/static/images/addCard/back.png
new file mode 100644
index 0000000..dabb93b
--- /dev/null
+++ b/static/images/addCard/back.png
Binary files differ
diff --git a/static/images/addCard/code.png b/static/images/addCard/code.png
new file mode 100644
index 0000000..2fbb810
--- /dev/null
+++ b/static/images/addCard/code.png
Binary files differ
diff --git a/static/images/index/vip-add.png b/static/images/index/vip-add.png
new file mode 100644
index 0000000..4779124
--- /dev/null
+++ b/static/images/index/vip-add.png
Binary files differ
diff --git a/unpackage/dist/dev/mp-weixin/app.js b/unpackage/dist/dev/mp-weixin/app.js
index 9552ba8..1f5c9c7 100644
--- a/unpackage/dist/dev/mp-weixin/app.js
+++ b/unpackage/dist/dev/mp-weixin/app.js
@@ -4,6 +4,8 @@
 if (!Math) {
   "./pages/index/index.js";
   "./pages/login/index.js";
+  "./pages/addCard/index.js";
+  "./pages/balanceRecord/index.js";
 }
 const _sfc_main = {
   __name: "App",
@@ -21,8 +23,10 @@
     };
   }
 };
+const navbar = () => "./components/navbar/navbar.js";
 function createApp() {
   const app = common_vendor.createSSRApp(_sfc_main);
+  app.component("navbar", navbar);
   return {
     app
   };
diff --git a/unpackage/dist/dev/mp-weixin/app.json b/unpackage/dist/dev/mp-weixin/app.json
index f6582ed..63dfd26 100644
--- a/unpackage/dist/dev/mp-weixin/app.json
+++ b/unpackage/dist/dev/mp-weixin/app.json
@@ -1,10 +1,14 @@
 {
   "pages": [
     "pages/index/index",
-    "pages/login/index"
+    "pages/login/index",
+    "pages/addCard/index",
+    "pages/balanceRecord/index"
   ],
   "window": {
     "navigationStyle": "custom"
   },
-  "usingComponents": {}
+  "usingComponents": {
+    "navbar": "/components/navbar/navbar"
+  }
 }
\ No newline at end of file
diff --git a/unpackage/dist/dev/mp-weixin/common/assets.js b/unpackage/dist/dev/mp-weixin/common/assets.js
index 6748468..f8f3f1b 100644
--- a/unpackage/dist/dev/mp-weixin/common/assets.js
+++ b/unpackage/dist/dev/mp-weixin/common/assets.js
@@ -1,5 +1,29 @@
 "use strict";
-const _imports_0 = "/static/images/login/wechat.png";
+const _imports_0$3 = "/static/images/index/code1.png";
+const _imports_1$1 = "/static/images/index/vip-add.png";
+const _imports_2 = "/static/images/index/hend1.png";
+const _imports_3 = "/static/images/index/back.png";
+const _imports_4 = "/static/images/index/home21.png";
+const _imports_5 = "/static/images/index/icon23.png";
+const _imports_6 = "/static/images/index/bg4.png";
+const _imports_7 = "/static/images/index/icon51.png";
+const _imports_8 = "/static/images/index/more-info5.png";
+const _imports_9 = "/static/images/index/notice5.png";
+const _imports_0$2 = "/static/images/login/wechat.png";
 const _imports_1 = "/static/images/login/logo.png";
+const _imports_0$1 = "/static/images/addCard/code.png";
+const _imports_0 = "/static/images/addCard/back.png";
 exports._imports_0 = _imports_0;
-exports._imports_1 = _imports_1;
+exports._imports_0$1 = _imports_0$3;
+exports._imports_0$2 = _imports_0$2;
+exports._imports_0$3 = _imports_0$1;
+exports._imports_1 = _imports_1$1;
+exports._imports_1$1 = _imports_1;
+exports._imports_2 = _imports_2;
+exports._imports_3 = _imports_3;
+exports._imports_4 = _imports_4;
+exports._imports_5 = _imports_5;
+exports._imports_6 = _imports_6;
+exports._imports_7 = _imports_7;
+exports._imports_8 = _imports_8;
+exports._imports_9 = _imports_9;
diff --git a/unpackage/dist/dev/mp-weixin/components/navbar/navbar.js b/unpackage/dist/dev/mp-weixin/components/navbar/navbar.js
new file mode 100644
index 0000000..f9d5869
--- /dev/null
+++ b/unpackage/dist/dev/mp-weixin/components/navbar/navbar.js
@@ -0,0 +1,29 @@
+"use strict";
+const common_vendor = require("../../common/vendor.js");
+const common_assets = require("../../common/assets.js");
+const _sfc_main = {
+  __name: "navbar",
+  props: {
+    title: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["navBackTo"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    function navBackToChild() {
+      emit("navBackTo");
+    }
+    const props = __props;
+    const title = common_vendor.ref(props.title);
+    return (_ctx, _cache) => {
+      return {
+        a: common_assets._imports_0,
+        b: common_vendor.o(($event) => navBackToChild()),
+        c: common_vendor.t(title.value)
+      };
+    };
+  }
+};
+wx.createComponent(_sfc_main);
diff --git a/unpackage/dist/dev/mp-weixin/components/navbar/navbar.json b/unpackage/dist/dev/mp-weixin/components/navbar/navbar.json
new file mode 100644
index 0000000..e8cfaaf
--- /dev/null
+++ b/unpackage/dist/dev/mp-weixin/components/navbar/navbar.json
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file
diff --git a/unpackage/dist/dev/mp-weixin/components/navbar/navbar.wxml b/unpackage/dist/dev/mp-weixin/components/navbar/navbar.wxml
new file mode 100644
index 0000000..b49cde2
--- /dev/null
+++ b/unpackage/dist/dev/mp-weixin/components/navbar/navbar.wxml
@@ -0,0 +1 @@
+<view class="navbar"><image src="{{a}}" alt="" bindtap="{{b}}"></image><text>{{c}}</text></view>
\ No newline at end of file
diff --git a/unpackage/dist/dev/mp-weixin/components/navbar/navbar.wxss b/unpackage/dist/dev/mp-weixin/components/navbar/navbar.wxss
new file mode 100644
index 0000000..a2558b9
--- /dev/null
+++ b/unpackage/dist/dev/mp-weixin/components/navbar/navbar.wxss
@@ -0,0 +1,45 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.navbar {
+  width: 100%;
+  height: 176rpx;
+  background: linear-gradient(to bottom, #5EA1FA, #8BC1FC);
+  display: flex;
+  align-items: flex-end;
+  padding-bottom: 24rpx;
+  box-sizing: border-box;
+}
+.navbar image {
+  width: 20rpx;
+  height: 40rpx;
+  margin-left: 32rpx;
+}
+.navbar text {
+  font-weight: 400;
+  font-size: 36rpx;
+  color: #000000;
+  margin-left: 234rpx;
+}
\ No newline at end of file
diff --git a/unpackage/dist/dev/mp-weixin/pages/addCard/index.js b/unpackage/dist/dev/mp-weixin/pages/addCard/index.js
new file mode 100644
index 0000000..e4ed725
--- /dev/null
+++ b/unpackage/dist/dev/mp-weixin/pages/addCard/index.js
@@ -0,0 +1,55 @@
+"use strict";
+const common_vendor = require("../../common/vendor.js");
+const common_assets = require("../../common/assets.js");
+if (!Array) {
+  const _easycom_navbar2 = common_vendor.resolveComponent("navbar");
+  _easycom_navbar2();
+}
+const _easycom_navbar = () => "../../components/navbar/navbar.js";
+if (!Math) {
+  _easycom_navbar();
+}
+const _sfc_main = {
+  __name: "index",
+  setup(__props) {
+    function navBackTo() {
+      common_vendor.index.navigateBack();
+    }
+    const form = common_vendor.ref({
+      cardNumber: "",
+      name: "",
+      phone: "",
+      address: "",
+      remark: ""
+    });
+    function submit() {
+      console("res");
+    }
+    common_vendor.onMounted(() => {
+    });
+    return (_ctx, _cache) => {
+      return {
+        a: common_vendor.o(($event) => navBackTo()),
+        b: common_vendor.p({
+          title: "绑定会员卡"
+        }),
+        c: form.value.cardNumber,
+        d: common_vendor.o(($event) => form.value.cardNumber = $event.detail.value),
+        e: common_assets._imports_0$3,
+        f: form.value.cardNumber,
+        g: common_vendor.o(($event) => form.value.cardNumber = $event.detail.value),
+        h: form.value.cardNumber,
+        i: common_vendor.o(($event) => form.value.cardNumber = $event.detail.value),
+        j: form.value.cardNumber,
+        k: common_vendor.o(($event) => form.value.cardNumber = $event.detail.value),
+        l: form.value.cardNumber,
+        m: common_vendor.o(($event) => form.value.cardNumber = $event.detail.value),
+        n: form.value.cardNumber,
+        o: common_vendor.o(($event) => form.value.cardNumber = $event.detail.value),
+        p: common_vendor.o(($event) => submit())
+      };
+    };
+  }
+};
+const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-4c5e7c86"]]);
+wx.createPage(MiniProgramPage);
diff --git a/unpackage/dist/dev/mp-weixin/pages/addCard/index.json b/unpackage/dist/dev/mp-weixin/pages/addCard/index.json
new file mode 100644
index 0000000..ff63ccc
--- /dev/null
+++ b/unpackage/dist/dev/mp-weixin/pages/addCard/index.json
@@ -0,0 +1,6 @@
+{
+  "navigationStyle": "custom",
+  "usingComponents": {
+    "navbar": "../../components/navbar/navbar"
+  }
+}
\ No newline at end of file
diff --git a/unpackage/dist/dev/mp-weixin/pages/addCard/index.wxml b/unpackage/dist/dev/mp-weixin/pages/addCard/index.wxml
new file mode 100644
index 0000000..b3f4e8b
--- /dev/null
+++ b/unpackage/dist/dev/mp-weixin/pages/addCard/index.wxml
@@ -0,0 +1 @@
+<view class="container data-v-4c5e7c86"><view class="content data-v-4c5e7c86"><navbar wx:if="{{b}}" class="data-v-4c5e7c86" bindnavBackTo="{{a}}" u-i="4c5e7c86-0" bind:__l="__l" u-p="{{b}}"></navbar><view class="main data-v-4c5e7c86"><view class="title data-v-4c5e7c86">请填写卡及个人信息</view><view class="form data-v-4c5e7c86"><view class="form-item card-item data-v-4c5e7c86"><text class="data-v-4c5e7c86">卡号：</text><input class="data-v-4c5e7c86" placeholder="请输入卡号" value="{{c}}" bindinput="{{d}}"/><image class="data-v-4c5e7c86" src="{{e}}" alt=""></image></view><view class="form-item data-v-4c5e7c86"><text class="data-v-4c5e7c86">姓名：</text><input class="data-v-4c5e7c86" placeholder="请输入姓名" value="{{f}}" bindinput="{{g}}"/></view><view class="form-item data-v-4c5e7c86"><text class="data-v-4c5e7c86">联系方式：</text><input class="data-v-4c5e7c86" placeholder="请输入手机号" value="{{h}}" bindinput="{{i}}"/></view><view class="form-item data-v-4c5e7c86"><text class="data-v-4c5e7c86">区域：</text><input class="data-v-4c5e7c86" placeholder="请选择区域" value="{{j}}" bindinput="{{k}}"/></view><view class="form-item data-v-4c5e7c86"><text class="data-v-4c5e7c86">地址：</text><input class="data-v-4c5e7c86" placeholder="请输入地址" value="{{l}}" bindinput="{{m}}"/></view><view class="form-item data-v-4c5e7c86"><text class="data-v-4c5e7c86">备注：</text><input class="data-v-4c5e7c86" placeholder="请输入内容" value="{{n}}" bindinput="{{o}}"/></view></view><view class="tips data-v-4c5e7c86"><text class="data-v-4c5e7c86">1、完成实名认证，方便遗失挂失及补卡等。</text><text class="data-v-4c5e7c86">2、绑卡后，运营商可以看到您实名时填写的 姓名和电话。</text></view><view class="subBtn data-v-4c5e7c86" bindtap="{{p}}">提交信息</view></view></view></view>
\ No newline at end of file
diff --git a/unpackage/dist/dev/mp-weixin/pages/addCard/index.wxss b/unpackage/dist/dev/mp-weixin/pages/addCard/index.wxss
new file mode 100644
index 0000000..ac52287
--- /dev/null
+++ b/unpackage/dist/dev/mp-weixin/pages/addCard/index.wxss
@@ -0,0 +1,131 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.container.data-v-4c5e7c86 {
+  width: 100%;
+  height: 100vh;
+}
+.container .content.data-v-4c5e7c86 {
+  width: 100%;
+  height: 100vh;
+}
+.container .content .navbar.data-v-4c5e7c86 {
+  width: 100%;
+  height: 176rpx;
+  background: linear-gradient(to bottom, #5EA1FA, #8BC1FC);
+  display: flex;
+  align-items: flex-end;
+  padding-bottom: 24rpx;
+  box-sizing: border-box;
+}
+.container .content .navbar image.data-v-4c5e7c86 {
+  width: 20rpx;
+  height: 40rpx;
+  margin-left: 32rpx;
+}
+.container .content .navbar text.data-v-4c5e7c86 {
+  font-weight: 400;
+  font-size: 36rpx;
+  color: #000000;
+  margin-left: 234rpx;
+}
+.container .content .main.data-v-4c5e7c86 {
+  width: 100%;
+  height: calc(100vh - 176rpx);
+  background: linear-gradient(to top, #FFFFFF, #E8EFFF);
+  padding: 0 32rpx 38rpx;
+  box-sizing: border-box;
+}
+.container .content .main .title.data-v-4c5e7c86 {
+  width: 100%;
+  height: 130rpx;
+  text-align: left;
+  line-height: 130rpx;
+}
+.container .content .main .form.data-v-4c5e7c86 {
+  height: 700rpx;
+  width: 100%;
+  background: #FFFFFF;
+  border-radius: 24rpx;
+}
+.container .content .main .form .form-item.data-v-4c5e7c86 {
+  height: 100rpx;
+  width: 96%;
+  border-bottom: 1px solid rgba(226, 226, 226, 0.6);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 auto;
+}
+.container .content .main .form .form-item text.data-v-4c5e7c86 {
+  width: 160rpx;
+  font-weight: 400;
+  font-size: 32rpx;
+  color: #000000;
+  margin-left: 24rpx;
+}
+.container .content .main .form .form-item input.data-v-4c5e7c86 {
+  width: 450rpx;
+}
+.container .content .main .form .form-item input.data-v-4c5e7c86 .uni-input-placeholder {
+  font-weight: 300;
+  font-size: 32rpx;
+  color: #ccc;
+}
+.container .content .main .form .card-item input.data-v-4c5e7c86 {
+  width: 375rpx;
+}
+.container .content .main .form .card-item image.data-v-4c5e7c86 {
+  width: 44rpx;
+  height: 44rpx;
+}
+.container .content .main .tips.data-v-4c5e7c86 {
+  width: 100%;
+  padding: 0 20rpx;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-direction: column;
+  margin-top: 56rpx;
+  font-weight: 300;
+  font-size: 32rpx;
+  color: #484848;
+}
+.container .content .main .tips text.data-v-4c5e7c86:first-child {
+  margin-bottom: 28rpx;
+}
+.container .content .main .subBtn.data-v-4c5e7c86 {
+  width: 100%;
+  height: 98rpx;
+  background-color: #5EA1FA;
+  border-radius: 50rpx;
+  font-weight: 300;
+  font-size: 36rpx;
+  color: #FFFFFF;
+  text-align: center;
+  line-height: 98rpx;
+  margin-top: 236rpx;
+}
\ No newline at end of file
diff --git a/unpackage/dist/dev/mp-weixin/pages/balanceRecord/index.js b/unpackage/dist/dev/mp-weixin/pages/balanceRecord/index.js
new file mode 100644
index 0000000..53bb980
--- /dev/null
+++ b/unpackage/dist/dev/mp-weixin/pages/balanceRecord/index.js
@@ -0,0 +1,27 @@
+"use strict";
+const common_vendor = require("../../common/vendor.js");
+if (!Array) {
+  const _easycom_navbar2 = common_vendor.resolveComponent("navbar");
+  _easycom_navbar2();
+}
+const _easycom_navbar = () => "../../components/navbar/navbar.js";
+if (!Math) {
+  _easycom_navbar();
+}
+const _sfc_main = {
+  __name: "index",
+  setup(__props) {
+    function navBackTo() {
+      common_vendor.index.navigateBack();
+    }
+    return (_ctx, _cache) => {
+      return {
+        a: common_vendor.o(($event) => navBackTo()),
+        b: common_vendor.p({
+          title: "余额记录"
+        })
+      };
+    };
+  }
+};
+wx.createPage(_sfc_main);
diff --git a/unpackage/dist/dev/mp-weixin/pages/balanceRecord/index.json b/unpackage/dist/dev/mp-weixin/pages/balanceRecord/index.json
new file mode 100644
index 0000000..ff63ccc
--- /dev/null
+++ b/unpackage/dist/dev/mp-weixin/pages/balanceRecord/index.json
@@ -0,0 +1,6 @@
+{
+  "navigationStyle": "custom",
+  "usingComponents": {
+    "navbar": "../../components/navbar/navbar"
+  }
+}
\ No newline at end of file
diff --git a/unpackage/dist/dev/mp-weixin/pages/balanceRecord/index.wxml b/unpackage/dist/dev/mp-weixin/pages/balanceRecord/index.wxml
new file mode 100644
index 0000000..e3f855c
--- /dev/null
+++ b/unpackage/dist/dev/mp-weixin/pages/balanceRecord/index.wxml
@@ -0,0 +1 @@
+<view class="container"><navbar wx:if="{{b}}" bindnavBackTo="{{a}}" u-i="434b3e96-0" bind:__l="__l" u-p="{{b}}"></navbar></view>
\ No newline at end of file
diff --git a/unpackage/dist/dev/mp-weixin/pages/balanceRecord/index.wxss b/unpackage/dist/dev/mp-weixin/pages/balanceRecord/index.wxss
new file mode 100644
index 0000000..f02efd8
--- /dev/null
+++ b/unpackage/dist/dev/mp-weixin/pages/balanceRecord/index.wxss
@@ -0,0 +1,29 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.container {
+  width: 100%;
+  height: 100vh;
+}
\ No newline at end of file
diff --git a/unpackage/dist/dev/mp-weixin/pages/index/index.js b/unpackage/dist/dev/mp-weixin/pages/index/index.js
index a703d33..e1e3762 100644
--- a/unpackage/dist/dev/mp-weixin/pages/index/index.js
+++ b/unpackage/dist/dev/mp-weixin/pages/index/index.js
@@ -1,42 +1,64 @@
 "use strict";
 const common_vendor = require("../../common/vendor.js");
+const common_assets = require("../../common/assets.js");
 const _sfc_main = {
   __name: "index",
   setup(__props) {
-    const back = () => {
+    const topHeight = common_vendor.ref(0);
+    const isVip = common_vendor.ref(false);
+    function navToAddCard() {
       common_vendor.index.navigateTo({
-        url: "/pages/login/index"
+        url: "/pages/addCard/index"
       });
-    };
-    const capsuleHeight = common_vendor.ref(0);
+    }
+    const functionList = common_vendor.ref([
+      { text: "余额记录", icon: "../../static/images/index/icon31.png", url: "/pages/balanceRecord/index" },
+      { text: "消费记录", icon: "../../static/images/index/icon32.png", url: "/pages/login/index" },
+      { text: "充值记录", icon: "../../static/images/index/icon33.png", url: "/pages/login/index" },
+      { text: "账户共享", icon: "../../static/images/index/icon34.png", url: "/pages/login/index" },
+      { text: "优惠卷", icon: "../../static/images/index/icon35.png", url: "/pages/login/index" },
+      { text: "电子发票", icon: "../../static/images/index/icon36.png", url: "/pages/login/index" },
+      { text: "联系客服", icon: "../../static/images/index/icon37.png", url: "/pages/login/index" },
+      { text: "推广分佣", icon: "../../static/images/index/icon38.png", url: "/pages/login/index" }
+    ]);
+    function navTo(itemUrl) {
+      common_vendor.index.navigateTo({
+        url: itemUrl
+      });
+    }
     common_vendor.onMounted(() => {
       if (common_vendor.index.getMenuButtonBoundingClientRect) {
-        capsuleHeight.value = (common_vendor.index.getMenuButtonBoundingClientRect().top + common_vendor.index.getMenuButtonBoundingClientRect().height) * 2;
+        topHeight.value = (common_vendor.index.getMenuButtonBoundingClientRect().top + common_vendor.index.getMenuButtonBoundingClientRect().height) * 2;
       }
     });
-    const functionList = common_vendor.ref([
-      { text: "余额", icon: "../../static/images/index/icon31.png", url: "/pages/login/index" },
-      { text: "余额", icon: "../../static/images/index/icon32.png", url: "/pages/login/index" },
-      { text: "余额", icon: "../../static/images/index/icon33.png", url: "/pages/login/index" },
-      { text: "余额", icon: "../../static/images/index/icon34.png", url: "/pages/login/index" },
-      { text: "余额", icon: "../../static/images/index/icon35.png", url: "/pages/login/index" },
-      { text: "余额", icon: "../../static/images/index/icon36.png", url: "/pages/login/index" },
-      { text: "余额", icon: "../../static/images/index/icon37.png", url: "/pages/login/index" },
-      { text: "余额", icon: "../../static/images/index/icon38.png", url: "/pages/login/index" }
-    ]);
     return (_ctx, _cache) => {
-      return {
-        a: capsuleHeight.value + "rpx",
-        b: common_vendor.f(functionList.value, (item, index, i0) => {
+      return common_vendor.e({
+        a: isVip.value
+      }, isVip.value ? {
+        b: common_assets._imports_0$1
+      } : {
+        c: common_assets._imports_1
+      }, {
+        d: common_assets._imports_2,
+        e: common_assets._imports_3,
+        f: common_vendor.o(($event) => navToAddCard()),
+        g: topHeight.value + "rpx",
+        h: common_assets._imports_4,
+        i: common_assets._imports_5,
+        j: common_vendor.f(functionList.value, (item, index, i0) => {
           return {
             a: item.icon,
             b: common_vendor.t(item.text),
-            c: common_vendor.o(($event) => _ctx.navTo(item.url), index),
+            c: common_vendor.o(($event) => navTo(item.url), index),
             d: index
           };
         }),
-        c: common_vendor.o(($event) => back())
-      };
+        k: common_assets._imports_6,
+        l: common_assets._imports_7,
+        m: common_assets._imports_8,
+        n: common_assets._imports_9,
+        o: common_assets._imports_8
+      });
     };
   }
 };
diff --git a/unpackage/dist/dev/mp-weixin/pages/index/index.wxml b/unpackage/dist/dev/mp-weixin/pages/index/index.wxml
index 5d7efaa..d1a7c83 100644
--- a/unpackage/dist/dev/mp-weixin/pages/index/index.wxml
+++ b/unpackage/dist/dev/mp-weixin/pages/index/index.wxml
@@ -1 +1 @@
-<view class="container data-v-1cf27b2a"><view class="content data-v-1cf27b2a"><view class="card-box data-v-1cf27b2a" style="{{'padding-top:' + a}}"><view class="card data-v-1cf27b2a"></view></view><view class="function-box1 data-v-1cf27b2a"><view class="box1-bg data-v-1cf27b2a"></view><view class="box1-bg data-v-1cf27b2a"></view><view class="box1-bg data-v-1cf27b2a"></view></view><view class="function-box2 data-v-1cf27b2a"><view class="box2-title data-v-1cf27b2a"><text class="data-v-1cf27b2a">功能列表</text></view><view class="box2-content data-v-1cf27b2a"><block wx:for="{{b}}" wx:for-item="item" wx:key="d"><view class="box2-item data-v-1cf27b2a" bindtap="{{item.c}}"><image class="data-v-1cf27b2a" src="{{item.a}}" alt=""></image><view class="box2-item-text data-v-1cf27b2a">{{item.b}}</view></view></block></view></view></view><button class="data-v-1cf27b2a" bindtap="{{c}}"></button></view>
\ No newline at end of file
+<view class="container data-v-1cf27b2a"><view class="content data-v-1cf27b2a"><view class="card-box data-v-1cf27b2a" style="{{'padding-top:' + g}}"><view class="card data-v-1cf27b2a"><view class="card-content data-v-1cf27b2a" bindtap="{{f}}"><view wx:if="{{a}}" class="card-title data-v-1cf27b2a"><view class="data-v-1cf27b2a">会员卡</view><image class="data-v-1cf27b2a" src="{{b}}" alt=""></image></view><view wx:else class="card-add data-v-1cf27b2a"><view class="data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{c}}" alt=""></image><text class="data-v-1cf27b2a">添加会员卡</text></view></view><view class="card-info data-v-1cf27b2a"><view class="info-head data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{d}}" alt=""></image></view><view class="info-content data-v-1cf27b2a"><view class="info-content-top data-v-1cf27b2a"><view class="data-v-1cf27b2a">张大左</view><view class="data-v-1cf27b2a">vip1</view></view><view class="info-content-bottom data-v-1cf27b2a">YL123654987521</view></view><view class="info-more data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{e}}"></image></view></view><view class="card-bottom data-v-1cf27b2a"><view class="data-v-1cf27b2a">我的积分：200</view><view class="data-v-1cf27b2a">消费折扣：9.9折</view></view></view></view></view><view class="function-box1 data-v-1cf27b2a"><view class="box1-bg box1-one data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{h}}" alt=""></image><view class="data-v-1cf27b2a">送水到家</view></view><view class="box1-bg box1-two data-v-1cf27b2a"><view class="data-v-1cf27b2a">账户余额（元)</view><view class="recharge data-v-1cf27b2a"><text class="data-v-1cf27b2a">￥</text><text class="data-v-1cf27b2a">120.00</text></view><view class="data-v-1cf27b2a"> 充值 </view></view><view class="box1-bg box1-three data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{i}}" alt=""></image><view class="data-v-1cf27b2a">送水到家</view></view></view><view class="function-box2 data-v-1cf27b2a"><view class="box2-title data-v-1cf27b2a"><text class="data-v-1cf27b2a">功能列表</text></view><view class="box2-content data-v-1cf27b2a"><block wx:for="{{j}}" wx:for-item="item" wx:key="d"><view class="box2-item data-v-1cf27b2a" bindtap="{{item.c}}"><image class="data-v-1cf27b2a" src="{{item.a}}" alt=""></image><view class="box2-item-text data-v-1cf27b2a">{{item.b}}</view></view></block></view></view><view class="advertisement-box data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{k}}" alt=""></image></view><view class="service-box data-v-1cf27b2a"><view class="service-title data-v-1cf27b2a"><text class="data-v-1cf27b2a">服务指南</text></view><view class="service-content data-v-1cf27b2a"><view class="service-bg data-v-1cf27b2a"><view class="data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{l}}" alt=""></image><text class="data-v-1cf27b2a">附近站点</text></view><view class="service-info data-v-1cf27b2a">蔡家供水服务中心正在营业中……</view><view class="data-v-1cf27b2a"><text class="data-v-1cf27b2a">查看更多</text><image class="data-v-1cf27b2a" src="{{m}}" alt=""></image></view></view><view class="service-bg data-v-1cf27b2a"><view class="data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{n}}" alt=""></image><text class="data-v-1cf27b2a">公示公告</text></view><view class="service-info data-v-1cf27b2a">停水公告的部分摘要的内容展示……</view><view class="data-v-1cf27b2a"><text class="data-v-1cf27b2a">查看更多</text><image class="data-v-1cf27b2a" src="{{o}}" alt=""></image></view></view></view></view></view></view>
\ No newline at end of file
diff --git a/unpackage/dist/dev/mp-weixin/pages/index/index.wxss b/unpackage/dist/dev/mp-weixin/pages/index/index.wxss
index c47f028..1b85bac 100644
--- a/unpackage/dist/dev/mp-weixin/pages/index/index.wxss
+++ b/unpackage/dist/dev/mp-weixin/pages/index/index.wxss
@@ -47,11 +47,139 @@
   background-repeat: no-repeat;
   background-size: 100%;
 }
+.card-box .card .card-content.data-v-1cf27b2a {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 14rpx 42rpx 64rpx 22rpx;
+}
+.card-box .card .card-content .card-title.data-v-1cf27b2a {
+  width: 100%;
+  height: 64rpx;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.card-box .card .card-content .card-title view.data-v-1cf27b2a {
+  font-weight: 300;
+  font-size: 36rpx;
+  color: #FFFFFF;
+  letter-spacing: 5rpx;
+  text-align: left;
+}
+.card-box .card .card-content .card-title image.data-v-1cf27b2a {
+  width: 64rpx;
+  height: 64rpx;
+}
+.card-box .card .card-content .card-add.data-v-1cf27b2a {
+  width: 100%;
+  height: 64rpx;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.card-box .card .card-content .card-add view.data-v-1cf27b2a {
+  width: 172rpx;
+  height: 38rpx;
+  border-radius: 24rpx;
+  background: #fff;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.card-box .card .card-content .card-add view image.data-v-1cf27b2a {
+  width: 22rpx;
+  height: 22rpx;
+  margin-left: 15rpx;
+}
+.card-box .card .card-content .card-add view text.data-v-1cf27b2a {
+  font-weight: 300;
+  font-size: 20rpx;
+  color: #0088FF;
+  margin-left: 15rpx;
+}
+.card-box .card .card-content .card-info.data-v-1cf27b2a {
+  width: 100%;
+  height: 100rpx;
+  margin-top: 18rpx;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.card-box .card .card-content .card-info .info-head.data-v-1cf27b2a {
+  width: 100rpx;
+  height: 100rpx;
+  margin-right: 20rpx;
+}
+.card-box .card .card-content .card-info .info-head image.data-v-1cf27b2a {
+  width: 100rpx;
+  height: 100rpx;
+}
+.card-box .card .card-content .card-info .info-content.data-v-1cf27b2a {
+  width: 216rpx;
+  height: 100rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.card-box .card .card-content .card-info .info-content .info-content-top.data-v-1cf27b2a {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8rpx;
+}
+.card-box .card .card-content .card-info .info-content .info-content-top view.data-v-1cf27b2a:first-child {
+  width: 108rpx;
+  height: 50rpx;
+  font-weight: 400;
+  font-size: 36rpx;
+  color: #FFFFFF;
+  text-align: left;
+}
+.card-box .card .card-content .card-info .info-content .info-content-top view.data-v-1cf27b2a:last-child {
+  width: 86rpx;
+  height: 32rpx;
+  font-weight: 300;
+  font-size: 26rpx;
+  color: #FFFFFF;
+  text-align: center;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAQCAYAAACP4IauAAAAAXNSR0IArs4c6QAAAdxJREFUSEvNlr1LHFEUxe85d3ZnEvGjt5RowgpbaJvKNGIVsisEQsAmJllm/UC0SJ3WTaNs0oh/RNKIzbo2SaMkLIhY2llIEg3ix8i8mdFRRMzoDk4zb97c995vzpz37oVcul79mO7xPH0L0SFCO0F9SFAAFVAlapNhH1SiNk0Mxdz9MSY+3nce678n/bhwziB2H9BtUr+KxeqMk9+I4yF66Pv8JtOdb/sonk6QapnJLgFeBRvBBIveDvYCOHkEZiqb9r8PX9B/6HMa2MFvrt3WnlkC9On5F98M1iwQqnynsNHfBOtZJ/usjEcHBna4PlaF6Kiv3P/CNk3Z0ErGKsLqpPP4HV7USzkVax2imgS22cqGvj4WYR6FmlsBOB75814qG2zWTyjWyg0BniSFTUdZs38aKNbcvwK2JIVNxbOBsnu+DX4DbE0Km5ayoP5BccX9KcLepLBpKUvoLxRq5VkAE0lh01JWoBU8Xy33WidYI5IdXWkoS+ixl2U+SAqrY3Pw9P29PWep85PZntKt023zlWU9Y8fSrakPNl27fefBHIERQHnTQqZpnqWeAFywHafk1wVnhUy8DHv5fSZHz3oNcIBkF6Ad15WId6osdZfQLQDLlucsTrXmGnG2Ux7nYTiYHiPjAAAAAElFTkSuQmCC");
+}
+.card-box .card .card-content .card-info .info-content .info-content-bottom.data-v-1cf27b2a {
+  width: 100%;
+  font-weight: 300;
+  font-size: 20rpx;
+  color: #FFFFFF;
+  letter-spacing: 5rpx;
+  text-align: left;
+}
+.card-box .card .card-content .card-info .info-more.data-v-1cf27b2a {
+  width: 12rpx;
+  height: 28rpx;
+  margin-left: 274rpx;
+}
+.card-box .card .card-content .card-info .info-more image.data-v-1cf27b2a {
+  width: 12rpx;
+  height: 28rpx;
+}
+.card-box .card .card-content .card-bottom.data-v-1cf27b2a {
+  margin-top: 36rpx;
+  width: 100%;
+  display: flex;
+  justify-content: space-evenly;
+  font-weight: 300;
+  font-size: 20rpx;
+  color: #D8D8D8;
+  line-height: 0rpx;
+  text-align: center;
+}
 .function-box1.data-v-1cf27b2a {
   width: 100%;
   box-sizing: border-box;
-  height: 264rpx;
-  padding: 32rpx;
+  height: 227rpx;
+  padding: 20rpx 32rpx 15rpx;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -63,11 +191,80 @@
   background: #fff;
   box-shadow: 0 0 12rpx 2rpx rgba(13, 118, 255, 0.16);
 }
+.function-box1 .box1-one.data-v-1cf27b2a {
+  font-weight: 300;
+  font-size: 32rpx;
+  color: #000000;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.function-box1 .box1-one image.data-v-1cf27b2a {
+  width: 86rpx;
+  height: 78rpx;
+  margin-bottom: 20rpx;
+}
+.function-box1 .box1-two.data-v-1cf27b2a {
+  box-sizing: border-box;
+  padding: 25rpx 0 10rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+}
+.function-box1 .box1-two view.data-v-1cf27b2a:first-child {
+  font-weight: 300;
+  font-size: 24rpx;
+  color: #464646;
+  text-align: center;
+  margin-bottom: 10rpx;
+}
+.function-box1 .box1-two .recharge text.data-v-1cf27b2a:first-child {
+  font-weight: 500;
+  font-size: 32rpx;
+  color: #000;
+}
+.function-box1 .box1-two .recharge text.data-v-1cf27b2a:last-child {
+  font-weight: 300;
+  font-size: 32rpx;
+  color: #2269E5;
+}
+.function-box1 .box1-two view.data-v-1cf27b2a:last-child {
+  width: 140rpx;
+  height: 80rpx;
+  font-weight: 300;
+  font-size: 24rpx;
+  color: #000141;
+  background-image: url("data:image/png;base64,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");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100% 100%;
+  text-align: center;
+  line-height: 80rpx;
+  margin-top: 10rpx;
+}
+.function-box1 .box1-three.data-v-1cf27b2a {
+  font-weight: 300;
+  font-size: 32rpx;
+  color: #000000;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.function-box1 .box1-three image.data-v-1cf27b2a {
+  width: 83rpx;
+  height: 83rpx;
+  margin-bottom: 20rpx;
+}
 .function-box2.data-v-1cf27b2a {
   width: 100%;
   box-sizing: border-box;
-  height: 460rpx;
-  padding: 0 32rpx 32rpx;
+  height: 443rpx;
+  padding: 0 32rpx 15rpx;
 }
 .function-box2 .box2-title.data-v-1cf27b2a {
   width: 100%;
@@ -80,7 +277,7 @@
 }
 .function-box2 .box2-content.data-v-1cf27b2a {
   box-sizing: border-box;
-  padding: 30rpx 50rpx;
+  padding: 22rpx 35rpx;
   width: 686rpx;
   height: 374rpx;
   background: #fff;
@@ -92,13 +289,16 @@
   align-items: center;
 }
 .function-box2 .box2-content .box2-item.data-v-1cf27b2a {
-  width: 120rpx;
-  height: 130rpx;
+  width: 146rpx;
+  height: 143rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
 }
 .function-box2 .box2-content .box2-item image.data-v-1cf27b2a {
   width: 90rpx;
   height: 90rpx;
-  margin: 0 auto;
 }
 .function-box2 .box2-content .box2-item .box2-item-text.data-v-1cf27b2a {
   width: 100%;
@@ -108,7 +308,83 @@
   color: #000000;
   text-align: center;
 }
-button.data-v-1cf27b2a {
-  width: 100rpx;
-  height: 50rpx;
+.advertisement-box.data-v-1cf27b2a {
+  width: 100%;
+  height: 188rpx;
+  padding: 0 32rpx 10rpx;
+  box-sizing: border-box;
+}
+.advertisement-box image.data-v-1cf27b2a {
+  width: 100%;
+  height: 178rpx;
+}
+.service-box.data-v-1cf27b2a {
+  width: 100%;
+  height: 255rpx;
+  padding: 0 32rpx;
+  box-sizing: border-box;
+}
+.service-box .service-title.data-v-1cf27b2a {
+  height: 44rpx;
+  font-weight: 300;
+  font-size: 32rpx;
+  color: #000000;
+  text-align: left;
+  margin-bottom: 5rpx;
+  margin-left: 30rpx;
+}
+.service-box .service-content.data-v-1cf27b2a {
+  width: 100%;
+  height: 206rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.service-box .service-content .service-bg.data-v-1cf27b2a {
+  width: 330rpx;
+  height: 206rpx;
+  background: linear-gradient(to bottom, #AFD5FF, #FFFFFF);
+  border-radius: 24rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+}
+.service-box .service-content .service-bg view.data-v-1cf27b2a:first-child {
+  display: flex;
+  align-items: center;
+  margin-left: 40rpx;
+}
+.service-box .service-content .service-bg view:first-child image.data-v-1cf27b2a {
+  width: 48rpx;
+  height: 48rpx;
+  margin-right: 10rpx;
+}
+.service-box .service-content .service-bg view:first-child text.data-v-1cf27b2a {
+  font-weight: 300;
+  font-size: 28rpx;
+  color: #000000;
+}
+.service-box .service-content .service-bg .service-info.data-v-1cf27b2a {
+  width: 214rpx;
+  font-weight: 300;
+  font-size: 24rpx;
+  color: #4D4B4B;
+  margin-left: 96rpx;
+}
+.service-box .service-content .service-bg view.data-v-1cf27b2a:last-child {
+  margin-left: 174rpx;
+  margin-top: 18rpx;
+  display: flex;
+  align-items: center;
+}
+.service-box .service-content .service-bg view:last-child image.data-v-1cf27b2a {
+  width: 32rpx;
+  height: 32rpx;
+}
+.service-box .service-content .service-bg view:last-child text.data-v-1cf27b2a {
+  font-weight: 300;
+  font-size: 24rpx;
+  color: #4D4B4B;
+  margin-right: 10rpx;
 }
\ No newline at end of file
diff --git a/unpackage/dist/dev/mp-weixin/pages/login/index.js b/unpackage/dist/dev/mp-weixin/pages/login/index.js
index a3cff60..486204f 100644
--- a/unpackage/dist/dev/mp-weixin/pages/login/index.js
+++ b/unpackage/dist/dev/mp-weixin/pages/login/index.js
@@ -29,9 +29,9 @@
     return (_ctx, _cache) => {
       return {
         a: common_vendor.o(($event) => login()),
-        b: common_assets._imports_0,
+        b: common_assets._imports_0$2,
         c: common_vendor.o(($event) => wxLoginPopup()),
-        d: common_assets._imports_1,
+        d: common_assets._imports_1$1,
         e: common_vendor.o(($event) => common_vendor.unref(popupRef).close("bottom")),
         f: common_vendor.o(($event) => wxLoginFn()),
         g: common_vendor.sr(popupRef, "169f96b2-0", {
diff --git a/unpackage/dist/dev/mp-weixin/pages/login/index.wxml b/unpackage/dist/dev/mp-weixin/pages/login/index.wxml
index 2bd07b5..dcb01f3 100644
--- a/unpackage/dist/dev/mp-weixin/pages/login/index.wxml
+++ b/unpackage/dist/dev/mp-weixin/pages/login/index.wxml
@@ -1 +1 @@
-<view class="container"><view class="content"><view class="title"><view class="text1">欢迎登录</view><view class="text2">Welcome to login</view></view><view class="form"><view class="form-input"><input type="text" placeholder="输入账号"></input></view><view class="form-input"><input password type="text" placeholder="输入密码"></input></view></view><view class="login-btn"><button bindtap="{{a}}">登录</button></view><view class="bottom"><view class="divide"><view class="line"></view><view class="divide-text">第三方账号登录</view><view class="line"></view></view><view class="other-login"><image src="{{b}}" alt="" bindtap="{{c}}"/></view></view></view><uni-popup wx:if="{{h}}" class="r" u-s="{{['d']}}" u-r="popupRef" u-i="169f96b2-0" bind:__l="__l" u-p="{{h}}"><view class="popup-content"><text class="popup-title">微信登录</text><view class="hr"></view><view class="img-box"><image src="{{d}}" alt="" class="img"/></view><view class="info-box"><view class="info-text1">青源直饮水平台申请获取以下权限:</view><view class="hr2"></view><view class="info-text2">· 获得你的公开信息（昵称、头像、地区及性别)</view><view class="button-box"><button class="button1" bindtap="{{e}}">取消</button><button class="button2" bindtap="{{f}}">确定</button></view></view></view></uni-popup></view>
\ No newline at end of file
+<view class="container"><view class="content"><view class="title"><view class="text1">欢迎登录</view><view class="text2">Welcome to login</view></view><view class="form"><view class="form-input"><input type="text" placeholder="输入账号"></input></view><view class="form-input"><input password type="text" placeholder="输入密码"></input></view></view><view class="login-btn"><button bindtap="{{a}}">登录</button></view><view class="bottom"><view class="divide"><view class="line"></view><view class="divide-text">第三方账号登录</view><view class="line"></view></view><view class="other-login"><image src="{{b}}" alt="" bindtap="{{c}}"></image></view></view></view><uni-popup wx:if="{{h}}" class="r" u-s="{{['d']}}" u-r="popupRef" u-i="169f96b2-0" bind:__l="__l" u-p="{{h}}"><view class="popup-content"><text class="popup-title">微信登录</text><view class="hr"></view><view class="img-box"><image src="{{d}}" alt="" class="img"/></view><view class="info-box"><view class="info-text1">青源直饮水平台申请获取以下权限:</view><view class="hr2"></view><view class="info-text2">· 获得你的公开信息（昵称、头像、地区及性别)</view><view class="button-box"><button class="button1" bindtap="{{e}}">取消</button><button class="button2" bindtap="{{f}}">确定</button></view></view></view></uni-popup></view>
\ No newline at end of file
diff --git a/unpackage/dist/dev/mp-weixin/pages/login/index.wxss b/unpackage/dist/dev/mp-weixin/pages/login/index.wxss
index 0e813cf..df22e5f 100644
--- a/unpackage/dist/dev/mp-weixin/pages/login/index.wxss
+++ b/unpackage/dist/dev/mp-weixin/pages/login/index.wxss
@@ -153,7 +153,7 @@
   justify-content: center;
   align-items: center;
 }
-.container .content .bottom .other-login img {
+.container .content .bottom .other-login image {
   width: 76rpx;
   height: 76rpx;
   /* background: #345DB1; */
diff --git a/unpackage/dist/dev/mp-weixin/static/images/addCard/back.png b/unpackage/dist/dev/mp-weixin/static/images/addCard/back.png
new file mode 100644
index 0000000..dabb93b
--- /dev/null
+++ b/unpackage/dist/dev/mp-weixin/static/images/addCard/back.png
Binary files differ
diff --git a/unpackage/dist/dev/mp-weixin/static/images/addCard/code.png b/unpackage/dist/dev/mp-weixin/static/images/addCard/code.png
new file mode 100644
index 0000000..2fbb810
--- /dev/null
+++ b/unpackage/dist/dev/mp-weixin/static/images/addCard/code.png
Binary files differ
diff --git a/unpackage/dist/dev/mp-weixin/static/images/index/vip-add.png b/unpackage/dist/dev/mp-weixin/static/images/index/vip-add.png
new file mode 100644
index 0000000..4779124
--- /dev/null
+++ b/unpackage/dist/dev/mp-weixin/static/images/index/vip-add.png
Binary files differ

--
Gitblit v1.9.3