# **修改页面位置** 
聊天窗口使用绝对定位，修改位置的代码在ServiceCloudChatDemo\\src\\layout\\index.vue文件的\<style scoped\>标签里。
![](https://support.huaweicloud.com/devg-webdemo-cec/figure/zh-cn_image_0000001359519925.png)
聊条窗口有三个形态1.最小化时不显示。2.小窗口居于右下角显示。3.最大化时居中显示。
- 最小化
![](https://support.huaweicloud.com/devg-webdemo-cec/figure/zh-cn_image_0000001359799373.png)
- 小窗口
![](https://support.huaweicloud.com/devg-webdemo-cec/figure/zh-cn_image_0000001359679813.png)
- 最大化
![](https://support.huaweicloud.com/devg-webdemo-cec/figure/zh-cn_image_0000001306720412.png)
其中 .index 里写的小窗口在右下角时的样式，.index-big 和 .twoDiv-big里写的最大化居中显示的样式。如果想要窗口在左下角显示，按照下面修改
![](https://support.huaweicloud.com/devg-webdemo-cec/figure/zh-cn_image_0000001306560464.png)
效果如下：
![](https://support.huaweicloud.com/devg-webdemo-cec/figure/zh-cn_image_0000001359920113.png)