|
|
<template>
|
|
|
<view class="page safe-area-inset-bottom">
|
|
|
<image class="bkg" src="~@/package_sub/static/ServiceDetail/bkg.png" mode="aspectFill"></image>
|
|
|
|
|
|
<view class="container">
|
|
|
<view class="card detail">
|
|
|
<view class="detail__text">
|
|
|
全程1对1陪同就医，代取号、代排队、代跑腿、打印报告等服务。患者可以更加灵活安排时间，不但解决无人陪同难题，以及排队费时、环境
|
|
|
</view>
|
|
|
<view class="detail__price">
|
|
|
<text class="detail__price--number">600</text>
|
|
|
<text class="detail__price--text">元/次</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="tab">
|
|
|
<view v-for="(item, index) in ['服务内容','预约须知']"
|
|
|
:key="index"
|
|
|
class="tab-item"
|
|
|
:class="{ 'is-active': index === currentTab }"
|
|
|
@click="$u.throttle(() => currentTab = index)">
|
|
|
{{ item }}
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view v-show="currentTab === 0">
|
|
|
<view class="card for-people">
|
|
|
<view class="card__title">
|
|
|
适用人群
|
|
|
</view>
|
|
|
|
|
|
<view class="for-people__content block">
|
|
|
<view class="block-item" v-for="i in 10" :key="i">
|
|
|
<image class="block-item__img" src="~@/static/index/honor-title.png" mode="aspectFit"></image>
|
|
|
|
|
|
<view class="block-item__text">老年人对医院环境设设备不熟悉。</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="service-flow card">
|
|
|
<view class="card__title">
|
|
|
服务流程
|
|
|
</view>
|
|
|
|
|
|
<view class="service-flow__content" v-for="i in 5" :key="i">
|
|
|
<view class="dot-line" />
|
|
|
<view class="content-panel">
|
|
|
<image class="db-arrow-down" src="~@/package_sub/static/ServiceDetail/db-arrow-down.png" mode="aspectFit"></image>
|
|
|
<view class="content-panel__section">
|
|
|
请至少提前2小时预约，以便平台安排合适的陪诊师;
|
|
|
</view>
|
|
|
<view class="content-panel__section">
|
|
|
提交预约申请后，请添加客服专员，以便及时与您沟通服务进展;
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="cost-description card">
|
|
|
<view class="card__title">
|
|
|
费用说明
|
|
|
</view>
|
|
|
|
|
|
<ul class="cost-description__content">
|
|
|
<li v-for="i in 7" :key="i">
|
|
|
本服务含医院内半天(不超过4小时)陪诊服务，仅限单个医院不含治疗检查、饮食、交通等费用;
|
|
|
</li>
|
|
|
</ul>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<u-button class="btn" shape="circle" ripple :custom-style="orderBtnStyle">立即预约</u-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
currentTab: 0,
|
|
|
orderBtnStyle: {
|
|
|
'background-image': 'linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%)',
|
|
|
'font-weight': '500',
|
|
|
'font-size': '28rpx',
|
|
|
'color': '#fff',
|
|
|
'width': '436rpx',
|
|
|
'margin-top': '32rpx'
|
|
|
}
|
|
|
};
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
uni.setNavigationBarTitle({
|
|
|
title: option.title ?? "服务项目"
|
|
|
});
|
|
|
},
|
|
|
mounted() {
|
|
|
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
page {
|
|
|
background: #f4efee;
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss" scoped>
|
|
|
.page {
|
|
|
|
|
|
.bkg {
|
|
|
height: 316rpx;
|
|
|
width: 100vw;
|
|
|
z-index: 0;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
z-index: 1;
|
|
|
position: relative;
|
|
|
padding-top: 250rpx;
|
|
|
|
|
|
.card {
|
|
|
border-radius: 10rpx;
|
|
|
filter: drop-shadow(2.192px 4.494px 5px rgba(33,32,32,0.15));
|
|
|
background-color: #ffffff;
|
|
|
|
|
|
&__title {
|
|
|
display: inline-block;
|
|
|
font-size: 28rpx;
|
|
|
color: #ca2328;
|
|
|
font-weight: bold;
|
|
|
position: relative;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
|
|
|
&::before {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
width: 139rpx;
|
|
|
height: 5rpx;
|
|
|
border-radius: 3px;
|
|
|
left: -28rpx;
|
|
|
top: 50%;
|
|
|
transform: translate(-100%, -50%);
|
|
|
background: linear-gradient(to left,#ca2328,#ffffff00);
|
|
|
}
|
|
|
&::after {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
width: 139rpx;
|
|
|
height: 5rpx;
|
|
|
border-radius: 3px;
|
|
|
right: -28rpx;
|
|
|
top: 50%;
|
|
|
transform: translate(100%, -50%);
|
|
|
background: linear-gradient(to right,#ca2328,#ffffff00);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.detail {
|
|
|
margin: 0 24rpx;
|
|
|
padding: 26rpx 22rpx;
|
|
|
|
|
|
&__text {
|
|
|
text-indent: 48rpx;
|
|
|
font-size: 24rpx;
|
|
|
line-height: 1.5;
|
|
|
color: #929196;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
&__price {
|
|
|
margin-top: 24rpx;
|
|
|
color: #c20d12;
|
|
|
padding-left: 16rpx;
|
|
|
|
|
|
&--number {
|
|
|
font-weight: 500;
|
|
|
font-size: 40rpx;
|
|
|
}
|
|
|
&--text {
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.tab {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding: 0 60rpx;
|
|
|
margin-top: 38rpx;
|
|
|
|
|
|
&-item {
|
|
|
font-size: 28rpx;
|
|
|
color: #666;
|
|
|
transition: all .1s;
|
|
|
}
|
|
|
.tab-item + .tab-item {
|
|
|
margin-left: 60rpx;
|
|
|
}
|
|
|
.is-active {
|
|
|
color: #000;
|
|
|
font-weight: 600;
|
|
|
font-size: 32rpx;
|
|
|
position: relative;
|
|
|
|
|
|
&::after {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
bottom: -20rpx;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
width: 58rpx;
|
|
|
height: 4rpx;
|
|
|
border-radius: 2rpx;
|
|
|
background-color: #ca2328;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.for-people {
|
|
|
margin: 54rpx 24rpx 0;
|
|
|
padding: 46rpx 30rpx;
|
|
|
|
|
|
|
|
|
&__content {
|
|
|
margin-top: 46rpx;
|
|
|
}
|
|
|
.block {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
&-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 60rpx;
|
|
|
flex-basis: calc((100% - 64rpx) / 2);
|
|
|
|
|
|
&__img {
|
|
|
width: 62rpx;
|
|
|
height: 70rpx;
|
|
|
}
|
|
|
&__text {
|
|
|
font-size: 24rpx;
|
|
|
color: #666666;
|
|
|
font-weight: 500;
|
|
|
margin-left: 16rpx;
|
|
|
text-align: left;
|
|
|
}
|
|
|
}
|
|
|
.block-item:nth-child(2n) {
|
|
|
margin-left: 64rpx;
|
|
|
}
|
|
|
.block-item:nth-last-child(1) {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
.block-item:nth-last-child(2) {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.service-flow {
|
|
|
margin: 34rpx 24rpx 0;
|
|
|
padding: 45rpx 20rpx 34rpx 28rpx;
|
|
|
|
|
|
&__content {
|
|
|
margin-top: 18rpx;
|
|
|
|
|
|
$dot-bkgs:
|
|
|
linear-gradient(0deg, #ebb6b6 0%, #f7d8ba 99%, #f7d8ba 100%),
|
|
|
linear-gradient(0deg, #edbd97 0%, #e4de9f 100%, #e4de9f 100%),
|
|
|
linear-gradient(0deg, #8fa9e3 0%, #a3d9fb 100%),
|
|
|
linear-gradient(0deg, #e3c2f7 0%, #e3c2f7 1%, #c7ccfb 100%),
|
|
|
linear-gradient(0deg, #f99ea2 0%, #f4d4fa 100%);
|
|
|
$dot-border: #f7d8ba,#e4de9f,#a3d9fb,#c7ccfb,#f4d4fa;
|
|
|
$panel-bkgs:
|
|
|
linear-gradient(0deg, #fde5e5b3 0%, #fdf7f1b3 100%),
|
|
|
linear-gradient(0deg, #fdede1b3 0%, #fbfbefb3 100%),
|
|
|
linear-gradient(0deg, #e5e7f7b3 0%, #f3fbfdb3 100%),
|
|
|
linear-gradient(0deg, #f5e7fdb3 0%, #f0f1fcb3 100%),
|
|
|
linear-gradient(0deg, #fde5e5b3 0%, #f9f4fcb3 100%);
|
|
|
.dot-line {
|
|
|
float: left;
|
|
|
width: 16rpx;
|
|
|
height: 16rpx;
|
|
|
border-radius: 100%;
|
|
|
z-index: 2;
|
|
|
position: relative;
|
|
|
top: 8rpx;
|
|
|
left: 8rpx;
|
|
|
|
|
|
&::after {
|
|
|
content: '';
|
|
|
width: 22rpx;
|
|
|
height: 22rpx;
|
|
|
box-sizing: border-box;
|
|
|
border-radius: 100%;
|
|
|
border: 2rpx solid;
|
|
|
z-index: 2;
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
|
}
|
|
|
@for $index from 1 through length($dot-bkgs) {
|
|
|
&:nth-child(#{$index+1}n) .dot-line {
|
|
|
background: nth($dot-bkgs, $index);
|
|
|
|
|
|
&::after {
|
|
|
border-color: nth($dot-border, $index);
|
|
|
}
|
|
|
}
|
|
|
&:nth-child(#{$index+1}n) .content-panel {
|
|
|
background: nth($panel-bkgs, $index);
|
|
|
}
|
|
|
}
|
|
|
&:nth-child(2) .content-panel:before {
|
|
|
top: 10rpx !important;
|
|
|
}
|
|
|
.content-panel {
|
|
|
border-radius: 5px;
|
|
|
margin-left: 40rpx;
|
|
|
padding: 24rpx 8rpx 24rpx 32rpx;
|
|
|
color: #666666;
|
|
|
font-weight: 500;
|
|
|
position: relative;
|
|
|
|
|
|
&::before {
|
|
|
content: '';
|
|
|
width: 2rpx;
|
|
|
opacity: .2;
|
|
|
background-color: #666666;
|
|
|
|
|
|
z-index: 1;
|
|
|
position: absolute;
|
|
|
top: -18rpx;
|
|
|
left: calc(-40rpx + 15rpx);
|
|
|
bottom: 0;
|
|
|
}
|
|
|
.db-arrow-down {
|
|
|
width: 98rpx;
|
|
|
height: 103rpx;
|
|
|
position: absolute;
|
|
|
right: 20rpx;
|
|
|
bottom: 24rpx;
|
|
|
}
|
|
|
|
|
|
&__section {
|
|
|
font-size: 24rpx;
|
|
|
line-height: 40rpx;
|
|
|
position: relative;
|
|
|
|
|
|
&::before {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
width: 8rpx;
|
|
|
height: 8rpx;
|
|
|
border-radius: 100%;
|
|
|
background-color: #7a7a7a;
|
|
|
top: 16rpx;
|
|
|
left: -16rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.cost-description {
|
|
|
margin: 22rpx 24rpx 0;
|
|
|
padding: 45rpx 20rpx 34rpx 28rpx;
|
|
|
|
|
|
&__content {
|
|
|
margin-top: 50rpx;
|
|
|
font-size: 24rpx;
|
|
|
line-height: 40rpx;
|
|
|
color: #666666;
|
|
|
font-weight: 500;
|
|
|
position: relative;
|
|
|
|
|
|
& > li {
|
|
|
margin-left: 36rpx;
|
|
|
position: relative;
|
|
|
|
|
|
&::before {
|
|
|
content: '';
|
|
|
width: 8rpx;
|
|
|
height: 8rpx;
|
|
|
border-radius: 100%;
|
|
|
background-color: #7a7a7a;
|
|
|
position: absolute;
|
|
|
left: -26rpx;
|
|
|
top: calc(20rpx - 4rpx);
|
|
|
}
|
|
|
}
|
|
|
& > li + li {
|
|
|
margin-top: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.btn {
|
|
|
margin: 32rpx auto 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
