diff --git a/src/assets/images/Rectangle284.png b/src/assets/images/Rectangle284.png
new file mode 100644
index 0000000..c39df86
Binary files /dev/null and b/src/assets/images/Rectangle284.png differ
diff --git a/src/assets/images/Rectangle284@2x.png b/src/assets/images/Rectangle284@2x.png
new file mode 100644
index 0000000..cd9c95c
Binary files /dev/null and b/src/assets/images/Rectangle284@2x.png differ
diff --git a/src/assets/images/orange.png b/src/assets/images/orange.png
new file mode 100644
index 0000000..7a27905
Binary files /dev/null and b/src/assets/images/orange.png differ
diff --git a/src/assets/images/orange@2x.png b/src/assets/images/orange@2x.png
new file mode 100644
index 0000000..abb4378
Binary files /dev/null and b/src/assets/images/orange@2x.png differ
diff --git a/src/assets/images/purple.png b/src/assets/images/purple.png
new file mode 100644
index 0000000..6c7e3b8
Binary files /dev/null and b/src/assets/images/purple.png differ
diff --git a/src/assets/images/purple@2x.png b/src/assets/images/purple@2x.png
new file mode 100644
index 0000000..b15348c
Binary files /dev/null and b/src/assets/images/purple@2x.png differ
diff --git a/src/assets/images/yellow.png b/src/assets/images/yellow.png
new file mode 100644
index 0000000..29aa796
Binary files /dev/null and b/src/assets/images/yellow.png differ
diff --git a/src/assets/images/yellow@2x.png b/src/assets/images/yellow@2x.png
new file mode 100644
index 0000000..32322fc
Binary files /dev/null and b/src/assets/images/yellow@2x.png differ
diff --git a/src/assets/images/编组.png b/src/assets/images/编组.png
new file mode 100644
index 0000000..64402cf
Binary files /dev/null and b/src/assets/images/编组.png differ
diff --git a/src/assets/images/编组@2x.png b/src/assets/images/编组@2x.png
new file mode 100644
index 0000000..133f739
Binary files /dev/null and b/src/assets/images/编组@2x.png differ
diff --git a/src/router/module/constRouter/index.ts b/src/router/module/constRouter/index.ts
index 00bc533..149e360 100644
--- a/src/router/module/constRouter/index.ts
+++ b/src/router/module/constRouter/index.ts
@@ -50,6 +50,16 @@ export const constRouter: any =
           hidden: false,
         },
       },
+      {
+        path: '/competition',
+        name: 'Competition',
+        component: () => import('@/views/competition/index.vue'),
+        meta: {
+          icon: '',
+          title: '年度赛事',
+          hidden: false,
+        },
+      },
     ],
   }
 
