# Building the Details Page
The **detail** page displays the air quality data of a week in a chart. There are two parts on the page: title bar and chart bar. Considering the display effect of the chart bar, use multiple **** components instead of one **** component.
Add a root ****, set the **flex-direction** attribute to **column** to arrange the two bars vertically. The sample code is as follows:
```
History
```
In the preceding example, **onclick="backMain"** indicates that the application returns to the home page when the click event is triggered. The sample code for **detail.js** is as follows:
```
import router from '@system.router'
export default {
backMain() {
router.replace({
// Home page URL
uri: 'pages/index/index',
params: {
// Parameters to pass to the home page
selectedCityIndex: this.selectedCityIndex
}
});
}
}
```
Add **** components to the **** component to form a chart.
The complete sample code in the three files is as follows.
## detail.hml
```