5-10-3

pages.json

@@ -138,7 +138,7 @@
 			{
 				"path": "model/model",
 				"style": {
-					"navigationBarTitleText": "模板页"
+					"navigationBarTitleText": ""
 				}
 			},
 			{

pages/index/index.vue

@@ -42,9 +42,48 @@
 				<view class="item-none" v-if="rmList.length<3" v-for="item in (3-rmList.length)">
 
 				</view>
-			</view>
+			</view>
+			<view class="title-box flex">
+				<view class="flex">
+					<image class="hot margin-r-10" src="../../static/icon/hot.png" mode="scaleToFill"></image>
+					<view class="title">
+						精选名片推荐
+					</view>
+				</view>
+				<navigator url="/pages/user/model/phb">
+					<view class="right flex">
+						<text class="margin-r-10">
+							更多
+						</text>
+						<image src="../../static/icon/next1.png" mode="scaleToFill" class="tip"></image>
+					</view>
+				</navigator>
+			</view>
+			<view class="" style="padding: 0 20rpx;">
+				<view class="bd-btm-item flex" v-for="item in 3">
+					<image src="" mode="" class="item-img"></image>
+					<view class="flex item-info">
+						<view class="item-name">
+							杨阿姨 <image :src="rz" mode=""></image>
+						</view>
+						<view class="item-zy">
+							育儿嫂
+						</view>
+						<view class="item-where">
+							48岁 丨 甘肃人
+						</view>
+						<view class="" style="flex-grow: 1;">
+							
+						</view>
+						<view class="item-vist">
+							浏览量:2362
+						</view>
+					</view>
+				</view>
+			</view>
+			
 			<view class="title-box flex">
-				<view class="flex">
+				<!-- <view class="flex">
 					<image class="hot margin-r-10" src="../../static/icon/hot.png" mode="scaleToFill"></image>
 					<view class="title">
 						名片推荐
@@ -57,7 +96,13 @@
 						</text>
 						<image src="../../static/icon/next1.png" mode="scaleToFill" class="tip"></image>
 					</view>
-				</navigator>
+				</navigator> -->
+				<view class="sy-top">
+					<image src="../../static/icon/tj.png" mode=""></image>
+					<view class="top-tit">
+						精选推荐
+					</view>
+				</view>
 			</view>
 
 			<view class="list-box">
@@ -440,5 +485,90 @@
 				}
 			}
 		}
+	}
+	.sy-top {
+		position: relative;
+		height: 100rpx;
+	width: 100%;
+		image {
+			width: 374rpx;
+			height: 30rpx;
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			margin: auto;
+		}
+	
+		.top-tit {
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #FF478B;
+			text-align: center;
+			line-height: 100rpx;
+		}
+	
+	}
+	.bd-btm-item {
+		height: 260rpx;
+		border-top:  #f2f2f2 1px solid;
+		justify-content: flex-start;
+		&:first-of-type {
+			border-top: none;
+		}
+		.item-info {
+			height: 100%;
+			flex-grow: 1;
+			flex-direction: column;
+			justify-content: flex-start;
+			align-items: flex-start;
+			padding: 34rpx 0 21rpx;
+			
+			.item-name {
+				font-size: 31rpx;
+				font-weight: bold;
+				color: #333333;
+				display: flex;
+				align-items: center;
+				justify-content: flex-start;
+				image {
+					width: 100rpx;
+					height: 30rpx;
+					margin-left: 10rpx;
+				}
+			}
+			.item-zy {
+				padding: 6rpx 20rpx;
+				background: #fee7e4;
+				border-radius: 5rpx;
+				font-size: 22rpx;
+				font-weight: 500;
+				color: #F86859;
+				margin: 16rpx 0 20rpx;
+			}
+			.item-vist,.item-where {
+				font-weight: 500;
+				color: #969696;
+			}
+			.item-vist {
+				font-size: 22rpx;
+				justify-items: flex-end;
+			}
+			.item-where {
+				font-size: 24rpx;
+			}
+		}
+		.item-img {
+			flex-shrink: 0;
+			width: 160rpx;
+			height: 220rpx;
+			margin-right: 22rpx;
+			background-color: #eee;
+		}
+		
+	}
+	.jg {
+		height: 20rpx;
 	}
 </style>

