<template>
    <view class="employ-manage">
        <view class="em-content">
            <view class="ec-search">
                <view>
                    <input placeholder="请输入" />
                    <image mode="aspectFit" src="/static/images/icon/round_close.png"></image>
                </view>
            </view>
            <view class="ec-info">
                <view class="ei-add">
                    <image mode="aspectFit" src="/static/images/icon/round_add.png"></image>
                    <text>添加员工</text>
                </view>
                <view class="ei-tip">
                    <text>待审核员工</text>
                    <view>
                        <view>222</view>
                        <image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
                    </view>
                </view>
                <view class="ei-user">
                    <view>
                        <image></image>
                        <view class="eu-name">胡雪儿</view>
                        <view class="eu-tag">超级管理员</view>
                    </view>
                    <view hover-class="hover-active">更换</view>
                </view>
            </view>
            <view class="ec-employees">
                <view class="ec-header">
                    <view>
                        <image mode="aspectFit" src=""></image>
                        <view>员工总数  <text>3</text></view>
                    </view>
                    <view>
                        <text>筛选</text>
                        <text>删除</text>
                        <text class="active">取消</text>
                    </view>
                </view>
                <view class="ec-lists">
                    <view class="el-item" v-for="k in 20" :key="k">
                        <view>
                            <image class="ei-icon"></image>
                            <image class="ei-avatar"></image>
                            <view class="ei-info">
                                <view>胡雪儿</view>
                                <view class="ei-author">
                                    <view>权限：</view>
                                    <view>
                                        <view v-for="e in k" :key="e">场馆订{{e}}</view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
                    </view>
                </view>
            </view>
            <view class="ec-fixed-bot">
                <view>
                    <image></image>
                    <text>全选</text>
                </view>
                <view hover-class="hover-active">移除</view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    
}
</script>
<style lang="scss" scoped>
    @import "../../../style/public.scss";
    .em-content{
        padding-bottom: 96upx;
        padding-bottom: calc( 96upx + constant(safe-area-inset-bottom)); 
        padding-bottom: calc( 96upx + env(safe-area-inset-bottom)); 
        .ec-search{
            margin-bottom: 16upx;
            height: 144upx;
            background-color: #fff;
            @include centerFlex(center);
            >view{
                padding: 0 28upx;
                height: 92upx;
                width: 702upx;
                border-radius: 10upx;
                background-color: #f2f2f7;
                @include centerFlex(space-between);
                >input{
                    flex-grow: 1;
                    height: 100%;
                    font-size: 32upx;
                    color: #1a1a1a;
                }
                >image{
                    margin-left: 20upx;
                    flex-shrink: 0;
                    width: 32upx;
                    height: 32upx;
                }
            }
        }
        .ec-info{
            margin-bottom: 24upx;
            padding: 0 24upx;
            background-color: #fff;
            .ei-add{
                height: 220upx;
                border-bottom: 2upx solid #D8D8D8;
                @include centerFlex(center);
                >image{
                    flex-shrink: 0;
                    margin-right: 38upx;
                    width: 84upx;
                    height: 84upx;
                }
                >text{
                    font-weight: 500;
                    font-size: 32upx;
                    color: $themeColor;
                }
            }
            .ei-tip{
                height: 132upx;
                border-bottom: 2upx solid #D8D8D8;
                @include centerFlex(space-between);
                >text{
                    font-size: 32upx;
                    color: #333;
                }
                >view{
                    @include centerFlex(flex-end);
                    >view{
                        flex-shrink: 0;
                        flex-grow: 0;
                        margin-right: 30upx;
                        width: 50upx;
                        height: 50upx;
                        border-radius: 50%;
                        line-height: 50upx;
                        text-align: center;
                        font-size: 24upx;
                        color: #fff;
                        background-color: #ea5061;
                        @include textHide(1);
                    }
                    >image{
                        flex-shrink: 0;
                        width: 28upx;
                        height: 28upx;
                    }
                }
            }
            .ei-user{
                height: 140upx;
                @include centerFlex(space-between);
                >view{
                    &:first-child{
                        @include centerFlex(flex-start);
                        >image{
                            margin-right: 20upx;
                            width: 80upx;
                            height: 80upx;
                            border-radius: 10upx;
                            background-color: skyblue;
                        }
                        .eu-name{
                            max-width: 40%;
                            line-height: 44upx;
                            font-size: 32upx;
                            color: #333;
                            @include textHide(1);
                        }
                        .eu-tag{
                            display: inline-block;
                            margin-left: 24upx;
                            padding: 0 6upx;
                            height: 32upx;
                            line-height: 32upx;
                            border-radius: 6upx;
                            font-size: 22upx;
                            color: $themeColor;
                            background-color: rgba(0, 152, 116, .2);
                        }
                    }
                    &+view{
                        flex-shrink: 0;
                        width: 140upx;
                        height: 64upx;
                        line-height: 60upx;
                        text-align: center;
                        border-radius: 10upx;
                        border: 2upx solid $themeColor;
                        font-size: 32upx;
                        color: $themeColor;
                    }
                }
            }
        }
        .ec-employees{
            background-color: #fff;
            .ec-header{
                padding: 0 24upx;
                height: 132upx;
                border-bottom: 2upx solid #E1E1E1;
                @include centerFlex(space-between);
                >view{
                    &:first-child{
                        flex-grow: 1;
                        @include centerFlex(flex-start);
                        >image{
                            flex-shrink: 0;
                            margin-right: 12upx;
                            width: 48upx;
                            height: 48upx;
                            background-color: $themeColor;
                        }
                        >view{
                            flex-grow: 1;
                            font-size: 32upx;
                            color: #9c9c9f;
                            @include textHide(1);
                            >text{
                                margin-left: 10upx;
                                color: #1a1a1a;
                            }
                        }
                    }
                    &+view{
                        font-size: 28upx;
                        color: #1A1A1A;
                        >text{
                            margin: 0 16upx;
                        }
                        .active{
                            color: $themeColor !important;
                        }
                    }
                }
            }
            .ec-lists{
                padding: 0 24upx;
                background-color: #fff;
                .el-item{
                    padding: 30upx 0;
                    display: flex;
                    justify-content: space-between;
                    &:not(:last-child){
                        border-bottom: 2upx solid #D8D8D8;
                    }
                    >image{
                        margin-top: 22upx;
                        flex-shrink: 0;
                        margin-right: 20upx;
                        width: 28upx;
                        height: 28upx;
                    }
                    >view{
                        flex-grow: 1;
                        display: flex;
                        .ei-icon{
                            margin-top: 20upx;
                            flex-shrink: 0;
                            width: 40upx;
                            height: 40upx;
                            border: 2upx solid #d8d8d8;
                            border-radius: 50%;
                        }
                        .ei-avatar{
                            flex-shrink: 0;
                            margin: 0 20upx;
                            width: 80upx;
                            height: 80upx;
                            border-radius: 10upx;
                            background-color: tomato;
                        }
                        .ei-info{
                            flex-grow: 1;
                            >view:first-child{
                                margin-bottom: 2upx;
                                font-size: 32upx;
                                line-height: 44upx;
                                color: #333;
                                @include textHide(1);
                            }
                            .ei-author{
                                display: flex;
                                >view{
                                    &:first-child{
                                        flex-shrink: 0;
                                        margin-right: 4upx;
                                        line-height: 34upx;
                                        font-size: 24upx;
                                        color: #9c9c9f;
                                    }
                                    &+view{
                                        flex-grow: 1;
                                        display: flex;
                                        flex-wrap: wrap;
                                        >view{
                                            flex-shrink: 0;
                                            margin-right: 28upx;
                                            margin-bottom: 20upx;
                                            padding: 0 8upx;
                                            height: 32upx;
                                            line-height: 28upx;
                                            font-size: 22upx;
                                            border-radius: 6upx;
                                            border: 2upx solid #d8d8d8;
                                            color: #9C9C9F;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .ec-fixed-bot{
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: #fff;
            padding-left: 24upx;
            padding-right: 44upx;
            padding-top: 8upx;
            padding-bottom: 8upx;
            padding-bottom: calc( 8upx + constant(safe-area-inset-bottom)); 
            padding-bottom: calc( 8upx + env(safe-area-inset-bottom)); 
            border-top: 2upx solid #D8D8D8;
            @include centerFlex(space-between);
            >view{
                &:first-child{
                    >image{
                        margin-right: 22upx;
                        vertical-align: middle;
                        width: 40upx;
                        height: 40upx;
                        border-radius: 50%;
                        border: 2upx solid #D8D8D8;
                    }
                    >text{
                        line-height: 40upx;
                        font-size: 28upx;
                        color: #9c9c9f;
                    }
                }
                &+view{
                    width: 210upx;
                    height: 80upx;
                    line-height: 76upx;
                    text-align: center;
                    border-radius: 10upx;
                    font-size: 32upx;
                    font-weight: 500;
                    border: 2upx solid #ea5061;
                    color: #ea5061;
                }
            }
        }
    }
</style>