newmyj/pages/modelData/modeltemplate/model_3.vue

<template>
	<view class="mone">
		<view class="top-left-icon-1"></view>
		<view class="top-center-icon-1"></view>
		<view class="top-center-icon-2"></view>
		<view class="top-right-icon-1 icon-box-border">
			<view class="top-right-content icon-box-content">
			</view>
		</view>
		<view class="user-bottom-icon icon-box-border">
			<view class="user-bottom-content icon-box-content">
			</view>
		</view>
		<image class="user-top-icon" :src="baseURL + '/resource/model/static/model3/tap3.png'" mode="scaleToFill"></image>
		<image class="user-right-logo" :src="baseURL + '/resource/model/model3/tap13.png'" mode="widthFix"></image>
		<view class="user-img">
			<image class="image" :src="cardInfo.avatar" mode="widthFix"></image>
		</view>
		<image class="content-left-icon" :src="baseURL + '/resource/model/model3/tap6.png'" mode="widthFix"></image>
		<image class="page-bottom-right" :src="baseURL + '/resource/model/model3/tap7.png'" mode="widthFix"></image>
		<view class="share-number">
			浏览：{{shareNumber}}
		</view>
		<view class="right-content">
			<view class="name">
				{{cardInfo.name || '暂无'}}
			</view>
			<view class="career margin-t-10">
				职业：{{cardInfo.user_work_type_title || '暂无'}}
			</view>
			<view class="career margin-t-10">
				编号：{{cardInfo.no}}
			</view>
			<image class="line-icon margin-t-10" :src="baseURL + '/resource/model/model3/tap11.png'" mode="widthFix"></image>
		</view>
		<image class="right-center-icon" :src="baseURL + '/resource/model/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">
						年龄： {{cardInfo.age|| '暂无'}}
					</view>
					<view class="list-item">
						从业： {{(cardInfo.work_year + '年')|| '暂无'}}
					</view>
					<view class="list-item">
						籍贯： {{cardInfo.ancestral_place || '暂无'}}
					</view>
					<view class="list-item">
						学历： {{cardInfo.education || '暂无'}}
					</view>
				</view>
				<view class="right">
					<view class="list-item">
						属相：{{cardInfo.twelve|| '暂无'}}
					</view>
					<view class="list-item">
						星座：{{cardInfo.constellation || '暂无'}}
					</view>
					<view class="list-item">
						民族： {{cardInfo.minority || '暂无'}}
					</view>
				</view>
			</view>
			<view class="list-item padding-l-30 margin-b-30">
				服务地区：
				<block v-for="(fwitem,fwindex) in cardInfo.service_area_all">
					{{fwitem}}{{fwindex ==(cardInfo.service_area_all.length -1) ?'': '、'  }}
				</block>
			</view>
			<view class="info-item-q flex-start ">
				<text class="flex-shrink-false">服务价格： </text>
				<view class="gzt">
					<view class="line-box flex">
						<view class="item" v-for="i in 18"></view>
					</view>
					<view class="gzt-price">
						<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
							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="baseURL + '/resource/model/model3/tap13.png'" mode="widthFix"></image>
			</view>
			<view class="flex">
				<view></view>
				<image class="line" :src="baseURL + '/resource/model/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="baseURL + '/resource/model/model3/tap13.png'" mode="widthFix"></image>
			</view>
			<view class="flex">
				<view></view>
				<image class="line" :src="baseURL + '/resource/model/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="baseURL + '/resource/model/model3/tap13.png'" mode="widthFix"></image>
			</view>
			<view class="flex">
				<view></view>
				<image class="line" :src="baseURL + '/resource/model/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="baseURL + '/resource/model/model3/tap13.png'" mode="widthFix"></image>
			</view>
			<view class="flex">
				<view></view>
				<image class="line" :src="baseURL + '/resource/model/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>

