ionic类似时间轴的实现

最新推荐文章于 2025-09-11 04:09:35 发布

原创

最新推荐文章于 2025-09-11 04:09:35 发布 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何在Ionic应用中实现一个类似时间轴的信息公告页面，通过提供的JS代码展示了具体的实现细节。

最近做了一个，类似时间轴的信息公告页面。代码如下：

<style>
    .timeLine{
      width:100%;
      position:relative }
    .timeLine .shade{
      height:50%;
      width:50%;
      position:absolute;
      border-right:1px solid #f5f5f5;
    }
    .left-container{
      height:100%;
      width:50%;
      float:left;
      background-color:#f5f5f5;
      padding:10px 20px 10px 15px;
      border-right:1px solid #FE87A5;
    }
    .right-container{
      height:100%;
      width:50%;
      float:left;
      background-color:#F5DEE5;
      padding:10px 15px 10px 20px;
    }
    .right-container .box,.left-container .box{
      border-radius:5px;
      height:100%;
      width:100%;
      position:relative;
    }
    .right-container .box{
      background:#FE87A5;
      color:white }
    .left-container .box{
      background:white;