<template>
	<view class="detail-box">
		<navs :top='top' :color='color'></navs>
		<view class="detailBg">
			<image
				src="https://img.zcool.cn/community/01bfbb5c9ebc0ba8012141685959e0.jpg?x-oss-process=image/resize,m_fill,w_520,h_390,limit_1/auto-orient,1/sharpen,100/quality,q_80/format,webp"
				mode=""></image>
			<view class="detail-title">
				<image src="@/static/image/default-avatar.svg" mode=""></image>
				<view>
					<view class="detail-name">xxxx小程序</view>
					<view class="detail-company">xxxxxxx公司</view>
				</view>
			</view>
		</view>
		<view class="detail-cont">
			<text
				style="line-height: 44rpx;">这是为xxxx开发的一套系统，这是为xxxx开发的一套系统，这是为xxxx开发的一套系统，这是为xxxx开发的一套系统，这是为xxxx开发的一套系明明就静静。</text>
			<image
				src="https://img.zcool.cn/community/01bfbb5c9ebc0ba8012141685959e0.jpg?x-oss-process=image/resize,m_fill,w_520,h_390,limit_1/auto-orient,1/sharpen,100/quality,q_80/format,webp"
				mode=""></image>
			<view class="service">
				<view class="service-title">服务介绍</view>
				<view class="service-cont">
					<view>服务内容全部包含:
						上海莫畏信息科技位于上海张江园区技术为主导的科技创新型企业。公司主要从事移动化信息网络与电子商务、IT方案咨询与服务、计算机软件开发与实施、智慧城市，智慧生活相关的物联网领域的开发，公司经营范围：APP开发，小程序开发，网站建设，系统定制，企业管理软件等，公司坚持科技创新，以人为本的理念，我们为不同行业客户提供全面专业的定制化服务。
					</view>
					<view>服务优势: 1.【报价合理】我司案例众多、经验丰富，最大化降低开发成本，匹配您的预算。</view>
					<view>2.【公司专业】经营十七年，人员配置齐全，多年开发经验，久经历练，实操落地。</view>
					<view>3.【流程规范】严格按照开发规范执行，及时反馈项目进度，做到双方信息对称。</view>
					<view>4.【多人售后】多人多维度提供售后服务，力争项目提升客户体验，让您和您的客户都放心。</view>
					<view>5.【资质齐全】具有高*双*认证，质量管理体系，项目经理PMP证书，十多项软著等资质 服务前需客户提供的信息: </view>
					<view>【梳理需求】产品经理会跟您详细沟通需求，梳理业务逻辑，给您匹配合适的产品，如需定制，则会详细沟通。</view>
					<view>【报价反馈】评估好需求之后给出合理的报价和周期，根据您的预算和周期继而调整需求方案 </view>
					<view>【需求匹配】报价和周期匹配在接受范围内后，产品经理会给出需求功能文档 </view>
					<view>【提供合同】根据项目类型编辑合同文档给您过目</view>
					<view>【阐明服务】在合作之前我们会把服务流程和收费标准都说清楚，以免后期有误会。</view>
				</view>
				<view class="service-tag">
					<view v-for="(item,index) in tag" :key="index">{{item}}</view>
				</view>
			</view>
			<view class="service-substance">
				<view class="substance-title">服务内容</view>
				<view class="table">
					<uni-table border stripe emptyText="暂无更多数据">
						<!-- 表头行 -->
						<uni-tr>
							<uni-th align="left" class="th1">版本</uni-th>
							<uni-th align="center" class="th2">
								<view>基础版</view>
								<view>￥ 2699.00</view>
							</uni-th>
							<uni-th align="center" class="th3">
								<view>标准版</view>
								<view>￥ 2699.00</view>
							</uni-th>
							<uni-th align="center" class="th4">
								<view>高级版</view>
								<view>￥ 2699.00</view>
							</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr>
							<uni-td>服务卖点</uni-td>
							<uni-td>基础版，报价工期详情咨询客服</uni-td>
							<uni-td>基础版，报价工期详情咨询客服</uni-td>
							<uni-td>基础版，报价工期详情咨询客服</uni-td>
						</uni-tr>
						<uni-tr>
							<uni-td>项目开工</uni-td>
						</uni-tr>
						<uni-tr>
							<uni-td>专属服务对接群</uni-td>
							<uni-td>
								<image src="@/static/image/Frame.svg" mode=""></image>
							</uni-td>
							<uni-td>
								<image src="@/static/image/Frame.svg" mode=""></image>
							</uni-td>
							<uni-td>
								<image src="@/static/image/Frame.svg" mode=""></image>
							</uni-td>
						</uni-tr>
						<uni-tr>
							<uni-td>全程一对一服务</uni-td>
							<uni-td>
								<image src="@/static/image/Frame.svg" mode=""></image>
							</uni-td>
							<uni-td>
								<image src="@/static/image/Frame.svg" mode=""></image>
							</uni-td>
							<uni-td>
								<image src="@/static/image/Frame.svg" mode=""></image>
							</uni-td>
						</uni-tr>
						<uni-tr>
							<uni-td>项目经理</uni-td>
							<uni-td>-</uni-td>
							<uni-td>-</uni-td>
							<uni-td>1名</uni-td>
						</uni-tr>
						<uni-tr>
							<uni-td>产品经理</uni-td>
							<uni-td>-</uni-td>
							<uni-td>-</uni-td>
							<uni-td>1名</uni-td>
						</uni-tr>
						<uni-tr>
							<uni-td>产品经理</uni-td>
							<uni-td>-</uni-td>
							<uni-td>-</uni-td>
							<uni-td>1名</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</view>
		</view>
		<view class="bottoms" :style="'padding-bottom:'+safeAreaBottom+'px'">
			<view class="share" @click="shareTo()">
				<view class="iconfont icon-Group17"></view>
				<view style="margin-top: 6rpx;">分享</view>
			</view>
			<view class="similar">我要类似</view>
		</view>
		<uni-popup ref="popup" type="bottom" safeArea>
			<view class="shareCard">
				<view class="card-top">请选择分享方式</view>
				<view class="Fra1me" @click="closePop()">
					<image src="@/static/image/Fra1me.svg" mode=""></image>
				</view>
				<view class="share-method">
					<view>
						<view class="method" style="background-color: #2F9BFF;">
							<image src="@/static/image/share1.svg" mode=""></image>
						</view>
						<view class="method-text">小程序码</view>
					</view>
					<view>
						<view class="method" style="background-color: #9C8FEC;">
							<image src="@/static/image/share2.svg" mode=""></image>
						</view>
						<view class="method-text">复制链接</view>
					</view>
					<view>
						<view class="method" style="background-color: #09BB07;">
							<image src="@/static/image/share3.svg" mode=""></image>
						</view>
						<view class="method-text">转发给朋友</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				color: 0,
				top: 0,
				tag: ['php', 'Java', 'B/S', '定制开发', '源码交付'],
				safeAreaBottom: 0
			}
		},
		onLoad() {
			this.top = uni.getMenuButtonBoundingClientRect().top;
			this.safeDistance()
		},
		methods: {
			safeDistance() {
				let safeArea = uni.getSystemInfoSync().safeArea;
				let screenHeight = uni.getSystemInfoSync().screenHeight;
				this.safeAreaBottom = screenHeight - safeArea.bottom;
			},
			shareTo() {
				this.$refs.popup.open()
			},
			closePop() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss">
	.detail-box {
		position: relative;
		padding-bottom: 234rpx;
	}

	.detailBg {
		width: 100%;
		height: 580rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: -10;

		>image {
			width: 100%;
			height: 580rpx;
		}

		.detail-title {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 108rpx;
			background-color: rgba(0, 0, 0, .5);
			display: flex;
			align-items: center;

			image {
				width: 72rpx;
				height: 72rpx;
				margin-left: 32rpx;
				margin-right: 16rpx;
			}

			.detail-name {
				font-size: 36rpx;
				font-weight: 500;
				line-height: 36rpx;
				color: #fff;
			}

			.detail-company {
				font-size: 22rpx;
				font-weight: 400;
				color: #ffffffb3;
			}
		}
	}

	.detail-cont {
		margin-top: 440rpx;
		padding: 0 30rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333;

		>image {
			margin-top: 18rpx;
			width: 100%;
			height: 1028rpx;
		}
	}

	.service {
		margin-top: 96rpx;

		.service-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #2A3A72;
		}

		.service-cont {
			margin-top: 22rpx;
			line-height: 48rpx;
			padding-bottom: 26rpx;
			border-bottom: 1rpx solid #F0F0F0;
		}

		.service-tag {
			display: flex;
			margin-top: 21rpx;
			color: #3887FD;

			>view {
				height: 44rpx;
				padding: 0 18rpx;
				background: #3887fd1a;
				border-radius: 22rpx;
				line-height: 44rpx;
				margin-left: 12rpx;

				&:first-child {
					margin-left: 0;
				}
			}
		}
	}

	.service-substance {
		margin-top: 96rpx;

		.substance-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #2A3A72;
		}

		.table {
			// height: 30rpx;
			margin-top: 38rpx;

			image {
				width: 22rpx;
				height: 28rpx;
			}
		}
	}

	.bottoms {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		border-top: 1rpx solid #EBEBEB;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.share {
			margin-left: 54rpx;
			text-align: center;
			font-size: 24rpx;
			color: #333;
		}

		.similar {
			margin-right: 30rpx;
			width: 302rpx;
			height: 76rpx;
			border-radius: 12rpx;
			background-color: #3887FD;
			color: #fff;
			font-size: 28rpx;
			font-weight: 600;
			text-align: center;
			line-height: 76rpx;
		}
	}

	.shareCard {
		height: 349rpx;
		border-radius: 60rpx 60rpx 0 0;
		background-color: #fff;
		overflow: hidden;
		position: relative;

		.card-top {
			text-align: center;
			font-size: 28rpx;
			font-weight: 600;
			margin-top: 45rpx;
		}

		.Fra1me {
			width: 24rpx;
			height: 24rpx;
			position: absolute;
			right: 42rpx;
			top: 35rpx;

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.share-method {
			display: flex;
			justify-content: space-evenly;
			margin-top: 50rpx;

			.method {
				margin: 0 auto;
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					height: 60rpx;
				}
			}

			.method-text {
				color: #A3A3A3;
				font-size: 26rpx;
				font-weight: 400;
				line-height: 46rpx;
				margin-top: 14rpx;
			}
		}
	}

	.uni-table-th {
		background-color: #F0F0F0;
		height: 100rpx;
		font-size: 28rpx;
		color: #333 !important;
		width: 150rpx !important;

		&:nth-child(2) {
			background: linear-gradient(88.6deg, #6ba6fe 0%, #3887fd 100%);
			color: #fff !important;
			font-size: 24rpx;
			font-weight: 500;
		}

		&:nth-child(3) {
			background: linear-gradient(88.6deg, #f5be4f 0%, #f3ab41 100%);
			color: #fff !important;
			font-size: 24rpx;
			font-weight: 500;
		}

		&:nth-child(4) {
			background: linear-gradient(88.6deg, #4d4968 0%, #333049 100%);
			color: #fff !important;
			font-size: 24rpx;
			font-weight: 500;
		}
	}
	.uni-table-tr{
		&:nth-child(3){
			position: relative;
			&::after{
				content: '';
				width: 0;
				height: 64rpx;
				position: absolute;
				right: 0;
				border-right: 1rpx solid #EFF4FF;
			}
			.uni-table-td{
				color: #333;
				font-size: 24rpx;
				font-weight: 600;
				border-right: none;
			}
		}
	}
</style>