<script>
	import {
		mapState,
	} from 'vuex';
	export default {
		props: {
			// 浏览数量
			shareNumber: {
				type: Number,
				default: 0
			},
			// 是否显示默认数据
			isDefault: {
				type: Boolean,
				default: true
			},
			isShare: {
				type: Boolean,
				default: false
			},
			//1为模板2为用户
			isLook: {
				type: Number,
				default: 0
			},
			templateDetail: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				defaultDate: {
					name: '佚名',
					avatar: 'https://api.myjie.cn/resource/icon/base/f.png',
					age: '41',
					twelve: '鼠',
					work_year: '10',
					constellation: '处女座',
					ancestral_place: '浙江',
					minority: '汉族',
					education: '本科',
					no: 'myj23031421',
					service_area_all: ['浙江省台州市路桥区'],
					service_min_price: 100,
					service_max_price: 200,
					user_work_type_title: '母婴师',
					service_time_type_title: '每小时',
					service_intro_content: '高级育婴师证|高级催乳师证|早产儿护理师母婴护理证|金牌月嫂证|产后恢复师证|公共营养师证|月子药膳调理师证|国际宝宝睡眠咨询师证|普通话二级甲等|中央广播电视大学学历|学前教育专业，深耕幼教十年，技能全面，性格活泼，有亲和力，做事干净利落，有很强的责任心。对宝宝有爱心，体贴新手妈妈。专业技能熟练。应急能力强。让家人放心、产妇舒心的坐好月子。',
					service_intro_imgs: ['https://api.myjie.cn/resource/icon/base/pj1.png',
						'https://api.myjie.cn/resource/icon/base/pj2.png',
						'https://api.myjie.cn/resource/icon/base/pj3.png',
						'https://api.myjie.cn/resource/icon/base/pj4.png'
					],
					service_audit_imgs: ['https://api.myjie.cn/resource/icon/base/zs1.png',
						'https://api.myjie.cn/resource/icon/base/zs2.png',
						'https://api.myjie.cn/resource/icon/base/zs3.png',
						'https://api.myjie.cn/resource/icon/base/zs4.png'
					],
					service_project_ar: [{
							title: '婴幼儿睡眠管理',
							content: '如：日夜颠倒、睡眠不规律、乳头混淆、奶睡、抱睡等问题，帮助宝爸宝妈规律孩子作息、解决婴幼儿喂养困扰，培养良好的生活、学习习惯。'
						}, {
							title: '特色月子餐',
							content: '套用客户的一句话“养眼、养心更养胃”！家常菜、面食、点心、甜品、靓汤、五谷杂粮粥、婴幼儿花样辅食等。'
						},
						{
							title: '早产儿特殊护理',
							content: '包括早产儿基础护理、安全喂养方法、追赶性生长、消化与免疫系统等技能，根据宝宝具体情况给予早产儿家长的科学入户指导。'
						},
						{
							title: '0-6岁早期教育',
							content: '在婴孩最敏感最能接受的时期进行事半功倍的适时教育，针对不同年龄段的孩子，开发婴幼儿潜能的教育，为孩子多元化和健康人格打下良好基础。'
						}
					],
					is_type_audit: 1
				}
			}
		},
		computed: {
			...mapState(['baseURL']),
			cardInfo() {
				if (this.isDefault) {
					return this.defaultDate
				} else {
					return this.templateDetail
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.mone {
		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;
			width: 250rpx;
			height: 200rpx;
			position: absolute;
			top: -120rpx;
			left: -130rpx;
		}

		.top-center-icon-1 {
			border-radius: 100rpx;
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			border: 1px solid rgba(43, 117, 180, 1);
			top: 50rpx;
			left: 310rpx;
		}

		.top-center-icon-2 {
			border-radius: 100rpx;
			width: 35rpx;
			height: 35rpx;
			position: absolute;
			border: 1px solid rgba(215, 215, 215, 1);
			top: 125rpx;
			left: 525rpx;
		}

		.top-right-icon-1 {
			padding: 30rpx;
			width: 200rpx;
			height: 200rpx;
			border: 1px dashed rgba(215, 215, 215, 1);
			top: -100rpx;
			right: -50rpx;

			.top-right-content {
				background-color: rgba(215, 215, 215, 1);
			}
		}

		.user-top-icon {
			width: 106rpx;
			height: 97rpx;
			position: absolute;
			top: 157rpx;
			left: 205rpx;
		}

		.user-right-logo {
			width: 235rpx;
			position: absolute;
			top: 246rpx;
			right: 154rpx;
		}

		.user-img {
			width: 280rpx;
			height: 280rpx;
			border: 3px solid #FFFFFF;
			border-radius: 200rpx;
			position: absolute;
			top: 186rpx;
			left: 50rpx;
			overflow: hidden;

			.image {
				width: 100%;
			}
		}

		.user-bottom-icon {
			padding: 30rpx;
			width: 210rpx;
			height: 210rpx;
			border: 1px dashed rgba(15, 61, 96, 1);
			top: 380rpx;
			left: 36rpx;

			.user-bottom-content {
				background-color: rgba(15, 61, 96, 1);
			}
		}

		.share-number {
			border-top-left-radius: 99rpx;
			border-bottom-left-radius: 99rpx;
			font-size: $font-base;
			color: #266B9E;
			border: 2px solid #266B9E;
			position: absolute;
			top: 150rpx;
			right: 0rpx;
			line-height: 1;
			padding: 10rpx;
			padding-left: 25rpx;
		}

		.right-content {
			position: absolute;
			right: 0;
			top: 350rpx;
			width: 390rpx;

			.name {
				font-size: 60rpx;
				font-family: FZYanSongS-DB-GB;
				color: #266B9E;
			}

			.career {
				font-size: 30rpx;
				font-family: FZYanSongS-DB-GB;
				color: #266B9E;
			}

			.line-icon {
				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 {
		border-radius: 1000rpx;
		position: absolute;

		.icon-box-content {
			width: 100%;
			height: 100%;
			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;
		line-height: 1;
		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 {
				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;
					position: relative;
					background-color: rgb(36, 109, 179);
					border-radius: 50rpx;
					overflow: hidden;

					.item {
						margin-left: 10rpx;
						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;
						height: 0rpx;
						border: 14rpx solid;
						border-color: transparent transparent #FEB8C6;
						position: absolute;
						top: -14rpx;
						left: 0;
						right: 0;
						margin: auto;
					}

					text {
						color: #236BA5;
					}
				}

				.gzt-price {
					left: -100rpx;
				}

				.gzt-price-b {
					right: -100rpx;
				}
			}

			.rz {
				margin-left: 10rpx;
				width: 87rpx;
				height: 26rpx;
			}
		}
	}

	.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>