You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
370 lines
14 KiB
370 lines
14 KiB
<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>
|