关于java:APICloud开发者进阶之路案例源码简单时间轴

47次阅读

共计 6233 个字符，预计需要花费 16 分钟才能阅读完成。

基于业务上的须要，本人做了一个简略的时间轴例子，网上找到色调, 先放图。

因为想做通明头部, 然而 win 页面关上 frm 页面后, 会遮住 win 页面的头部, 所以就勾销了 win 页面的 header 标签, 上面是 win 页面的代码：
`

<!doctype html>  
<html>  
<head>  
 <meta charset="utf-8">  
 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>  
 <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">  
 <link rel="stylesheet" type="text/css" href="../css/aui.css" />  
</head>  
<body>  
  
  
</body>  
<script type="text/javascript" src="../script/api.js"></script>  
<script type="text/javascript">  
 apiready = function(){api.parseTapmode();  
 var body_h = $api.offset($api.dom('body')).h;  
 api.openFrame({  
 name: 'merchant_order_details2_frm',  
 url: 'merchant_order_details2_frm.html',  
 bounces: false,  
 rect: {  
 x: 0,  
 y: 0,  
 w: 'auto',  
 h: 'auto'  
 }  
 })  
 };  
 function closeWin(){api.closeWin({});  
 }  
</script>  
</html>  
复制代码

frm 页面，先用 aui 写了一个头部导航条, 而后创立了一个 class 名为 container 的 div 容器,scoll 是滚动条容器, 因为要给滚动容易一个高度, 所以我在 js 外面计算了屏幕高度减去头部导航条的高度, 对 css 了解不深, 所以有不对的中央还望大佬斧正。
`

