From b80ee8c883f279e843071e6b53ab9cddec3f88a0 Mon Sep 17 00:00:00 2001
From: 胡思旗 <931347610@qq.com>
Date: Tue, 29 Aug 2023 15:07:13 +0800
Subject: [PATCH] 登录流程对接、项目列表组件封装
---
src/pages/page-web/projects/project_list/list_page.vue/list.vue | 90 ++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 85 insertions(+), 5 deletions(-)
diff --git a/src/pages/page-web/projects/project_list/list_page.vue/list.vue b/src/pages/page-web/projects/project_list/list_page.vue/list.vue
index c892e41..cd54364 100644
--- a/src/pages/page-web/projects/project_list/list_page.vue/list.vue
+++ b/src/pages/page-web/projects/project_list/list_page.vue/list.vue
@@ -1,18 +1,98 @@
<template>
- <div>
- 我是列表页面
- <button @click="goDetail">列表详情</button>
+ <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 { useRouter } from 'vue-router'
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> </style>
+<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>
--
Gitblit v1.9.3