看板

li-guang

2020-12-29 987476871662581baa6e0d439132a69a5dd53330

看板

 hive-app/App.vue

@@ -16,5 +16,5 @@
    /*每个页面公共css */
@import url("./common/styles/index");
@import url("./static/iconfont/iconfont.css");
@import url("//at.alicdn.com/t/font_2263696_ohajb1pq6k.css");
@import url("//at.alicdn.com/t/font_2263696_8s0ijyp9m33.css");
</style>

 hive-app/pages.json

@@ -453,6 +453,17 @@
                    "scrollIndicator": "none"
                }
            }
        },
        {
            "path": "pages/workbench/board",
            "style": {
                "navigationBarTitleText": "看板",
                "navigationBarBackgroundColor":"#FFFFFF",
                "navigationBarTextStyle":"black",
                "app-plus":{ 
                    "scrollIndicator": "none"
                }
            }
        }
    ],
    "globalStyle": {

 hive-app/pages/workbench/board.vue

New file
@@ -0,0 +1,169 @@
<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>

 hive-app/pages/workbench/index.vue

@@ -102,7 +102,7 @@
            <text class="title">待办</text>
            <view class="flex align-center mt-10">
                <view class="list-item">
                    <navigator url="./"  hover-class="none">
                    <navigator url="./board"  hover-class="none">
                        <image class="content-icon" src="../../static/images/commission1.png"></image>
                        <text class="font-12 font-dark">看板</text>
                    </navigator>