5.2 组件设计：游戏主页MobieGame
整个网页的结构是这样的，此页面可命名为MobileGame.vue，需要到route/index.js中新增页面入口，参考之前的实训的路由配置
另外，App.vue一定要改成下面这样，否则/mobieGame并不会访问本页面:
<template> <router-view/></template>总体上它是这样组成的：
<div style="margin:0 auto;width:500px"> <div style="height:20vh;background:yellow"> 顶部滚动 </div> <div style="height:70vh;background:#ccc"> 中间 </div> <div style="height:10vh;background:blue"> 底部 </div></div>结构大概是这样：
顶部滚动
中间
底部
然后它的中间部分是这样的：
<div style="height:70vh;background:#ccc"> <div> 角色扮演：横排10个游戏 </div> <div> 回合卡牌：竖排10个游戏 </div></div>实际上，横排和竖排都属于游戏框架，都是从数据库里查找出来的。它的结构是这样的(后面章节会有更多细节)：
<div> <template v-for="(f,i) in gameFrames" :key="i"> <GameFrame :frame="f"/> </template></div>在GameFrame的内部，也有一个循环，把游戏展示出来(后面章节会有更多细节)：
<template v-for="(g,i) in games" :key="i"> <Game :game="g"/></template>games是一个Game的集合，而这个Game组件，就是其中一个游戏：
<div class="game_item" style="clear: both;"> <div class="item_img" onclick="gameDetail('3768')"> <img class="gameIcon" src="https://img.d.cn/cp_admin/icon/4484/be140cf3191820d73b15bd6e2119cc38.png"/> </div> <div class="item_content" onclick="gameDetail('3768')"> <span class="game_channel">(当乐)</span> <span class="game_name">三国杀<span style="color: red">5.0</span> <span class="discount">折</span> </span> <span class="intro">应用描述：《三国杀》2020年十佳卡牌游戏《三国杀》</span> </div> <div class="item_download"> <span class="dow">下载地址:</span> <img class="platformicon" onclick="download(this)" data-url="https://pkg.d.cn/7NN1DPaO" src="https://www.codessp.cn/wxImage/android.png"/> </div></div>显示出来就是这个：
总结起来就是这样：MobielGame.vue里面循环展示若干个GameFrame，每个GameFrame里面有若干个Game，每个Game就是一个游戏啦。
GameFrame在数据库是这样的：
game_num就是展示的数量
mode是展示方式，game_list是横排，game_item是竖排
tab_name是左上角显示的名字
http的json接口是：https://www.codessp.cn/api/gameFrames点击查看
把数据复制到www.json.cn解析：
返回的数据中的data就是我们要的游戏框架GameFrame所需要的数据。
页面用到的css可以直接复制旧网站，再在此基础上修改。
把里面所有的规则都复制到MobileGame.vue的style部分
