• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Building the Details Page<a name="EN-US_TOPIC_0000001054727679"></a>
2
3
4The  **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  **<div\>**  components instead of one  **<chart\>**  component.
5
6Add a root  **<div\>**, set the  **flex-direction**  attribute to  **column**  to arrange the two bars vertically. The sample code is as follows:
7
8```
9<div class="container">
10    <div class="header" onclick="backMain">
11        <image class="back" src="common/ic_back.png"></image>
12        <text class="title">
13            History
14        </text>
15    </div>
16    <list class="chart-list">
17    </list>
18</div>
19```
20
21In 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:
22
23```
24import router from '@system.router'
25
26export default {
27    backMain() {
28        router.replace({
29            // Home page URL
30            uri: 'pages/index/index',
31            params: {
32                // Parameters to pass to the home page
33                selectedCityIndex: this.selectedCityIndex
34            }
35        });
36    }
37}
38```
39
40Add  **<div\>**  components to the  **<list\>**  component to form a chart.
41
42The complete sample code in the three files is as follows.
43
44## detail.hml<a name="section275215487291"></a>
45
46```
47<div class="container">
48    <div class="header" onclick="backMain">
49        <image class="back" src="common/ic_back.png"></image>
50        <text class="title">
51            History
52        </text>
53    </div>
54    <list class="chart-list">
55        <list-item class="list-item-title">
56            <text class="location">{{location}}
57            </text>
58        </list-item>
59        <list-item class="list-item-chart">
60            <div style="margin-top: 24px;width: 960px;height: 256px;">
61                <div class="chart-wrapper" style="margin-left: 128px;">
62                    <text class="gas-name">
63                        CO
64                    </text>
65                    <div class="chart">
66                        <div class="chart-item" style="height: 78px;background-color: #00ff00;"></div>
67                        <div class="chart-item" style="height: 52px;background-color: #00ff00;"></div>
68                        <div class="chart-item" style="height: 155px;background-color: #ff0000;"></div>
69                        <div class="chart-item" style="height: 134px;background-color: #ff0000;"></div>
70                        <div class="chart-item" style="height: 98px;background-color: #FF7500;"></div>
71                        <div class="chart-item" style="height: 88px;background-color: #FF7500;"></div>
72                        <div class="chart-item" style="height: 144px;background-color: #ff0000;"></div>
73                    </div>
74                    <div class="white-line"></div>
75                    <div class="week">
76                        <text class="day">
77                            MON
78                        </text>
79                        <text class="day">
80                            TUE
81                        </text>
82                        <text class="day">
83                            WED
84                        </text>
85                        <text class="day">
86                            THU
87                        </text>
88                        <text class="day">
89                            FRI
90                        </text>
91                        <text class="day">
92                            SAT
93                        </text>
94                        <text class="day">
95                            SUN
96                        </text>
97                    </div>
98                </div>
99                <div class="chart-wrapper" style="margin-left: 88px;">
100                    <text class="gas-name">
101                        SO2
102                    </text>
103                    <div class="chart">
104                        <div class="chart-item" style="height: 155px;background-color: #ff0000;"></div>
105                        <div class="chart-item" style="height: 134px;background-color: #ff0000;"></div>
106                        <div class="chart-item" style="height: 78px;background-color: #00ff00;"></div>
107                        <div class="chart-item" style="height: 52px;background-color: #00ff00;"></div>
108                        <div class="chart-item" style="height: 98px;background-color: #FF7500;"></div>
109                        <div class="chart-item" style="height: 88px;background-color: #FF7500;"></div>
110                        <div class="chart-item" style="height: 144px;background-color: #ff0000;"></div>
111                    </div>
112                    <div class="white-line"></div>
113                    <div class="week">
114                        <text class="day">
115                            MON
116                        </text>
117                        <text class="day">
118                            TUE
119                        </text>
120                        <text class="day">
121                            WED
122                        </text>
123                        <text class="day">
124                            THU
125                        </text>
126                        <text class="day">
127                            FRI
128                        </text>
129                        <text class="day">
130                            SAT
131                        </text>
132                        <text class="day">
133                            SUN
134                        </text>
135                    </div>
136                </div>
137            </div>
138        </list-item>
139        <list-item class="list-item-chart">
140            <div style="margin-top: 24px;width: 960px;height: 256px;">
141                <div class="chart-wrapper" style="margin-left: 128px;">
142                    <text class="gas-name">
143                        PM10
144                    </text>
145                    <div class="chart">
146                        <div class="chart-item" style="height: 88px;background-color: #FF7500;"></div>
147                        <div class="chart-item" style="height: 144px;background-color: #ff0000;"></div>
148                        <div class="chart-item" style="height: 78px;background-color: #00ff00;"></div>
149                        <div class="chart-item" style="height: 52px;background-color: #00ff00;"></div>
150                        <div class="chart-item" style="height: 155px;background-color: #ff0000;"></div>
151                        <div class="chart-item" style="height: 134px;background-color: #ff0000;"></div>
152                        <div class="chart-item" style="height: 98px;background-color: #FF7500;"></div>
153                    </div>
154                    <div class="white-line"></div>
155                    <div class="week">
156                        <text class="day">
157                            MON
158                        </text>
159                        <text class="day">
160                            TUE
161                        </text>
162                        <text class="day">
163                            WED
164                        </text>
165                        <text class="day">
166                            THU
167                        </text>
168                        <text class="day">
169                            FRI
170                        </text>
171                        <text class="day">
172                            SAT
173                        </text>
174                        <text class="day">
175                            SUN
176                        </text>
177                    </div>
178                </div>
179                <div class="chart-wrapper" style="margin-left: 88px;">
180                    <text class="gas-name">
181                        PM2.5
182                    </text>
183                    <div class="chart">
184                        <div class="chart-item" style="height: 98px;background-color: #FF7500;"></div>
185                        <div class="chart-item" style="height: 88px;background-color: #FF7500;"></div>
186                        <div class="chart-item" style="height: 78px;background-color: #00ff00;"></div>
187                        <div class="chart-item" style="height: 52px;background-color: #00ff00;"></div>
188                        <div class="chart-item" style="height: 155px;background-color: #ff0000;"></div>
189                        <div class="chart-item" style="height: 134px;background-color: #ff0000;"></div>
190                        <div class="chart-item" style="height: 144px;background-color: #ff0000;"></div>
191                    </div>
192                    <div class="white-line"></div>
193                    <div class="week">
194                        <text class="day">
195                            MON
196                        </text>
197                        <text class="day">
198                            TUE
199                        </text>
200                        <text class="day">
201                            WED
202                        </text>
203                        <text class="day">
204                            THU
205                        </text>
206                        <text class="day">
207                            FRI
208                        </text>
209                        <text class="day">
210                            SAT
211                        </text>
212                        <text class="day">
213                            SUN
214                        </text>
215                    </div>
216                </div>
217            </div>
218        </list-item>
219        <list-item class="list-item-chart">
220            <div style="margin-top: 24px;width: 960px;height: 256px;">
221                <div class="chart-wrapper" style="margin-left: 128px;">
222                    <text class="gas-name">
223                        NO2
224                    </text>
225                    <div class="chart">
226                        <div class="chart-item" style="height: 155px;background-color: #ff0000;"></div>
227                        <div class="chart-item" style="height: 134px;background-color: #ff0000;"></div>
228                        <div class="chart-item" style="height: 98px;background-color: #FF7500;"></div>
229                        <div class="chart-item" style="height: 78px;background-color: #00ff00;"></div>
230                        <div class="chart-item" style="height: 52px;background-color: #00ff00;"></div>
231                        <div class="chart-item" style="height: 88px;background-color: #FF7500;"></div>
232                        <div class="chart-item" style="height: 144px;background-color: #ff0000;"></div>
233                    </div>
234                    <div class="white-line"></div>
235                    <div class="week">
236                        <text class="day">
237                            MON
238                        </text>
239                        <text class="day">
240                            TUE
241                        </text>
242                        <text class="day">
243                            WED
244                        </text>
245                        <text class="day">
246                            THU
247                        </text>
248                        <text class="day">
249                            FRI
250                        </text>
251                        <text class="day">
252                            SAT
253                        </text>
254                        <text class="day">
255                            SUN
256                        </text>
257                    </div>
258                </div>
259            </div>
260        </list-item>
261    </list>
262</div>
263```
264
265## detail.css<a name="section2589154215301"></a>
266
267```
268.location {
269    text-align: center;
270    color: #ffffff;
271    width: 960px;
272    height: 52px;
273    font-size: 40px;
274}
275.container {
276    height: 480px;
277    width: 960px;
278    flex-direction: column;
279}
280
281.header {
282    width: 960px;
283    height: 72px;
284}
285
286.back {
287    width: 36px;
288    height: 36px;
289    margin-left: 39px;
290    margin-top: 23px;
291}
292
293.title {
294    width: 296px;
295    height: 40px;
296    margin-top: 20px;
297    margin-left: 21px;
298    color: #e6e6e6;
299}
300
301.chart-list {
302    width: 960px;
303    height: 408px;
304}
305
306.list-item-title {
307    width: 960px;
308    height: 52px;
309}
310
311.list-item-chart {
312    width: 960px;
313    height: 280px;
314}
315
316.chart-wrapper {
317    width: 308px;
318    height: 256px;
319    flex-direction: column;
320}
321
322.gas-name {
323    width: 308px;
324    height: 35px;
325    text-align: left;
326}
327
328.chart {
329    width: 308px;
330    height: 155px;
331    margin-top: 10px;
332    justify-content: flex-start;
333    align-items: flex-end;
334}
335
336.chart-item {
337    width: 24px;
338    margin-left: 18px;
339    border-radius: 3px;
340}
341
342.white-line {
343    width: 308px;
344    height: 2px;
345    background-color: #ffffff;
346    margin-top: 22px;
347}
348
349.week {
350    width: 308px;
351    height: 17px;
352    margin-top: 6px;
353    border-color: #ffffff;
354    border-radius: 2px;
355    margin-top: 6px;
356}
357
358.day {
359    width: 26px;
360    height: 17px;
361    font-size: 10px;
362    margin-left: 16px;
363    text-align: center;
364}
365```
366
367## detail.js<a name="section163410883117"></a>
368
369```
370import router from '@system.router'
371
372export default {
373    data: {
374        location: ''
375    },
376    onInit() {
377        if (this.selectedCityIndex === 0) {
378            this.location = 'Dongguan';
379        } else {
380            this.location = 'Shenzhen';
381        }
382    },
383    backMain() {
384        router.replace({
385            uri: 'pages/index/index',
386            params: {
387                selectedCityIndex: this.selectedCityIndex
388            }
389        });
390    }
391}
392```
393
394