You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
305 lines
6.5 KiB
305 lines
6.5 KiB
<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> |