pages/modelData/modeltemplate/model_1.vue

@@ -1,28 +1,40 @@
 <template>
 	<view class="mone">
 		<view class="m-top">
-			<image :src="baseURL + '/resource/icon/model1/top-base.png'" mode="" class="top-bg"></image>
 			<view class="top-user flex">
 				<image :src="cardInfo.avatar" mode="" class="user-logo"></image>
 			</view>
 			<view class="user-name">
 				{{cardInfo.name || '暂无'}}
 			</view>
+			<view class="u-zy">
+				<view class="">
+					职业:{{cardInfo.user_work_type_title || '暂无'}}
+				</view>
+			</view>
 			<button type="default" class="top-btn fx-btn" v-if="isShare" open-type="share">
 				<image :src="baseURL + '/resource/icon/model1/fx.png'" mode=""></image>
 			</button>
 			<view class="top-btn visit mvisit padding-r-10" v-if="isLook==1||isLook==2">
 				浏览:{{shareNumber}}
 			</view>
+			<image :src="baseURL + '/resource/icon/model1/hua7.png'" mode="" class="top-bg"></image>
+			<view class="u-bh flex">
+				<image :src="baseURL + '/resource/icon/model1/bh.png'" mode=""></image>编号:{{cardInfo.no|| "myj23031421"}}
+			</view>
 		</view>
 		<view class="m-body gr">
 			<!-- 个人信息 -->
 			<view class="hua2">
 				<view class="m-card">
 					<image :src="baseURL + '/resource/icon/model1/card-bg.png'" mode="" class="card-bg"></image>
-					<view class="card-tit flex">
-						<image :src="baseURL + '/resource/icon/model1/m1.png'" mode="" class="tit-logo"></image>个人信息
+					<view class=" flex">
+						<view class="card-tit flex" style="flex-shrink: 0;">
+							<image :src="baseURL + '/resource/icon/model1/m1.png'" mode="" class="tit-logo"></image>个人信息
+						</view>
+						
 					</view>
+					
 					<view class="card-content">
 
 						<view class="user-info flex">
@@ -50,9 +62,6 @@
 							<view class="info-item-b">
 								学<text class="qianger"></text>历： {{cardInfo.education || '暂无'}}
 							</view>
-							<view class="info-item-b">
-								学<text class="qianger"></text>历： {{cardInfo.education || '暂无'}}
-							</view>
 							<!-- <view class="info-item-b">
 								综 <text class="laner"></text> 合<text class="laner"></text>分： 50
 							</view> -->
