feat: 项目列表

src/styles/_element_plus.scss

@@ -28,4 +28,9 @@
 @import "element-plus/theme-chalk/src/index.scss";
 
 // ===== 下面写覆盖的样式
+.el-input {
+  > .el-input__inner {
+    border-radius: 2px;
+  }
+}
 

src/styles/_main.scss

@@ -19,3 +19,28 @@ html {
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+* {
+  scrollbar-width: thin;
+  scrollbar-track-color: transparent;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  min-width: 50px;
+  min-height: 50px;
+  background-color: #c1c1c1;
+  border-radius: 2px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.46);
+}

src/styles/_variables.scss

@@ -22,6 +22,7 @@ $danger-deep: #d51d1d;
 $info: #232a2d;
 $backdrop: #fbfaf9;
 $text-primary: #535a5d;
+$border-gray: #ddd;
 
 /* 导出变量（css in js） 变量名为cssVars */
 :export {

src/views/main/project-list/ProjectList.vue

@@ -4,59 +4,154 @@ const searchKey = ref("");
 const projectType = ref("");
 const projectTypeOptions = reactive([
   {
-    label:'房建',
-    value: 'house'
+    label: "房建",
+    value: "house",
   },
   {
-    label:'市政',
-    value: 'city'
-  }
-])
+    label: "市政",
+    value: "city",
+  },
+]);
+
+const projectList = reactive([
+  {
+    name: "市妇幼保健医院新址配套市政道路工程",
+    process: "预算",
+    step: "(2) 收件员预审项目",
+    submit: "0.00",
+    increase: "0.00",
+    decrease: "0.00",
+    offset: "0.00",
+  },
+  {
+    name: "梧桐路（石花西路）电力改迁工程",
+    process: "结算",
+    step: "(1) 建设单位报审项目",
+    submit: "0.00",
+    increase: "0.00",
+    decrease: "0.00",
+    offset: "0.00",
+  },
+  {
+    name: "珠海城市职业技术学院机电学院、航空与海洋工程珠海城市职业技术学院机电学院、航空与海洋工程",
+    process: "预算",
+    step: "(1) 建设单位报审项目",
+    submit: "0.00",
+    increase: "0.00",
+    decrease: "0.00",
+    offset: "0.00",
+  },
+  {
+    name: "珠海城市职业技术学院机电学院、航空与海洋工程",
+    process: "预算",
+    step: "(5) 主审人编制审核方案",
+    submit: "0.00",
+    increase: "0.00",
+    decrease: "0.00",
+    offset: "0.00",
+  },
+]);
 </script>
 
 <template>
   <article class="project-list-page">
     <header class="header">投资项目</header>
 
-    <section class="filter-bar">
-      <el-input class="search-input" v-model="searchKey" placeholder="搜索项目">
-        <template #prefix>
-          <iconfont class="dsk-search" />
-        </template>
-      </el-input>
-      <el-select v-model="projectType" placeholder="工程类型">
-        <el-option
-          v-for="item in projectTypeOptions"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        >
-        </el-option>
-      </el-select>
-      <el-select v-model="process" placeholder="项目流程">
-        <el-option
-          v-for="item in processOptions"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        >
-        </el-option>
-      </el-select>
-      <el-select v-model="checkStep" placeholder="审核步骤">
-        <el-option
-          v-for="item in checkStepOptions"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        >
-        </el-option>
-      </el-select>
-    </section>
+    <!-- 过滤栏 -->
+    <ul class="filter-bar">
+      <li class="item search">
+        <el-input v-model="searchKey" placeholder="搜索项目">
+          <template #prefix>
+            <iconfont class="dsk-search" />
+          </template>
+        </el-input>
+      </li>
+      <li class="item">
+        <el-select v-model="projectType" placeholder="工程类型">
+          <el-option
+            v-for="item in projectTypeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </li>
+      <li class="item">
+        <el-select v-model="process" placeholder="项目流程">
+          <el-option
+            v-for="item in processOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </li>
+      <li class="item check-step">
+        <el-select v-model="checkStep" placeholder="审核步骤">
+          <el-option
+            v-for="item in checkStepOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </li>
+
+      <li class="item time-order">
+        <el-select v-model="timeOrder" placeholder="按流程时间排序">
+          <el-option
+            v-for="item in timeOrderOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </li>
+      <li class="item setting">
+        <iconfont class="dsk-config" />
+      </li>
+    </ul>
 
