Lines Matching refs:div

7 详情页以图表的形式展示一周内空气质量指标值。本页面由两部分组成:标题栏和图表栏;在图表栏,考虑显示效果,我们使用多个div替代chart组件来实现图表功能。
9 首先,添加一个根节点div,并设置flex-direction属性为column,使两栏纵向排列,代码结构如下:
12 <div class="container">
13 <div class="header" onclick="backMain">
18 </div>
21 </div>
43 其次,在list中添加div组件来实现图表效果。
50 <div class="container">
51 <div class="header" onclick="backMain">
56 </div>
63 <div style="margin-top: 24px;width: 960px;height: 256px;">
64 <div class="chart-wrapper" style="margin-left: 128px;">
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">
100 </div>
101 </div>
102 <div class="chart-wrapper" style="margin-left: 88px;">
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">
138 </div>
139 </div>
140 </div>
143 <div style="margin-top: 24px;width: 960px;height: 256px;">
144 <div class="chart-wrapper" style="margin-left: 128px;">
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">
180 </div>
181 </div>
182 <div class="chart-wrapper" style="margin-left: 88px;">
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">
218 </div>
219 </div>
220 </div>
223 <div style="margin-top: 24px;width: 960px;height: 256px;">
224 <div class="chart-wrapper" style="margin-left: 128px;">
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">
260 </div>
261 </div>
262 </div>
265 </div>