diff --git a/src/views/HomePage/IndexView.vue b/src/views/HomePage/IndexView.vue
index 2901b65..665cce5 100644
--- a/src/views/HomePage/IndexView.vue
+++ b/src/views/HomePage/IndexView.vue
@@ -2,6 +2,7 @@
   <div class="w-[100%] h-auto">
     <div class="flex flex-col">
       <NavBar v-bind="user" />
+<!--      <ProjectCard v-bind="project"/>-->
       <router-view></router-view>
       <More/>
       <Icp/>
@@ -22,6 +23,17 @@ const user = reactive({
   username:'',
   isLoggedIn:false
 })
+//
+// const project = reactive({
+//   name: "梁溪区纪委大数据项目平台",
+//   principalUser: "赵谦孙里",
+//   isFinish: -1,
+//   description: "前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。框架、解决方案，来实现互联网产品的用户界面交互。框架、解决方案，来",
+//   cycle: 60,
+//   workLoad: 120,
+//   id: 1,
+//   tags: ['web','大数据'],
+// })
 
 onMounted(() => {
   initFlowbite();
@@ -62,6 +74,7 @@ import NewProfile from "@/components/HomeComponents/NewProfile.vue";
 import ProjectList from "@/components/HomeComponents/ProjectList.vue";
 import TeamProfile from "@/components/HomeComponents/TeamProfile.vue";
 import ExcellentMember from "@/components/HomeComponents/ExcellentMember.vue";
+import ProjectCard from "@/views/ProjectPage/MainMessage/ProjectCard.vue";
 
 </script>
 
diff --git a/src/views/ProjectPage/MainMessage/ProjectCard.vue b/src/views/ProjectPage/MainMessage/ProjectCard.vue
new file mode 100644
index 0000000..0954d4b
--- /dev/null
+++ b/src/views/ProjectPage/MainMessage/ProjectCard.vue
@@ -0,0 +1,78 @@
+<template>
+  <a-card hoverable style="width: 30vw; margin: 30px;" :loading="false">
+    <template #title>
+      <div style="display: flex; flex-direction: row">
+        <div style="display: flex; flex-direction: row; width: 18vw">
+          <div style="width: 0.5vw; height: 3vh; background-color: #BD3124; border-radius: 10px; margin-right: 0.2vw;margin-top: 0.3vh"/>
+
+          <div style="text-shadow: 2px 2px 6px rgba(189, 49, 36, 0.4);">{{ project.name }}</div>
+        </div>
+        <div style="margin-left: 1.8vw;
+                    font-size: 70%;
+                    font-weight: normal;
+                    text-shadow: 2px 2px 4px #B886F8;
+                    display: flex;
+                    flex-direction: row;
+                    margin-top: 0.8vh;">
+          <div style="width: 0.5vw; height: 2.5vh; background-color: #B886F8; border-radius: 10px; margin-right: 0.2vw;"/>负责人：{{ project.principalUser }}</div>
+      </div>
+    </template>
+    <div style="display: flex; flex-direction: column; height: 10vh; margin-top: 0">
+<!--      description-->
+      <div style="display: flex; flex-direction: row; height: 8vh">
+        <div style="width: 0.8vw; height: 2vh; background-color: rgba(233, 157, 66, 1); border-radius: 10px; margin-right: 0.2vw;"/>
+        <div style="font-size: 60%; text-shadow: 2px 2px 6px rgba(233, 157, 66, 1); color: rgba(154, 154, 154, 1)">{{ project.description }}</div>
+      </div>
+<!--      other message-->
+      <div style="display: flex; flex-direction: row; height: 2vh">
+<!--        status-->
+        <div style="display: flex; flex-direction: row; width: 5vw">
+<!--          <div style="width: 0.5vw;height: 0.8vh; background-color: rgba(204, 247, 131, 1); border-radius: 50%; margin-right: 0.2vw; margin-top: 0.6vh"/>-->
+            <sync-outlined :spin="true" style="color:#87d068;" v-if="project.isFinish===2"/>
+          <div style="font-size: 60%; margin-left: 0.3vw" v-if="project.isFinish===2">进行中</div>
+
+          <check-circle-two-tone two-tone-color="cyan" v-if="project.isFinish===1"/>
+          <div style="font-size: 60%; margin-left: 0.3vw" v-if="project.isFinish===1">已完成</div>
+
+          <PlayCircleOutlined two-tone-color="rgba(154, 154, 154, 1)" v-if="project.isFinish===0"/>
+          <div style="font-size: 60%; margin-left: 0.3vw" v-if="project.isFinish===0">未开始</div>
+
+          <InfoCircleOutlined style="color: red" v-if="project.isFinish===-1"/>
+          <div style="font-size: 60%; margin-left: 0.3vw" v-if="project.isFinish===-1">已暂停</div>
+        </div>
+<!--        works-->
+        <div style="display: flex; flex-direction: row; width: 8.5vw">
+            <smile-two-tone />
+            <div style="font-size: 60%; margin-left: 0.3vw">工作量：{{ project.workLoad }}人/天</div>
+        </div>
+
+        <div style="display: flex; flex-direction: row; width: 8vw">
+          <schedule-two-tone two-tone-color="pink"/>
+          <div style="font-size: 60%; margin-left: 0.3vw">周期：{{ project.cycle }}天</div>
+        </div>
+
+
+      </div>
+
+    </div>
+    <template #actions>
+      <a-tag v-for="(tag, index) in project.tags" :color="color[index]">
+        {{ tag }}
+      </a-tag>
+      <a-button type="text" shape="circle" :icon="h(ArrowRightOutlined)"></a-button>
+    </template>
+  </a-card>
+</template>
+
+<script setup>
+
+import {ArrowRightOutlined, SmileTwoTone, CheckCircleTwoTone, ScheduleTwoTone, SyncOutlined, PlayCircleOutlined, InfoCircleOutlined} from "@ant-design/icons-vue";
+import {h} from "vue";
+
+
+const project = defineProps(["name","id","isFinish","principalUser","description","cycle","workLoad","tags"])
+
+const color = ['pink','red','green','orange','cyan','blue','purple']
+
+
+</script>
\ No newline at end of file