@@ -182,7 +191,7 @@
 		},
 		data() {
 			return {
-				default: {
+				defaults: {
 					name: '佚名',
 					avatar: 'https://api.myjie.cn/resource/icon/base/f.png',
 					age: '41',
@@ -231,7 +240,7 @@
 			...mapState(['baseURL']),
 			cardInfo() {
 				if (this.isDefault) {
-					return this.default
+					return this.defaults
 				} else {
 					return this.templateDetail
 				}
@@ -249,12 +258,14 @@
 			width: 750rpx;
 			position: relative;
 			width: 750rpx;
-			height: 370rpx;
+			height: 450rpx;
 
 			.top-bg {
-				position: relative;
-				width: 750rpx;
-				height: 370rpx;
+				position: absolute;
+				width: 207rpx;
+				height: 123rpx;
+				bottom: 11rpx;
+				left:32rpx;
 			}
 
 			.readme {
@@ -266,7 +277,24 @@
 				right: 0;
 				margin: auto;
 			}
-
+			.u-zy {
+				position: absolute;
+				top: 375rpx;
+				left: 0;
+				right: 0;
+				margin: auto;
+				display: flex;
+				justify-content: center;
+				view {
+					display: inline-block;
+					padding: 8rpx 8rpx 8rpx 16rpx;
+					border: 1px solid #F46C85;
+					border-radius: 10rpx;
+					font-size: 26rpx;
+					font-weight: 500;
+					color: #F46C85;
+				}
+			}
 			.top-user {
 				width: 222rpx;
 				height: 222rpx;
@@ -347,7 +375,7 @@
 			}
 
 			.mvisit {
-				top: 70rpx;
+				top: 150rpx;
 			}
 		}
 	}
@@ -664,4 +692,20 @@
 			transform: rotateY(180deg);
 		}
 	}
+	.u-bh {
+		justify-content: flex-start;
+		position: absolute;
+		top: 10rpx;
+		left: 10rpx;
+		padding-right: 30rpx;
+		image {
+			width: 26rpx;
+			height: 26rpx;
+			margin-right: 10rpx;
+		}
+		font-size: 28rpx;
+		font-weight: bold;
+		color: #F46C85;
+		
+	}
 </style>

pages/modelData/modeltemplate/model_2.vue

@@ -8,6 +8,9 @@
 			<view class="top-btn visit mvisit padding-r-10" v-if="isLook==1||isLook==2">
 				浏览:{{shareNumber}}
 			</view>
+			<view class="u-bh flex ">
+				<image :src="baseURL + '/resource/icon/model2/bh.png'" mode=""></image>编号:{{cardInfo.no || "myj23031421"}}
+			</view>
 		</view>
 		<view class="m-body ">
 			<!-- 个人信息 -->
@@ -19,9 +22,7 @@
 						{{cardInfo.name || '暂无'}}
 					</view>
 					<!-- 编号 -->
-					<view class="u-bh flex">
-						<image :src="baseURL + '/resource/icon/model2/bh.png'" mode=""></image>编号:{{cardInfo.no || "myj23031421"}}
-					</view>
+					
 					<!-- 头像 -->
 					<view class="user-img">
 						<image :src="baseURL + '/resource/icon/model2/txk.png'" mode="" class="base-bg"></image>
@@ -190,7 +191,7 @@
 		},
 		data() {
 			return {
-				default: {
+				defaults: {
 					name: '佚名',
 					avatar: 'https://api.myjie.cn/resource/icon/base/f.png',
 					age: '41',
@@ -240,7 +241,7 @@
 			cardInfo() {
 				console.log("进入");
 				if (this.isDefault) {
-					return this.default
+					return this.defaults
 				} else {
 					return this.templateDetail
 				}
@@ -311,7 +312,7 @@
 				padding-left: 24rpx;
 			}
 			.mvisit {
-				top: 70rpx;
+				top: 150rpx;
 			}
 		}
 	}
@@ -408,7 +409,7 @@
 			justify-content: center;
 			padding-top: 55rpx;
 			position: relative;
-
+			padding-bottom: 30rpx;
 			&::after {
 				content: '';
 				width: 60rpx;
@@ -416,7 +417,7 @@
 				background: #FE9E32;
 				border-radius: 5rpx;
 				position: absolute;
-				bottom: -20rpx;
+				bottom: 10rpx;
 				left: 0;
 				right: 0;
 				margin: auto;
@@ -689,6 +690,10 @@
 	}
 	.u-bh {
 		justify-content: flex-start;
+		position: absolute;
+		top: 10rpx;
+		left: 10rpx;
+		padding-right: 30rpx;
 		image {
 			width: 26rpx;
 			height: 26rpx;
@@ -699,4 +704,20 @@
 		color: #202e4f;
 		
 	}
+	.u-bh {
+		justify-content: flex-start;
+		position: absolute;
+		top: 10rpx;
+		left: 10rpx;
+		padding-right: 30rpx;
+		image {
+			width: 26rpx;
+			height: 26rpx;
+			margin-right: 10rpx;
+		}
+		font-size: 28rpx;
+		font-weight: bold;
+		color: #030303;
+		
+	}
 </style>

pages/user/model/model.vue

@@ -115,6 +115,9 @@
 			//个人中心提交数据预览
 			if (this.type === 1) {
 				this.userTemplate = uni.getStorageSync('modeldata');
+				uni.setNavigationBarTitle({
+					title:'名片预览'
+				})
 				return
 			}
 			//分享预览
@@ -350,6 +353,9 @@
 				}).then(res => {
 					that.modelInfo = res.data;
 					if (that.type == 0) {
+						uni.setNavigationBarTitle({
+							title:that.modelInfo.title
+						})
 						that.shareNumber = res.data.look_count
 					}
 				})
@@ -373,6 +379,9 @@
 						// 修改为非默认数据
 						that.isDefault = false;
 						that.shareNumber = res.data.card_look_count;
+						uni.setNavigationBarTitle({
+							title: this.userTemplate.name + '的分享名片'
+						})
 					}
 				})
 			},

