<template>
|
<!-- 看板 -->
|
<view>
|
<view class="content">
|
<view class="content-time font-16 flex align-center">
|
<text>预约时间</text>
|
<text class="blue ml-10">2020-12-25</text>
|
</view>
|
<view class="content-condition font-12 flex align-center justify-around mt-20">
|
<view class="content-condition-item center item-white">
|
<text>未上班</text>
|
</view>
|
<view class="content-condition-item center item-green">
|
<text>可预约</text>
|
</view>
|
<view class="content-condition-item center item-pink">
|
<text>已预约</text>
|
</view>
|
<view class="content-condition-item center item-blue">
|
<text>服务中</text>
|
</view>
|
<view class="content-condition-item center item-yellow">
|
<text>服务结束</text>
|
</view>
|
</view>
|
<view class="itme-box mt-20">
|
<scroll-view scroll-x="true" class="h-table">
|
<view class="h-tr h-thead">
|
<view class="h-td center">姓名</view>
|
<view class="h-td center">10:00</view>
|
<view class="h-td center">10:30</view>
|
<view class="h-td center">11:00</view>
|
<view class="h-td center">11:30</view>
|
<view class="h-td center">12:00</view>
|
<view class="h-td center">12:30</view>
|
<view class="h-td center">13:00</view>
|
<view class="h-td center">13:30</view>
|
</view>
|
<view class="h-tr">
|
<view class="h-td center">周晓</view>
|
<view class="h-td font-12 flex flex-v item-yellow" style="min-width: 240px;">
|
<view>
|
<view class="flex">
|
<view class="flex align-center">
|
<text class="iconfont iconnvshi mr-5"></text>
|
<text>于倩</text>
|
</view>
|
<view class="flex align-center ml-10">
|
<text class="iconfont iconzhong mr-5"></text>
|
<text>90分钟</text>
|
</view>
|
</view>
|
<view class="flex align-center mt-5">
|
<text class="iconfont iconxiangmu mr-5"></text>
|
<text>脸部抗衰护理</text>
|
</view>
|
<view class="flex align-center mt-5">
|
<text class="iconfont iconshafa mr-5"></text>
|
<text>VIP-2 (星海店)</text>
|
</view>
|
</view>
|
</view>
|
<view class="h-td"></view>
|
</view>
|
<view class="h-tr">
|
<view class="h-td">陈沾</view>
|
<view class="h-td item-green"></view>
|
</view>
|
<view class="h-tr">
|
<view class="h-td">古秋燕</view>
|
<view class="h-td"></view>
|
</view>
|
<view class="h-tr">
|
<view class="h-td">彭艳芳</view>
|
<view class="h-td"></view>
|
</view>
|
</scroll-view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default{
|
components: {
|
|
},
|
data(){
|
return{
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page{
|
background: #F6F6F8;
|
}
|
.content{
|
background: #FFFFFF;
|
border: 1px solid #EDEAF4;
|
border-radius: 4px;
|
box-shadow:0 6px 6px rgba(237,234,244,0.5);
|
margin: 10px;
|
padding: 10px 0;
|
}
|
.content-time{
|
padding: 0 10px;
|
}
|
.content-condition-item{
|
width: 60px;
|
border: 1px solid #EDEAF4;
|
border-radius: 4px;
|
line-height: 24px;
|
}
|
.item-white{
|
background: #fafafa;
|
}
|
.item-green{
|
background: #ECF7E6;
|
}
|
.item-pink{
|
background: #FDEDF0;
|
}
|
.item-blue{
|
background: #BAD8FD;
|
}
|
.item-yellow{
|
background: #F8ECDA;
|
}
|
|
|
.itme-box{
|
background: #FFFFFF;
|
}
|
/* 表格样式开始 */
|
|
/* 行 */
|
.h-tr{
|
box-sizing: border-box;
|
display: flex;
|
/* align-items: stretch; */
|
align-content: center;
|
border-color: #EDEAF4;
|
border-style: solid;
|
border-width: 0;
|
border-top-width: 1px;
|
border-left-width: 1px;
|
border-bottom-width: 1px;
|
color: #111111;
|
}
|
/* 单元格 */
|
.h-td{
|
min-width: 80px;
|
box-sizing: border-box;
|
padding: 3px;
|
border-color: #EDEAF4;
|
border-style: solid;
|
border-width: 0;
|
border-right-width: 1px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
/* 表头 */
|
.h-thead{
|
background-color: #FFFFFF;
|
}
|
</style>
|