<!DOCTYPE HTML>  
<html>  
  
  
<head>  
 <meta charset="utf-8">  
 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />  
 <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">  
 <title>Hello APP</title>  
 <link rel="stylesheet" type="text/css" href="../css/aui.css" />  
 <style>  
 html {height: 100%;}  
  
  
 body {  
 height: 100%;  
 background: -webkit-linear-gradient(30deg, #383B86, #D983AF);  
 /* Safari 5.1 - 6.0 */  
 background: -o-linear-gradient(30deg, #383B86, #D983AF);  
 /* Opera 11.1 - 12.0 */  
 background: -moz-linear-gradient(30deg, #383B86, #D983AF);  
 /* Firefox 3.6 - 15 */  
 background: linear-gradient(30deg, #383B86, #D983AF);  
 /* 规范的语法（必须放在最初）*/  
 }  
  
  
 #container {  
 width: 100%;  
 display: -webkit-flex;  
 display: flex;  
 flex-direction: column;  
 justify-content: flex-start;  
 align-items: flex-start;  
 }  
  
  
 .timeLine {  
 width: 100%;  
 display: -webkit-flex;  
 display: flex;  
 flex-direction: row;  
 }  
  
  
 .timeLineImg {  
 width: 20%;  
 display: -webkit-flex;  
 display: flex;  
 flex-direction: column;  
 justify-content: center;  
 align-items: center;  
 }  
  
  
 .timeLineLeft {  
 height: 100%;  
 width: 1px;  
 border-left: 1px solid white;  
 }  
  
  
 .timeLineInfo {width: 80%;}  
  
  
 .timeLineInfoTitle {  
 font-size: 20px;  
 color: white;  
 }  
  
  
 .timeLineInfoIntroduce {  
 font-size: 16px;  
 color: white;  
 }  
  
  
 .timeLineInfoTime {  
 font-size: 12px;  
 color: #CA92C4;  
 }  
 .scoll {  
 overflow: auto;  
 margin-top: 65px;  
 }  
</style>  
</head>  
  
  
<body>  
 <header class="aui-bar aui-bar-nav" style="padding-top:25px;background-color:rgba(0,0,0,0);position: fixed;">  
 <a class="aui-pull-left">  
 <span class="aui-iconfont aui-icon-left"></span>  
 </a>  
 <div class="aui-title"> 时间轴 </div>  
 <a class="aui-pull-right aui-btn aui-btn-outlined">  
 <span class="aui-iconfont aui-icon-menu"></span>  
 </a>  
 </header>  
 <div id="container">  
 <div class="scoll">  
 <div class="timeLine">  
 <div class="timeLineImg">  
 <img src="../image/point.png">  
 <div class="timeLineLeft"></div>  
 </div>  
 <div class="timeLineInfo">  
 <div class="timeLineInfoTitle"> 状态: 已申请 </div>  
 <div class="timeLineInfoIntroduce"> 在广东广州分拨核心进行装车扫描，发往：四川成都分拨核心 </div>  
 <div class="timeLineInfoTime">2018-11-18/ 周日 21:33:34</div>  
 </div>  
 </div>  
 <div class="timeLine">  
 <div class="timeLineImg">  
 <img src="../image/point.png">  
 <div class="timeLineLeft"></div>  
 </div>  
 <div class="timeLineInfo">  
 <div class="timeLineInfoTitle"> 状态: 已申请 </div>  
 <div class="timeLineInfoIntroduce"> 在广东广州分拨核心进行装车扫描，发往：四川成都分拨核心 </div>  
 <div class="timeLineInfoTime">2018-11-18/ 周日 21:33:34</div>  
 </div>  
 </div>  
 <div class="timeLine">  
 <div class="timeLineImg">  
 <img src="../image/point.png">  
 <div class="timeLineLeft"></div>  
 </div>  
 <div class="timeLineInfo">  
 <div class="timeLineInfoTitle"> 状态: 已申请 </div>  
 <div class="timeLineInfoIntroduce"> 在广东广州分拨核心进行装车扫描，发往：四川成都分拨核心 </div>  
 <div class="timeLineInfoTime">2018-11-18/ 周日 21:33:34</div>  
 </div>  
 </div>  
 <div class="timeLine">  
 <div class="timeLineImg">  
 <img src="../image/point.png">  
 <div class="timeLineLeft"></div>  
 </div>  
 <div class="timeLineInfo">  
 <div class="timeLineInfoTitle"> 状态: 已申请 </div>  
 <div class="timeLineInfoIntroduce"> 在广东广州分拨核心进行装车扫描，发往：四川成都分拨核心 </div>  
 <div class="timeLineInfoTime">2018-11-18/ 周日 21:33:34</div>  
 </div>  
 </div>  
 <div class="timeLine">  
 <div class="timeLineImg">  
 <img src="../image/point.png">  
 <div class="timeLineLeft"></div>  
 </div>  
 <div class="timeLineInfo">  
 <div class="timeLineInfoTitle"> 状态: 已申请 </div>  
 <div class="timeLineInfoIntroduce"> 在广东广州分拨核心进行装车扫描，发往：四川成都分拨核心 </div>  
 <div class="timeLineInfoTime">2018-11-18/ 周日 21:33:34</div>  
 </div>  
 </div>  
 <div class="timeLine">  
 <div class="timeLineImg">  
 <img src="../image/point.png">  
 <div class="timeLineLeft"></div>  
 </div>  
 <div class="timeLineInfo">  
 <div class="timeLineInfoTitle"> 状态: 已申请 </div>  
 <div class="timeLineInfoIntroduce"> 在广东广州分拨核心进行装车扫描，发往：四川成都分拨核心 </div>  
 <div class="timeLineInfoTime">2018-11-18/ 周日 21:33:34</div>  
 </div>  
 </div>  
 <div class="timeLine">  
 <div class="timeLineImg">  
 <img src="../image/point.png">  
 <div class="timeLineLeft"></div>  
 </div>  
 <div class="timeLineInfo">  
 <div class="timeLineInfoTitle"> 状态: 已申请 </div>  
 <div class="timeLineInfoIntroduce"> 在广东广州分拨核心进行装车扫描，发往：四川成都分拨核心 </div>  
 <div class="timeLineInfoTime">2018-11-18/ 周日 21:33:34</div>  
 </div>  
 </div>  
 <div class="timeLine">  
 <div class="timeLineImg">  
 <img src="../image/point.png">  
 <div class="timeLineLeft"></div>  
 </div>  
 <div class="timeLineInfo">  
 <div class="timeLineInfoTitle"> 状态: 已申请 </div>  
 <div class="timeLineInfoIntroduce"> 在广东广州分拨核心进行装车扫描，发往：四川成都分拨核心 </div>  
 <div class="timeLineInfoTime">2018-11-18/ 周日 21:33:34</div>  
 </div>  
 </div>  
 <div class="timeLine">  
 <div class="timeLineImg">  
 <img src="../image/point.png">  
 <div class="timeLineLeft"></div>  
 </div>  
 <div class="timeLineInfo">  
 <div class="timeLineInfoTitle"> 状态: 已申请 </div>  
 <div class="timeLineInfoIntroduce"> 在广东广州分拨核心进行装车扫描，发往：四川成都分拨核心 </div>  
 <div class="timeLineInfoTime">2018-11-18/ 周日 21:33:34</div>  
 </div>  
 </div>  
 <div class="timeLine">  
 <div class="timeLineImg">  
 <img src="../image/point.png">  
 <div class="timeLineLeft"></div>  
 </div>  
 <div class="timeLineInfo">  
 <div class="timeLineInfoTitle"> 状态: 已申请 </div>  
 <div class="timeLineInfoIntroduce"> 在广东广州分拨核心进行装车扫描，发往：四川成都分拨核心 </div>  
 <div class="timeLineInfoTime">2018-11-18/ 周日 21:33:34</div>  
 </div>  
 </div>  
 <div class="timeLine">  
 <div class="timeLineImg">  
 <img src="../image/point.png">  
 <div class="timeLineLeft"></div>  
 </div>  
 <div class="timeLineInfo">  
 <div class="timeLineInfoTitle"> 状态: 已申请 </div>  
 <div class="timeLineInfoIntroduce"> 在广东广州分拨核心进行装车扫描，发往：四川成都分拨核心 </div>  
 <div class="timeLineInfoTime">2018-11-18/ 周日 21:33:34</div>  
 </div>  
 </div>  
 </div>  
 </div>  
</body>  
<script type="text/javascript" src="../script/api.js"></script>  
<script type="text/javascript">  
 apiready = function() {$api.css($api.dom(".scoll"),"height:"+(api.frameHeight - 65)+"px")  
 api.parseTapmode();};  
</script>  
  
  
</html>  
复制代码

正文完
java
发表至： java
2020-09-12
 0
走进JavaWeb技术世界14通过项目逐步深入了解Mybatis一
关于java:生产环境Redis连接长时间无响应被服务器断开问题
java客户端无法上传文件到hdfs
GOF设计模式小白教程