yanzong_qianduan/pages/serve/index.vue

<template>
	<view class="serve">
		<view class="heade">
			<image src="../../static/serve/serveBack.png" mode="" class="headImage"></image>
			<view class="group">
				<image src="/static/serve/right.png" class="tip tipImg"></image>
				<text lines="1" class="groupText">不满意重做</text>
				<image src="/static/serve/right.png" class="tip"></image>
				<text lines="1" class="groupText">7x24小时服务</text>
				<image src="/static/serve/right.png" class="tip"></image>
				<text lines="1" class="groupText">全场保障</text>
				<image src="/static/serve/right.png" class="tip"></image>
				<text lines="1" class="groupText">专业服务</text>
			</view>
		</view>
		<view class="myServe">
			<view class="serveTitle">
				我的服务
			</view>
			<view class="serveList">
				<view class="listItem">
					<view class="itemImage">
						<image src="/static/serve/unkeep.png" class="itemImage"></image>
					</view>
					<text lines="1" class="itemText">家电维修</text>
				</view>
				<view class="listItem">
					<view class="itemImage">
						<image src="/static/serve/clean.png" class="itemImage"></image>
					</view>
					<text lines="1" class="itemText">家电清洗</text>
				</view>
				<view class="listItem">
					<view class="itemImage">
						<image src="/static/serve/install.png" class="itemImage"></image>
					</view>
					<text lines="1" class="itemText">家电安装</text>
				</view>
				<view class="listItem">
					<view class="itemImage">
						<image src="/static/serve/dredge.png" class="itemImage"></image>
					</view>
					<text lines="1" class="itemText">家电疏通</text>
				</view>
				<view class="listItem">
					<view class="itemImage">
						<image src="/static/serve/maintenance.png" class="itemImage"></image>
					</view>
					<text lines="1" class="itemText">水电维修</text>
				</view>
			</view>
		</view>
		<view class="flowPath">
			<view class="flowTitle">
				<text>服务流程</text>
				<text class="services">专业服务，细心周到</text>
			</view>
			<view class="flowImage">
				<image src="../../static/serve/flow.png" mode=""></image>
			</view>
			<view class="flowList">
				<text class="listText">提交订单</text>
				<text class="listText">安排上门</text>
				<text class="listText">服务完成</text>
				<text class="listText">支付订单</text>
				<text class="listText">服务评价</text>
			</view>
			<view class="member">
				<view class="memberCenter">
					会员中心
				</view>
				<view class="power">
					开通立享多重特权
				</view>
				<view class="opera">
					<text class="price">￥<text class="number">99</text>年</text>
					<view class="operaBtn">
						立即开通
					</view>
				</view>
			</view>
		</view>

	</view>
</template>
<script>

</script>
<style lang="scss" scoped>
	.serve {
		height: 100%;
		width: 100%;
		background-color: #F7F8FA;

		.heade {
			width: 100%;
			height: 360rpx;
			background-color: #fff;

			.headImage {
				width: 690rpx;
				height: 264rpx;
				margin: 28rpx 0 0 34rpx;
			}

			.group {
				display: flex;
				align-items: center;
				.tip {
					width: 42rpx;
					height: 42rpx;
				}
				.tipImg{
					margin-left: 24rpx;
				}
				.groupText {
					height: 34rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #444444;
					line-height: 34rpx;
				}
			}
		}

		.myServe {
			width: 704rpx;
			height: 246rpx;
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			left: 0;
			right: 0;
			margin: auto;
			padding: 26rpx;

			.serveTitle {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 40rpx;
			}

			.serveList {
				margin-top: 36rpx;
				display: flex;
				justify-content: space-around;

				.listItem {
					width: 100rpx;
					height: 100rpx;
					display: flex;
					flex-direction: column;
					text-align: center;
					align-items: center;

					.itemImage {
						width: 56rpx;
						height: 56rpx;
						margin-bottom: 16rpx;
					}

					.itemText {
						width: 100rpx;
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #565656;
						line-height: 34rpx;
					}
				}
			}
		}

		.flowPath {
			width: 704rpx;
			height: 534rpx;
			left: 0;
			right: 0;
			margin: auto;
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			margin-top: 14rpx;
			padding-top: 24rpx;

			.flowTitle {
				margin: 0 0 0 26rpx;
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 40rpx;

				.services {
					margin-left: 14rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #565656;
				}
			}

			.flowImage {
				margin-top: 42rpx;
				width: 592rpx;
				height: 74rpx;
				margin-left: 60rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.flowList {
				;
				width: 678rpx;
				height: 34rpx;
				line-height: 34rpx;
				left: 0;
				right: 0;
				margin: auto;
				margin-left: 54rpx;
				display: flex;
				// justify-content: space-around;
				margin-top: 18rpx;

				.listText {
					width: 96rpx;
					font-size: 24rpx;
					margin-right: 32rpx;
				}
			}

		}

		.member {
			width: 644rpx;
			height: 214rpx;
			background-image: url('../../static/serve/member.png');
			background-size: 100% 100%;
			margin: 50rpx 0 0 36rpx;
			padding-top: 28rpx;

			.memberCenter {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				color: #966542;
				line-height: 40rpx;
				margin: 0 0 0 32rpx;
			}

			.power {
				margin: 4rpx 0 0 32rpx;
				height: 28rpx;
				font-size: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #966542;
				line-height: 28rpx;
			}

			.opera {
				margin: 24rpx 0 0 32rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #9F744D;
				line-height: 28rpx;
				display: flex;

				.number {
					font-size: 52rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					color: #9C714A;
					line-height: 61rpx;
				}

				.operaBtn {
					margin-left: 14rpx;
					width: 138rpx;
					height: 60rpx;
					background: #9F744D;
					border-radius: 82rpx 82rpx 82rpx 82rpx;
					opacity: 1;
					text-align: center;
					line-height: 54rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
	}
</style>