<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>报表</title>
<style>
#audit {
margin-top: 20px;
}
thead > tr {
border: 1px solid #cc0000;
}
.filter {
margin-left: 20px;
}
.status-picker {
display: inline-block;
}
.status-picker select {
border-radius: 5px;
width: 180px;
float: left;
height: 37px;
margin-bottom: -13px;
border: 1px solid skyblue;
padding: 0 10px;
margin-right: 20px;
}
.container {
margin-top: 30px;
}
.jtp {
margin-top: 10px;
display: inline-block;
}
.jtp .ui.icon.input input {
padding: 0.5em !important;
width: 32px;
}
.modal .content {
display: flex !important;
justify-content: center;
align-items: center;
}
.button {
text-align: center;
}
.container {
margin-left: 20px;
}
.first {
background: #F9FAFB;
}
</style>
<link rel="stylesheet" href="./css/sear.css"/>
<script src="./js/jquery-3.1.js"></script>
<script src="./js/sear.js"></script>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="audit">
<div class="filter">
<div class="status-picker">
<select name="aKey" type="hidden" v-model.lazy="aKey">
<option value="">所有报表</option>
<option value="0">固定报表</option>
<option value="1">银行指数</option>
<option value="2">NBA</option>
<option value="3">CBA</option>
</select>
</div>
<div class="ui input icon">
<input type="text" v-model="fKey" placeholder="请输入您要查询的内容"/>
</div>
</div>
<div class="container">
<table class="ui compact celled table">
<thead>
<tr>
<th width="20%" class="first">id</th>
<th width="30%">报表类型</th>
<th width="50%">报表名称</th>
</tr>
</thead>
<tbody>
<tr v-for="user in filteredUsers">
<td>{{ user.id }}</td>
<td>
<button class="ui button primary" v-if="user.audit==0">固定报表</button>
<button class="ui button green" v-if="user.audit==1">银行指数</button>
<button class="ui button red" v-if="user.audit==2">NBA</button>
<button class="ui button grey" v-if="user.audit==3">CBA</button>
</td>
<td>
<a :href="user.url">{{ user.name }}</a>
</td>
</tr>
</tbody>
<tfoot class="full-width">
<tr>
<th colspan="4">
<button @click="turnPage(-1)">
上一页
</button>
<span>当前第 {{ currentPage+1 }} 页,共 {{ totalPage }} 页</span>
<button @click="turnPage(1)">
下一页
</button>
<div class="jtp">
<span>跳转到第 </span>
<div class="ui input icon">
<input type="text" v-model="jPage" @keyup.enter="jumpToPage">
</div>
<span> 页</span>
</div>
</th>
</tr>
</tfoot>
</table>
<div class="ui basic test modal">
<div class="ui items">
<div class="item">
<div class="content" style="background-color: #fff">
<a class="header">{{ selectedUser.name }}</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var mockUsers = [
{
name: '贷款余额产品期限结构表',
url: 'https://yongshi.net',
id: 1,
audit: 0
},
{
name: '贷款发生额产品期限结构表',
url: 'https://yongshi.net',
id: 2,
audit: 0
},
{
name: '贷款余额利率是否固定产品期限结构表',
url: 'https://yongshi.net',
id: 3,
audit: 0
},
{
name: '贷款发生额利率是否固定期限结构表',
url: 'https://yongshi.net',
id: 4,
audit: 0
},
{
name: '款余额企业规模期限结构表',
url: 'https://yongshi.net',
id: 5,
audit: 0
},
{
name: '贷款发生额企业规模期限结构表',
url: 'https://yongshi.net',
id: 6,
audit: 0
},
{
name: '存款余额产品期限结构表',
url: 'https://yongshi.net',
id: 7,
audit: 0
},
{
name: '存款发生额产品期限结构表',
url: 'https://yongshi.net',
id: 8,
audit: 0
},
{
name: '存款余额分额度期限结构表',
url: 'https://yongshi.net',
id: 9,
audit: 0
},
{
name: '存款发生额分额度期限结构表',
id: 10,
url: 'https://yongshi.net',
audit: 0
},
{
name: '存款余额',
url: 'https://yongshi.net',
id: 11,
audit: 0
},
{
name: '存款发生额产品额度结构表',
url: 'https://yongshi.net',
id: 12,
audit: 0
},
{
name: '贷款余额担保方式期限结构表',
url: 'http://denglu.net',
id: 13,
audit: 0
},
{
name: '贷款发生额担保方式期限结构表',
url: 'http://denglu.net',
id: 14,
audit: 0
},
{
name: '存、贷款加权平均利率及利差时序表',
url: 'http://denglu.net',
id: 15,
audit: 0
},
{
name: '贷款余额分产品统计表',
url: 'http://denglu.net',
id: 16,
audit: 0
},
{
name: '贷款发生额分产品统计表',
url: 'http://denglu.net',
id: 17,
audit: 0
},
{
name: '贷款余额分期限统计表',
url: 'http://denglu.net',
id: 18,
audit: 0
},
{
name: '贷款发生额分期限统计表 ',
url: 'http://denglu.net',
id: 19,
audit: 0
},
{
name: '贷款余额分企业规模统计表',
url: 'http://denglu.net',
id: 20,
audit: 0
},
{
name: '贷款发生额分企业规模统计表 ',
url: 'http://denglu.net',
id: 21,
audit: 0
},
//景气固定报表
{
name: '城镇',
url: 'https://yongshi.net',
id: 1,
audit: 1
},
{
name: '城镇储户',
url: 'https://yongshi.net',
id: 2,
audit: 1
},
{
name: '城镇银行',
url: 'https://yongshi.net',
id: 3,
audit: 1
},
{
table.zip （55个子文件） 
table .git info 
exclude 240B index 456B objects ff 955ca85dae689997e10f901c32ba06469bf60e 34KB 73 5da02803c72da8691b52604bf740c752d11a44 64KB 9a b9ae3089bba2058a78f4438edcc88c384b82d1 4KB a7 481f7b44251c58724c0e8ae3b3b4416f76b841 84KB 6b e082c389feb4e19bf0739a0e7842a66d349311 115KB HEAD 23B config 130B hooks pre-applypatch.sample 424B pre-push.sample 1KB commit-msg.sample 896B pre-commit.sample 2KB applypatch-msg.sample 478B prepare-commit-msg.sample 1KB update.sample 4KB post-update.sample 189B pre-rebase.sample 5KB pre-receive.sample 544B description 73B tables 
audit_user.html 14KB js jquery-3.1.js 85KB sear.js 270KB vue.js 197KB .git logs HEAD 158B refs heads master 158B remotes origin master 143B info exclude 240B index 512B COMMIT_EDITMSG 6B objects ff 955ca85dae689997e10f901c32ba06469bf60e 34KB 4b 2fc0ba8f028aaf4c0367115bbab2a1b039bbcf 115B 02 a34f1fa8ac249b93062652a2d19fcf640ad45e 53B 73 5da02803c72da8691b52604bf740c752d11a44 64KB 9a b9ae3089bba2058a78f4438edcc88c384b82d1 4KB a7 481f7b44251c58724c0e8ae3b3b4416f76b841 84KB 09 751783420df029feff4f496f7aca328cb9abd9 117B 6b e082c389feb4e19bf0739a0e7842a66d349311 115KB 20 c59a5daab41b641a39901450b34570a6b5a9a1 134B HEAD 23B config 324B refs heads master 41B remotes origin master 41B hooks pre-applypatch.sample 424B pre-push.sample 1KB commit-msg.sample 896B pre-commit.sample 2KB applypatch-msg.sample 478B prepare-commit-msg.sample 1KB update.sample 4KB post-update.sample 189B pre-rebase.sample 5KB pre-receive.sample 544B description 73B css sear.css 532KB资源评论
前端教程
- 粉丝: 7
- 资源: 3
会员权益专享
最新资源
- 关于node.js初体验. 如何搭建并完成一个简单的后台, 配合mongodb数据库, 实现信息的增删改查功能
- 第3章课后编程题答案(1).py
- 消费者行为分析-精准营销项目数据集
- update.jsp
- 关于node.js初体验. 如何搭建并完成一个简单的后台, 配合mongodb数据库, 实现信息的增删改查功能
- feimajsq_baidu_1.8.8.apk
- 个人免签支付源码下载-服务监控模块强大后台
- igb-uio源码，igb-uio源码，igb-uio源码
- 纵横支付Q币NDF抖音虎牙YY陪玩支付系统/游戏支付通道/腾讯游戏支付通道/多功能支付系统
- 3 数学4班 李炜健 sy32.py. 使用turtle绘制一个包含九个同心圆的靶盘.py
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
