wangyifang
/
tiantian-care-wx
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

护工列表更新

Browse Source
master
DESKTOP-SORBLEM\xuyay 2 years ago
parent 14bfb58aa7
commit 195081b5b9
3 changed files with 305 additions and 3 deletions
Show Stats Download Patch File Download Diff File

308
packages/packagesPro/pages/proCarerList/list.vue
Unescape View File

@ -1,6 +1,155 @@
<template>
<view class="clearfix">
<view class="wrap">
<view class="clearfix procarefilter">
<text class="filteritem active">按年龄
<text class="arrow">
<text class="arrowicon arrowup on"></text>
<text class="arrowicon arrowdown on"></text>
</text>
</text>
<text class="filteritem">按护理经验
<text class="arrow">
<text class="arrowicon arrowup"></text>
<text class="arrowicon arrowdown"></text>
</text>
</text>
<text class="filteritem">按评价
<text class="arrow">
<text class="arrowicon arrowup"></text>
<text class="arrowicon arrowdown"></text>
</text>
</text>
</view>
<view class="procarelist">
<!-- 1条数据开始 -->
<view class="procarelist-item">
<view class="clearfix procarelist-top">
<view class="procarelist-img">
<image src="../../../../static/resource/icon/icon_face.jpg"></image>
</view>
<view class="procarelist-info">
<view class="procarelist-title">张阿姨</view>
<view class="procarelist-brief">女<text class="age orangecolor">58岁</text><text class="experance orangecolor">5年</text>护理经验</view>
<view class="clearfix procarelist-service">
<view class="procarelist-number">已经用心服务过<text class="orangecolor">20</text>个患者 </view>
<view class="procarelist-level">
<text class="on"></text>
<text></text>
<text></text>
<text></text>
<text></text>
</view>
</view>
</view>
</view>
<view class="procarelist-bottom">
<view class="procarelist-range">服务范围:</view>
<view class="procarelist-rangelist">
<text>生活照顾</text>
<text>生活照顾</text>
<text>生活照顾</text>
<text>生活照顾</text>
</view>
</view>
</view>
<!-- 1条数据结束 -->
<!-- 2条数据开始 -->
<view class="procarelist-item">
<view class="clearfix procarelist-top">
<view class="procarelist-img">
<image src="../../../../static/resource/icon/icon_face.jpg"></image>
</view>
<view class="procarelist-info">
<view class="procarelist-title">张阿姨</view>
<view class="procarelist-brief">女<text class="age orangecolor">58岁</text><text class="experance orangecolor">5年</text>护理经验</view>
<view class="clearfix procarelist-service">
<view class="procarelist-number">已经用心服务过<text class="orangecolor">20</text>个患者 </view>
<view class="procarelist-level">
<text class="on"></text>
<text></text>
<text></text>
<text></text>
<text></text>
</view>
</view>
</view>
</view>
<view class="procarelist-bottom">
<view class="procarelist-range">服务范围:</view>
<view class="procarelist-rangelist">
<text>生活照顾</text>
<text>生活照顾</text>
<text>生活照顾</text>
<text>生活照顾</text>
</view>
</view>
</view>
<!-- 2条数据结束 -->
<!-- 3条数据开始 -->
<view class="procarelist-item">
<view class="clearfix procarelist-top">
<view class="procarelist-img">
<image src="../../../../static/resource/icon/icon_face.jpg"></image>
</view>
<view class="procarelist-info">
<view class="procarelist-title">张阿姨</view>
<view class="procarelist-brief">女<text class="age orangecolor">58岁</text><text class="experance orangecolor">5年</text>护理经验</view>
<view class="clearfix procarelist-service">
<view class="procarelist-number">已经用心服务过<text class="orangecolor">20</text>个患者 </view>
<view class="procarelist-level">
<text class="on"></text>
<text></text>
<text></text>
<text></text>
<text></text>
</view>
</view>
</view>
</view>
<view class="procarelist-bottom">
<view class="procarelist-range">服务范围:</view>
<view class="procarelist-rangelist">
<text>生活照顾</text>
<text>生活照顾</text>
<text>生活照顾</text>
<text>生活照顾</text>
</view>
</view>
</view>
<!-- 3条数据结束 -->
<!-- 4条数据开始 -->
<view class="procarelist-item">
<view class="clearfix procarelist-top">
<view class="procarelist-img">
<image src="../../../../static/resource/icon/icon_face.jpg"></image>
</view>
<view class="procarelist-info">
<view class="procarelist-title">张阿姨</view>
<view class="procarelist-brief">女<text class="age orangecolor">58岁</text><text class="experance orangecolor">5年</text>护理经验</view>
<view class="clearfix procarelist-service">
<view class="procarelist-number">已经用心服务过<text class="orangecolor">20</text>个患者 </view>
<view class="procarelist-level">
<text class="on"></text>
<text></text>
<text></text>
<text></text>
<text></text>
</view>
</view>
</view>
</view>
<view class="procarelist-bottom">
<view class="procarelist-range">服务范围:</view>
<view class="procarelist-rangelist">
<text>生活照顾</text>
<text>生活照顾</text>
<text>生活照顾</text>
<text>生活照顾</text>
</view>
</view>
</view>
<!-- 4条数据结束 -->
</view>
</view>
</template>
@ -23,7 +172,160 @@
}
</script>
<style style="text/css" scoped>
.arrow::after{
.clearfix:after{ content: ""; display:block; height: 0; clear: both; visibility: hidden;}
.wrap{
width: 100%;
height: 100vh;
background: #e7f5f4;
padding: 0 30rpx;
}
.procarefilter{
width: 100%;
padding-top: 33rpx;
padding-bottom: 33rpx;
}
.filteritem{
float: left;
width: 33.33%;
font-size: 32rpx;
text-align: center;
color: #303233;
}
.arrow{
position: relative;
width: 16rpx;
margin-left: 10rpx;
}
.arrowicon{
position: absolute;
left: 0;
width: 16rpx;
height: 9rpx;
background-image: url(../../../../static/resource/icon/icon_gray_arrow.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
}
.arrowup{
top: 9rpx;
}
.arrowicon.arrowdown{
bottom: 9rpx;
transform: rotate(180deg);
background-image: url(../../../../static/resource/icon/icon_gray_arrow.png);
}
.filteritem.active{
color: #f88a64;
}
.filteritem.active .arrowicon.arrowup.on{
transform: rotate(-180deg);
background-image: url(../../../../static/resource/icon/icon_orange_arrow.png);
}
.filteritem.active .arrowicon.arrowdown.on{
transform: none;
background-image: url(../../../../static/resource/icon/icon_orange_arrow.png);
}
.procarelist{
}
.procarelist-item{
background: #fff;
box-shadow: 0 2rpx 20rpx rgba(86,98,109,.16);
border-radius: 4rpx;
margin-bottom: 30rpx;
padding: 24rpx 20rpx 10rpx;
}
.procarelist-top{
}
.procarelist-img{
float: left;
width: 148rpx;
height: 148rpx;
border: 1px solid #f3f2f2;
border-radius: 50%;
overflow: hidden;
}
.procarelist-img image{
width: 148rpx;
height: 148rpx;
border-radius: 50%;
}
.procarelist-info{
float: right;
width: 72.3%;
padding-top: 15rpx;
}
.procarelist-title{
font-size: 26rpx;
color: #303233;
margin-bottom: 12rpx;
}
.procarelist-brief{
font-size: 24rpx;
color: #303233;
}
.orangecolor{
color: #f88a64;
}
.procarelist-brief text{
margin-left: 46rpx;
}
.procarelist-service{
margin-top: 12rpx;
}
.procarelist-number{
float: left;
font-size: 24rpx;
color: #303233;
}
.procarelist-level{
float: right;
margin-top: 1rpx;
}
.procarelist-level text{
display: inline-block;
width: 25rpx;
height: 24rpx;
background-image: url(../../../../static/resource/icon/star.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
margin: 0 2rpx;
}
.procarelist-level text.on{
background-image: url(../../../../static/resource/icon/star_on.png);
}
.procarelist-bottom{
overflow: hidden;
padding-top: 26rpx;
}
.procarelist-range{
float: left;
font-size: 26rpx;
color: #000;
margin-top: 6rpx;
}
.procarelist-rangelist{
float: right;
width: 72.3%;
}
.procarelist-rangelist text{
width: 37.2%;
margin-right: 6.38%;
height: 48rpx;
line-height: 48rpx;
float: left;
text-align: center;
font-size: 24rpx;
margin-bottom: 16rpx;
color: #303233;
border: 2rpx solid transparent;
border-radius: 48rpx;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to right, #e7f5f4, #e7f5f4), linear-gradient(90deg, #0ee2ba, #66f7db);
}
</style>

BIN
static/resource/icon/star.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
static/resource/icon/star_on.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

Write Preview
Loading…
Cancel
Save