<template>
|
<div class="project">
|
<div class="side-header">
|
<div class="side-option flex-display flex-align-center flex-justify-between">
|
<h2 class="title">项目列表</h2>
|
<PlusCircleOutlined :style="{ fontSize: '20px' }" />
|
</div>
|
<div class="border-bottom"></div>
|
</div>
|
<div class="side-filter-warp">
|
<div class="side-filter flex-display flex-align-center flex-justify-between">
|
<Select :bordered="false" :options="statusOption" v-model="params.status" @handleChange="statusHandleChange" />
|
<Select :bordered="false" :options="projectOption" v-model="params.project" @handleChange="projectHandleChange" />
|
<Select :bordered="false" :options="sortOption" v-model="params.sort" @handleChange="sortHandleChange" />
|
<MonitorOutlined :style="{ fontSize: '24px', display: 'flex', alignItems: 'center', marginRight: '12px' }" />
|
</div>
|
</div>
|
<List />
|
<!-- <button @click="goDetail">列表详情</button> -->
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ERouterName } from '/@/types/enums'
|
import { statusOption, sortOption, projectOption } from './data'
|
import { PlusCircleOutlined, MonitorOutlined } from '@ant-design/icons-vue'
|
import Select from '/@/components/Search/Select.vue'
|
import List from './components/ProjectList.vue'
|
const router = useRouter()
|
const goDetail = () => {
|
console.log(router, '==========')
|
router.push({ name: ERouterName.WORKSPACE })
|
}
|
const params = reactive({
|
status: '',
|
project: '',
|
sort: '',
|
})
|
|
const statusHandleChange = (e: any) => {
|
console.log(e, params, '=============')
|
}
|
const projectHandleChange = (e: any) => {
|
console.log(e, params, '=============')
|
}
|
const sortHandleChange = (e: any) => {
|
console.log(e, params, '=============')
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.project {
|
.side-header {
|
height: 60px;
|
font-size: 16px;
|
line-height: 60px;
|
box-sizing: border-box;
|
background-color: #232323;
|
border-bottom: 1px solid #4f4f4f;
|
|
.side-option {
|
padding: 0 16px;
|
padding-right: 12px;
|
|
.title {
|
color: $text-white-basic;
|
font-size: 18px;
|
margin: 0;
|
}
|
}
|
}
|
|
.side-filter-warp {
|
background-color: #232323;
|
padding: 10px 0;
|
border-bottom: 1px solid #4f4f4f;
|
}
|
|
:deep(.ant-select-borderless .ant-select-selector) {
|
background-color: #232323 !important;
|
color: #fff !important;
|
padding: 0 12px;
|
}
|
:deep(.ant-select-dropdown){
|
background-color: #232323 !important;
|
}
|
:deep(.ant-select-item-option-selected){
|
color: #1180ff !important;
|
background-color: #333333 !important;
|
}
|
:deep(.ant-select-item.ant-select-item-option){
|
color: #fff !important;
|
}
|
:deep(.ant-select-arrow) {
|
color: #fff !important;
|
}
|
}
|
</style>
|
