• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 开发详情页<a name="ZH-CN_TOPIC_0000001054727679"></a>
2
3-   [detail.hml](#section275215487291)
4-   [detail.css](#section2589154215301)
5-   [detail.js](#section163410883117)
6
7详情页以图表的形式展示一周内空气质量指标值。本页面由两部分组成：标题栏和图表栏；在图表栏，考虑显示效果，我们使用多个div替代chart组件来实现图表功能。
8
9首先，添加一个根节点div，并设置flex-direction属性为column，使两栏纵向排列，代码结构如下：
10
11```
12<div class="container">
13    <div class="header" onclick="backMain">
14        <image class="back" src="common/ic_back.png"></image>
15        <text class="title">
16            历史记录
17        </text>
18    </div>
19    <list class="chart-list">
20    </list>
21</div>
22```
23
24其中onclick="backMain"为返回主页事件，detail.js中的代码实现如下：
25
26```
27import router from '@system.router'
28
29export default {
30    backMain() {
31        router.replace({
32            //页面地址
33            uri: 'pages/index/index',
34            params: {
35                //返回主页时带的参数
36                selectedCityIndex: this.selectedCityIndex
37            }
38        });
39    }
40}
41```
42
43其次，在list中添加div组件来实现图表效果。
44
45详情页完整代码如下：
46
47## detail.hml<a name="section275215487291"></a>
48
49```
50<div class="container">
51    <div class="header" onclick="backMain">
52        <image class="back" src="common/ic_back.png"></image>
53        <text class="title">
54            历史记录
55        </text>
56    </div>
57    <list class="chart-list">
58        <list-item class="list-item-title">
59            <text class="location">{{location}}
60            </text>
61        </list-item>
62        <list-item class="list-item-chart">
63            <div style="margin-top: 24px;width: 960px;height: 256px;">
64                <div class="chart-wrapper" style="margin-left: 128px;">
65                    <text class="gas-name">
66                        CO
67                    </text>
68                    <div class="chart">
69                        <div class="chart-item" style="height: 78px;background-color: #00ff00;"></div>
70                        <div class="chart-item" style="height: 52px;background-color: #00ff00;"></div>
71                        <div class="chart-item" style="height: 155px;background-color: #ff0000;"></div>
72                        <div class="chart-item" style="height: 134px;background-color: #ff0000;"></div>
73                        <div class="chart-item" style="height: 98px;background-color: #FF7500;"></div>
74                        <div class="chart-item" style="height: 88px;background-color: #FF7500;"></div>
75                        <div class="chart-item" style="height: 144px;background-color: #ff0000;"></div>
76                    </div>
77                    <div class="white-line"></div>
78                    <div class="week">
79                        <text class="day">
80                            MON
81                        </text>
82                        <text class="day">
83                            TUE
84                        </text>
85                        <text class="day">
86                            WED
87                        </text>
88                        <text class="day">
89                            THU
90                        </text>
91                        <text class="day">
92                            FRI
93                        </text>
94                        <text class="day">
95                            SAT
96                        </text>
97                        <text class="day">
98                            SUN
99                        </text>
100                    </div>
101                </div>
102                <div class="chart-wrapper" style="margin-left: 88px;">
103                    <text class="gas-name">
104                        SO2
105                    </text>
106                    <div class="chart">
107                        <div class="chart-item" style="height: 155px;background-color: #ff0000;"></div>
108                        <div class="chart-item" style="height: 134px;background-color: #ff0000;"></div>
109                        <div class="chart-item" style="height: 78px;background-color: #00ff00;"></div>
110                        <div class="chart-item" style="height: 52px;background-color: #00ff00;"></div>
111                        <div class="chart-item" style="height: 98px;background-color: #FF7500;"></div>
112                        <div class="chart-item" style="height: 88px;background-color: #FF7500;"></div>
113                        <div class="chart-item" style="height: 144px;background-color: #ff0000;"></div>
114                    </div>
115                    <div class="white-line"></div>
116                    <div class="week">
117                        <text class="day">
118                            MON
119                        </text>
120                        <text class="day">
121                            TUE
122                        </text>
123                        <text class="day">
124                            WED
125                        </text>
126                        <text class="day">
127                            THU
128                        </text>
129                        <text class="day">
130                            FRI
131                        </text>
132                        <text class="day">
133                            SAT
134                        </text>
135                        <text class="day">
136                            SUN
137                        </text>
138                    </div>
139                </div>
140            </div>
141        </list-item>
142        <list-item class="list-item-chart">
143            <div style="margin-top: 24px;width: 960px;height: 256px;">
144                <div class="chart-wrapper" style="margin-left: 128px;">
145                    <text class="gas-name">
146                        PM10
147                    </text>
148                    <div class="chart">
149                        <div class="chart-item" style="height: 88px;background-color: #FF7500;"></div>
150                        <div class="chart-item" style="height: 144px;background-color: #ff0000;"></div>
151                        <div class="chart-item" style="height: 78px;background-color: #00ff00;"></div>
152                        <div class="chart-item" style="height: 52px;background-color: #00ff00;"></div>
153                        <div class="chart-item" style="height: 155px;background-color: #ff0000;"></div>
154                        <div class="chart-item" style="height: 134px;background-color: #ff0000;"></div>
155                        <div class="chart-item" style="height: 98px;background-color: #FF7500;"></div>
156                    </div>
157                    <div class="white-line"></div>
158                    <div class="week">
159                        <text class="day">
160                            MON
161                        </text>
162                        <text class="day">
163                            TUE
164                        </text>
165                        <text class="day">
166                            WED
167                        </text>
168                        <text class="day">
169                            THU
170                        </text>
171                        <text class="day">
172                            FRI
173                        </text>
174                        <text class="day">
175                            SAT
176                        </text>
177                        <text class="day">
178                            SUN
179                        </text>
180                    </div>
181                </div>
182                <div class="chart-wrapper" style="margin-left: 88px;">
183                    <text class="gas-name">
184                        PM2.5
185                    </text>
186                    <div class="chart">
187                        <div class="chart-item" style="height: 98px;background-color: #FF7500;"></div>
188                        <div class="chart-item" style="height: 88px;background-color: #FF7500;"></div>
189                        <div class="chart-item" style="height: 78px;background-color: #00ff00;"></div>
190                        <div class="chart-item" style="height: 52px;background-color: #00ff00;"></div>
191                        <div class="chart-item" style="height: 155px;background-color: #ff0000;"></div>
192                        <div class="chart-item" style="height: 134px;background-color: #ff0000;"></div>
193                        <div class="chart-item" style="height: 144px;background-color: #ff0000;"></div>
194                    </div>
195                    <div class="white-line"></div>
196                    <div class="week">
197                        <text class="day">
198                            MON
199                        </text>
200                        <text class="day">
201                            TUE
202                        </text>
203                        <text class="day">
204                            WED
205                        </text>
206                        <text class="day">
207                            THU
208                        </text>
209                        <text class="day">
210                            FRI
211                        </text>
212                        <text class="day">
213                            SAT
214                        </text>
215                        <text class="day">
216                            SUN
217                        </text>
218                    </div>
219                </div>
220            </div>
221        </list-item>
222        <list-item class="list-item-chart">
223            <div style="margin-top: 24px;width: 960px;height: 256px;">
224                <div class="chart-wrapper" style="margin-left: 128px;">
225                    <text class="gas-name">
226                        NO2
227                    </text>
228                    <div class="chart">
229                        <div class="chart-item" style="height: 155px;background-color: #ff0000;"></div>
230                        <div class="chart-item" style="height: 134px;background-color: #ff0000;"></div>
231                        <div class="chart-item" style="height: 98px;background-color: #FF7500;"></div>
232                        <div class="chart-item" style="height: 78px;background-color: #00ff00;"></div>
233                        <div class="chart-item" style="height: 52px;background-color: #00ff00;"></div>
234                        <div class="chart-item" style="height: 88px;background-color: #FF7500;"></div>
235                        <div class="chart-item" style="height: 144px;background-color: #ff0000;"></div>
236                    </div>
237                    <div class="white-line"></div>
238                    <div class="week">
239                        <text class="day">
240                            MON
241                        </text>
242                        <text class="day">
243                            TUE
244                        </text>
245                        <text class="day">
246                            WED
247                        </text>
248                        <text class="day">
249                            THU
250                        </text>
251                        <text class="day">
252                            FRI
253                        </text>
254                        <text class="day">
255                            SAT
256                        </text>
257                        <text class="day">
258                            SUN
259                        </text>
260                    </div>
261                </div>
262            </div>
263        </list-item>
264    </list>
265</div>
266```
267
268## detail.css<a name="section2589154215301"></a>
269
270```
271.location {
272    text-align: center;
273    color: #ffffff;
274    width: 960px;
275    height: 52px;
276    font-size: 40px;
277}
278.container {
279    height: 480px;
280    width: 960px;
281    flex-direction: column;
282}
283
284.header {
285    width: 960px;
286    height: 72px;
287}
288
289.back {
290    width: 36px;
291    height: 36px;
292    margin-left: 39px;
293    margin-top: 23px;
294}
295
296.title {
297    width: 296px;
298    height: 40px;
299    margin-top: 20px;
300    margin-left: 21px;
301    color: #e6e6e6;
302}
303
304.chart-list {
305    width: 960px;
306    height: 408px;
307}
308
309.list-item-title {
310    width: 960px;
311    height: 52px;
312}
313
314.list-item-chart {
315    width: 960px;
316    height: 280px;
317}
318
319.chart-wrapper {
320    width: 308px;
321    height: 256px;
322    flex-direction: column;
323}
324
325.gas-name {
326    width: 308px;
327    height: 35px;
328    text-align: left;
329}
330
331.chart {
332    width: 308px;
333    height: 155px;
334    margin-top: 10px;
335    justify-content: flex-start;
336    align-items: flex-end;
337}
338
339.chart-item {
340    width: 24px;
341    margin-left: 18px;
342    border-radius: 3px;
343}
344
345.white-line {
346    width: 308px;
347    height: 2px;
348    background-color: #ffffff;
349    margin-top: 22px;
350}
351
352.week {
353    width: 308px;
354    height: 17px;
355    margin-top: 6px;
356    border-color: #ffffff;
357    border-radius: 2px;
358    margin-top: 6px;
359}
360
361.day {
362    width: 26px;
363    height: 17px;
364    font-size: 10px;
365    margin-left: 16px;
366    text-align: center;
367}
368```
369
370## detail.js<a name="section163410883117"></a>
371
372```
373import router from '@system.router'
374
375export default {
376    data: {
377        location: ''
378    },
379    onInit() {
380        if (this.selectedCityIndex === 0) {
381            this.location = '东莞';
382        } else {
383            this.location = '深圳';
384        }
385    },
386    backMain() {
387        router.replace({
388            uri: 'pages/index/index',
389            params: {
390                selectedCityIndex: this.selectedCityIndex
391            }
392        });
393    }
394}
395```
396
397