页面样式修改

watero-rst-web/src/main/webapp/WEB-INF/views/cm/inspection/detect_complete.ftl

@@ -17,13 +17,14 @@
         .input-dic{float: left;margin:5px 10px 0 0;font-size: 12px;}
         .add-list{list-style-type: none;padding: 10px;background-color: #f5f5f5;width: 60%;float: left;margin: 0;}
         .add-list>li{margin: 10px 0;}
-        .my-textarea{padding: 5px 10px;width: 70%;border:1px solid rgba(0,0,0,.1);}
+        .my-textarea{padding: 5px 10px;width: 80%;border:1px solid rgba(0,0,0,.1);}
         .my-btn-reset{padding: 10px 20px;width: 150px; background-color: #fff;color: #32a3d8;border: 1px solid #32a3d8;cursor:pointer;margin: 10px 10px 0 10px;}
         .my-btn-submit{padding: 10px 20px;width: 150px; background-color: #32a3d8;color: #fff;border: 1px solid #32a3d8;cursor:pointer;margin: 10px 10px 0 10px;}
         .my-select{border: 1px solid rgba(0,0,0,.1);padding:6px 50px 6px 15px;width: 60%; height: 34px;margin: 0 10px; -webkit-appearance:none;appearance:none;background: url(http://s.iamberry.com/images/select-1.png) right center no-repeat #fff;background-size:auto 100%;}
         input[type=radio]{-webkit-appearance:none;appearance:none;background: url(${path}/common/images/pts/radio-1.png) center center no-repeat;background-size:auto 100%;width: 20px;height: 20px;margin-right: 10px;}
         input[type=radio]:checked{-webkit-appearance:none;appearance:none;background: url(${path}/common/images/pts/radio-2.png) center center no-repeat;background-size:auto 100%;width: 20px;height: 20px;margin-right: 10px;}
         .spanWidth{width: 133px;float: left}
+        .huanhang{ float:left}
     </style>
     <meta name="keywords" content="${path}">
     <meta name="description" content="H-ui.admin v3.0，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
@@ -32,16 +33,20 @@
 <article class="page-container">
     <form class="form form-horizontal" id="form-admin-add">
         <div class="input-box">
-            <span class="input-dic spanWidth" style="margin-top: 0">检测结果：</span>
-            <label for="radio-3">
-                <input type="radio" id="radio-3" name="detectState" value="3" checked/>检测通过
-            </label>
-            <label for="radio-4" style="margin-left: 50px;">
-                <input type="radio" id="radio-4" name="detectState" value="4"/>检测未通过
-            </label>
+            <label class="col-3 col-sm-3 huanhang" style="text-align: right;margin: 10px 0px;">检测结果：</label>
+            <div class="formControls col-xs-7 col-sm-7 skin-minimal huanhang" style="margin: 10px 0px;">
+                <div class="radio-box">
+                    <input type="radio" id="radio-3" name="detectState" value="3" checked/>
+                    <label for="tel-3">检测通过</label>
+                </div>
+                <div class="radio-box">
+                    <input type="radio" id="radio-4" name="detectState" value="4"/>
+                    <label for="tel-4">检测未通过</label>
+                </div>
+            </div>
         </div>
 
-        <div class="input-box" style="margin-left: 14.2%">
+        <#--<div class="input-box" style="margin-left: 14.2%">
             <span class="input-dic">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
             <textarea rows="3" cols="20" name="detectPhenomenon" id="detectPhenomenon"  class="my-textarea" placeholder="工厂检测现象">${detectInfo.detectPhenomenon!''}</textarea>
         </div>
@@ -64,40 +69,66 @@
         <div class="input-box" style="margin-left: 14.2%">
             <span class="input-dic ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
             <textarea rows="3" cols="20" name="detectAnalysis" id="detectAnalysis"  class="my-textarea" placeholder="原因分析">${detectInfo.detectAnalysis!''}</textarea>
+        </div>-->
+        <div class="input-box" style="margin-left: 17%;">
+            <textarea rows="3" cols="20" name="detectPhenomenon" id="detectPhenomenon" class="my-textarea" placeholder="工厂检测现象">${detectInfo.detectPhenomenon!''}</textarea>
+        </div>
+        <div class="input-box" style="margin-left: 17%;">
+            <textarea rows="3" cols="20" name="detectFailureClassification" id="detectFailureClassification" class="my-textarea" placeholder="故障分类">${detectInfo.detectFailureClassification!''}</textarea>
+        </div>
+        <div class="input-box" style="margin-left: 17%;">
+            <textarea rows="3" cols="20" name="detectFailureCause" id="detectFailureCause" class="my-textarea" placeholder="故障原因">${detectInfo.detectFailureCause!''}</textarea>
+        </div>
+        <div class="input-box" style="margin-left: 17%;">
+            <textarea rows="3" cols="20" name="detectResults" id="detectResults" class="my-textarea" placeholder="判定结果">${detectInfo.detectResults!''}</textarea>
+        </div>
+        <div class="input-box" style="margin-left: 17%;">
+            <textarea rows="3" cols="20" name="detectPoint" id="detectPoint" class="my-textarea" placeholder="故障指向">${detectInfo.detectPoint!''}</textarea>
+        </div>
+        <div class="input-box" style="margin-left: 17%;">
+            <textarea rows="3" cols="20" name="detectAnalysis" id="detectAnalysis" class="my-textarea" placeholder="原因分析">${detectInfo.detectAnalysis!''}</textarea>
         </div>
 
         <div class="input-box">
-            <span class="input-dic spanWidth" style="margin-top: 0">是否需要转入生产部门：</span>
-            <label for="radio-5">
-                <input type="radio" id="radio-5" name="detectIsMaintenance" onclick="show()" value="1" checked/>需要转入生产部门
-            </label>
-            <label for="radio-6" style="margin-left: 50px;">
-                <input type="radio" id="radio-6" name="detectIsMaintenance" onclick="hide()" value="2"/>不需要转入生产部门
-            </label>
+            <label class="col-3 col-sm-3 huanhang" style="text-align: right;margin: 10px 0px;">是否转入生产：</label>
+            <div class=" col-xs-8 col-sm-8 skin-minimal" style="margin: 10px 0px;">
+                <div class="radio-box">
+                    <input type="radio" id="radio-5" name="detectIsMaintenance" value="1" checked/>需要转入
+                </div>
+                <div class="radio-box">
+                    <input type="radio" id="radio-6" name="detectIsMaintenance" value="2"/>不需要转入
+                </div>
+            </div>
         </div>
         <div class="input-box" id="revolutionProducedId">
-            <span class="input-dic spanWidth" style="margin-top: 0">立即转入生产部门：</span>
-            <label for="radio-7" >
-                <input type="radio"  id="radio-7" name="detectRevolutionProduced" value="2" checked/>立即转入
-            </label>
-            <label for="radio-8" style="margin-left: 17%;">
-                <input type="radio" id="radio-8" name="detectRevolutionProduced" value="1"/>以后转入
-            </label>
-        </div>
-        <div class="input-box">
-            <span class="input-dic spanWidth" style="margin-top: 0">QC检查状态：</span>
-            <label for="radio-7">
-                <input type="radio" id="radio-9" name="maintenanceResults" value="1" checked/>通过
-            </label>
-            <label for="radio-8" style="margin-left: 21.5%;">
-                <input type="radio" id="radio-10" name="maintenanceResults" value="2"/>不通过
-            </label>
+            <label class="col-3 col-sm-3 huanhang" style="text-align: right;margin: 10px 0px;">立即转入生产：</label>
+            <div class="col-xs-7 col-sm-7 skin-minimal" style="margin: 10px 0px;">
+                <div class="radio-box">
+                    <input type="radio"  id="radio-7" name="detectRevolutionProduced" value="2" checked/>立即转入
+                </div>
+                <div class="radio-box">
+                    <input type="radio" id="radio-8" name="detectRevolutionProduced" value="1"/>以后转入
+                </div>
+            </div>
         </div>
         <div class="input-box">
-            <span class="input-dic spanhidth spanWidth">备注：</span>
-            <div class="input-box">
-                <textarea rows="3" cols="20" name="detectDesc" id="detectDesc" class="my-textarea" placeholder="请详细备注内容，便于以后复查。如果转入生产，则生产部门同事可查看！">${detectInfo.detectDesc!''}</textarea>
+            <label class="col-3 col-sm-3 huanhang" style="text-align: right;margin: 10px 0px;">QC检查状态：</label>
+            <div class="formControls col-xs-7 col-sm-7 skin-minimal" style="margin: 10px 0px;">
+                <div class="radio-box">
+                    <input type="radio" id="radio-9" name="maintenanceResults" value="1" checked/>通过
+                </div>
+                <div class="radio-box">
+                    <input type="radio" id="radio-10" name="maintenanceResults" value="2"/>不通过
+                </div>
             </div>
+        </div>
+            <div class="input-box" >
+                <label class="form-label col-3 col-sm-3 huanhang"  style="text-align: right;">备注：</label>
+                <div class="formControls col-xs-9 col-sm-9">
+                    <div class="radio-box">
+                        <textarea rows="3" style="width: 200%;margin-left: -15%;margin-top: 5%;" cols="20" name="detectDesc" id="detectDesc" class="my-textarea" placeholder="请详细备注签收的内容，便于以后复查。如果转入生产，则生产部门同事可查看！">${detectInfo.detectDesc!''}</textarea>
+                    </div>
+                </div>
             </div>
         <div>
             <input type="hidden" value="${detectId!''}" id="detectId" name="detectId">
@@ -107,6 +138,21 @@
 </article>
 <script type="text/javascript" src="${path}/common/lib/My97DatePicker/4.8/WdatePicker.js"></script>
 <script type="text/javascript">
+    /*初始化单选框样式*/
+    $(function(){
+        $('.skin-minimal input').iCheck({
+            checkboxClass: 'icheckbox-blue',
+            radioClass: 'iradio-blue',
+            increaseArea: '20%'
+        });
+        $('input[name="detectIsMaintenance"]').on('ifChecked', function(event){
+            if($(this).val() == 1){
+                show();
+            }else{
+                hide();
+            }
+        });
+    });
     function hide() {
         $("#revolutionProducedId").hide();
     }

watero-rst-web/src/main/webapp/WEB-INF/views/cm/inspection/update_complete.ftl

@@ -17,12 +17,13 @@
         .input-dic{float: left;margin:5px 10px 0 0;font-size: 12px;}
         .add-list{list-style-type: none;padding: 10px;background-color: #f5f5f5;width: 60%;float: left;margin: 0;}
         .add-list>li{margin: 10px 0;}
-        .my-textarea{padding: 5px 10px;width: 80%;border:1px solid rgba(0,0,0,.1);}
+        .my-textarea{padding: 5px 10px;width: 65%;border:1px solid rgba(0,0,0,.1);margin-left: 12.5%;}
         .my-btn-reset{padding: 10px 20px;width: 150px; background-color: #fff;color: #32a3d8;border: 1px solid #32a3d8;cursor:pointer;margin: 10px 10px 0 10px;}
         .my-btn-submit{padding: 10px 20px;width: 150px; background-color: #32a3d8;color: #fff;border: 1px solid #32a3d8;cursor:pointer;margin: 10px 10px 0 10px;}
         .my-select{border: 1px solid rgba(0,0,0,.1);padding:6px 50px 6px 15px;width: 60%; height: 34px;margin: 0 10px; -webkit-appearance:none;appearance:none;background: url(http://s.iamberry.com/images/select-1.png) right center no-repeat #fff;background-size:auto 100%;}
         input[type=radio]{-webkit-appearance:none;appearance:none;background: url(${path}/common/images/pts/radio-1.png) center center no-repeat;background-size:auto 100%;width: 20px;height: 20px;margin-right: 10px;}
         input[type=radio]:checked{-webkit-appearance:none;appearance:none;background: url(${path}/common/images/pts/radio-2.png) center center no-repeat;background-size:auto 100%;width: 20px;height: 20px;margin-right: 10px;}
+        .huanhang{ float:left}
     </style>
     <meta name="keywords" content="${path}">
     <meta name="description" content="H-ui.admin v3.0，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
@@ -31,60 +32,59 @@
 <article class="page-container">
     <form class="form form-horizontal" id="form-admin-add">
         <div class="input-box">
-            <span class="input-dic" style="margin-top: 0">检测结果：</span>
-            <div style="margin-left: 15%">
-                <label for="radio-3">
+            <label class="form-label col-3 col-sm-3 huanhang" style="text-align: right;margin: 12px 0px;">检测结果：</label>
+            <div class="formControls col-xs-7 col-sm-7 skin-minimal huanhang" style="margin: 10px 0px;">
+                <div class="radio-box">
                     <input type="radio" id="radio-3" name="detectState" value="3"
                            <#if detectInfo.detectState == 3>checked</#if>
                            />检测通过
-                </label>
-                <label for="radio-4" style="margin-left: 50px;">
+                </div>
+                <div class="radio-box">
                     <input type="radio" id="radio-4" name="detectState" value="4"
                            <#if detectInfo.detectState == 4>checked</#if>
                     />检测未通过
-                </label>
+                </div>
             </div>
         </div>
 
-        <div class="input-box">
-            <span class="input-dic" style="margin-left: 5%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-            <textarea rows="3" cols="20" name="detectPhenomenon" id="detectPhenomenon"  class="my-textarea" placeholder="工厂检测现象">${detectInfo.detectPhenomenon!''}</textarea>
+        <div class="input-box" style="margin-left: 17%;">
+            <textarea rows="3" cols="20" style="margin-left: 2.9%;" name="detectPhenomenon" id="detectPhenomenon"  class="my-textarea" placeholder="工厂检测现象">${detectInfo.detectPhenomenon!''}</textarea>
         </div>
-        <div class="input-box">
-            <span class="input-dic" style="margin-left: 5%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+        <div class="input-box" style="margin-left: 17%;">
             <textarea rows="3" cols="20" name="detectFailureClassification" id="detectFailureClassification"  class="my-textarea" placeholder="故障分类">${detectInfo.detectFailureClassification!''}</textarea>
         </div>
-        <div class="input-box">
-            <span class="input-dic" style="margin-left: 5%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+        <div class="input-box" style="margin-left: 17%;">
             <textarea rows="3" cols="20" name="detectFailureCause" id="detectFailureCause"  class="my-textarea" placeholder="故障原因">${detectInfo.detectFailureCause!''}</textarea>
         </div>
-        <div class="input-box">
-            <span class="input-dic" style="margin-left: 5%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+        <div class="input-box" style="margin-left: 17%;">
             <textarea rows="3" cols="20" name="detectResults" id="detectResults"  class="my-textarea" placeholder="判定结果">${detectInfo.detectResults!''}</textarea>
         </div>
-        <div class="input-box">
-            <span class="input-dic" style="margin-left: 5%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+        <div class="input-box" style="margin-left: 17%;">
             <textarea rows="3" cols="20" name="detectPoint" id="detectPoint"  class="my-textarea" placeholder="故障指向">${detectInfo.detectPoint!''}</textarea>
         </div>
-        <div class="input-box">
-            <span class="input-dic" style="margin-left: 5%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+        <div class="input-box" style="margin-left: 17%;">
             <textarea rows="3" cols="20" name="detectAnalysis" id="detectAnalysis"  class="my-textarea" placeholder="原因分析">${detectInfo.detectAnalysis!''}</textarea>
         </div>
 
         <div class="input-box">
-            <span class="input-dic" style="margin-top: 0;margin-left: 0.5%;">QC检查状态：</span>
-            <label for="radio-7">
-                <input type="radio" id="radio-9" name="maintenanceResults" value="1" <#if detectInfo.maintenanceResults == 1>checked</#if>/>通过
-            </label>
-            <label for="radio-8" style="margin-left: 50px;">
-                <input type="radio" id="radio-10" name="maintenanceResults" value="2"<#if detectInfo.maintenanceResults == 2>checked</#if>/>不通过
-            </label>
+            <label class="col-3 col-sm-3 huanhang" style="text-align: right;">QC检查状态：</label>
+            <div class="col-xs-7 col-sm-7 skin-minimal">
+                <div class="radio-box">
+                    <input type="radio" id="radio-9" name="maintenanceResults" value="1" <#if detectInfo.maintenanceResults??><#if detectInfo.maintenanceResults == 1>checked</#if></#if>/>
+                    <label for="tel-7">通过</label>
+                </div>
+                <div class="radio-box">
+                    <input type="radio" id="radio-10" name="maintenanceResults" value="2" <#if detectInfo.maintenanceResults??><#if detectInfo.maintenanceResults == 2>checked</#if></#if>/>
+                    <label for="tel-7">不通过</label>
+                </div>
+            </div>
         </div>
         <div class="input-box">
-            <span class="input-dic spanhidth">备注：</span>
-            <div  style="margin-left: 15.5%;">
-                <textarea rows="3" cols="20" name="detectDesc" id="detectDesc" class="my-textarea" placeholder="请详细备注内容，便于以后复查。如果转入生产，则生产部门同事可查看！">${detectInfo.detectDesc!''}</textarea>
-            </div>
+            <label class="form-label col-3 col-sm-3 huanhang" style="text-align: right;">备注：</label>
+            <div class="formControls col-xs-9 col-sm-9">
+                <div class="radio-box">
+                    <textarea rows="3" cols="20" style="width: 200%;margin-left: -15%;margin-top: 5%;" name="detectDesc" id="detectDesc" class="my-textarea" placeholder="请详细备注内容，便于以后复查。如果转入生产，则生产部门同事可查看！">${detectInfo.detectDesc!''}</textarea>
+                </div>
             </div>
         <div>
             <input type="hidden" value="${detectId!''}" id="detectId" name="detectId">
@@ -94,13 +94,14 @@
 </article>
 <script type="text/javascript" src="${path}/common/lib/My97DatePicker/4.8/WdatePicker.js"></script>
 <script type="text/javascript">
-    function hide() {
-        $("#revolutionProducedId").hide();
-    }
-    function show() {
-        $("#revolutionProducedId").show();
-    }
-
+    /*初始化单选框样式*/
+    $(function(){
+        $('.skin-minimal input').iCheck({
+            checkboxClass: 'icheckbox-blue',
+            radioClass: 'iradio-blue',
+            increaseArea: '20%'
+        });
+    });
     function  add() {
 
         var detectPhenomenon = $("#detectPhenomenon").val();