1 Star 0 Fork 0

duyacode / easyExample

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
page.html 12.55 KB
一键复制 编辑 原始数据 按行查看 历史
duyacode 提交于 2018-08-06 18:29 . 简单的h5例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>静态页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="./css/page.css" />
</head>
<body style="width: 1920px">
<!-- 分三部分 搜索栏 数据展示区域 分页区域-->
<div class="contains">
<!-- 搜索栏 -->
<div class="searchArea">
<div class="searchTitle title">
<!-- 搜索图标 -->
<div class="leftArea">
<img src="./images/search.png"/>
</div>
<div class="titleText">筛选查询</div>
<!-- 收起筛选 -->
<div class="screen" id="pull" data-mark="1">
<div class="imgArea">
<img src="./images/arrowOn.png"/>
</div>
<div class="collapseScreening">收起筛选</div>
</div>
<!-- 查询按钮 -->
<div class="btn_search">
<button>查询结果</button>
</div>
</div>
<!-- 正文 -->
<div class="searchContent" id="searchAllContent">
<label for="buyer" class="col15" >
<span class="inputName">采购商名称:</span>
<select id="buyer" class="selectStyle">
<option value="suning">苏宁</option>
<option value="ali">阿里</option>
</select>
</label>
<label for="fixedAmount" class="col15">
<span class="inputName">固定额度初审结果:</span>
<select id="buyer" class="selectStyle">
<option value="select">已对帐</option>
<option value="unSelect">未对账</option>
</select>
</label>
<label for="temporaryLimit" class="col15">
<span class="inputName">临时额度初审结果:</span>
<select id="buyer" class="selectStyle">
<option value="select">已对帐</option>
<option value="unSelect">未对账</option>
</select>
</label>
</div>
</div>
<!-- 数据展示区域 -->
<div class="dataArea">
<div class="searchTitle title">
<!-- 搜索图标 -->
<div class="leftArea">
<img src="./images/tab_classification.png"/>
</div>
<div class="dataText">数据列表</div>
<!-- 显示条数 -->
<div class="page_Num">
<select id="dataNumber" class="dataSeletStyle">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<!-- 排序方式 -->
<div class="sort_way">
<select id="sortData" class="dataSeletStyle">
<option value="ascending">升序</option>
<option value="descending">降序</option>
</select>
</div>
</div>
<!-- 详细数据 -->
<div class="dataDetail">
<div class="dataCheckbox">
<label for="fixedAmount">
<input type="checkbox" id="allCheckSelect">
</label>
</div>
<div class="data">
<table width="100%" cellspacing="0" class="enterpriseTb">
<thead>
<tr>
<th width="13%" class="tdStyle">企业名称</th>
<th width="13%" class="tdStyle">联系电话</th>
<th width="13%" class="tdStyle">法人姓名</th>
<th width="16%" class="tdStyle">法人身份证</th>
<th width="13%" class="tdStyle">经营品类</th>
<th width="22%" class="tdStyle">评分级别</th>
<th width="10%" class="tdStyle">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td width="13%" class="tdStyle">盛世金陵</td>
<td width="13%" class="tdStyle">1850000000</td>
<td width="13%" class="tdStyle"></td>
<td width="16%" class="tdStyle"></td>
<td width="13%" class="tdStyle"></td>
<td class="tdStyle score">
<div class="scoreImg">
<img src="./images/heart.png"/>
<img src="./images/heart.png"/>
<img src="./images/heart.png"/>
<img src="./images/heart.png"/>
<img src="./images/heart.png"/>
</div>
<div class="scoreNum">92分</div>
</td>
<td width="10%" class="tdStyle curStyle">查看详情</td>
</tr>
<tr class="tableTitle">
<td colspan="2" class="tdStyle">固定审批额度</td>
<td colspan="2" class="tdStyle">临时额度</td>
<td colspan="2" class="tdStyle">可用额度</td>
<td class="tdStyle">总额度</td>
</tr>
<tr>
<td colspan="2" class="tdStyle">120000</td>
<td colspan="2" class="tdStyle">20000</td>
<td colspan="2" class="tdStyle">7000</td>
<td class="tdStyle">14000</td>
</tr>
</tbody>
</table>
<table width="100%" class="enterpriseTb" cellspacing="0">
<tr class="tableTitle">
<td width="15%" rowspan="2" class="tdStyle">固定审批额度</td>
<td width="10%" class="tdStyle">申请额度</td>
<td width="10%" class="tdStyle">放款额度</td>
<td width="15%" class="tdStyle">外派风控初审</td>
<td width="15%" class="tdStyle">总部风控初审</td>
<td width="15%" class="tdStyle">评审中心初审</td>
<td width="10%" class="tdStyle">放款状态</td>
<td width="10%" class="tdStyle">操作</td>
</tr>
<tr>
<td width="10%" class="tdStyle">1500000</td>
<td width="10%" class="tdStyle">120000</td>
<td width="15%" class="tdStyle">待审核</td>
<td width="15%" class="tdStyle">待审核</td>
<td width="15%" class="tdStyle">待审核</td>
<td width="10%" class="tdStyle">待放款</td>
<td width="10%" class="tdStyle colorTip curStyle">
<div style="height:20px">审批</div>
<div style="height:30px">审批记录</div>
</td>
</tr>
</table>
<table width="100%" class="enterpriseTb" cellspacing="0">
<tr class="tableTitle">
<td width="15%" rowspan="2" class="tdStyle">固定审批额度</td>
<td width="10%" class="tdStyle">申请额度</td>
<td width="10%" class="tdStyle">放款额度</td>
<td width="15%" class="tdStyle">外派风控初审</td>
<td width="15%" class="tdStyle">总部风控初审</td>
<td width="15%" class="tdStyle">评审中心初审</td>
<td width="10%" class="tdStyle">放款状态</td>
<td width="10%" class="tdStyle">操作</td>
</tr>
<tr>
<td width="10%" class="tdStyle">1500000</td>
<td width="10%" class="tdStyle">120000</td>
<td width="15%" class="tdStyle">待审核</td>
<td width="15%" class="tdStyle">待审核</td>
<td width="15%" class="tdStyle">待审核</td>
<td width="10%" class="tdStyle">待放款</td>
<td width="10%" class="tdStyle curStyle">查看详情</td>
</tr>
</table>
</div>
<!-- 试试看flex布局 -->
</div>
</div>
<!-- 分页区域 -->
<div class="pageArea">
<div class="allAheckbox">
<label for="allCheck">
<input type="checkbox" id="allCheckSelect"><span style="visibility: hidden;">.</span>全选
</label>
</div>
<div class="operationArea">
<label for="operation">
<select id="operation">
<option value="batchOperation">批量操作</option>
</select>
</label>
</div>
<div class="btn_batch">
<button id="batch_btn">确定</button>
</div>
<!-- 分页具体区域 -->
<div class="pageDetail">
<span class="pageTip"><span style="color: red">10</span><span style="color: red">100</span>条数据</span>
<span class="likeList">
首页
</span>
<span class="likeList arrowLi">
<
</span>
<ul style="display: inline-block;">
<li class="activeLi">1</li>
<li>2</li>
<li>...</li>
<li>5</li>
<li>6</li>
<li>...</li>
</ul>
<span class="likeList arrowLi">
>
</span>
<span class="likeList listRight">
末页
</span>
<span class="pageTip">共50页&nbsp;跳转至</span>
<div class="toPage">
<label for="toPageNum">
<input type="text" id="toPageNum" value="1" style="text-align: center">
</label>
</div>
<span></span>
<span class="ok_btn">确定</span>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="./js/page.js"></script>
<script src="./js/ArrayUtil.js"></script>
<script type="text/javascript">
var array1 = [{
name: "Jimmery",
age: "22",
id: 1
}, {
name: "zou",
age: "25",
id: 2
}];
var array2 = [{
name: "Jimmery",
age: "32",
id: 1
}, {
name: "zou",
age: "25",
id: 2
}];
//第三个参数 传一个唯一标记值
var array3 = ArrayUtil.updateList(array1, array2, 'id');
</script>
</body>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
HTML
1
https://gitee.com/Jimmery/easyExample.git
git@gitee.com:Jimmery/easyExample.git
Jimmery
easyExample
easyExample
master

搜索帮助

344bd9b3 5694891 D2dac590 5694891