pages/user/model/phb.vue

@@ -1,13 +1,74 @@
 <template>
-	<view class="content" >
+	<view class="content">
+		<view class="nav flex">
+			<view class="nav-item" v-for="(item,index) in navList" @click="navClick(index)"
+				:class="{'action': index == currentIndex}">
+				{{item.title}}
+			</view>
+		</view>
 		<image :src="top_bg" mode="" class="top-bg"></image>
 		<view class="bd-wrap flex">
 			<view class="bd">
 				<image :src="tit_bg" mode="widthFix" class="bd-tit"></image>
+				<view class="bd-top flex">
+					<view class="top-item">
+						<view class="top-logo yp">
+							
+						</view>
+						<view class="top-name">
+							李小图
+						</view>
+						<view class="top-visit">
+							86.4W
+						</view>
+					</view>
+					<view class="top-item-center">
+						<view class="top-logo  jp">
+							
+						</view>
+						<view class="top-name">
+							李小图
+						</view>
+						<view class="top-visit">
+							86.4W
+						</view>
+					</view>
+					<view class="top-item">
+						<view class="top-logo tp">
+							
+						</view>
+						<view class="top-name">
+							李小图
+						</view>
+						<view class="top-visit">
+							86.4W
+						</view>
+					</view>
+				</view>
+				<view class="bd-btm-item flex" v-for="item in 3">
+					<image src="" mode="" class="item-img"></image>
+					<view class="flex item-info">
+						<view class="item-name">
+							杨阿姨 <image :src="rz" mode=""></image>
+						</view>
+						<view class="item-zy">
+							育儿嫂
+						</view>
+						<view class="item-where">
+							48岁 丨 甘肃人
+						</view>
+						<view class="" style="flex-grow: 1;">
+							
+						</view>
+						<view class="item-vist">
+							浏览量:2362
+						</view>
+					</view>
+				</view>
 			</view>
 		</view>
 		<view class="" style="height: 60rpx;">
-			
+
 		</view>
 	</view>
 </template>
