2023-5-10

pages/modelData/modeltemplate/model_3.vue

@@ -16,6 +16,8 @@
 		<view class="user-img">
 			<image class="image" :src="cardInfo.avatar" mode="widthFix"></image>
 		</view>
+		<image class="content-left-icon" src="../../../static/model3/tap6.png" mode="widthFix"></image>
+		<image class="page-bottom-right" src="../../../static/model3/tap7.png" mode="widthFix"></image>
 		<view class="share-number">
 			浏览：{{shareNumber}}
 		</view>
@@ -31,31 +33,42 @@
 			</view>
 			<image class="line-icon margin-t-10" src="../../../static/model3/tap11.png" mode="widthFix"></image>
 		</view>
+		<image class="right-center-icon" src="../../../static/model3/tap5.png" mode="widthFix"></image>
 		<view class="content ">
+			<view class="icon-round-min">
+
+			</view>
+			<view class="icon-round-base">
+
+			</view>
+			<view class="content-icon-right icon-box-border">
+				<view class="content-right-content icon-box-content">
+				</view>
+			</view>
 			<view class="center-data flex">
 				<view class="left">
 					<view class="list-item">
-						年龄：40
+						年龄： {{cardInfo.age|| '暂无'}}
 					</view>
 					<view class="list-item">
-						从业：40
+						从业： {{(cardInfo.work_year + '年')|| '暂无'}}
 					</view>
 					<view class="list-item">
-						籍贯：40
+						籍贯： {{cardInfo.ancestral_place || '暂无'}}
 					</view>
 					<view class="list-item">
-						学历：40
+						学历： {{cardInfo.education || '暂无'}}
 					</view>
 				</view>
 				<view class="right">
 					<view class="list-item">
-						属相：40
+						属相：{{cardInfo.twelve|| '暂无'}}
 					</view>
 					<view class="list-item">
-						星座：40
+						星座：{{cardInfo.constellation || '暂无'}}
 					</view>
 					<view class="list-item">
-						民族：40
+						民族： {{cardInfo.minority || '暂无'}}
 					</view>
 				</view>
 			</view>
@@ -72,16 +85,89 @@
 						<view class="item" v-for="i in 18"></view>
 					</view>
 					<view class="gzt-price">
-						<text>{{cardInfo.service_min_price}}</text>元/{{ cardInfo.service_time_type_title && cardInfo.service_time_type_title.replace('每','')}}
+						<text
+							class="money">{{cardInfo.service_min_price}}</text>元/{{ cardInfo.service_time_type_title && cardInfo.service_time_type_title.replace('每','')}}
 					</view>
 					<view class=" gzt-price-b">
-						<text>{{cardInfo.service_max_price}}</text>元/{{cardInfo.service_time_type_title && cardInfo.service_time_type_title.replace('每','')}}
+						<text
+							class="money">{{cardInfo.service_max_price}}</text>元/{{cardInfo.service_time_type_title && cardInfo.service_time_type_title.replace('每','')}}
 					</view>
 				</view>
 				<image :src="baseURL + '/resource/icon/model1/yrz.png'" mode="" class="rz"
 					v-if="cardInfo.is_type_audit == 1"></image>
 			</view>
 		</view>
