UNPKG

9.17 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>css_text_jcloud_ui_module</title>
9 <link href="lib/common.css" rel="stylesheet">
10 <link href="lib/ui.css" rel="stylesheet">
11 <link href="lib/user.css" rel="stylesheet">
12 <link rel="stylesheet" href="node_modules/element-ui/lib/theme-default/index.css">
13 <link rel="stylesheet" href="dist/index.css">
14 <script src="https://cdn.bootcss.com/vue/2.3.3/vue.js"></script>
15 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
16 <style>
17 .p50 {
18 width: 50px;
19 height: 50px;
20 }
21 </style>
22</head>
23
24<body>
25 <div id="app">
26 <div class="p50"></div>
27 <!-- 主内容区begin -->
28 <div class="mainCon">
29 <div class="indexTit">
30 <h2 class="fl">
31 <a href="#" class="goback"></a>代金券管理<i class="i42"></i><span class="f14">使用明细</span></h2>
32 </div>
33
34 <div class="innerCon">
35
36 <div class="conBox">
37
38 <el-form :inline="true" :rules="rules" ref="searchForm" :model="searchForm" class="demo-form-inline">
39
40 <el-form-item label="发票状态">
41 <el-select placeholder="发票状态">
42 <el-option label="已申请" value="1"></el-option>
43 <el-option label="处理中" value="2"></el-option>
44 <el-option label="已开票" value="3"></el-option>
45 <el-option label="已邮寄" value="4"></el-option>
46 <el-option label="已驳回" value="5"></el-option>
47 <el-option label="已作废" value="6"></el-option>
48 <el-option label="已取消" value="7"></el-option>
49 </el-select>
50 </el-form-item>
51
52 <el-form-item label="选择时间">
53 <el-col :span="11">
54 <el-date-picker type="date" placeholder="选择开始日期" style="width: 100%;"></el-date-picker>
55 </el-col>
56 <el-col class="line" :span="2">&nbsp;至&nbsp;</el-col>
57 <el-col :span="11">
58 <el-form-item>
59 <el-date-picker type="date" placeholder="选择结束日期" style="width: 100%;"></el-date-picker>
60 </el-form-item>
61 </el-col>
62 </el-form-item>
63 <el-form-item>
64 <el-button type="primary">查询</el-button>
65 </el-form-item>
66
67
68
69 </el-form>
70
71 <div class="btnDiv">
72 <label class="form-tablelabel">交易类型：</label>
73 <div class="select-box form-w120">
74 <div class="dropdown-btn"><span class="select-value">全部</span><i class="arr"></i></div>
75 <div class="dropdown-list" id="refresh">
76 <ul>
77 <li><a href="javascript:;">发放</a></li>
78 <li><a href="javascript:;">支付</a></li>
79 <li><a href="javascript:;">绑定</a></li>
80 <li><a href="javascript:;">过期</a></li>
81 <li><a href="javascript:;">返回</a></li>
82 <li><a href="javascript:;">退款</a></li>
83 </ul>
84 </div>
85 </div>
86
87
88 <label class="form-tablelabel">交易时间：</label>
89
90 <input type="text" class="inputMode dateInput ml0">
91
92 <a href="#" class="greenBtn_v2 ml10">查询</a>
93
94
95
96 </div>
97 <table class="listTable el-table">
98 <colgroup>
99 <col width="20%">
100 <col width="20%">
101 <col width="10%">
102 <col width="12%">
103 <col width="12%">
104 <col width="12%">
105 <col>
106 </colgroup>
107 <thead>
108 <tr class="cell">
109 <th>交易编号</th>
110 <th>代金券编号</th>
111 <th>交易类型</th>
112 <th>收入（元）</th>
113 <th>支出（元）</th>
114 <th>余额（元）</th>
115 <th>交易时间</th>
116 </tr>
117 </thead>
118 <tbody>
119 <tr>
120 <td>2016110704235599116</td>
121 <td>8GTYIfA</td>
122 <td>支付</td>
123 <td>200，000.00</td>
124 <td>200，000.00</td>
125 <td>200，000.00</td>
126 <td>2016-12-11 00:00:00</td>
127 </tr>
128
129 </tbody>
130 </table>
131 <div class="botDiv cl">
132 <template>
133 <div class="block">
134 <span class="demonstration">完整功能</span>
135 <el-pagination
136
137 :current-page="1"
138 :page-sizes="[100, 200, 300, 400]"
139 :page-size="100"
140 layout="total, sizes, prev, pager, next, jumper"
141 :total="400">
142 </el-pagination>
143 </div>
144</template>
145 <div class="pages cl fr">
146 <p class="fr">项 <a href="#" class="firstpage no"><i></i></a><a href="#" class="prev no">
147 &lt;</a><span class="current">1</span><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#" class="next">&gt;</a><a href="#" class="lastpage"><i></i></a> 跳转到
148 <input type="text" class="pageinput">页<a href="#" class="gobutton">GO</a></p>
149 <div class="new-sel-box">
150 <div class="sel-value">10</div>
151 <select class="new-select">
152 <option>10</option>
153 <option>20</option>
154 <option>50</option>
155 </select>
156 </div>
157 <p class="txt">共100项，每页显示</p>
158 </div>
159 </div>
160 </div>
161 </div>
162 </div>
163 <!-- 主内容区end -->
164 </div>
165</body>
166<script>
167 var app = new Vue({
168 el: "#app",
169 data: {
170 ruleForm: {
171 name: '',
172 region: '',
173 date1: '',
174 date2: '',
175 delivery: false,
176 type: [],
177 resource: '',
178 desc: ''
179 },
180 rules: {
181 name: [{
182 required: true,
183 message: '请输入活动名称',
184 trigger: 'blur'
185 }, {
186 min: 3,
187 max: 5,
188 message: '长度在 3 到 5 个字符',
189 trigger: 'blur'
190 }],
191 region: [{
192 required: true,
193 message: '请选择活动区域',
194 trigger: 'change'
195 }],
196 date1: [{
197 type: 'date',
198 required: true,
199 message: '请选择日期',
200 trigger: 'change'
201 }],
202 date2: [{
203 type: 'date',
204 required: true,
205 message: '请选择时间',
206 trigger: 'change'
207 }],
208 type: [{
209 type: 'array',
210 required: true,
211 message: '请至少选择一个活动性质',
212 trigger: 'change'
213 }],
214 resource: [{
215 required: true,
216 message: '请选择活动资源',
217 trigger: 'change'
218 }],
219 desc: [{
220 required: true,
221 message: '请填写活动形式',
222 trigger: 'blur'
223 }]
224 }
225 }
226 })
227</script>
228
229</html>
\No newline at end of file