jiedian

pages.json

@@ -94,6 +94,12 @@
 					"navigationBarTitleText": "提交成功"
 				}
 			},
+			{
+				"path": "pages/user/jiedian",
+				"style": {
+					"navigationBarTitleText": "我的接点"
+				}
+			},
 			{
 				"path": "pages/user/withdraw",
 				"style": {

pages/user/jiedian.vue

@@ -1,34 +1,356 @@
 <template>
-	<view class="container">
-		<view class="jiedianbackground">
-			<image src="../../static/image/jiedian.png" mode=""></image>
+	<view class="content">
+		<view class="container">
+			<view class="jiedianbackground">
+				<image src="../../static/image/jiedian.png" mode=""></image>
+			</view>
+			<view class="number-box">
+				<view class="number">
+					<text>{{people}}</text>人
+				</view>
+				<view class="renshu">
+					我的接点人数
+				</view>
+			</view>
+		</view>
+		<view class="message">
+			<view class="yeji">
+				<view class="yeji-a">
+					<view class="yeji-top">
+						A区业绩
+					</view>
+					<view class="yeji-buttom">￥{{a}}</view>
+				</view>
+				<view class="border"></view>
+				<view class="yeji-a">
+					<view class="yeji-top">
+						B区业绩
+					</view>
+					<view class="yeji-buttom">￥{{b}}</view>
+				</view>
+				<view class="border"></view>
+				<view class="yeji-a">
+					<view class="yeji-top">
+						C区业绩
+					</view>
+					<view class="yeji-buttom">￥{{c}}</view>
+				</view>
+			</view>
+			<view class="relation-box">
+				<view class="relation">
+					<view class="headbox">
+						<view class="head">
+							<view class="photo">
+								<image src="../../static/image/photo.jpg" mode=""></image>
+							</view>
+						</view>
+						<view class="head-title">
+							<image src="../../static/image/jiedian1.png" mode=""></image>
+						</view>
+					</view>
+					<view class="information">
+						<view class="name">
+							徐浩岚
+						</view>
+						<view class="cell">
+							18252757278
+						</view>
+					</view>
+				</view>
+				<view class="sanchaji">
+					<image src="../../static/image/sanchaji.png" mode=""></image>
+				</view>
+				<view class="subordinate">
+					<view class="headbox" >
+						<view class="head">
+							<view class="photo">
+								<image src="../../static/image/photo.jpg" mode=""></image>
+							</view>
+						</view>
+						<view class="head-title">
+							<image src="../../static/image/jiedian1.png" mode=""></image>
+						</view>
+					</view>
+					<view class="headbox" >
+						<view class="head">
+							<view class="photo">
+								<image src="../../static/image/photo.jpg" mode=""></image>
+							</view>
+						</view>
+						<view class="head-title">
+							<image src="../../static/image/jiedian1.png" mode=""></image>
+						</view>
+					</view>
+					<view class="headbox" >
+						<view class="head">
+							<view class="photo">
+								<image src="../../static/image/photo.jpg" mode=""></image>
+							</view>
+						</view>
+						<view class="head-title">
+							<image src="../../static/image/jiedian1.png" mode=""></image>
+						</view>
+					</view>
+				</view>
+			</view>
+
 		</view>
-		
 	</view>
 </template>
 
 <script>
-	export default{
-		data(){
-			return{}
+	export default {
+		data() {
+			return {
+				a: 1,
+				b: 2,
+				c: 3,
+				people: 255,
+				//'12345678901'.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
+			}
 		},
-		methods:{}
+		methods: {}
 	}
 </script>
 
 <style lang="scss">
-	page{
+	page {
 		padding: 0;
 		margin: 0;
+		height: 100%;
 		background-color: #FFFFFF;
 	}
-	.container{
-		height: 100%;
+
+	.content {}
+
+	.container {
+		width: 750rpx;
+		height: 400rpx;
+		position: relative;
+
+		.jiedianbackground {
+			position: absolute;
+			width: 750rpx;
+			height: 400rpx;
+
+			image {
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		.number-box {
+			width: 750rpx;
+			height: 400rpx;
+			position: absolute;
+			display: flex;
+			justify-content: center;
+			flex-direction: column;
+			align-items: center;
+
+			.number {
+				font-size: 30rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #3F7C1F;
+
+				text {
+					font-size: 72rpx;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #3F7C1F;
+					line-height: 86rpx;
+				}
+			}
+
+			.renshu {
+				font-size: 30rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #3F7C1F;
+			}
+		}
 	}
-	.jiedianbackground{
-		image{
-			width: 100%;
-			height: 100%;
+
+	.message {
+		padding: 0 30rpx;
+
+		.relation-box {
+			margin-top: 100rpx;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+
+			.relation {
+				position: relative;
+				display: flex;
+				align-items: center;
+				
+
+				.headbox {
+
+					position: absolute;
+					width: 154rpx;
+					height: 154rpx;
+
+					.head {
+						width: 154rpx;
+						height: 154rpx;
+						background: #EF9E20;
+						box-shadow: 5rpx 0rpx 5rpx 0rpx rgba(110, 171, 78, 0.26);
+						border-radius: 50%;
+						overflow: hidden;
+
+						.photo {
+							width: 154rpx;
+							height: 154rpx;
+
+							image {
+								width: 100%;
+								height: 100%;
+							}
+						}
+					}
+
+					.head-title {
+						margin: -30rpx 30rpx 0 30rpx;
+						width: 94rpx;
+						height: 32rpx;
+
+						image {
+							width: 100%;
+							height: 100%;
+						}
+					}
+				}
+
+				.information {
+					margin-left: 77rpx;
+					display: flex;
+					justify-content: center;
+					flex-direction: column;
+					width: 297rpx;
+					height: 137rpx;
+					align-items: center;
+					background: #FFFFFF;
+					border: 4rpx solid #6EAB4E;
+					border-radius: 10rpx;
+
+					.name {
+						font-size: 32rpx;
+						font-family: PingFang SC;
+						font-weight: bold;
+						color: #3F7C1F;
+						line-height: 48rpx;
+					}
+
+					.cell {
+						margin-left: 70rpx;
+						font-size: 26rpx;
+						font-family: PingFang SC;
+						font-weight: 500;
+						color: #ABD56F;
+						line-height: 48rpx;
+					}
+				}
+
+
+			}
+
+			.sanchaji {
+				margin: 30rpx 0;
+				width: 530rpx;
+				height: 91rpx;
+
+				image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+
+			.subordinate {
+				width: 750rpx;
+				display: flex;
+				justify-content: space-around;
+					.headbox {
+						
+						width: 154rpx;
+						height: 154rpx;
+
+						.head {
+							width: 154rpx;
+							height: 154rpx;
+							background: #EF9E20;
+							box-shadow: 5rpx 0rpx 5rpx 0rpx rgba(110, 171, 78, 0.26);
+							border-radius: 50%;
+							overflow: hidden;
+
+							.photo {
+								width: 154rpx;
+								height: 154rpx;
+
+								image {
+									width: 100%;
+									height: 100%;
+								}
+							}
+						}
+
+						.head-title {
+							margin: -30rpx 30rpx 0 30rpx;
+							width: 94rpx;
+							height: 32rpx;
+
+							image {
+								width: 100%;
+								height: 100%;
+							}
+						}
+					
+				}
+			}
+		}
+
+		.yeji {
+			position: relative;
+			margin-top: -72rpx;
+			width: 690rpx;
+			height: 143rpx;
+			background: #FFFFFF;
+			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
+			border-radius: 10rpx;
+			display: flex;
+			justify-content: space-around;
+			align-items: center;
+
+			.yeji-a {
+				display: flex;
+				flex-direction: column;
+				justify-content: space-around;
+				align-items: center;
+
+				.yeji-top {
+					font-size: 24rpx;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #333333;
+					line-height: 35px;
+				}
+
+				.yeji-buttom {
+					font-size: 34rpx;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #333333;
+					line-height: 35px;
+				}
+			}
+
+			.border {
+				width: 1rpx;
+				height: 51rpx;
+				background: #DDDDDD;
+			}
 		}
 	}
 </style>