修改的原则：重写一个bootstrap样式！

本次实现的部分是对局列表页面、排行榜页面、我的Bot、录像功能、对战页面的开屏部分等等，至此，整个acapp端，即可全部完成

注：在目前如果没有实现acapp端的登录授权，仅仅通过token的话，在到期后，静态token会过期，从而导致登录不上

acapp端项目地址

web端项目地址

项目代码地址

实现逻辑

一.实现对于对局列表RecordIndexView的适配

对于整个对局列表页面，此页面主要是一个table
对于table该如何适配，首先的任务就是将table与分页放到整个页面的正中间的位置

1.将table与分页功能放到正中间

首先先用一个div将整个table框起来，定义的类名为game-table

注：要求将表格的部分与分页的部分放在一个全部的div中，以保证能够整体都放在中间的位置

记得删除一些bootstrap类，以防止出现相互污染

首先先设置整个的居中属性，采用flex布局，要求水平居中、竖直居中、设置宽度高度为100%,写法如下所示：

在设置完整个居中属性后，需要调整一下对局列表

2.调整下对局列表

如果不对对局列表的样式进行调整的话，在去掉了bootstrap之后，会因为内容的原因导致整个整个结构出现混乱，名字长度等不一，不是很对齐，因此需要修改表的内容，设定表的内容展示范围。

首先给用户A与用户B的信息做一下左对齐。首先先给对应的td定义一个class为gamne-table-username
对于这个类单独的做一下左对齐：text-align:left

接下来，就需要把太长的名字给截断，然后把超出的部分用省略号进行替换，具体的实现方式为:
首先先给game-table-username类添加一个overflow属性，属性名为hidden
添加一个text-overflow,设置属性为ellipsis
再添加一个white-space:nowrap max-width:7.5vw
写法如下:

对于剩余的结果、时间、操作3列，添加一个宽度属性予以规范。通过这样的方式固定宽度，以保证每次跳转页面显示的内容不会发生变化

给表格添加一个白色的透明背景、并且添加一个圆角，使其向web端靠拢

注：将长字符串变成字符串+省略号，用max_width作限定

3.修改分页模块

对于分页的部分，定义分页部分的类名为：game-page-item
给这个分页部分添加一个白色的背景，并且要保证所有的数字随着递增，都不会换行。
为了防止页码太密，都挤到一块，因此就需要添加一个padding

此外，为了能够尽可能的仿照web端的bootstrap样式，给这些按钮添加一个边框属性。

border:1px solid #dee2e6

能够实现，当页数按钮鼠标悬停的时候，按钮能够变成灰色

除了这些以外，链接的字的颜色应该是浅蓝色，并且需要去掉下滑线
对于这部分，修改的类为:game-page-link
去掉下划线实现的代码:text-decoration:none;

当一个页码被选中的时候，则需要把背景色变成浅蓝色，并且此时字体也变成白色。

然后将这个分页的模块进行一下居中。

修改完之后部署到服务器上，放到acapp端进行下调试。

适配排行榜页面RanklistIndexView

因为整个排行榜也是一个列表，所以用上述的方法，将排行榜页面做下整个适配。
将对战列表页面适配的样式表放进RanklistIndexView中。

宽度如果直接拿过来，可能会不大和谐。需要调整下名称等位置的宽度大小等。
将其改成左对齐，超出一定长度的剩下部分用省略号进行代替
实现这一部分只需要给玩家的信息部分加一个类名即可，因为整个样式已经写好了。
具体调整如下:

二.修改Bot页面

首先在Bot页面中同样有一个表格页面，表格页面的css样式与上述的两个是一致的
此外，对于acapp的页面来说，如用户头像之类的东西可以去掉。
把中间内容用div括起来，这样就可以实现两部分整体居中
首先先给括起来全部的div添加一个id为game-table
为了方便调整，先将两个模态框给隐藏掉。

style="display:none"

首先对于这个表格来说可以不用居中，从顶部展开而来。
因此对于最大的div框来说.
可以加一个padding,以尽可能保持美观。

将一些按钮向右对齐

style="float:right"

因为在去掉了bootstrap之后， bootstrap中自带的模态框也随之去掉，因此需要能够自己实现。

1.实现模态框

首先先将与bootstrap相关的类都删掉。

然后先将modal的样式进行修改。为了能够方便看到modal，将模态框加一个背景。并且添加一个padding以及添加一个圆角。

其次希望这个模态框需要浮动起来，而不要影响其他组件的位置。将整个位置属性设置为absolute,设置宽高。

当然，除了实现浮动以外，也需要让模态框能够居中。居中采用的方式是设置上下左右与margin.
具体写法如下:

注：<h5>会自动加一个margin，因此需要去掉margin.

1.1 设置交互，实现当点击按钮的时候显示，当点击取消按钮的时候，模态框消失。

首先先定义全局变量为show_add_modal，以表示是否显示模态框，默认情况为false表示关闭。

然后定义一个处理函数show_add_modal_handler以用来处理是否要展示模态框。