diff --git a/src/views/competition/index.vue b/src/views/competition/index.vue
new file mode 100644
index 0000000..1d45d55
--- /dev/null
+++ b/src/views/competition/index.vue
@@ -0,0 +1,325 @@
+<!-- 年度赛事 -->
+<template>
+    <div class="fill"></div>
+    <div class="banner">
+        <img src="../../assets/images/banner2.png" alt="">
+    </div>
+    <div class="competition">
+        <!-- 简介 -->
+        <div class="synopsis">
+            <div class="name">年度比赛名称</div>
+            <div class="content">
+                比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介
+                比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介
+                比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介
+                比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介
+                比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介
+                比赛简介比赛简介比赛简介比赛简介比赛简介</div>
+            <div class="date">报名时间：2023.08.23-2023.09.23</div>
+        </div>
+
+        <!-- 选择项目 -->
+        <div class="select">
+            <div class="left">
+                <div class="text-box">
+                    <div class="title">选择项目</div>
+                    <div class="small">300+竞赛登陆后请报名</div>
+                </div>
+
+                <div class="card-list">
+                    <template v-for="i in 16" :key="i">
+                        <div v-if="(i + 4) % 4 == 1" class="card" type="yellow">
+                            <div class="top">红色之旅赛道</div>
+                            <div class="bottom">
+                                <el-button class="btn">立即报名</el-button>
+                                <el-link :underline="false" class="link">详情</el-link>
+                            </div>
+                        </div>
+                        <div v-if="(i + 4) % 4 == 2" class="card" type="purple">
+                            <div class="top">红色之旅赛道</div>
+                            <div class="bottom">
+                                <el-button class="btn">立即报名</el-button>
+                                <el-link :underline="false" class="link">详情</el-link>
+                            </div>
+                        </div>
+                        <div v-if="(i + 4) % 4 == 3" class="card" type="cyan00">
+                            <div class="top">红色之旅赛道</div>
+                            <div class="bottom">
+                                <el-button class="btn">立即报名</el-button>
+                                <el-link :underline="false" class="link">详情</el-link>
+                            </div>
+                        </div>
+                        <div v-if="(i + 4) % 4 == 0" class="card" type="orange">
+                            <div class="top">红色之旅赛道</div>
+                            <div class="bottom">
+                                <el-button class="btn">立即报名</el-button>
+                                <el-link :underline="false" class="link">详情</el-link>
+                            </div>
+                        </div>
+                    </template>
+                </div>
+            </div>
+            <div class="right">
+                <div class="text-box">
+                    <div class="title">历史比赛</div>
+                    <div class="small">往年历史赛事</div>
+                </div>
+
+                <div class="game-list">
+                    <div class="card-game" v-for="i in 5" :key="i">
+                        <div class="pos">
+                            前往查看
+                        </div>
+                        <div class="top">
+                            2023年度
+                        </div>
+                        <div class="center">
+                            <div class="text">河南省大学生创新创业大赛</div>
+                            <img src="../../assets/images/编组.png" alt="">
+                        </div>
+                        <div class="bottom">
+                            报名时间：2023.08.23-2023.09.23
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+.fill {
+    padding-top: 80px;
+}
+
+.banner {
+    width: 100%;
+    height: 367px;
+    border-radius: 0px 0px 0px 0px;
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+
+.competition {
+    margin: 0 auto;
+    width: $base-container-width;
+
+    .synopsis {
+        .name {
+            height: 59px;
+            line-height: 59px;
+            font-family: Open Sans, Open Sans;
+            font-weight: bold;
+            font-size: 42px;
+            color: #333333;
+        }
+
+        .content {
+            margin-top: 40px;
+            font-family: Open Sans, Open Sans;
+            font-weight: 400;
+            font-size: 20px;
+            color: #555555;
+            line-height: 23px;
+        }
+
+        .date {
+            margin-top: 30px;
+            height: 23px;
+            line-height: 23px;
+            font-family: Open Sans, Open Sans;
+            font-weight: 400;
+            font-size: 20px;
+            color: #858585;
+        }
+    }
+
+    .select {
+        margin-top: 125px;
+        margin-bottom: 500px;
+        display: flex;
+        justify-content: space-between;
+
+        .left {
+            width: 1100px;
+
+            .card-list {
+                display: flex;
+                flex-wrap: wrap;
+                column-gap: 20px;
+                row-gap: 40px;
+
+                .card {
+                    width: 260px;
+                    height: 160px;
+                    padding: 40px 0 0 30px;
+
+                    &[type="yellow"] {
+                        background: url(../../assets/images/yellow.png) no-repeat;
+                        background-size: cover;
+                        --color: #FFC300;
+                        --bg-color1: #FFCB9A;
+                        --bg-color2: #FFC300;
+                    }
+
+                    &[type="purple"] {
+                        background: url(../../assets/images/purple.png) no-repeat;
+                        background-size: cover;
+                        --color: #3F8BFF;
+                        --bg-color1: #90BBFC;
+                        --bg-color2: #C4CDFF;
+                    }
+
+                    &[type="cyan00"] {
+                        background: url(../../assets/images/item.png) no-repeat;
+                        background-size: cover;
+                        --color: #76DAE5;
+                        --bg-color1: #74D9E4;
+                        --bg-color2: #74E4BC;
+                    }
+
+                    &[type="orange"] {
+                        background: url(../../assets/images/orange.png) no-repeat;
+                        background-size: cover;
+                        --color: #FF907B;
+                        --bg-color1: #FCA190;
+                        --bg-color2: #FCD190;
+                    }
+
+                    .top {
+                        margin-bottom: 30px;
+                        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                        font-weight: bold;
+                        font-size: 24px;
+                    }
+
+                    .bottom {
+                        display: flex;
+                        gap: 50px;
+
+                        .top,
+                        .link {
+                            color: var(--color);
+                        }
+
+                        .btn {
+                            font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                            font-weight: bold;
+                            font-size: 14px;
+                            width: 120px;
+                            height: 30px;
+                            border-radius: 15px;
+                            color: #fff;
+                            border: none;
+                            background: linear-gradient(to right, var(--bg-color1), var(--bg-color2));
+                        }
+                    }
+                }
+            }
+        }
+
+        .right {
+            width: 260px;
+
+            .game-list {
+                .card-game {
+                    width: 260px;
+                    height: 140px;
+                    background: linear-gradient(90deg, #21ACA5 0%, #42D9AC 100%);
+                    border-radius: 4px 4px 4px 4px;
+                    margin-bottom: 18px;
+                    background: url(../../assets/images/Rectangle284.png) no-repeat;
+                    background-position: top right;
+                    padding: 20px 22px;
+                    position: relative;
+
+                    .pos {
+                        position: absolute;
+                        top: 0;
+                        right: 0;
+                        width: 115px;
+                        height: 28px;
+                        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                        font-weight: 400;
+                        font-size: 12px;
+                        color: #F6F5FB;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        cursor: pointer;
+                    }
+
+                    .top {
+                        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                        font-weight: 400;
+                        font-size: 12px;
+                        color: rgba(51, 51, 51, 0.8);
+                        line-height: 14px;
+                    }
+
+                    .center {
+                        margin: 10px 0;
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+
+                        .text {
+                            width: 140px;
+                            height: 40px;
+                            font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                            font-weight: bold;
+                            font-size: 16px;
+                            color: #333333;
+                            line-height: 20px;
+                        }
+                    }
+
+                    .bottom {
+                        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                        font-weight: 400;
+                        font-size: 12px;
+                        color: rgba(51, 51, 51, 0.8);
+                    }
+
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                }
+            }
+        }
+
+        .left,
+        .right {
+            .text-box {
+                margin-bottom: 46px;
+
+                .title {
+                    height: 42px;
+                    line-height: 42px;
+                    font-family: Inter, Inter;
+                    font-weight: bold;
+                    font-size: 40px;
+                    color: #1E2033;
+                }
+
+                .small {
+                    margin-top: 5px;
+                    height: 24px;
+                    line-height: 24px;
+                    font-family: Inter, Inter;
+                    font-weight: 400;
+                    font-size: 16px;
+                    color: #828282;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file