<template>
|
<div class="menus">
|
<div><the-a-change :data="changeData" default-value="custom"></the-a-change></div>
|
<div><a-time-picker type="time-range" style="width: 250px" /></div>
|
<div>
|
<the-a-select :data="['正序', '倒序']" placeholder="请选择" title="排序"></the-a-select>
|
</div>
|
<div>
|
<the-a-select :data="['1号楼', '2号楼']" placeholder="请选择" title="出现地点"></the-a-select>
|
</div>
|
<div>
|
<a-button type="primary">
|
<template #icon>
|
<icon-search />
|
</template>
|
<template #default>搜索</template>
|
</a-button>
|
</div>
|
<div>
|
<a-button>
|
<template #icon>
|
<icon-refresh />
|
</template>
|
<template #default>重置</template>
|
</a-button>
|
</div>
|
<div class="buttons">
|
<div>
|
<icon-list size="20" />
|
</div>
|
<div class="button active">
|
<icon-apps size="20" />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup name="member-source">
|
const changeData = reactive([
|
{
|
name: "1天",
|
value: "1"
|
},
|
{
|
name: "2天",
|
value: "2"
|
},
|
{
|
name: "自定义",
|
value: "custom"
|
}
|
]);
|
</script>
|
|
<style lang="scss" scoped>
|
.menus {
|
display: flex;
|
padding: 0 5px 20px 20px;
|
> div {
|
margin-right: 10px;
|
&.buttons {
|
display: flex;
|
background: var(--color-fill-2);
|
> div {
|
width: 34px;
|
height: 34px;
|
cursor: pointer;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
&.active {
|
background: #1057fd;
|
color: #fff;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