@@ -17,7 +78,16 @@
 		data() {
 			return {
 				top_bg: this.$store.state.baseURL + '/resource/icon/base/phb-bg.png',
-				tit_bg: this.$store.state.baseURL + '/resource/icon/llph.png'
+				tit_bg: this.$store.state.baseURL + '/resource/icon/llph.png',
+				rz: this.$store.state.baseURL + '/resource/icon/rz.png',
+				navList: [{
+					title: '周排行',
+					state: 0
+				}, {
+					title: '月排行',
+					state: 1
+				}],
+				currentIndex: 0,
 			}
 		},
 		onLoad() {
@@ -33,46 +103,216 @@
 
 		},
 		methods: {
-
+			navClick(index) {
+				this.currentIndex = index
+			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	page ,.content{
+	page,
+	.content {
 		height: auto;
 		min-height: 100%;
 		background-color: #900408;
 	}
+
+	.nav {
+		width: 750rpx;
+		height: 88rpx;
+
+		.nav-item {
+			line-height: 88rpx;
+			width: 50%;
+			text-align: center;
+			font-size: 30rpx;
+			font-weight: 500;
+			color: #333333;
+			height: 100%;
+		}
+
+		.action {
+			font-weight: bold;
+			position: relative;
+
+			&::after {
+				content: '';
+				width: 50rpx;
+				height: 6rpx;
+				background: #FE5B38;
+				border-radius: 3rpx;
+				position: absolute;
+				left: 0;
+				right: 0;
+				bottom: 6rpx;
+				margin: auto;
+			}
+		}
+
+		background-color: #fff;
+	}
+
 	.top-bg {
 		width: 750rpx;
 		height: 742rpx;
 	}
+
 	.bd-wrap {
 		width: 699rpx;
-		height: 1204rpx;
 		background: #F6E7E4;
 		border-radius: 14rpx;
 		justify-content: center;
-		margin:-150rpx auto 0;
+		margin: -150rpx auto 0;
 		position: relative;
+		padding: 16rpx;
 		.bd {
 			width: 666rpx;
-			height: 1173rpx;
 			background: #FFFFFF;
-			border: 1rpx solid #A30F0E;
+			border: 2px solid #A30F0E;
 			border-radius: 14rpx;
 			position: relative;
+			padding: 35rpx;
 			.bd-tit {
-			 width: 443rpx;
-			 height: 69rpx;
-			position: absolute;
-			top: -35rpx;
-			left: 0;
-			right: 0;
-			margin: auto;
+				width: 443rpx;
+				height: 69rpx;
+				position: absolute;
+				top: -35rpx;
+				left: 0;
+				right: 0;
+				margin: auto;
+			}
+			.bd-top {
+				height: 376rpx;
+				width: 100%;
+				
+				padding-bottom: 47rpx;
+				.jp,.yp,.tp {
+					&::after {
+						content: '';
+						width: 58rpx;
+						height: 66rpx;
+						position: absolute;
+						position: absolute;
+						bottom: 10rpx;
+						right: -10rpx;
+						z-index: 999;
+					}
+				}
+				.jp {
+					&::after {
+						
+						background: url($base-url + '/resource/icon/jp.png') no-repeat;
+						background-size: 100% 100%;
+					}
+				}
+				.yp {
+					&::after {
+						right: -15rpx;
+						background: url($base-url + '/resource/icon/yp.png') no-repeat;
+						background-size: 100% 100%;
+					}
+				}
+				.tp {
+					&::after {
+						right: -15rpx;
+						background: url($base-url + '/resource/icon/tp.png') no-repeat;
+						background-size: 100% 100%;
+					}
+				}
+				.top-item, .top-item-center {
+					height: 100%;
+					display: flex;
+					flex-direction: column;
+					justify-content: flex-end;
+					align-items: center;
+					.top-logo {
+						border-radius: 50%;
+						border: #900408 1px solid;
+						position: relative;
+					}
+					.top-name {
+						font-size: 26rpx;
+						font-weight: bold;
+						color: #A30F0E;
+						margin: 15rpx 0;
+					}
+					.top-visit {
+						font-size: 22rpx;
+						font-weight: bold;
+						color: #171717;
+					}
+				}
+				.top-item {
+					flex-grow: 3;
+					.top-logo {
+						width: 139rpx;
+						height: 139rpx;
+					}
+				}
+				.top-item-center {
+					flex-grow: 4;
+					.top-logo {
+						width: 198rpx;
+						height: 197rpx;
+					}
+				}
+			}
+			.bd-btm-item {
+				height: 260rpx;
+				border-top:  #f2f2f2 1px solid;
+				justify-content: flex-start;
+				.item-info {
+					height: 100%;
+					flex-grow: 1;
+					flex-direction: column;
+					justify-content: flex-start;
+					align-items: flex-start;
+					padding: 34rpx 0 21rpx;
+					
+					.item-name {
+						font-size: 31rpx;
+						font-weight: bold;
+						color: #333333;
+						display: flex;
+						align-items: center;
+						justify-content: flex-start;
+						image {
+							width: 100rpx;
+							height: 30rpx;
+							margin-left: 10rpx;
+						}
+					}
+					.item-zy {
+						padding: 6rpx 20rpx;
+						background: #fee7e4;
+						border-radius: 5rpx;
+						font-size: 22rpx;
+						font-weight: 500;
+						color: #F86859;
+						margin: 16rpx 0 20rpx;
+					}
+					.item-vist,.item-where {
+						font-weight: 500;
+						color: #969696;
+					}
+					.item-vist {
+						font-size: 22rpx;
+						justify-items: flex-end;
+					}
+					.item-where {
+						font-size: 24rpx;
+					}
+				}
+				.item-img {
+					flex-shrink: 0;
+					width: 160rpx;
+					height: 220rpx;
+					margin-right: 22rpx;
+					background-color: #eee;
+				}
+				
 			}
 		}
 	}
-	
 </style>