diff --git a/src/components/challenges/challenges.vue b/src/components/challenges/challenges.vue
index 43472d3..26b9c0e 100644
--- a/src/components/challenges/challenges.vue
+++ b/src/components/challenges/challenges.vue
@@ -32,8 +32,21 @@
         </el-aside>
       </el-container>
     </div>
-
+    <el-scrollbar height="490px">
     <div class="all-card">
+      <el-button v-for="(c,index) in data" class="buttons" @click="bcard(index)">
+        <div class="card">
+        <div class="card-name">
+          {{c.name}}
+        </div>
+        <br>
+        <div class="card-score">
+          score:{{c.score}} |
+          solve:{{c.solver_count}}
+        </div>
+        </div>
+      </el-button>
+
 <!--      <div v-for="(c,index) in data" class="card" @click="clickcard(index)" ref="card" :key="index" >-->
 <!--        <div class="card-name">-->
 <!--          {{c.name}}-->
@@ -45,8 +58,46 @@
 <!--      </div>-->
 
     </div>
+    </el-scrollbar>
+    <div v-if="challenges!=undefined && challenges.length==0" class="cha-card"></div>
+    <div v-else class="cha-card">
+    <el-card class="box-card" >
+      <div class="up-title">
+        <div class="challenges-name" >
+          {{challenges.name}}
+        </div>
+        <el-tag v-for="tag in tags" class="tag">
+          {{tag}}
+        </el-tag>
+      </div>
+      <div class="middle">
+        <div class="challenges-solve">
+          score:{{challenges.score}} |
+          solve:{{challenges.solver_count}}
+        </div>
+        <div class="description"><!-- 题目描述-->
+          {{challenges.description}}
+        </div>
+        <div class="attchment">
+        </div>
+<!--        <el-popover-->
+<!--            placement="top-start"-->
+<!--            title="Title"-->
+<!--            :width="200"-->
+<!--            trigger="hover"-->
+<!--            content="this is content, this is content, this is content"-->
+<!--        >-->
+<!--          <template #reference>-->
+<!--            <el-button>Hover to activate</el-button>-->
+<!--          </template>-->
+<!--        </el-popover>-->
+      </div>
+
+    </el-card>
+    </div>
   </div>
 
+
 </template>
 
 <script>
@@ -63,20 +114,28 @@ export default {
     return {
       challengetype: '',
       data:[],
+      challenges:[],
+      tags:[]
     }
   },
+
   methods: {
-    clickcard(index){
-      console.log(this.$refs.card[index].style.backgroundColor="#fff");
+    bcard(index){
+
+      this.challenges = this.data[index]
+      this.tags = this.data[index].tags.split(',')
     },
+
+
     handleSelect(index) {
       this.challengetype = index;
       axios.get("/api/v1/user/challenges/" + index).then(res => {
         if (res.data.code === 200) {
-          console.log(res.data)
+
           this.data = res.data.data;
         }
       })
+      this.challenges=[];
     },
   }
 }
@@ -85,21 +144,88 @@ export default {
 </script>
 
 <style lang="less">
+
 .challenges-all{
   display: flex;
-  .all-card{
-    width: 10%;
-    .card{
+  margin-top: 3px;
+  .cha-card{
+    width: 700px;
+  }
+  .box-card{
+    margin-top: 10px;
+    width: 700px;
+    .up-title{
+      display: flex;
+      .challenges-name{
+        font-size: 25px;
+        font-weight: normal;
+      }
+      .tag{
+        margin-top: 4px;
+        margin-right: 5px;
+      }
+    }
+    .middle{
       display: inline-block;
-      width: 100%;
-      height: 50px;
-      background-color: #ff7f00;
-      border-radius: 10px;
-      box-shadow: #9e4f00 0px 0px 10px;
+
+      .challenges-solve{
+        font-size: 15px;
+        font-weight: normal;
+      }
+      .description{
+        width: auto;
+        height: 250px;
+        font-size: 15px;
+        font-weight: normal;
+        margin-top: 10px;
+      }
+    }
+  }
+  .all-card{
+    width: auto;
+    height: 500px;
+
+    align-items: center;
+    justify-content: center;
+    margin: 10px;
+    text-align: center;
+    border-radius: 4px;
+    .buttons{
+      display: flex;
+      width: 250px;
+      height: 100px;
       margin-left: 10px;
       margin-bottom: 30px;
       margin-right:10px ;
     }
+
+    .card{
+
+      width: 240px;
+      height: 100px;
+      //background-color: #ff7f00;
+      margin-top: 15px;
+      .card-name{
+        font-size:30px;
+        margin-bottom: 20px;
+        margin-right: 30px;
+
+        text-align:left;
+        width: 250px;
+        white-space: nowrap; /*保留文字间的空白*/
+        overflow: hidden;  /*超出部分隐藏，*/
+        text-overflow: ellipsis; /*超出部分显示成... */
+
+
+
+      }
+      .card-score{
+        float: left;
+
+
+
+      }
+    }
   }
 
 }