diff --git a/front/src/views/system/main.vue b/front/src/views/system/main.vue
new file mode 100644
index 0000000..978dfe1
--- /dev/null
+++ b/front/src/views/system/main.vue
@@ -0,0 +1,115 @@
+<template>
+    <b-container>
+         <div class="comp-info">
+            <div class="comp-thumbnail">
+                <b-img fluid :src="competition.thumbnail" />
+            </div>
+            <div class="">
+                <div class="comp-info-title">
+                    <span class="comp-type">{{  competition&&competition.type == 1?'团队赛':'个人赛' }}</span>
+                    <span class="comp-title">{{ competition.name }}--{{ currentStage.name }}--证券投资赛项</span>
+                </div>
+                <hr />
+                <div class="comp-info-title">
+                    <div class="comp-info-content">
+                            <div>
+                                <b-img src="/static/image/system_cmp_icon1.png"/>
+                                    <div>开始时间: {{ new Date(currentStage.startTime).Format('yyyy-MM-dd')}}</div>
+                            </div>
+                            <div>
+                                <b-img src="/static/image/system_cmp_icon2.png"/>
+                                    <div>结束时间: {{ new Date(currentStage.endTime).Format('yyyy-MM-dd')}}</div>
+                            </div>
+                            <div>
+                                <b-img src="/static/image/system_cmp_icon3.png"/>
+                                    <div>初始资金: 1，000，000元</div>
+                            </div>
+                    </div>
+                    <div class="comp-info-content">
+                            <div>
+                                <b-img src="/static/image/system_cmp_icon4.png"/>
+                                    <div>交易品种: 股票基金</div>
+                            </div>
+                            <div>
+                                <b-img src="/static/image/system_cmp_icon5.png"/>
+                                    <div>参赛人数: {{competition.peopleCount}}人</div>
+                            </div>
+                            <div>
+                                <b-img src="/static/image/system_cmp_icon6.png"/>
+                                    <div>行情类型: 实时</div>
+                            </div>
+                    </div>
+                </div>
+            </div>
+            </div>
+            <div class="tz-tab">
+                <div>
+                    <b-img @click="sim" src="/static/image/trade_sim.png" />
+                    <b-img @click=" tabId = 2" src="/static/image/ranking_tab.png" />
+                    <b-img @click="jixiao" src="/static/image/jixiaofenxi.png" />
+                    <b-img  @click=" tabId = 4" src="/static/image/xingweihuaxiang.png" />
+                </div>
+            </div>
+            <div class="tz-ranking">
+                <div class="tz-ranking-header">
+                    <div>
+                        <b-img src="/static/image/system_icon10.png" />
+                        证券投资赛项个人排名趋势
+                    </div>
+                    <div>
+                        创建日期2021-10-10
+                    </div>
+                </div>
+
+                <div id="main"  style="width:100%; height:100%">
+                </div>
+            </div>
+    </b-container>
+</template>
+<script>
+export default {
+    
+}
+</script>
+<style scoped>
+.comp-info{
+    width: 100%;
+    background-color: #0264d2;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: .5rem;
+    padding-bottom: .5rem;
+}
+.comp-info-title{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+}
+.comp-info-content{
+    display: flex;
+    width: 100%;
+}
+.comp-info-content>div{
+    width: 33%;
+    display: flex;
+    margin-top: 1rem;
+}
+.comp-info-content>div>img{
+    margin-right: .3rem;
+}
+.tz-bold{
+    font-weight: bold;
+}
+.member-info{
+    width: 48%;
+    text-align: right;
+    display: flex;
+    justify-content: end;
+}
+.member-info div{
+    margin-right: 1rem;
+    vertical-align: middle;
+}
+</style>
\ No newline at end of file