Update style.css

src/views/Home.vue

@@ -1,18 +1,15 @@
 <template>
     <el-card class="home-div">
         <el-card class="card-div">
-            <el-button :icon="Plus" circle @click="
-                add_project_info.name = '';
-            add_project_info.description = '';
-            add_project_info.enable = true;
-            " />
+            <el-button :icon="Plus" circle size="large" @click="open_project" />
         </el-card>
         <el-card class="card-div" v-for="(item, index) in projects" :key="index">
-            <p>{{ item.name }}</p>
+            <p class="project-title">{{ item.name }}</p>
             <p>{{ item.description }}</p>
-            <el-button type="primary" @click="router.push({ name: 'room', query: { project_name: item.name }})">管理</el-button>
+            <el-button type="primary"
+                @click="router.push({ name: 'room', query: { project_name: item.name } })">管理</el-button>
             <el-button type="success" @click="openUpdateDialog(item)">编辑</el-button>
-            <el-button type="danger"  @click="openRemove(item)">删除</el-button>
+            <el-button type="danger" @click="openRemove(item)">删除</el-button>
         </el-card>
     </el-card>
     <el-dialog v-model="add_project_info.enable" title="新增项目" width="500" center>
@@ -54,7 +51,7 @@
 <script setup>
 import { onMounted, reactive, ref } from "vue";
 import { Plus } from "@element-plus/icons-vue";
-import { ElMessage,ElMessageBox } from "element-plus";
+import { ElMessage, ElMessageBox } from "element-plus";
 import myApi from "@/api/myApi.js";
 import { useRouter } from 'vue-router'
 
@@ -62,6 +59,13 @@ const router = useRouter()
 
 const projects = ref([]);
 
+
+const open_project = () => {
+    add_project_info.name = '';
+    add_project_info.description = '';
+    add_project_info.enable = true;
+
+}
 const get_projects = async () => {
     const param = {
         action: 100,
@@ -143,24 +147,24 @@ const update_project = async () => {
 }
 
 const openRemove = (item) => {
-  ElMessageBox.confirm(
-    '确定删除项目?',
-    '删除项目',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    }
-  )
-    .then(() => {
-        remove_project(item);
-    })
-    .catch(() => {
-      ElMessage({
-        type: 'info',
-        message: '取消删除',
-      })
-    })
+    ElMessageBox.confirm(
+        '确定删除项目?',
+        '删除项目',
+        {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+        }
+    )
+        .then(() => {
+            remove_project(item);
+        })
+        .catch(() => {
+            ElMessage({
+                type: 'info',
+                message: '取消删除',
+            })
+        })
 }
 
 const remove_project = async (project) => {
@@ -210,5 +214,10 @@ onMounted(() => {
         justify-content: center;
     }
 
+    .project-title {
+        font-size: 24px;
+        font-weight: 500;
+    }
+
 }
 </style>

src/views/Room.vue

@@ -6,6 +6,11 @@
                 <el-button type="primary" @click="goHome">项目管理</el-button>
                 <el-button type="success" @click="save_room">项目预览</el-button>
             </div>
+            <div class="ptoject-info">
+                <div class="title">{{ project.name }}</div>
+                <div>{{ project.description }}</div>
+            </div>
+            <el-divider />
             <div>
                 <el-button type="primary" class="add-btn" :icon="Plus" @click="add_room">新建</el-button>
             </div>
@@ -389,6 +394,14 @@ const checkList = reactive([{
                     width: 30%;
                 }
             }
+            .title {
+                line-height: 48px;
+                font-size: 24px;
+                font-weight: 500;
+            }
+            .el-divider{ 
+                background-color:#409eff;
+            }
         }
 
     }