Bladeren bron

修改增加数字的交互

outaozhen 8 jaren geleden
bovenliggende
commit
f954f988bc
3 gewijzigde bestanden met toevoegingen van 155 en 8 verwijderingen
  1. 42 2
      css/sui/global.css
  2. 96 6
      invoiceAdd.html
  3. 17 0
      js/sui/global.js

+ 42 - 2
css/sui/global.css

@@ -243,12 +243,52 @@
   border-radius: 0 !important;
   top:0 !important;
 }
-#in-display{
+
+.item-input-title{
+  float:left;
+}
+.gw_num{
+  margin:0 0 0 15px;
   display:inline-block;
+  border: 1px solid #dbdbdb;
+  width: 90px;
+  height:26px;
+  line-height: 26px;
+  overflow: hidden;
+}
+.gw_num em{
+  display: block;
+  height: 26px;
+  width: 26px;
+  float: left;
+  color: #7A7979;
+  border-right: 1px solid #dbdbdb;
+  text-align: center;
+  cursor: pointer;
+  font-style:normal;
+}
+.gw_num .num{
+  display: block !important;
+  float: left !important;
+  text-align: center !important;
+  width: 32px !important;
+  font-style: normal !important;
+  font-size: 14px !important;
+  height:24px !important;
+  line-height: 24px !important;
+  border: 0 !important;
+}
+.gw_num em.add{
+  float: right;
+  border-right: 0;
+  border-left: 1px solid #dbdbdb;
 }
 .ml-4{
   margin-left: 1rem;
 }
+/*#in-display{
+  display:inline-block;
+}
 .text-number{
   margin:0 15px;
   width:1.35rem;
@@ -258,4 +298,4 @@
   border:1px solid #ddd;
   border-radius: 5px;
   font-size: 0.8rem;
-}
+}*/

+ 96 - 6
invoiceAdd.html

@@ -62,6 +62,78 @@
                   <li>
                     <div class="item-content align-top">
                       <div class="item-inner">
+                        <div class="item-title label">邮寄物品</div>
+                        <div class="item-input">
+                          <label class="label-checkbox item-content">
+                            <input type="checkbox" name="my-checkbox">
+                            <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
+                            <div class="item-inner">
+                              <div class="item-subtitle">
+                                <span class="item-input-title">软件锁</span>
+                                <div class="gw_num">
+                                  <em class="jian">-</em>
+                                  <input type="text" value="1" class="num"/>
+                                  <em class="add">+</em>
+                                </div>
+                              </div>
+                            </div>
+                          </label>
+                          <label class="label-checkbox item-content">
+                            <input type="checkbox" name="my-checkbox" checked disabled>
+                            <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
+                            <div class="item-inner">
+                              <div class="item-subtitle">发票<span class="ml-4">1</span></div>
+                            </div>
+                          </label>
+                          <label class="label-checkbox item-content">
+                            <input type="checkbox" name="my-checkbox">
+                            <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
+                            <div class="item-inner">
+                              <div class="item-subtitle">
+                                <span class="item-input-title">合同</span>
+                                <div class="gw_num">
+                                  <em class="jian">-</em>
+                                  <input type="text" value="1" class="num"/>
+                                  <em class="add">+</em>
+                                </div>
+                              </div>
+                            </div>
+                          </label>
+                          <label class="label-checkbox item-content">
+                            <input type="checkbox" name="my-checkbox">
+                            <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
+                            <div class="item-inner">
+                              <div class="item-subtitle">
+                                <span class="item-input-title">说明书</span>
+                                <div class="gw_num">
+                                  <em class="jian">-</em>
+                                  <input type="text" value="1" class="num"/>
+                                  <em class="add">+</em>
+                                </div>
+                              </div>
+                            </div>
+                          </label>
+                          <label class="label-checkbox item-content">
+                            <input type="checkbox" name="my-checkbox">
+                            <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
+                            <div class="item-inner">
+                              <div class="item-subtitle">汇款账单号</div>
+                            </div>
+                          </label>
+                          <label class="label-checkbox item-content">
+                            <input type="checkbox" name="my-checkbox" checked disabled>
+                            <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
+                            <div class="item-inner">
+                              <div class="item-subtitle">备注 <textarea  placeholder="备注信息或其他需要邮寄物品请填写在这,写明数量。"></textarea>
+                            </div>
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                  </li>
+                  <li>
+                    <div class="item-content align-top">
+                      <div class="item-inner">
                         <div class="item-title label">单位名称</div>
                         <div class="item-input">
                           <textarea placeholder="非必填"></textarea>
@@ -296,7 +368,14 @@
                             <input type="checkbox" name="my-checkbox">
                             <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
                             <div class="item-inner">
-                              <div class="item-subtitle">软件锁<button class="button button-dark ml-4" id="in-display">-</button><span class="text-number">1</span><button class="button button-dark" id="in-display">+</button></div>
+                              <div class="item-subtitle">
+                                <span class="item-input-title">软件锁</span>
+                                <div class="gw_num">
+                                  <em class="jian">-</em>
+                                  <input type="text" value="1" class="num"/>
+                                  <em class="add">+</em>
+                                </div>
+                              </div>
                             </div>
                           </label>
                           <label class="label-checkbox item-content">
@@ -310,14 +389,28 @@
                             <input type="checkbox" name="my-checkbox">
                             <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
                             <div class="item-inner">
-                              <div class="item-subtitle">合同<button class="button button-dark ml-4" id="in-display">-</button><span class="text-number">1</span><button class="button button-dark" id="in-display">+</button></div>
+                              <div class="item-subtitle">
+                                <span class="item-input-title">合同</span>
+                                <div class="gw_num">
+                                  <em class="jian">-</em>
+                                  <input type="text" value="1" class="num"/>
+                                  <em class="add">+</em>
+                                </div>
+                              </div>
                             </div>
                           </label>
                           <label class="label-checkbox item-content">
                             <input type="checkbox" name="my-checkbox">
                             <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
                             <div class="item-inner">
-                              <div class="item-subtitle">说明书<button class="button button-dark ml-4" id="in-display">-</button><span class="text-number">1</span><button class="button button-dark" id="in-display">+</button></div>
+                              <div class="item-subtitle">
+                                <span class="item-input-title">说明书</span>
+                                <div class="gw_num">
+                                  <em class="jian">-</em>
+                                  <input type="text" value="1" class="num"/>
+                                  <em class="add">+</em>
+                                </div>
+                              </div>
                             </div>
                           </label>
                           <label class="label-checkbox item-content">
@@ -338,9 +431,6 @@
                       </div>
                     </div>
                   </li>
-                  <li>
-                    
-                  </li>
                 </ul>
               </div>
               <div class="content-block">

+ 17 - 0
js/sui/global.js

@@ -356,5 +356,22 @@ $(function(){
       });
     });
 
+    $(document).ready(function(){
+      //加的效果
+      $(".add").click(function(){
+      var n=$(this).prev().val();
+      var num=parseInt(n)+1;
+      if(num==0){ return;}
+      $(this).prev().val(num);
+      });
+      //减的效果
+      $(".jian").click(function(){
+      var n=$(this).next().val();
+      var num=parseInt(n)-1;
+      if(num==0){ return}
+      $(this).next().val(num);
+      });
+    });
+
 
 });