+		<view class="content-text">
+			<view class="flex margin-b-20">
+				<view class="name">
+					自我评价
+				</view>
+				<image class="icon" src="../../../static/model3/tap13.png" mode="widthFix"></image>
+			</view>
+			<view class="flex">
+				<view></view>
+				<image class="line" src="../../../static/model3/tap11.png" mode="widthFix"></image>
+			</view>
+			<view class="text margin-t-20">
+				{{cardInfo.service_intro_content}}
+			</view>
+			<view class="img-list flex">
+				<image :src="siiitem" mode="scaleToFill" v-for="siiitem in cardInfo.service_intro_imgs"></image>
+			</view>
+		</view>
+		
+		<view class="content-text" >
+			<view class="flex margin-b-20">
+				<view class="name">
+					我的证书
+				</view>
+				<image class="icon" src="../../../static/model3/tap13.png" mode="widthFix"></image>
+			</view>
+			<view class="flex">
+				<view></view>
+				<image class="line" src="../../../static/model3/tap11.png" mode="widthFix"></image>
+			</view>
+			<view class="img-list flex" >
+				<image :src="siiitem" mode="scaleToFill" v-for="siiitem in cardInfo.service_audit_imgs"></image>
+			</view>
+		</view>
+		<view class="content-text">
+			<view class="flex margin-b-20">
+				<view class="name">
+					服务内容
+				</view>
+				<image class="icon" src="../../../static/model3/tap13.png" mode="widthFix"></image>
+			</view>
+			<view class="flex">
+				<view></view>
+				<image class="line" src="../../../static/model3/tap11.png" mode="widthFix"></image>
+			</view>
+			<view class="card-content">
+				<view class="fw" v-for="spaitem in cardInfo.service_project_ar">
+					<view class="fw-tit">
+						<text class="yg"></text>{{spaitem.title}}
+					</view>
+					<view class="fw-content">
+						{{spaitem.content}}
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="content-text">
+			<view class="flex margin-b-20">
+				<view class="name">
+					服务照片
+				</view>
+				<image class="icon" src="../../../static/model3/tap13.png" mode="widthFix"></image>
+			</view>
+			<view class="flex">
+				<view></view>
+				<image class="line" src="../../../static/model3/tap11.png" mode="widthFix"></image>
+			</view>
+			<view class="img-list flex" >
+				<image :src="siiitem" mode="scaleToFill" v-for="siiitem in cardInfo.service_imgs"></image>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -181,11 +267,11 @@
 
 <style lang="scss" scoped>
 	.mone {
-		padding-bottom: 30rpx;
+		padding-bottom: 150rpx;
 		background-color: #FFFFFF;
 		min-height: 100vh;
 		padding-top: 580rpx;
-
+		position: relative;
 		.top-left-icon-1 {
 			background-color: rgba(15, 61, 96, 1);
 			border-bottom-right-radius: 110rpx;
@@ -308,6 +394,19 @@
 				width: 360rpx;
 			}
 		}
+
+		.right-center-icon {
+			width: 190rpx;
+			position: absolute;
+			top: 900rpx;
+			right: 0;
+		}
+		.page-bottom-right{
+			width: 188rpx;
+			position: absolute;
+			bottom: 130rpx;
+			right: 0;
+		}
 	}
 
 	.icon-box-border {
@@ -320,6 +419,76 @@
 			border-radius: 900rpx;
 		}
 	}
