1

pages.json

@@ -103,6 +103,12 @@
 			"style": {
 				"navigationBarTitleText": "我的名片"
 			}
+		},
+		{
+			"path": "pages/mine/card/card-detail",
+			"style": {
+				"navigationBarTitleText": "编辑名片"
+			}
 		}
 	],
 	"subPackages": [{

pages/mine/card/card-detail.vue

@@ -0,0 +1,22 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

pages/mine/card/my-card.vue

@@ -1,15 +1,39 @@
 <template>
 	<view class="my-card-box">
-		<view class="card-dom">
+		<view class="card-dom click">
 			<view class="card-title">
+				<!-- 需要根据平台code取对应的图片 TODO -->
 				<image src="@/static/platform/xiaohongshu.png" mode="aspectFit"></image>
 				<text>小红书博主</text>
-				<view class="edit-text">
-					<image style="margin-right: 10rpx;" src="@/static/platform/xiaohongshu.png" mode="aspectFit">
+				<view class="edit-text" @click="edit()">
+					<image style="margin-right: 10rpx;width: 30rpx;height: 30rpx;" src="@/static/mine/edit.png"
+						mode="aspectFit">
 					</image>
 					编辑
 				</view>
 			</view>
+			<view class="card-content">
+				<image src="@/static/images/profile.jpg" mode="aspectFit"></image>
+				<view class="card-person-info">
+					<view style="font-weight: bold;">
+						<view>李林 <image src="@/static/mine/sex_boy.png" mode="aspectFit"></image>
+							<!-- 需要判断用户性别 TODO -->
+							<!-- <image src="@/static/mine/sex_girl.png" mode="aspectFit"></image> -->
+						</view>
+					</view>
+					<view class="detail-text">
+						粉丝：1000
+					</view>
+					<view class="detail-text">
+						昵称：爱是大会
+					</view>
+				</view>
+			</view>
+			<image class="choosed" src="@/static/mine/choosed.png" mode="aspectFit"></image>
+		</view>
+		<view class="add-new-card" @click="addCard()">
+			<image src="@/static/mine/new.png" mode="aspectFit"></image>
+			<view>添加新的名片</view>
 		</view>
 	</view>
 </template>
@@ -22,7 +46,13 @@
 			}
 		},
 		methods: {
-
+			//名片编辑
+			edit() {
+				this.$tab.navigateTo('/pages/mine/card/card-detail')
+			},
+			addCard() {
+				this.$tab.navigateTo('/pages/mine/card/card-detail')
+			}
 		}
 	}
 </script>
@@ -41,8 +71,25 @@
 		justify-content: center;
 		position: relative;
 
+		.click {
+			background-color: #FFF4F6 !important;
+			border: 2rpx solid #FC1F3E !important;
+			position: relative;
+
+			.choosed {
+				width: 80rpx;
+				height: 80rpx;
+				position: absolute;
+				right: 0;
+				bottom: -4rpx;
+			}
+		}
+
 		.card-dom {
 			width: 100%;
+			border: 2rpx solid white;
+			padding: 25rpx;
+			border-radius: 40rpx;
 			background-color: white;
 			position: relative;
 			z-index: 10;
@@ -51,25 +98,84 @@
 			flex-direction: column;
 			align-items: center;
 			justify-content: center;
+			margin-bottom: 20rpx;
 
 			.card-title {
+				width: 100%;
 				display: flex;
 				align-items: center;
 				justify-content: center;
 
 				image {
-					width: 80rpx;
-					height: 80rpx;
+					width: 40rpx;
+					height: 40rpx;
 				}
 
 				text {
+					padding-left: 15rpx;
 					flex: 1;
 				}
 
 				.edit-text {
-					width: 100rpx;
+					display: flex;
+					align-items: center;
+					justify-content: flex-end;
+					width: 150rpx;
 				}
 			}
+
+			.card-content {
+				margin-top: 20rpx;
+				width: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: flex-start;
+
+				image {
+					width: 120rpx;
+					height: 120rpx;
+					border-radius: 15rpx;
+				}
+
+				.card-person-info {
+					padding-left: 20rpx;
+					flex: 1;
+					display: flex;
+					align-items: self-start;
+					justify-content: center;
+					flex-direction: column;
+
+					image {
+						margin-left: 10rpx;
+						width: 20rpx;
+						height: 20rpx;
+					}
+
+					.detail-text {
+						font-size: 20rpx;
+						padding: 5rpx 0;
+					}
+				}
+			}
+		}
+
+		.add-new-card {
+			width: 100%;
+			padding: 90rpx;
+			border-radius: 40rpx;
+			background-color: white;
+			position: relative;
+			z-index: 10;
+			font-size: 26rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			image {
+				margin-right: 20rpx;
+				width: 50rpx;
+				height: 50rpx;
+			}
 		}
 	}
 </style>