|
@@ -1,140 +1,54 @@
|
|
|
<div class="z-form-wrap" name="demoForm1">
|
|
|
- <div class="z-form-row z-subtitle text-info z-border-title">
|
|
|
- <strong>基础信息A</strong>
|
|
|
+ <div class="form-wrap-title">
|
|
|
+ <i class="icon"></i> 基础信息A
|
|
|
</div>
|
|
|
<div class="z-form-row">
|
|
|
- <div class="z-form-group z-col-50">
|
|
|
- <div class="z-form-label z-col-30">文本只读</div>
|
|
|
- <div class="z-form-control z-col-70">
|
|
|
+ <div class="form-group">
|
|
|
+ <div class="form-label">文本只读</div>
|
|
|
+ <div class="form-item">
|
|
|
<div class="z-comp-input" name="demoForm1$field1">
|
|
|
<input type="text" value="张三">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="z-form-group z-col-50">
|
|
|
- <div class="z-form-label z-col-30">文本</div>
|
|
|
- <div class="z-form-control z-col-70">
|
|
|
- <div class="z-comp-input" name="demoForm1$field2">
|
|
|
- <input type="text" value="张三">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="z-form-row">
|
|
|
- <div class="z-form-group z-col-50">
|
|
|
- <div class="z-form-label z-col-30">单选只读</div>
|
|
|
- <div class="z-form-control z-col-70">
|
|
|
- <div class="z-comp-radio" name="demoForm1$field3">
|
|
|
- <div class="z-radio-item checked" value="1"><i></i>男</div>
|
|
|
- <div class="z-radio-item" value="2"><i></i>女</div>
|
|
|
+ <div class="form-group">
|
|
|
+ <div class="form-label">下拉框</div>
|
|
|
+ <div class="form-item">
|
|
|
+ <div class="z-comp-select" name="" value="1"
|
|
|
+ data='[{"value":1,"text":"下拉框"},{"value":2,"text":"下拉搜索"},{"value":3,"text":"下拉树"}]'>
|
|
|
+ <div class="z-inputselect-bar">
|
|
|
+ <span>下拉框</span><i></i>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="z-form-group z-col-50">
|
|
|
- <div class="z-form-label z-col-30">单选</div>
|
|
|
- <div class="z-form-control z-col-70">
|
|
|
- <div class="z-comp-radio" name="demoForm1$field4">
|
|
|
- <div class="z-radio-item checked" value="0"><i></i>男</div>
|
|
|
- <div class="z-radio-item" value="1"><i></i>女</div>
|
|
|
+ <div class="form-group">
|
|
|
+ <div class="form-label">文本框</div>
|
|
|
+ <div class="form-item">
|
|
|
+ <div class="z-comp-textarea z-readonly" name="demoForm1$field10">
|
|
|
+ <textarea></textarea>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="z-form-row">
|
|
|
- <div class="z-form-group z-col-50">
|
|
|
- <div class="z-form-label z-col-30">数字只读</div>
|
|
|
- <div class="z-form-control z-col-70">
|
|
|
+ <div class="form-group">
|
|
|
+ <div class="form-label">数字只读</div>
|
|
|
+ <div class="form-item">
|
|
|
<div class="z-comp-input" name="demoForm1$field5">
|
|
|
<input type="number" value="25">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="z-form-group z-col-50">
|
|
|
- <div class="z-form-label z-col-30">数字</div>
|
|
|
- <div class="z-form-control z-col-70">
|
|
|
- <div class="z-comp-input" name="demoForm1$field6">
|
|
|
- <input type="number" value="25">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="z-form-row">
|
|
|
- <div class="z-form-group z-col-50">
|
|
|
- <div class="z-form-label z-col-30">复选</div>
|
|
|
- <div class="z-form-control z-col-70">
|
|
|
- <div class="z-comp-checkbox" name="">
|
|
|
- <div class="z-checkbox-item checked"><i></i>选demoForm1$field7项1</div>
|
|
|
- </div>
|
|
|
- <div class="z-comp-checkbox" name="demoForm1$field7">
|
|
|
- <div class="z-checkbox-item"><i></i>选项2</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="z-form-row">
|
|
|
- <div class="z-form-group z-col-50">
|
|
|
- <div class="z-form-label z-col-30">日期</div>
|
|
|
- <div class="z-form-control z-col-70">
|
|
|
+ <div class="form-group">
|
|
|
+ <div class="form-label">日期</div>
|
|
|
+ <div class="form-item">
|
|
|
<div class="z-comp-date" name="demoForm1$field8">
|
|
|
<input type="text" value="2015-05-03">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="z-form-group z-col-50">
|
|
|
- <div class="z-form-label z-col-30">日期+时间</div>
|
|
|
- <div class="z-form-control z-col-70">
|
|
|
- <div class="z-comp-datetime" name="demoForm1$field9">
|
|
|
- <input type="text" value="2015-05-03 05:03:05">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="z-form-row">
|
|
|
- <div class="z-form-label z-col-15">文本框</div>
|
|
|
- <div class="z-form-control z-col-85">
|
|
|
- <div class="z-comp-textarea" name="demoForm1$field10">
|
|
|
- <textarea></textarea>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="z-form-row">
|
|
|
- <div class="z-form-group z-col-50">
|
|
|
- <div class="z-form-label z-col-30">输入框</div>
|
|
|
- <div class="z-form-control z-col-70">
|
|
|
- <div class="z-comp-input" name="demoForm1$field11">
|
|
|
- <div class="z-inputselect-bar">
|
|
|
- <input type="text" placeholder="输入框">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="z-form-group z-col-50">
|
|
|
- <div class="z-form-label z-col-30">搜索条</div>
|
|
|
- <div class="z-form-control z-col-70">
|
|
|
- <div class="z-comp-input" name="demoForm1$field12">
|
|
|
- <div class="z-inputselect-bar">
|
|
|
- <input type="text" placeholder="搜索条"><i></i>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="z-form-row">
|
|
|
- <div class="z-form-group z-col-50">
|
|
|
- <div class="z-form-label z-col-30">文本搜索</div>
|
|
|
- <div class="z-form-control z-col-70">
|
|
|
- <div class="z-comp-inputsearch" name="demoForm1$field13"
|
|
|
- data='[{"value":"浙江"},{"value":"江苏"},{"value":"山东"}]'>
|
|
|
- <div class="z-inputselect-bar">
|
|
|
- <input type="text" placeholder="文本搜索"><i></i>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="z-form-group z-col-50">
|
|
|
- <div class="z-form-label z-col-30">文本下拉</div>
|
|
|
- <div class="z-form-control z-col-70">
|
|
|
+ <div class="form-group z-form-group">
|
|
|
+ <div class="form-label">文本下拉</div>
|
|
|
+ <div class="form-item z-form-control">
|
|
|
<div class="z-comp-inputselect" name="demoForm1$field14"
|
|
|
data='[{"value":"浙江"},{"value":"江苏"},{"value":"山东"}]'>
|
|
|
<div class="z-inputselect-bar">
|
|
@@ -143,30 +57,138 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="z-form-row">
|
|
|
- <div class="z-form-group z-col-50">
|
|
|
- <div class="z-form-label z-col-30">下拉框</div>
|
|
|
- <div class="z-form-control z-col-70">
|
|
|
- <div class="z-comp-select" name="" value="1"
|
|
|
- data='[{"value":1,"text":"下拉框"},{"value":2,"text":"下拉搜索"},{"value":3,"text":"下拉树"}]'>
|
|
|
- <div class="z-inputselect-bar">
|
|
|
- <span>下拉框</span><i></i>
|
|
|
- </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <div class="form-label">复选</div>
|
|
|
+ <div class="form-item">
|
|
|
+ <div class="z-comp-checkbox" name="">
|
|
|
+ <div class="z-checkbox-item checked"><i></i>选demoForm1$field7项1</div>
|
|
|
+ </div>
|
|
|
+ <div class="z-comp-checkbox" name="demoForm1$field7">
|
|
|
+ <div class="z-checkbox-item"><i></i>选项2</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="z-form-group z-col-50">
|
|
|
- <div class="z-form-label z-col-30">下拉搜索</div>
|
|
|
- <div class="z-form-control z-col-70">
|
|
|
- <div class="z-comp-selectsearch" name="" value="2"
|
|
|
- data='[{"value":1,"text":"下拉框"},{"value":2,"text":"下拉搜索"},{"value":3,"text":"下拉树"}]'>
|
|
|
- <div class="z-inputselect-bar">
|
|
|
- <span>下拉搜索</span><i></i>
|
|
|
- </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <div class="form-label">单选只读</div>
|
|
|
+ <div class="form-item">
|
|
|
+ <div class="z-comp-radio" name="demoForm1$field3">
|
|
|
+ <div class="z-radio-item checked" value="1"><i></i>男</div>
|
|
|
+ <div class="z-radio-item" value="2"><i></i>女</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div class="form-wrap-title">
|
|
|
+ <i class="icon"></i> 基础信息A
|
|
|
+ </div>
|
|
|
+ <div class="table-wrap">
|
|
|
+ <button type="button" class="addTableTrHandle">新增1</button>
|
|
|
+ <table>
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th>序号</th>
|
|
|
+ <th>起始时间</th>
|
|
|
+ <th>截止时间</th>
|
|
|
+ <th>备注</th>
|
|
|
+ <th>操作</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody class="table-wrap-tbody">
|
|
|
+ <tr>
|
|
|
+ <td>1</td>
|
|
|
+ <td>
|
|
|
+ <div class="z-comp-date" name="demoForm1$field8">
|
|
|
+ <input type="text" value="2015-05-03">
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <div class="z-comp-date" name="demoForm1$field8">
|
|
|
+ <input type="text" value="2015-05-03">
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
-<#--<script type="text/javascript" src="/WorkFlow/js/form1.js"></script>-->
|
|
|
+<style type="text/css">
|
|
|
+ .form-wrap-title {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #2D333C;
|
|
|
+ font-weight: bold;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ .form-wrap-title>i {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ margin-right: 5px;
|
|
|
+ background: url("./imgs/form-wrap-title-icon.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .form-group {
|
|
|
+ }
|
|
|
+ .form-label {
|
|
|
+ color: #404956;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ .form-item {
|
|
|
+ margin: 10px 0px;
|
|
|
+ }
|
|
|
+ .form-group .form-label {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .form-item input[type=text],
|
|
|
+ .form-item input[type=number],
|
|
|
+ .form-item textarea,
|
|
|
+ .form-item .z-comp-input,
|
|
|
+ .form-item .z-radio-item,
|
|
|
+ .form-item .z-comp-inputsearch,
|
|
|
+ .form-item .z-comp-inputselect,
|
|
|
+ .form-item .z-comp-select,
|
|
|
+ .form-item .z-comp-select .z-inputselect-bar>span,
|
|
|
+ .form-item .z-comp-selectsearch,
|
|
|
+ .form-item .z-comp-selecttree,
|
|
|
+ .form-item .z-checkbox-item,
|
|
|
+ .form-item .z-comp-textarea,
|
|
|
+ .form-item .z-selecttree {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #121518;
|
|
|
+ }
|
|
|
+ .form-item .z-readonly,
|
|
|
+ .form-item .z-readonly input,
|
|
|
+ .form-item .z-readonly textarea {
|
|
|
+ background: #F5F5F5;
|
|
|
+ }
|
|
|
+ /** 表格样式 **/
|
|
|
+ .table-wrap table {
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+ }
|
|
|
+ .table-wrap thead {
|
|
|
+ background: #F2F4F8;
|
|
|
+ }
|
|
|
+ .table-wrap tr {
|
|
|
+ border: 1px solid #E8EBF1;
|
|
|
+ }
|
|
|
+ .table-wrap th {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #505A69;
|
|
|
+ }
|
|
|
+ .table-wrap table th,
|
|
|
+ .table-wrap table td {
|
|
|
+ padding: 5px 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-wrap table td input {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+ <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.1.2/jquery.min.js"
|
|
|
+ type="application/javascript"></script>
|
|
|
+<script type="text/javascript" src="/WorkFlow/js/form1.js"></script>
|