-    <el-table :data="tableData">
-      <el-table-column prop="date" label="Date" width="180" />
-      <el-table-column prop="name" label="Name" width="180" />
-      <el-table-column prop="address" label="Address" />
+    <!-- 列表 -->
+    <el-table :data="projectList">
+      <el-table-column prop="name" label="项目名称" :min-width="310">
+        <template #default="scope">
+          <span>{{ scope.row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="process" label="项目流程" :min-width="85" />
+      <el-table-column prop="step" label="当前步骤" :min-width="160" />
+      <el-table-column
+        prop="submit"
+        label="送审金额(元)"
+        align="center"
+        :min-width="128"
+      />
+      <el-table-column
+        prop="increase"
+        label="审增金额(元)"
+        align="center"
+        :min-width="128"
+      />
+      <el-table-column
+        prop="decrease"
+        label="审减金额(元)"
+        align="center"
+        :min-width="128"
+      />
+      <el-table-column
+        prop="offset"
+        label="品迭金额(元)"
+        align="center"
+        :min-width="128"
+      />
+      <template #empty>
+        <el-empty :image-size="120" description="暂无项目" />
+      </template>
     </el-table>
   </article>
 </template>

src/views/main/project-list/style.scss

@@ -4,22 +4,108 @@
         height: 50px;
         font-size: 20px;
         padding-left: 10px;
-        border-bottom: 1px solid #e3e3e3;
+        border: 1px solid $border-gray;
+        margin-top: 5px;
+        background-color: #fff;
     }
 
     .filter-bar {
         @apply flex items-center;
         height: 50px;
-        padding: 0 10px;
-        border-bottom: 1px solid #e3e3e3;
-        .search-input {
-            width: 150px;
-        }
-        .el-select {
-            width: 100px;
+        padding: 0 11px;
+        border: 1px solid $border-gray;
+        border-bottom: none;
+        margin-top: 5px;
+        background-color: #fff;
+
+        .item {
+            width: 102px;
+            margin-left: 10px;
+
+            &.search {
+                width: 150px;
+            }
+            &.check-step {
+                flex: 1;
+                .el-select {
+                    width: 102px;
+                }
+            }
+            &:first-child,
+            &.time-order {
+                margin-left: 0;
+                width: 140px;
+            }
+            &.setting {
+                @apply text-center cursor-pointer;
+                width: 28px;
+                .iconfont {
+                    font-size: 18px;
+                }
+            }
+
+            ::v-deep .el-input__inner {
+                &::-ms-input-placeholder {
+                    color: #535a5d;
+                }
+
+                &::-moz-placeholder {
+                    color: #535a5d;
+                }
+
+                &::-webkit-input-placeholder {
+                    color: #535a5d;
+                }
+            }
         }
     }
 
-    .el-table {
+    ::v-deep .el-table {
+        width: 100%;
+        background-color: #fff;
+        border: 1px solid $border-gray;
+
+        &::before {
+            display: none;
+        }
+
+        .el-table__header-wrapper {
+            .el-table__header {
+                height: 48px;
+
+                th {
+                    .cell {
+                        font-weight: 600;
+                        color: #535a5d;
+                        padding: 0 17px;
+                    }
+                }
+            }
+        }
+
+        .el-table__body-wrapper {
+            &::-webkit-scrollbar {
+                width: 3px;
+            }
+
+            td {
+                padding: 0;
+                border-bottom: 1px solid #f4f4f4 !important;
+
+                .cell {
+                    line-height: 13px;
+                    color: #535a5d;
+                    padding: 18px 17px 16px;
+                    font-size: 13px;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+            }
+        }
+
+        .el-empty {
+            @apply select-none;
+        }
     }
 }

src/views/main/style.scss

@@ -1,9 +1,14 @@
 .main-page {
     @apply flex w-full h-full;
+    min-width: $small-screen;
+    background: $backdrop;
+
     .aside {
         @apply flex flex-col items-center;
         width: 49px;
-        border-right: 1px solid #e6e6e6;
+        border-right: 1px solid $border-gray;
+        background-color: #fff;
+
         .logo {
             width: 49px;
             height: 49px;
@@ -38,6 +43,7 @@
     }
 
     .main {
-        flex: 1;
+        width: calc(100% - 59px);
+        margin: 0 5px;
     }
 }