169 lines
3.3 KiB
Vue
169 lines
3.3 KiB
Vue
<script lang="ts" setup>
|
|
|
|
const fitters = [{
|
|
name: '全部',
|
|
value: 'all'
|
|
}, {
|
|
name: '已启用',
|
|
value: 'enable'
|
|
}, {
|
|
name: '禁用',
|
|
value: 'disable'
|
|
}, {
|
|
name: '未激活',
|
|
value: 'unActive'
|
|
}, {
|
|
name: '在线',
|
|
value: 'online'
|
|
}, {
|
|
name: '离线',
|
|
value: 'offline'
|
|
}]
|
|
const selectedFitters = ref([])
|
|
const visible = ref(false)
|
|
defineProps({
|
|
userNumber:{
|
|
type:Number,
|
|
default:0
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bar-layout">
|
|
<Dialog
|
|
v-model:visible="visible"
|
|
:breakpoints="{ '1199px': '75vw', '575px': '90vw' }"
|
|
:pt="{
|
|
root: {
|
|
style:'border:unset;background-color:unset;'
|
|
},
|
|
mask: {
|
|
style: 'backdrop-filter: blur(20px)'
|
|
}
|
|
}"
|
|
modal
|
|
>
|
|
<template #container="{ closeCallback }">
|
|
<UserPageAddUser :close-back="closeCallback"/>
|
|
</template>
|
|
</Dialog>
|
|
<div class="user-num">
|
|
<Icon :size="30" :stroke-width="1.8" name="User"></Icon>
|
|
<h3>{{userNumber}}</h3>
|
|
</div>
|
|
<div class="search-box">
|
|
<Icon name="UserRoundSearch"></Icon>
|
|
<input placeholder="搜索"/>
|
|
</div>
|
|
<div class="bar-actions">
|
|
<div class="sort-box">
|
|
<p>名称</p>
|
|
<Icon :size="16" :stroke-width="1.3" name="ArrowUpDown"/>
|
|
</div>
|
|
<MultiSelect v-model="selectedFitters" :maxSelectedLabels="3" :options="fitters" display="chip"
|
|
optionLabel="name" placeholder="过滤"></MultiSelect>
|
|
<button class="add-user" @click="visible=true" >
|
|
<p>添加用户</p>
|
|
<Icon :size="18" :stroke-width="1.3" name="CirclePlus"></Icon>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import 'base';
|
|
|
|
.bar-layout {
|
|
background: $light-bg-color;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: $padding*2;
|
|
border-radius: $radius;
|
|
gap: 5rem;
|
|
*{
|
|
@include SC_Font;
|
|
}
|
|
.dark-mode &{
|
|
background: $dark-bg-color;
|
|
}
|
|
}
|
|
|
|
.user-num {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $gap;
|
|
|
|
h3 {
|
|
font-size: 22px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.bar-actions {
|
|
display: flex;
|
|
gap: $gap*2;
|
|
}
|
|
|
|
.search-box {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
gap: $gap;
|
|
padding: 0 $padding*2;
|
|
height: 100%;
|
|
background: #fff;
|
|
border-radius: 6px;
|
|
border: 1px solid #cbd5e1;
|
|
box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
|
|
color: #64748b;
|
|
max-width: 1200px;
|
|
.dark-mode &{
|
|
background: $dark-bg-color;
|
|
border: 1px solid #5a5e60;
|
|
}
|
|
input {
|
|
height: 100%;
|
|
width: 100%;
|
|
border: unset;
|
|
outline: unset;
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
.sort-box {
|
|
display: flex;
|
|
gap: $gap*1.7;
|
|
align-items: center;
|
|
box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 6px;
|
|
color: #64748b;
|
|
padding: 0 $padding;
|
|
}
|
|
|
|
.add-user {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $gap*1.7;
|
|
background: $primary-color;
|
|
color: #FFF;
|
|
padding: 0 $padding;
|
|
border-radius: 6px;
|
|
outline: unset;
|
|
border: unset;
|
|
box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
|
|
cursor: pointer;
|
|
|
|
p {
|
|
//不允许选中
|
|
-webkit-user-select: none;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.p-multiselect{
|
|
background: unset;
|
|
}
|
|
</style> |