修改文件

src/styles/view/project/list.scss

@@ -0,0 +1,63 @@
+.hc-card-main.hc-project-list {
+    text-align: center;
+    .hc-project-list-row {
+        position: relative;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(410px, 1fr));
+        gap: 10px;
+        .hc-card-item-box.hc-project-list-card {
+            width: 100%;
+            height: 142px;
+            border-radius: 4px;
+            cursor: pointer;
+            background: #f3f3f3 !important;
+            transition: all 0.3s;
+            .card-content {
+                position: relative;
+                .name-avatar {
+                    background: white;
+                    border-radius: 5px;
+                    margin-right: 14px;
+                    font-size: 24px;
+                    color: #9ed2e3;
+                }
+                .name-content {
+                    position: relative;
+                    .alias {
+                        font-size: 16px;
+                        white-space:nowrap;
+                        overflow:hidden;
+                        text-overflow:ellipsis;
+                        text-align: left;
+                    }
+                    .name {
+                        text-align: left;
+                        font-size: 14px;
+                        color: #747474;
+                        margin-top: 10px;
+                        overflow: hidden;
+                        text-overflow: ellipsis;  /* 超出部分省略号 */
+                        word-break: break-all;  /* 设置省略字母数字 */
+                        display: -webkit-box;
+                        -webkit-box-orient: vertical;
+                        -webkit-line-clamp: 2; /* 显示的行数 */
+                    }
+                }
+            }
+            .footer {
+                position: absolute;
+                color: #747474;
+                display: flex;
+                align-items: center;
+                font-size: 14px;
+                justify-content: space-between;
+                bottom: 0;
+                width: 100%;
+            }
+            &:hover {
+                box-shadow: 2px 2px var(--el-color-primary-light-7);
+            }
+        }
+    }
+}
+

src/views/project/list.vue

@@ -10,14 +10,23 @@
         <template #extra>
             <el-button hc-btn type="primary" @click="addProjectClick">创建项目</el-button>
         </template>
-        <hc-card-item v-for="item in tableData" :key="item.id" class="hc-project-list-card" @click="projectClick(item.id)">
-            <div class="alias">{{ item.projectAlias }}</div>
-            <div class="name">{{ item.projectName }}</div>
-            <div class="footer">
-                <div class="id">{{ item.id }}</div>
-                <div class="time">{{ item.updateTime }}</div>
-            </div>
-        </hc-card-item>
+        <div class="hc-project-list-row">
+            <template v-for="item in tableData" :key="item.id">
+                <hc-card-item class="hc-project-list-card" @click="projectClick(item.id)">
+                    <div class="card-content hc-flex">
+                        <div class="name-avatar hc-flex-center h-60px w-60px">{{ item.projectAlias.substring(0, 1) }}</div>
+                        <div class="name-content flex-1">
+                            <div class="alias">{{ item.projectAlias }}</div>
+                            <div class="name">{{ item.projectName }}</div>
+                        </div>
+                    </div>
+                    <div class="footer">
+                        <div class="id">{{ item.id }}</div>
+                        <div class="time">{{ item.updateTime }}</div>
+                    </div>
+                </hc-card-item>
+            </template>
+        </div>
         <template #action>
             <hc-pages :pages="searchForm" @change="pageChange" />
         </template>
@@ -90,18 +99,13 @@ const tableLoading = ref(true)
 const getTableData = async () => {
     tableData.value = []
     tableLoading.value = true
-    const { error, code, data } = await mainApi.page({
+    const { data } = await mainApi.page({
         ...searchForm.value,
         total: null,
     })
     tableLoading.value = false
-    if (!error && code === 200) {
-        tableData.value = getArrValue(data['records'])
-        searchForm.value.total = data['total']
-    } else {
-        tableData.value = []
-        searchForm.value.total = 0
-    }
+    tableData.value = getArrValue(data?.records)
+    searchForm.value.total = data?.total
 }
 
 //查看项目信息
@@ -174,50 +178,5 @@ const addProjectClick = () => {
 </script>
 
 <style lang="scss">
-.hc-card-item-box.hc-project-list-card {
-    width: 354px;
-    height: 120px;
-    display: inline-block;
-    border-radius: 4px;
-    margin-right: 14px;
-    margin-bottom: 14px;
-    cursor: pointer;
-    background: #f3f3f3 !important;
-    transition: all 0.3s;
-    .alias {
-        font-size: 16px;
-        white-space:nowrap;
-        overflow:hidden;
-        text-overflow:ellipsis;
-        text-align: left;
-    }
-    .name {
-        text-align: left;
-        font-size: 14px;
-        color: #747474;
-        margin-top: 10px;
-        overflow: hidden;
-        text-overflow: ellipsis;  /* 超出部分省略号 */
-        word-break: break-all;  /* 设置省略字母数字 */
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2; /* 显示的行数 */
-    }
-    .footer {
-        position: absolute;
-        color: #747474;
-        display: flex;
-        align-items: center;
-        font-size: 14px;
-        justify-content: space-between;
-        bottom: 0;
-        width: 100%;
-    }
-    &:hover {
-        box-shadow: 2px 2px var(--el-color-primary-light-7);
-    }
-}
-.hc-card-main.hc-project-list {
-    text-align: center;
-}
+@import '~src/styles/view/project/list';
 </style>