352 lines
7.7 KiB
Vue
352 lines
7.7 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="tui-searchbox">
|
||
<view class="tui-rolling-search">
|
||
<icon type="search" :size='13' color='#999'></icon>
|
||
<swiper vertical autoplay circular interval="8000" class="tui-swiper">
|
||
<swiper-item v-for="(item,index) in hotSearch" :key="index" class="tui-swiper-item" @tap="search">
|
||
<view class="tui-hot-item">大家正在搜：{{item}}</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
<tui-sticky :scrollTop="scrollTop" stickyHeight="104rpx" container>
|
||
<template v-slot:header>
|
||
<view class="sticky-item">
|
||
<view class="date">医院列表</view>
|
||
<view class="amount">
|
||
<view>医院数量： <text style="color:#ff0000;font-size: 36rpx;font-weight: 600;"> 4</text></view>
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
<template v-slot:content>
|
||
<!--内容 start-->
|
||
<view class="list-view">
|
||
<view class="tui-list-item" hover-class="tui-hover" :hover-stay-time="150" @tap="showDetail()">
|
||
<view class="content-box">
|
||
<image :src="apiHost+'/miniapp/static/hospital.png'" class="logo"></image>
|
||
<view class="des-box">
|
||
<view class="tit">钦州市第一人民医院</view>
|
||
<view class="time">上次转运时间：2022-10-14</view>
|
||
<view class="time">广西壮族自治区钦州市</view>
|
||
</view>
|
||
</view>
|
||
<view class="money add" style="color:#0055ff;">待转运</view>
|
||
</view>
|
||
</view>
|
||
<view class="list-view">
|
||
<view class="tui-list-item" hover-class="tui-hover" :hover-stay-time="150" @tap="showDetail()">
|
||
<view class="content-box">
|
||
<image :src="apiHost+'/miniapp/static/hospital.png'" class="logo"></image>
|
||
<view class="des-box">
|
||
<view class="tit">钦州市第一人民医院</view>
|
||
<view class="time">上次转运时间：2022-10-14</view>
|
||
<view class="time">广西壮族自治区钦州市</view>
|
||
</view>
|
||
</view>
|
||
<view class="money add" style="color:#0055ff;">待转运</view>
|
||
</view>
|
||
</view>
|
||
<view class="list-view">
|
||
<view class="tui-list-item" hover-class="tui-hover" :hover-stay-time="150" @tap="showDetail()">
|
||
<view class="content-box">
|
||
<image :src="apiHost+'/miniapp/static/hospital.png'" class="logo"></image>
|
||
<view class="des-box">
|
||
<view class="tit">钦州市第一人民医院</view>
|
||
<view class="time">上次转运时间：2022-10-14</view>
|
||
<view class="time">广西壮族自治区钦州市</view>
|
||
</view>
|
||
</view>
|
||
<view class="money add" style="color:#0055ff;">待转运</view>
|
||
</view>
|
||
</view>
|
||
<view class="list-view">
|
||
<view class="tui-list-item" hover-class="tui-hover" :hover-stay-time="150" @tap="showDetail()">
|
||
<view class="content-box">
|
||
<image :src="apiHost+'/miniapp/static/hospital.png'" class="logo"></image>
|
||
<view class="des-box">
|
||
<view class="tit">钦州市第一人民医院</view>
|
||
<view class="time">上次转运时间：2022-10-14</view>
|
||
<view class="time">广西壮族自治区钦州市</view>
|
||
</view>
|
||
</view>
|
||
<view class="money add" style="color:#0055ff;">待转运</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</tui-sticky>
|
||
<tui-loadmore style="position:relative;top:-20rpx" v-if="showloadmore"></tui-loadmore>
|
||
<tui-nomore style="position:relative;top:-20rpx" v-if="shownomore"></tui-nomore>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import myapp from '@/common/js/myapp.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
apiHost: myapp.apiHost,
|
||
showloadmore: false,
|
||
shownomore: false,
|
||
end_record: {},
|
||
hotSearch: [
|
||
"钦州市第一人民医院",
|
||
"医废",
|
||
"转运"
|
||
]
|
||
}
|
||
},
|
||
onShow: function() {
|
||
let user = myapp.checkLogin()
|
||
uni.setStorageSync('lastPagePath', '/packagePage/pages/record/record')
|
||
let that = this;
|
||
},
|
||
methods: {
|
||
//页面滚动执行方式
|
||
onPageScroll(e) {
|
||
this.scrollTop = e.scrollTop
|
||
},
|
||
search: function() {
|
||
console.info('搜索...')
|
||
},
|
||
showDetail: function() {
|
||
uni.navigateTo({
|
||
url:'/packagePage/pages/today_plan_trans/today_plan_trans'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import '../../../static/style/thorui.css';
|
||
|
||
page {
|
||
background-color: #F5F6FA;
|
||
}
|
||
.tui-searchbox {
|
||
padding: 16rpx 20rpx;
|
||
box-sizing: border-box;
|
||
background-color: #F2F2F2;
|
||
}
|
||
|
||
.tui-rolling-search {
|
||
width: 100%;
|
||
height: 60rpx;
|
||
border-radius: 35rpx;
|
||
padding: 0 40rpx 0 30rpx;
|
||
box-sizing: border-box;
|
||
background: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
color: #999;
|
||
}
|
||
|
||
.tui-swiper {
|
||
font-size: 26rpx;
|
||
height: 60rpx;
|
||
flex: 1;
|
||
padding-left: 12rpx;
|
||
}
|
||
|
||
.tui-swiper-item {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.tui-hot-item {
|
||
line-height: 26rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.tui-flex-box {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
flex-direction: row-reverse;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
position: relative;
|
||
top:-80rpx;
|
||
}
|
||
|
||
.charts-box {
|
||
width: 100%;
|
||
height: 300px;
|
||
background-color: #FFF;
|
||
}
|
||
|
||
.container {
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
|
||
.tips {
|
||
background: #fff;
|
||
padding: 30rpx 14rpx;
|
||
color: #555;
|
||
font-size: 24rpx;
|
||
line-height: 42rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.tips::before {
|
||
content: '';
|
||
position: absolute;
|
||
border-top: 1rpx solid #eaeef1;
|
||
-webkit-transform: scaleY(0.5);
|
||
transform: scaleY(0.5);
|
||
top: 0;
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
/* sticky 容器 start */
|
||
.sticky-item {
|
||
width: 100%;
|
||
height: 104rpx;
|
||
padding: 20rpx 30rpx;
|
||
background-color: #fafafa;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* sticky 容器 end */
|
||
|
||
.date {
|
||
height: 54rpx;
|
||
font-size: 28rpx;
|
||
background-color: #fff;
|
||
padding: 0 28rpx;
|
||
border-radius: 25rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
/* box-shadow: 0 0 1rpx #7A7A7A; */
|
||
}
|
||
|
||
.date::after {
|
||
content: '';
|
||
position: absolute;
|
||
height: 200%;
|
||
width: 200%;
|
||
border: 1rpx solid #eaeef1;
|
||
border-radius: 60rpx;
|
||
-webkit-transform-origin: 0 0;
|
||
transform-origin: 0 0;
|
||
-webkit-transform: scale(0.5);
|
||
transform: scale(0.5);
|
||
left: 0;
|
||
top: 0;
|
||
}
|
||
|
||
.amount {
|
||
text-align: right;
|
||
color: #686868;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.list-view {
|
||
padding-top: 15rpx;
|
||
position: relative;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.list-view::after {
|
||
content: '';
|
||
position: absolute;
|
||
border-top: 1rpx solid #eaeef1;
|
||
-webkit-transform: scaleY(0.5);
|
||
transform: scaleY(0.5);
|
||
top: 0;
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.tui-list-item {
|
||
width: 100%;
|
||
padding: 30rpx 28rpx;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.tui-list-item::after {
|
||
left: 120rpx
|
||
}
|
||
|
||
.item-last::after {
|
||
left: 0 !important
|
||
}
|
||
|
||
.content-box {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.logo {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
flex-grow: 1
|
||
}
|
||
|
||
.des-box {
|
||
min-height: 130rpx;
|
||
padding-left: 28rpx;
|
||
box-sizing: border-box;
|
||
vertical-align: top;
|
||
color: #333;
|
||
font-size: 24rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.tit {
|
||
font-size: 28rpx;
|
||
max-width: 420rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.source {
|
||
font-size: 24rpx;
|
||
|
||
}
|
||
|
||
.time {
|
||
font-size: 24rpx;
|
||
padding-top: 12rpx;
|
||
}
|
||
|
||
.money {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #000;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
padding-left: 20rpx;
|
||
}
|
||
|
||
.add {
|
||
color: #5677FC !important;
|
||
}
|
||
|
||
.tui-color-primary {
|
||
color: #5677fc;
|
||
}
|
||
</style>
|