# 页面结构


  | 默认设备 | 平板 | 
| -------- | -------- |
| ![zh-cn_image_0000001270045849](figures/zh-cn_image_0000001270045849.png) | ![zh-cn_image_0000001225486054](figures/zh-cn_image_0000001225486054.png) | 


会话详情页面在默认设备和平板上的样式如上图所示，会话详情页面可以划分为三个部分：


  | 页面组成 | 介绍 | 
| -------- | -------- |
| 顶部标题栏 | ![zh-cn_image_0000001224250350](figures/zh-cn_image_0000001224250350.jpg) | 
| 信息列表 | ![zh-cn_image_0000001268490361](figures/zh-cn_image_0000001268490361.jpg) | 
| 底部输入栏 | ![zh-cn_image_0000001268250529](figures/zh-cn_image_0000001268250529.jpg) | 


接下来我们详细介绍各部分的实现。


> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 为了方便理解，我们对会话详情页面做了一定的精简，本小节仅介绍会话详情页面最基础的实现。