开发历史页

<list style="width: 321px;height: 321px;top: 67px;left: 320px;">
    <list-item class="info-list-item">
        <div style="width: 321px;height: 80px;flex-direction: column;align-items: flex-start;">
             <text class="div-info-historical-data">{{historicalData}}</text>
        </div>
    </list-item>
    <!--使用for属性来动态生成listitem，datasets对应history.js中的datasets变量，根据变量数组中元素个数来创建组件-->
    <list-item style="width: 321px;height: 160px;" for="{{datasets}}">
       <div style="width: 321px;height: 160px;flex-direction: column;">
       <div style="width: 321px;height: 2px;background-color: #f5fffa;"></div>
       <!--$item是datasets中的子元素-->
       <text class="gas-name">{{$item}}</text>
       <div style="width: 321px;height: 100px;margin-top: 4px;justify-content: flex-start;align-items: flex-end;">
          <!--示例中的颜色为固定值，实际开发中可以考虑动态绑定-->
          <div style="width: 21px;margin-left: 21px;height: 10px;backgroundColor: #00ff00;"></div>
          <div style="width: 21px;margin-left: 21px;height: 20px;;backgroundColor: #00ff00;"></div>
          <div style="width: 21px;margin-left: 21px;height: 90px;backgroundColor: #ff0000;"></div>
          <div style="width: 21px;margin-left: 21px;height: 80px;backgroundColor: #ff0000;"></div>
          <div style="width: 21px;margin-left: 21px;height: 60px;backgroundColor: #999999;"></div>
          <div style="width: 21px;margin-left: 21px;height: 50px;backgroundColor: #999999;"></div>
          <div style="width: 21px;margin-left: 21px;height: 100px;backgroundColor: #ff0000;"></div>
      </div>
      <!--表格中的X轴下标采用图片-->
      <image style="width: 321px;height: 20px;" src="common/week.png"></image>
      </div>
   </list-item>
   <list-item class="info-list-item">
       <!--返回详情页按钮-->
       <input type="button" value="Back" style="border-width: 2px;border-color: #90ee90;width: 256px;height: 60px;margin-left: 30px;" onclick="backDetail"/>
   </list-item>
</list>

.div-info-location{
    color: #dcdcdc;
    width: 321px;
    height: 40px;
}
.div-info-historical-data{
    color: #f5fffa;
    width: 321px;
    height: 40px;
}
.gas-name{
    color: #f0ffff;
    text-align: right;
    width: 321px;
    height: 32px;
}
.info-list-item{
    width: 321px;
    height: 80px;
}

import router from'@system.router'
module.exports = {
    data: {
        historicalData: 'historicalData',
        datasets: ['CO','O3','NO2','NO','PM25','SO2']
    },
    onInit(){
        //国际化信息处理
        this.historicalData = this.$t(this.historicalData);
    },
    backDetail(){
        router.replace({  //返回详情页
            uri: 'pages/detail/detail'
        });
    }
}