这个模态框何时展示:
控制模态框的展示通过v-if进行渲染。当变量show_add_modal为true的时候，则执行渲染。也就是说当传参为true的时候打开，当传参为false的时候关闭。
即：
当show_add_modal_handler(true)为打开

当函数逻辑写完后返回并且绑定函数事件。

当点击创建Bot的按钮时候，一开始是没有反应的。只有当刷新一遍之后才会有反应
原因是原来关闭模态框的函数是bootstrap函数自带的，但是bootstrap已经被注销掉了。
原有的关闭方式为:

Modal.getInstance('#add-bot-btn').hide()

需要替换成：

show_add_modal.value=false;

具体函数写法如下：

2.实现修改bot模态框

修改修改Bot模态框的方法与道理是和创建Bot是一样的。
首先先将所有的bootstrap类都删掉。
要实现的是点击每一行的修改按钮则出现，点击保存修改则退出。
实现这个功能需要添加行为：用一个变量进行控制，如果需要展示出来则为true，否则则为false.
在每次从数据库中拉取bot的时候，先给bot赋值默认的不显示属性，以保证默认都是不显示:

for (const bot of resp)
   bot.show_update_modal=false;

在前端结构部分，通过判断进行控制，如果

v-if="bot.show_update_modal"此时为true

定义事件名为show_update_modal_handler
需要传入bot_id，以及是否展示的变量名is_show
在里面首先先定义一个数组。new_bots
然后枚举下原来的每一个存有bot的数组。
在循环中，将对应的id的bot信息的模态框是否修改的变量is_show，改为传入进来的结果。

存下每个bot，并且更新该bot
最后将函数返回，并且给相应的组件进行绑定，绑定变量结果为:当修改按钮时对应的为true,模态框中取消绑定为false

在保存修改时会出现报错。如下图所示:

原因在于update_bot里调用一个bootstrap的modal方法已经不适用，需要进行更换，更换方法为:

为何不用显式的调整修改，保存修改按钮，使其点击后能够关闭。
因为是根本不需要
当点击保存的时候，会调用refrse_bots函数，refresh_bots函数从云端获取bot列表后，
会默认在success(resp)里，将全部的Bot的show_update_bots全部改为false，这样就默认将模态框关闭。

三。改造录像页面

录像页面首先要能够保证在点击按钮之后，打开页面。

1.点击按钮能够跳转页面

由于vue-router已经删掉了，因此需要进行手动添加链接。
控制能够跳转到一个新页面的事件是open_record_content里
通过控制全局变量名：router-name
以实现将页面切换到回放组件的操作
store.commit("updateRouterName",record_content)

此事件的写法如下:

关于为什么没有用上id
是因为在之前在前端web端的时候，每一个录像回放都只有一个唯一的对应的Id

而在去掉router之后，跳转之前，已经通过程序将全部地图信息存到全局变量里。
未来不管链接的Id是多少，都不会影响整个的渲染

因此在实现跳转的时候，就没有必要传过去

此外对于录像回放页面，也需要一个返回按钮，能够返回到对局列表页面。

2.给录像回放页面添加一个返回按钮

要实现跳转到上一级，之前给其他页面全局控制跳转到首页的组件ContetnField.vue就不能用了，就需要另写一个组件进行控制。
新开的组件为PlayGround组件，在其中将ContentField组件的按钮样式复制过去。
复制过去样式之后，就可以给这个按钮赋予一个动作，同样的也是把ContentField的逻辑拿过去就行
修改store对应的跳转页面为回放页面

store.commit("updateRouterName",router)

四。改造PK页面

对战页面页面首先没有能够100%占满屏幕，是因为显示的左下角和右上角占用一定的空间。
需要将user-color类重新修改样式。将位置属性修改成：absolute即可。
除此以外，结束的通知框也需要让他实时居中，也就是Result-Board
将其中的top、bottom、left、right修改为0，margin修改为auto,具体在修改时的操作如下所示:

最终效果：acapp端与web端能够实现匹配

问题

问题一：将分页部分居中，但是没有完全居中，如下所示:

解决方法：把在ul里存在的padding给去掉。

问题二: 在分页的时候，分页页码会被用户浏览器标蓝选中，整体全部变蓝，希望要求是不被选中。

 解决方法:添加一段代码:`user-select:none`

问题三:关于scale缩放，有些浏览器可能不支持。

        解决方式:将`scale`换成`transform:scale(1,2)`

问题四:在修改了Bot页面的整个大范围bot后，下面空出来一部分

解决方法：将padding改为padding-top即可。

问题五：在实现了回放页面之后，发现没有占满整个屏幕

解决方法：去掉margin，并且给content-field类添加一个css属性。如下所示:

问题六：因为没有处理过自己与自己匹配的情况，因此一个账号可能会出现很多人登录的情况(在调试阶段，acapp使用的是静态的token)很有可能会出现些bug.

解决方法：重启即可

问题总结：

如果在调试的时候出现bug，但是不知道原因的话，一般是后端问题

可以使用ctrl+c关掉后端，然后把后端重启的方法来解决后端问题(重启可以解决很多问题)