master
parent
a1e4fdb8a0
commit
64307ea3a0
@ -1,23 +1,555 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
</view>
|
||||
<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">
|
||||
<u-icon name="map-fill"></u-icon>
|
||||
<text>苏州</text>
|
||||
<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 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"
|
||||
>
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<tabbar />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
import Tabbar from "@/component/Tabbar/Tabbar.vue";
|
||||
export default {
|
||||
components: {
|
||||
Tabbar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
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",
|
||||
},
|
||||
{
|
||||
text: "就医服务",
|
||||
icon: "/static/index/jiuyifuwu.png",
|
||||
},
|
||||
{
|
||||
text: "居家照护",
|
||||
icon: "/static/index/jujiazhaohu.png",
|
||||
},
|
||||
{
|
||||
text: "医院陪护",
|
||||
icon: "/static/index/yiyuanpeihu.png",
|
||||
},
|
||||
{
|
||||
text: "商城服务",
|
||||
icon: "/static/index/shangchengfuwu.png",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.menuButtonRight =
|
||||
uni.getSystemInfoSync().screenWidth -
|
||||
uni.getMenuButtonBoundingClientRect().left +
|
||||
10;
|
||||
this.statusBarHeight = uni.getMenuButtonBoundingClientRect().top;
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
searchInput(e) {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<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;
|
||||
|
||||
& > text {
|
||||
padding: 0 13rpx;
|
||||
}
|
||||
}
|
||||
.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 {
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<view>
|
||||
me
|
||||
<tabbar />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Tabbar from "@/component/Tabbar/Tabbar.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Tabbar
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<view>
|
||||
order
|
||||
<tabbar />
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Tabbar from "@/component/Tabbar/Tabbar.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Tabbar
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 784 B |
|
After Width: | Height: | Size: 1019 B |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 552 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 645 B |
Loading…
Reference in new issue