card container

 <template>
 <template>
   <div id="app">
   <div id="app">
-    <img src="./assets/logo.png">
     <router-view/>
     <router-view/>
   </div>
   </div>
 </template>
 </template>

 <template>
 <template>
- <div>
-    <h1>{{ $route.params.userId }}</h1>
+ <div class="detail">
+    <div class="header">
       <h1>{{ userId }}</h1>
       <h1>{{ userId }}</h1>
-    <h1>{{ userPk }}</h1>
-    <span></span>
-    <ul>
-      <li v-for="avg in average">
-        <h1>id : {{ avg.id }}</h1>
-        <h1>winrate : {{ avg.winrate }}</h1>
-      </li>
-    </ul>
+    </div>
+    <div class="body">
+      <div class="assist">
+        <b-button>Pick Assistant</b-button>
+      </div>
+      <div class="team">
+        <div class="team_best">
+          <h1>tb {{ inference_team[0]['id'] }}</h1>
+        </div>
+        <div class="team_worst">
+          <h1>tw {{ inference_team[inference_team.length -1]['id'] }}</h1>
+        </div>
+      </div>
+
+      <b-container fluid class="wrap">
+        <b-row class="items flex-row flex-nowrap">
+          <template v-for="team in inference_team">
+            <b-card class="card">
+              <b-card-text>{{ team['id'] }}</b-card-text>
+              <b-card-text>{{ team['coefficient'] }}</b-card-text>
+            </b-card>
+          </template>
+        </b-row>
+      </b-container>
+
+      <div class="wrap">
+        <div class="items">
+          <h1>1234123412348123840182304981-23841-2034812-384123479012374917340917394073907409172394071092374901723940172394710923749012734091723407102374</h1>
+        </div>
+      </div>
+
+      <div class="enemy">
+        <div class="enemy_best">
+          <h1>eb {{ inference_enemy[0]["id"] }}</h1>
+        </div>
+        <div class="enemy_worst">
+          <h1>ew {{ inference_enemy[inference_enemy.length -1]["id"] }}</h1>
+        </div>
+      </div>
+      <div class="myPick">
+      </div>
+    </div>
   </div>
   </div>
 </template>
 </template>
 
 
@@ -18,9 +52,12 @@ export default {
   name: 'DetailPage',
   name: 'DetailPage',
   data () {
   data () {
     return {
     return {
-      userId: this.$route.params.userId,
+      userId: null,
       userPk: null,
       userPk: null,
-      average: [],
+      inference_team: [],
+      inference_enemy: [],
+      inference_secondary: [],
+      myPick: [],
     }
     }
   },
   },
   created () {
   created () {
@@ -28,19 +65,48 @@ export default {
     //this.axios.post('http://127.0.0.1:8000/GameData/search/', {'game_id': "laurelwoods"}, {
     //this.axios.post('http://127.0.0.1:8000/GameData/search/', {'game_id': "laurelwoods"}, {
     //  headers: { 'Content-Type': 'application/json'}
     //  headers: { 'Content-Type': 'application/json'}
     //})
     //})
-    this.axios.get('http://127.0.0.1:8000/GameData/search/', {
-      params: { game_id: 'laurelwoods' }
-    })
+    this.axios.get('http://127.0.0.1:8000/GameData/search/', { params: { game_id: 'laurelwoods' }})
     .then((response) => {
     .then((response) => {
       this.userPk = response.data.id;
       this.userPk = response.data.id;
-      this.axios.get('http://127.0.0.1:8000/GameData/' + this.userPk + '/average/')
+      this.userId = response.data.game_id;
+      // inference : team
+      this.axios.get('http://127.0.0.1:8000/GameData/' + this.userPk + '/inference/', { params: { model_type: 'team'}})
+      .then((response) => { this.inference_team = response.data; })
+
+      // inference : enemy
+      this.axios.get('http://127.0.0.1:8000/GameData/' + this.userPk + '/inference/', { params: { model_type: 'enemy'}})
+      .then((response) => { this.inference_enemy = response.data; })
+
+      // inference : secondary
+      this.axios.get('http://127.0.0.1:8000/GameData/' + this.userPk + '/inference/', { params: { model_type: 'secondary'}})
       .then((response) => {
       .then((response) => {
-        this.average = response.data;
+        this.inference_secondary = response.data; })
+      
+      // average : myPick
+      this.axios.get('http://127.0.0.1:8000/GameData/' + this.userPk + '/average/')
+      .then((response) => { this.myPick = response.data; })
     })
     })
+    .catch((error) => { 
+      console.log(error.response)
     })
     })
+
   }
   }
 }
 }
 </script>
 </script>
 
 
 <style scoped>
 <style scoped>
+.warp {
+  display: flex;
+  flex-direction: column;
+  height: 500px;
+}
+.items {
+  display: flex;
+  flex: 1;
+  overflow: auto;
+}
+.card {
+  min-height: 300px;
+  min-width: 300px;
+}
 </style>
 </style>
\ No newline at end of file

 <template>
 <template>
   <div class="front">
   <div class="front">
     <div class="title">
     <div class="title">
-      <h1>League of Legends</h1>
       <h1>Winrate Prediction</h1>
       <h1>Winrate Prediction</h1>
     </div>
     </div>
     <div class="search">
     <div class="search">
       <b-form-input v-model="inputUserId" placeholder="Enter your ID"></b-form-input>
       <b-form-input v-model="inputUserId" placeholder="Enter your ID"></b-form-input>
-      <h1>{{ inputUserId }}</h1>
       <b-button><router-link :to="{ path: inputUserId }">search</router-link></b-button>
       <b-button><router-link :to="{ path: inputUserId }">search</router-link></b-button>
     </div>
     </div>
   </div>
   </div>