+	.content-left-icon{
+		width: 86rpx;
+		position: absolute;
+		top: 1800rpx;
+		left: 0rpx;
+	}
+	.content-text {
+		margin: 30rpx;
+		padding: 55rpx;
+		background-color: rgba(245, 248, 250, 1);
+		position: relative;
+		.card-content {
+			font-size: 26rpx;
+			font-weight: 500;
+			color: #2C2E35;
+			position: relative;
+			.fw {
+				font-size: 26rpx;
+				font-weight: 500;
+				color: #2C2E35;
+				padding: 10rpx 0;
+			
+				.fw-tit {
+					color: #266B9E;
+					display: flex;
+					align-items: center;
+			
+					.yg {
+						background-color: #266B9E;
+						display: inline-block;
+						width: 10rpx;
+						height: 10rpx;
+						border-radius: 50%;
+						margin-right: 10rpx;
+					}
+				}
+			
+				.fw-content {
+					padding-top: 10rpx;
+					padding-left: 18rpx;
+					text-align: justify;
+				}
+			
+			}
+		}
+		.name {
+			font-size: 65rpx;
+			font-family: FZYanSongS-DB-GB;
+			font-weight: bold;
+			background-color: #266B9E;
+			line-height: 60rpx;
+			padding: 20rpx 40rpx;
+			padding-bottom: 25rpx;
+			color: #FFF;
+		}
+
+		.icon {
+			width: 223rpx;
+		}
+
+		.line {
+			width: 400rpx;
+		}
+
+		.text {
+			line-height: 1.5;
+			font-size: 26rpx;
+			font-family: Adobe Heiti Std;
+		}
+	}
 
 	.content {
 		padding: 36rpx;
@@ -327,31 +496,74 @@
 		font-size: $font-lg;
 		color: #266B9E;
 		font-weight: bold;
+		position: relative;
+		padding-bottom: 50rpx;
+		margin-bottom: 30rpx;
+
+		.content-icon-right {
+			position: absolute;
+			right: 50rpx;
+			top: 100rpx;
+			border: 1px solid #266B9E;
+			width: 75rpx;
+			height: 75rpx;
+			padding: 10rpx;
+
+			.content-right-content {
+				background-color: rgb(217, 217, 217);
+			}
+		}
+
+		.icon-round-min {
+			background-color: rgb(28, 109, 161);
+			border-radius: 100rpx;
+			width: 30rpx;
+			height: 30rpx;
+			position: absolute;
+			top: 30rpx;
+			left: 300rpx;
+		}
+
+		.icon-round-base {
+			background-color: rgb(28, 109, 161);
+			border-radius: 100rpx;
+			width: 60rpx;
+			height: 60rpx;
+			position: absolute;
+			top: 160rpx;
+			left: 280rpx;
+		}
+
 		.center-data {
-		
+
 			align-items: flex-start;
 			border-left: 1px dashed #E6E6E6;
-			.left,.right{
+
+			.left,
+			.right {
 				width: 50%;
 				padding-left: 30rpx;
 				text-align: left;
 			}
+
 			.list-item {
 				margin-bottom: 30rpx;
 			}
 		}
+
 		.info-item-q {
 			width: 100%;
 			display: flex;
 			align-items: flex-start;
 			justify-content: start;
 			padding-left: 30rpx;
-		
-		
+
+
 			.gzt {
 				width: 350rpx;
 				height: 24rpx;
 				position: relative;
+
 				.line-box {
 					width: 350rpx;
 					height: 24rpx;
@@ -359,23 +571,24 @@
 					background-color: rgb(36, 109, 179);
 					border-radius: 50rpx;
 					overflow: hidden;
-					
-					.item{
+
+					.item {
 						margin-left: 10rpx;
-						background-color:#5294C9 ;
+						background-color: #5294C9;
 						width: 10rpx;
 						height: 50rpx;
 						transform: rotate(18deg);
 					}
 				}
-		
+
 				.gzt-price,
 				.gzt-price-b {
 					width: 200rpx;
 					text-align: center;
 					position: absolute;
 					padding-top: 20rpx;
-		
+					color: $font-color-dark;
+
 					&::after {
 						content: '';
 						width: 0px;
@@ -388,21 +601,21 @@
 						right: 0;
 						margin: auto;
 					}
-		
+
 					text {
-						color: #F46C85;
+						color: #236BA5;
 					}
 				}
-		
+
 				.gzt-price {
 					left: -100rpx;
 				}
-		
+
 				.gzt-price-b {
 					right: -100rpx;
 				}
 			}
-		
+
 			.rz {
 				margin-left: 10rpx;
 				width: 87rpx;
@@ -411,4 +624,18 @@
 		}
 	}
 
+	.img-list {
+		justify-content: space-between;
+		flex-wrap: wrap;
+		margin: auto;
+		position: relative;
+		padding-top: 50rpx;
+		image {
+			width: 270rpx;
+			height: 270rpx;
+			background-color: #fff;
+			margin-bottom: 30rpx;
+			box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.6);
+		}
+	}
 </style>