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.
688 lines
16 KiB
688 lines
16 KiB
<template>
|
|
<view>
|
|
<view class="container" :style="{ 'padding-top': statusBarHeight + 'px' }">
|
|
<image
|
|
mode="aspectFill"
|
|
class="top-bkg"
|
|
src="~@/static/index/top-bkg.png"
|
|
alt=""
|
|
></image>
|
|
<view class="top" :style="{ 'padding-right': menuButtonRight + 'px' }">
|
|
<view class="position" @click="toPage('/pages/CitySelect/CitySelect')">
|
|
<u-icon name="map-fill"></u-icon>
|
|
<view>{{ vuex_location.city.replace(/(市|区|县)/,'') }}</view>
|
|
<u-icon name="arrow-down" size="22"></u-icon>
|
|
</view>
|
|
<view class="icon">
|
|
<image src="~@/static/index/icon.png" mode="aspectFit" alt=""></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="search">
|
|
<view class="search__icon">
|
|
<u-icon name="search" size="50" color="#999"></u-icon>
|
|
</view>
|
|
<view class="search__content">
|
|
<u-input
|
|
:clearable="false"
|
|
:value="select.keyword"
|
|
placeholder="请输入要搜索的内容"
|
|
height="56"
|
|
:custom-style="inputStyle"
|
|
@input="searchInput"
|
|
></u-input>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="isShowSticky" class="search-sticky" :style="{ 'padding-top': statusBarHeight + 'px','padding-right': menuButtonRight + 'px' }">
|
|
<view class="search-sticky__position" @click="isShowCity = true">
|
|
<u-icon name="map-fill"></u-icon>
|
|
<view>{{ vuex_location.city.replace(/(市|区|县)/,'') }}</view>
|
|
<u-icon name="arrow-down" size="22"></u-icon>
|
|
</view>
|
|
|
|
<view class="search-sticky__search">
|
|
<view class="search-sticky__search--content">
|
|
<u-input
|
|
:clearable="false"
|
|
:value="select.keyword"
|
|
placeholder="请输入要搜索的内容"
|
|
height="46"
|
|
@input="searchInput"
|
|
></u-input>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="swiper">
|
|
<u-swiper :list="list"></u-swiper>
|
|
</view>
|
|
|
|
<view class="links">
|
|
<u-grid :col="5" :border="false">
|
|
<u-grid-item
|
|
v-for="item in links"
|
|
:key="item.text"
|
|
bg-color="transparent"
|
|
@click="$u.throttle($u.route({
|
|
url: item.to
|
|
}))"
|
|
>
|
|
<image class="icon" :src="item.icon" mode="aspectFit"></image>
|
|
<view class="text">{{ item.text }}</view>
|
|
</u-grid-item>
|
|
</u-grid>
|
|
</view>
|
|
|
|
<view class="img1">
|
|
<image src="~@/static/index/ask-png.png" alt="" mode="aspectFit"></image>
|
|
</view>
|
|
|
|
<view class="hospitals">
|
|
<view class="hospitals__title">热门医院</view>
|
|
|
|
<view class="hospitals__content">
|
|
<view class="hospitals__content__item" v-for="item in 3" :key="item">
|
|
<view class="left">
|
|
<image
|
|
src="https://sstt.115.langye.net/storage/files/172760356266f9236a22e58.png"
|
|
alt=""
|
|
mode="aspectFit"
|
|
></image>
|
|
</view>
|
|
<view class="right">
|
|
<view class="title">苏州大学附属第一医院</view>
|
|
<view class="tag">
|
|
<view class="tag__item">三甲</view>
|
|
<view class="tag__item">综合医院</view>
|
|
</view>
|
|
<view class="description"> 内科、外科、五官科、其他 </view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="statistics">
|
|
<view class="block1" @click="toPage('/package_sub/pages/AddOrder/AddOrder')">
|
|
<view class="text1">陪诊团队介绍</view>
|
|
<view class="text2">让就医体验更美好</view>
|
|
<view class="order">预约陪诊</view>
|
|
|
|
<image class="img" src="~@/static/index/block1.png" mode="aspectFit" alt=""></image>
|
|
</view>
|
|
<view class="block2">
|
|
<view class="text1">
|
|
<text>142812</text><text>人次</text>
|
|
</view>
|
|
<view class="text2">医院陪护累计</view>
|
|
|
|
<image class="img" src="~@/static/index/block2.png" mode="aspectFit" alt=""></image>
|
|
</view>
|
|
<view class="block3">
|
|
<view class="text1">
|
|
<text>12456</text><text>人次</text>
|
|
</view>
|
|
<view class="text2">居家照护累计</view>
|
|
|
|
<image class="img" src="~@/static/index/block3.png" mode="aspectFit" alt=""></image>
|
|
</view>
|
|
<view class="block4">
|
|
<view class="text1">关于我们</view>
|
|
|
|
<image class="img" src="~@/static/index/block4.png" mode="aspectFit" alt=""></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="honor">
|
|
<view class="honor__title">
|
|
<image src="~@/static/index/honor-title.png" alt="" mode="aspectFit"></image>
|
|
<text>资质荣誉</text>
|
|
</view>
|
|
|
|
<scroll-view class="scroll-content" scroll-x="true">
|
|
<image class="images" v-for="i in 5" :key="i" src="https://sstt.115.langye.net/storage/files/172760356266f9236a22e58.png" mode="aspectFit"></image>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<image class="bottom" src="~@/static/index/bottom.png" mode="aspectFit" alt=""></image>
|
|
</view>
|
|
|
|
<u-top-tips :navbar-height="navbarHeight" ref="uTips"></u-top-tips>
|
|
|
|
<tabbar />
|
|
<PrivacyPopup />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Tabbar from "@/component/Tabbar/Tabbar.vue";
|
|
import PrivacyPopup from "@/component/privacy-popup/privacy-popup.vue";
|
|
|
|
export default {
|
|
components: {
|
|
Tabbar,
|
|
PrivacyPopup
|
|
},
|
|
data() {
|
|
return {
|
|
isShowSticky: false,
|
|
scrollTop: 308,
|
|
statusBarHeight: 40,
|
|
menuButtonRight: 0,
|
|
|
|
inputStyle: {
|
|
width: "600rpx",
|
|
fontSize: "28rpx",
|
|
fontWeight: "500",
|
|
},
|
|
select: {
|
|
keyword: "",
|
|
},
|
|
list: [
|
|
{
|
|
image: "https://cdn.uviewui.com/uview/swiper/1.jpg",
|
|
title: "昨夜星辰昨夜风，画楼西畔桂堂东",
|
|
},
|
|
{
|
|
image: "https://cdn.uviewui.com/uview/swiper/2.jpg",
|
|
title: "身无彩凤双飞翼，心有灵犀一点通",
|
|
},
|
|
{
|
|
image: "https://cdn.uviewui.com/uview/swiper/3.jpg",
|
|
title: "谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳",
|
|
},
|
|
],
|
|
links: [
|
|
{
|
|
text: "陪诊服务",
|
|
icon: "/static/index/peizhenfuwu.png",
|
|
to: "/package_sub/pages/ServiceList/ServiceList"
|
|
},
|
|
{
|
|
text: "就医服务",
|
|
icon: "/static/index/jiuyifuwu.png",
|
|
},
|
|
{
|
|
text: "居家照护",
|
|
icon: "/static/index/jujiazhaohu.png",
|
|
},
|
|
{
|
|
text: "医院陪护",
|
|
icon: "/static/index/yiyuanpeihu.png",
|
|
},
|
|
{
|
|
text: "商城服务",
|
|
icon: "/static/index/shangchengfuwu.png",
|
|
},
|
|
],
|
|
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getElScrollTop()
|
|
if (this.$store.state.vuex_location.status !== 2) {
|
|
this.$store.dispatch('getLocation')
|
|
}
|
|
},
|
|
created() {
|
|
this.menuButtonRight =
|
|
uni.getSystemInfoSync().screenWidth -
|
|
uni.getMenuButtonBoundingClientRect().left +
|
|
10;
|
|
this.statusBarHeight = uni.getMenuButtonBoundingClientRect().top;
|
|
},
|
|
onPageScroll(e) {
|
|
this.isShowSticky = e.scrollTop > this.scrollTop
|
|
},
|
|
onLoad() {
|
|
},
|
|
computed: {
|
|
navbarHeight() {
|
|
return getApp().globalData.navbarHeight
|
|
}
|
|
},
|
|
methods: {
|
|
getElScrollTop () {
|
|
const query = uni.createSelectorQuery().in(this)
|
|
query.select('.links').boundingClientRect(data => {
|
|
if (data) {
|
|
this.scrollTop = data.top
|
|
}
|
|
}).exec()
|
|
},
|
|
searchInput(e) {},
|
|
|
|
toPage (url, type='page') {
|
|
switch (type) {
|
|
case 'page':
|
|
uni.navigateTo({
|
|
url
|
|
})
|
|
break
|
|
case 'tabbar':
|
|
uni.switchTab({
|
|
url
|
|
})
|
|
break
|
|
case 'back':
|
|
uni.navigateBack()
|
|
break
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
::v-deep .u-swiper-wrap {
|
|
overflow: inherit !important;
|
|
}
|
|
::v-deep .u-swiper-indicator {
|
|
bottom: -30rpx !important;
|
|
}
|
|
::v-deep .u-indicator-item-round-active {
|
|
background: #ca2328 !important;
|
|
}
|
|
|
|
.container {
|
|
padding-bottom: calc(76px + 34px + 10px);
|
|
position: relative;
|
|
|
|
.top-bkg {
|
|
z-index: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 28rpx;
|
|
position: relative;
|
|
|
|
.position {
|
|
color: #fff;
|
|
font-size: 30rpx;
|
|
letter-spacing: 3rpx;
|
|
font-weight: 500;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
& > view {
|
|
padding: 0 13rpx;
|
|
max-width: 160rpx;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
.icon {
|
|
& > image {
|
|
width: 197rpx;
|
|
height: 72rpx;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
}
|
|
.search {
|
|
height: 68rpx;
|
|
border-radius: 34rpx;
|
|
background: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
padding: 20rpx 25rpx;
|
|
margin: 24rpx 26rpx 0 25rpx;
|
|
|
|
&__content {
|
|
margin-left: 18rpx;
|
|
}
|
|
|
|
&__icon {
|
|
}
|
|
}
|
|
.search-sticky {
|
|
display: flex;
|
|
align-items: center;
|
|
background: url("~@/static/index/top-bkg.png") no-repeat;
|
|
background-size: cover;
|
|
position: sticky;
|
|
z-index: 5;
|
|
top: 0;
|
|
width: 100vw;
|
|
padding-bottom: 20rpx;
|
|
animation: fade .4s;
|
|
filter: drop-shadow(0 2rpx 6rpx #c20d1266);
|
|
@keyframes fade {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&__position {
|
|
flex: 0;
|
|
color: #fff;
|
|
font-size: 30rpx;
|
|
letter-spacing: 3rpx;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
padding: 0 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
& > view {
|
|
padding: 0 10rpx;
|
|
max-width: 160rpx;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
&__search {
|
|
flex: 1;
|
|
height: 64rpx;
|
|
border-radius: 34rpx;
|
|
background: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
padding: 20rpx 25rpx;
|
|
}
|
|
}
|
|
|
|
.swiper {
|
|
margin-top: 24rpx;
|
|
padding: 0 25rpx;
|
|
}
|
|
|
|
.links {
|
|
padding: 0 25rpx;
|
|
margin-top: calc(43rpx + 30rpx);
|
|
|
|
.icon {
|
|
height: 59rpx;
|
|
width: 67rpx;
|
|
}
|
|
.text {
|
|
font-size: 24rpx;
|
|
line-height: 16rpx;
|
|
color: #333333;
|
|
font-weight: 500;
|
|
margin-top: 26rpx;
|
|
}
|
|
}
|
|
|
|
.img1 {
|
|
margin-top: 26rpx;
|
|
padding: 0 25rpx;
|
|
|
|
& > image {
|
|
width: 700rpx;
|
|
height: 169rpx;
|
|
}
|
|
}
|
|
|
|
.hospitals {
|
|
background: #fff;
|
|
border-radius: 10rpx;
|
|
margin: 26rpx 25rpx 0;
|
|
padding: 28rpx 25rpx;
|
|
|
|
&__title {
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
font-weight: bold;
|
|
padding: 0 32rpx 28rpx;
|
|
}
|
|
&__content {
|
|
max-height: 516rpx;
|
|
overflow-y: scroll;
|
|
|
|
&__item {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.left {
|
|
& > image {
|
|
height: 162rpx;
|
|
width: 250rpx;
|
|
border-radius: 6rpx;
|
|
}
|
|
}
|
|
.right {
|
|
margin-left: 25rpx;
|
|
.title {
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
font-weight: bold;
|
|
}
|
|
.tag {
|
|
margin-top: 16rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
&__item {
|
|
padding: 5rpx 16rpx;
|
|
font-size: 22rpx;
|
|
line-height: 31rpx;
|
|
font-weight: 500;
|
|
|
|
&:nth-child(1) {
|
|
color: #ca2328;
|
|
background-color: #faefef;
|
|
}
|
|
&:nth-child(2) {
|
|
color: #f38628;
|
|
background-color: #fcf3e9;
|
|
}
|
|
}
|
|
.tag__item + .tag__item {
|
|
margin-left: 12rpx;
|
|
}
|
|
}
|
|
.description {
|
|
width: 320rpx;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: 22rpx;
|
|
color: #929196;
|
|
font-weight: 500;
|
|
margin-top: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.statistics {
|
|
margin: 26rpx 25rpx 0;
|
|
display: grid;
|
|
grid-template-columns: 286rpx 182rpx 182rpx;
|
|
grid-template-rows: 203rpx 203rpx;
|
|
grid-gap: 25rpx;
|
|
grid-template-areas:
|
|
"block1 block2 block3"
|
|
"block1 block4 block4";
|
|
|
|
@for $index from 1 through 4 {
|
|
.block#{$index} {
|
|
border-radius: 10rpx;
|
|
grid-area: block#{$index};
|
|
}
|
|
}
|
|
.block1 {
|
|
background: linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%);
|
|
position: relative;
|
|
|
|
.text1 {
|
|
color: #fff;
|
|
padding: 74rpx 0 0 34rpx;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
}
|
|
.text2 {
|
|
font-size: 18rpx;
|
|
color: #ffffff;
|
|
font-weight: 500;
|
|
padding: 17rpx 0 0 34rpx;
|
|
}
|
|
.order {
|
|
font-size: 24rpx;
|
|
color: #c20d12;
|
|
font-weight: 500;
|
|
padding: 9rpx 22rpx;
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
display: inline-block;
|
|
margin: 18rpx 0 0 34rpx;
|
|
}
|
|
.img {
|
|
height: 190rpx;
|
|
width: 152rpx;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 10rpx;
|
|
}
|
|
}
|
|
.block2 {
|
|
position: relative;
|
|
background: linear-gradient(to bottom, #f3d4d4, #f2edf0);
|
|
|
|
.text1 {
|
|
text-align: center;
|
|
padding-top: 40rpx;
|
|
|
|
text:nth-child(1) {
|
|
font-size: 36rpx;
|
|
color: #ca3831;
|
|
font-weight: bold;
|
|
}
|
|
text:nth-child(2) {
|
|
font-size: 18rpx;
|
|
color: #929196;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
.text2 {
|
|
font-size: 24rpx;
|
|
color: #202020;
|
|
font-weight: 500;
|
|
padding-top: 20rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.img {
|
|
width: 114rpx;
|
|
height: 114rpx;
|
|
position: absolute;
|
|
right: 10rpx;
|
|
bottom: 20rpx;
|
|
}
|
|
}
|
|
.block3 {
|
|
position: relative;
|
|
background: linear-gradient(to bottom, #f7e9dd, #f4f1f1);
|
|
|
|
.text1 {
|
|
text-align: center;
|
|
padding-top: 40rpx;
|
|
|
|
text:nth-child(1) {
|
|
font-size: 36rpx;
|
|
color: #ca3831;
|
|
font-weight: bold;
|
|
}
|
|
|
|
text:nth-child(2) {
|
|
font-size: 18rpx;
|
|
color: #929196;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
.text2 {
|
|
font-size: 24rpx;
|
|
color: #202020;
|
|
font-weight: 500;
|
|
padding-top: 20rpx;
|
|
text-align: center;
|
|
}
|
|
.img {
|
|
width: 123rpx;
|
|
height: 127rpx;
|
|
position: absolute;
|
|
right: 10rpx;
|
|
bottom: 20rpx;
|
|
}
|
|
}
|
|
.block4 {
|
|
position: relative;
|
|
background: #dee5f9;
|
|
|
|
.text1 {
|
|
font-size: 28rpx;
|
|
color: #6c70c3;
|
|
font-weight: bold;
|
|
position: absolute;
|
|
left: 39rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.img {
|
|
position: absolute;
|
|
width: 147rpx;
|
|
height: 131rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
right: 18rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.honor {
|
|
background-color: #ede8dc;
|
|
padding: 27rpx 40rpx;
|
|
margin-top: 38rpx;
|
|
|
|
&__title {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
& > image {
|
|
width: 31rpx;
|
|
height: 36rpx;
|
|
}
|
|
& > text {
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.scroll-content {
|
|
margin-top: 27rpx;
|
|
white-space: nowrap;
|
|
|
|
.images {
|
|
height: 200rpx;
|
|
width: 311rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
margin-top: 35rpx;
|
|
width: 100vw;
|
|
height: 92rpx;
|
|
}
|
|
}
|
|
</style>
|