diff --git a/src/components/BigImgCell/index.vue b/src/components/BigImgCell/index.vue
index f3d8656..c1e075e 100644
--- a/src/components/BigImgCell/index.vue
+++ b/src/components/BigImgCell/index.vue
@@ -1,4 +1,3 @@
-<!--带缩略图轮播图组件-->
 <template>
   <uni-card mode="style" @click="onClick(gData.gameId)">
     <template v-slot:cover>
diff --git a/src/components/GameSmallCell/index.vue b/src/components/GameSmallCell/index.vue
new file mode 100644
index 0000000..b0ddbb4
--- /dev/null
+++ b/src/components/GameSmallCell/index.vue
@@ -0,0 +1,85 @@
+<template>
+<view class="s-game-cell">
+  <view class="left-part">
+    <img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg">
+  </view>
+  <view class="right-part">
+    <view class="title-view">
+      <text>游戏名</text>
+    </view>
+    <view class="sub-title-view">
+      <text>游戏英文名</text>
+    </view>
+    <view class="tags-view">
+      <uni-tag v-for="tag in tagList" :text="tag" inverted="true" type="error"></uni-tag>
+    </view>
+    <view class="price-view">
+      <view>游戏英文名</view>
+      <view class="price">100</view>
+      <uni-tag text="25%折扣" type="error"></uni-tag>
+    </view>
+  </view>
+</view>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    data?: any
+  }
+}
+
+@Component({
+  name: 'GameSmallCell',
+  props: ['data'],
+})
+export default class extends Vue{
+  private tagList: string[] = ['t1', 't2']
+}
+</script>
+<style>
+  .s-game-cell{
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    padding: 5px;
+  }
+  .left-part{
+    width: 25%;
+  }
+  .left-part img{
+    max-width: 150px;
+  }
+  .right-part {
+    width: 75%;
+    margin-left: 5px;
+  }
+  .title-view{
+    font-size: 18px;
+  }
+  .sub-title-view {
+    font-size: 14px;
+    color: #666666;
+  }
+  .price-view {
+    width: 100%;
+    font-size: 14px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+  .price-view .price{
+    color: red;
+  }
+  .tags-view {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    padding: 5px 0;
+  }
+  .tags-view .uni-tag {
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/pages/info/index.vue b/src/pages/info/index.vue
index 93f427f..09885e9 100644
--- a/src/pages/info/index.vue
+++ b/src/pages/info/index.vue
@@ -123,5 +123,6 @@ export default class extends Vue{
   height: 40px;
   vertical-align: middle;
   line-height: 40px;
+  color: #666666;
 }
 </style>
diff --git a/src/pages/list/index.vue b/src/pages/list/index.vue
index 3d367a5..e046ce2 100644
--- a/src/pages/list/index.vue
+++ b/src/pages/list/index.vue
@@ -1,17 +1,39 @@
 <template>
   <view class="container">
+    <uni-list>
+      <uni-list-item v-for="item in games" >
+        <game-small-cell :g-data="item" v-on:cellClicked = 'onClick'></game-small-cell>
+      </uni-list-item>
+    </uni-list>
   </view>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
+import { IGameInfo } from '@/modules/gameinfo'
+import GameSmallCell from '@/components/GameSmallCell/index.vue'
 
 @Component({
   name: 'Index',
-  components: {}
+  components: {
+    GameSmallCell
+  }
 })
 export default class extends Vue{
+  private games: IGameInfo[] = []
+
   onLoad() {
+    for (let i = 0; i < 10; i++) {
+      this.games.push({
+        gameId: i + '',
+        cover: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
+        name: '测试游戏' + i,
+        ename: 'test game ' + i
+      })
+    }
+
+  }
+  onClick() {
 
   }