NGToolsCSharp/NGTools/Scripts/MUI/examples/list-triplex-row.html
2024-09-13 16:44:30 +08:00

115 lines
5.1 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<style>
.mui-table h4,.mui-table h5,.mui-table .mui-h5,.mui-table .mui-h6,.mui-table p{
margin-top: 0;
}
.mui-table h4{
line-height: 21px;
font-weight: 500;
}
.mui-table .oa-icon{
position: absolute;
right:0;
bottom: 0;
}
.mui-table .oa-icon-star-filled{
color:#f14e41;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">三行列表</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-10">
<h4 class="mui-ellipsis">信息化推进办公室张彦合同付款信息化</h4>
<h5>申请人:李四</h5>
<p class="mui-h6 mui-ellipsis">Hi李明明申请交行信息卡100元等你拿李明明申请交行信息卡100元等你拿</p>
</div>
<div class="mui-table-cell mui-col-xs-2 mui-text-right">
<span class="mui-h5">12:25</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-10">
<h4 class="mui-ellipsis-2">信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款</h4>
<h5>申请人:李四</h5>
<p class="mui-h6 mui-ellipsis">Hi李明明申请交行信息卡100元等你拿李明明申请交行信息卡100元等你拿</p>
</div>
<div class="mui-table-cell mui-col-xs-2 mui-text-right">
<span class="mui-h5">12:25</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-10">
<h4 class="mui-ellipsis-2">信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款</h4>
<h5>申请人:李四</h5>
<p class="mui-h6 mui-ellipsis">Hi李明明申请交行信息卡100元等你拿李明明申请交行信息卡100元等你拿</p>
</div>
<div class="mui-table-cell mui-col-xs-2 mui-text-right">
<span class="mui-h5">12:25</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-10">
<h4 class="mui-ellipsis-2">信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款</h4>
<h5>申请人:李四</h5>
<p class="mui-h6 mui-ellipsis">Hi李明明申请交行信息卡100元等你拿李明明申请交行信息卡100元等你拿</p>
</div>
<div class="mui-table-cell mui-col-xs-2 mui-text-right">
<span class="mui-h5">12:25</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-10">
<h4 class="mui-ellipsis-2">信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款</h4>
<h5>申请人:李四</h5>
<p class="mui-h6 mui-ellipsis">Hi李明明申请交行信息卡100元等你拿李明明申请交行信息卡100元等你拿</p>
</div>
<div class="mui-table-cell mui-col-xs-2 mui-text-right">
<span class="mui-h5">12:25</span>
</div>
</div>
</li>
</ul>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script>
mui.init({
swipeBack:true //启用右滑关闭功能
});
</script>
</html>