图标更新，费用管理 新手指引

css/ZHcldSystem/demo-files/demo.css

@@ -1,164 +1,164 @@
 body {
-    padding: 0;
-    margin: 0;
-    font-family: sans-serif;
-    font-size: 1em;
-    line-height: 1.5;
-    color: #555;
-    background: #fff;
+  padding: 0;
+  margin: 0;
+  font-family: sans-serif;
+  font-size: 1em;
+  line-height: 1.5;
+  color: #555;
+  background: #fff;
 }
 h1 {
-    font-size: 1.5em;
-    font-weight: normal;
+  font-size: 1.5em;
+  font-weight: normal;
 }
 small {
-    font-size: .66666667em;
+  font-size: .66666667em;
 }
 a {
-    color: #e74c3c;
-    text-decoration: none;
+  color: #e74c3c;
+  text-decoration: none;
 }
 a:hover, a:focus {
-    box-shadow: 0 1px #e74c3c;
+  box-shadow: 0 1px #e74c3c;
 }
 .bshadow0, input {
-    box-shadow: inset 0 -2px #e7e7e7;
+  box-shadow: inset 0 -2px #e7e7e7;
 }
 input:hover {
-    box-shadow: inset 0 -2px #ccc;
+  box-shadow: inset 0 -2px #ccc;
 }
 input, fieldset {
-    font-family: sans-serif;
-    font-size: 1em;
-    margin: 0;
-    padding: 0;
-    border: 0;
+  font-family: sans-serif;
+  font-size: 1em;
+  margin: 0;
+  padding: 0;
+  border: 0;
 }
 input {
-    color: inherit;
-    line-height: 1.5;
-    height: 1.5em;
-    padding: .25em 0;
+  color: inherit;
+  line-height: 1.5;
+  height: 1.5em;
+  padding: .25em 0;
 }
 input:focus {
-    outline: none;
-    box-shadow: inset 0 -2px #449fdb;
+  outline: none;
+  box-shadow: inset 0 -2px #449fdb;
 }
 .glyph {
-    font-size: 16px;
-    width: 15em;
-    padding-bottom: 1em;
-    margin-right: 4em;
-    margin-bottom: 1em;
-    float: left;
-    overflow: hidden;
+  font-size: 16px;
+  width: 15em;
+  padding-bottom: 1em;
+  margin-right: 4em;
+  margin-bottom: 1em;
+  float: left;
+  overflow: hidden;
 }
 .liga {
-    width: 80%;
-    width: calc(100% - 2.5em);
+  width: 80%;
+  width: calc(100% - 2.5em);
 }
 .talign-right {
-    text-align: right;
+  text-align: right;
 }
 .talign-center {
-    text-align: center;
+  text-align: center;
 }
 .bgc1 {
-    background: #f1f1f1;
+  background: #f1f1f1;
 }
 .fgc1 {
-    color: #999;
+  color: #999;
 }
 .fgc0 {
-    color: #000;
+  color: #000;
 }
 p {
-    margin-top: 1em;
-    margin-bottom: 1em;
+  margin-top: 1em;
+  margin-bottom: 1em;
 }
 .mvm {
-    margin-top: .75em;
-    margin-bottom: .75em;
+  margin-top: .75em;
+  margin-bottom: .75em;
 }
 .mtn {
-    margin-top: 0;
+  margin-top: 0;
 }
 .mtl, .mal {
-    margin-top: 1.5em;
+  margin-top: 1.5em;
 }
 .mbl, .mal {
-    margin-bottom: 1.5em;
+  margin-bottom: 1.5em;
 }
 .mal, .mhl {
-    margin-left: 1.5em;
-    margin-right: 1.5em;
+  margin-left: 1.5em;
+  margin-right: 1.5em;
 }
 .mhmm {
-    margin-left: 1em;
-    margin-right: 1em;
+  margin-left: 1em;
+  margin-right: 1em;
 }
 .mls {
-    margin-left: .25em;
+  margin-left: .25em;
 }
 .ptl {
-    padding-top: 1.5em;
+  padding-top: 1.5em;
 }
 .pbs, .pvs {
-    padding-bottom: .25em;
+  padding-bottom: .25em;
 }
 .pvs, .pts {
-    padding-top: .25em;
+  padding-top: .25em;
 }
 .unit {
-    float: left;
+  float: left;
 }
 .unitRight {
-    float: right;
+  float: right;
 }
 .size1of2 {
-    width: 50%;
+  width: 50%;
 }
 .size1of1 {
-    width: 100%;
+  width: 100%;
 }
 .clearfix:before, .clearfix:after {
-    content: " ";
-    display: table;
+  content: " ";
+  display: table;
 }
 .clearfix:after {
-    clear: both;
+  clear: both;
 }
 .hidden-true {
-    display: none;
+  display: none;
 }
 .textbox0 {
-    width: 3em;
-    background: #f1f1f1;
-    padding: .25em .5em;
-    line-height: 1.5;
-    height: 1.5em;
+  width: 3em;
+  background: #f1f1f1;
+  padding: .25em .5em;
+  line-height: 1.5;
+  height: 1.5em;
 }
 #testDrive {
-    display: block;
-    padding-top: 24px;
-    line-height: 1.5;
+  display: block;
+  padding-top: 24px;
+  line-height: 1.5;
 }
 .fs0 {
-    font-size: 16px;
+  font-size: 16px;
 }
 .fs1 {
-    font-size: 32px;
+  font-size: 32px;
 }
 .fs2 {
-    font-size: 32px;
+  font-size: 32px;
 }
 .fs3 {
-    font-size: 24px;
+  font-size: 24px;
 }
 .fs4 {
-    font-size: 20px;
+  font-size: 20px;
 }
 .fs5 {
-    font-size: 28px;
+  font-size: 28px;
 }
 

css/ZHcldSystem/demo.html

@@ -15,6 +15,70 @@
         <h1 class="mvm mtn fgc1">Grid Size: 32</h1>
         <div class="glyph fs1">
             <div class="clearfix bshadow0 pbs">
+                <span class="icon-phone2">
+                
+                </span>
+                <span class="mls"> icon-phone2</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="59" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#x59;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-switch">
+                
+                </span>
+                <span class="mls"> icon-switch</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="47" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#x47;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-calendar">
+                
+                </span>
+                <span class="mls"> icon-calendar</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="58" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#x58;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-gears">
+                
+                </span>
+                <span class="mls"> icon-gears</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="46" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#x46;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
                 <span class="icon-mail-envelope-closed">
                 
                 </span>
@@ -143,22 +207,6 @@
         </div>
         <div class="glyph fs1">
             <div class="clearfix bshadow0 pbs">
-                <span class="icon-compass">
-                
-                </span>
-                <span class="mls"> icon-compass</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="58" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#x58;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs1">
-            <div class="clearfix bshadow0 pbs">
                 <span class="icon-usb">
                 
                 </span>
@@ -173,7 +221,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-  </div>
+    </div>
     <div class="clearfix mhl ptl">
         <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
         <div class="glyph fs2">
@@ -464,7 +512,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-  </div>
+    </div>
     <div class="clearfix mhl ptl">
         <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
         <div class="glyph fs3">
@@ -499,7 +547,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-  </div>
+    </div>
     <div class="clearfix mhl ptl">
         <h1 class="mvm mtn fgc1">Grid Size: 20</h1>
         <div class="glyph fs4">
@@ -614,55 +662,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-        <div class="glyph fs4">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-cog">
-                
-                </span>
-                <span class="mls"> icon-cog</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="46" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#x46;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs4">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-log-out">
-                
-                </span>
-                <span class="mls"> icon-log-out</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="47" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#x47;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-        <div class="glyph fs4">
-            <div class="clearfix bshadow0 pbs">
-                <span class="icon-tablet">
-                
-                </span>
-                <span class="mls"> icon-tablet</span>
-            </div>
-            <fieldset class="fs0 size1of1 clearfix hidden-false">
-                <input type="text" readonly value="59" class="unit size1of2" />
-                <input type="text" maxlength="1" readonly value="&#x59;" class="unitRight size1of2 talign-right" />
-            </fieldset>
-            <div class="fs0 bshadow0 clearfix hidden-true">
-                <span class="unit pvs fgc1">liga: </span>
-                <input type="text" readonly value="" class="liga unitRight" />
-            </div>
-        </div>
-  </div>
+    </div>
     <div class="clearfix mhl ptl">
         <h1 class="mvm mtn fgc1">Grid Size: 14</h1>
         <div class="glyph fs5">
@@ -697,7 +697,7 @@
                 <input type="text" readonly value="" class="liga unitRight" />
             </div>
         </div>
-  </div>
+    </div>
 
     <!--[if gt IE 8]><!-->
     <div class="mhl clearfix mbl">
@@ -709,7 +709,6 @@
         </label>
         <input id="testText" type="text" class="phl size1of1 mvl"
         placeholder="Type some text to test..." value=""/>
-        </label>
         <div id="testDrive" class="icon-">&nbsp;
         </div>
     </div>

css/ZHcldSystem/style.css

@@ -1,153 +1,153 @@
 @font-face {
-    font-family: 'ZHcldSystem';
-    src:    url('fonts/ZHcldSystem.eot?c75dav');
-    src:    url('fonts/ZHcldSystem.eot?c75dav#iefix') format('embedded-opentype'),
-        url('fonts/ZHcldSystem.ttf?c75dav') format('truetype'),
-        url('fonts/ZHcldSystem.woff?c75dav') format('woff'),
-        url('fonts/ZHcldSystem.svg?c75dav#ZHcldSystem') format('svg');
-    font-weight: normal;
-    font-style: normal;
+  font-family: 'ZHcldSystem';
+  src:  url('fonts/ZHcldSystem.eot?49d0yr');
+  src:  url('fonts/ZHcldSystem.eot?49d0yr#iefix') format('embedded-opentype'),
+    url('fonts/ZHcldSystem.ttf?49d0yr') format('truetype'),
+    url('fonts/ZHcldSystem.woff?49d0yr') format('woff'),
+    url('fonts/ZHcldSystem.svg?49d0yr#ZHcldSystem') format('svg');
+  font-weight: normal;
+  font-style: normal;
 }
 
 [class^="icon-"], [class*=" icon-"] {
-    /* use !important to prevent issues with browser extensions that change fonts */
-    font-family: 'ZHcldSystem' !important;
-    speak: none;
-    font-style: normal;
-    font-weight: normal;
-    font-variant: normal;
-    text-transform: none;
-    line-height: 1;
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'ZHcldSystem' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
 
-    /* Better Font Rendering =========== */
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-phone2:before {
+  content: "\59";
+}
+.icon-switch:before {
+  content: "\47";
+}
+.icon-calendar:before {
+  content: "\58";
+}
+.icon-gears:before {
+  content: "\46";
+}
 .icon-mail-envelope-closed:before {
-    content: "\5a";
+  content: "\5a";
 }
 .icon-book-bookmark:before {
-    content: "\41";
+  content: "\41";
 }
 .icon-note-text:before {
-    content: "\44";
+  content: "\44";
 }
 .icon-note-checked:before {
-    content: "\55";
+  content: "\55";
 }
 .icon-inboxes:before {
-    content: "\43";
+  content: "\43";
 }
 .icon-folder-search:before {
-    content: "\56";
+  content: "\56";
 }
 .icon-package:before {
-    content: "\57";
+  content: "\57";
 }
 .icon-barometer:before {
-    content: "\42";
-}
-.icon-compass:before {
-    content: "\58";
+  content: "\42";
 }
 .icon-usb:before {
-    content: "\4d";
+  content: "\4d";
 }
 .icon-uni31:before {
-    content: "\31";
+  content: "\31";
 }
 .icon-uni32:before {
-    content: "\32";
+  content: "\32";
 }
 .icon-uni33:before {
-    content: "\33";
+  content: "\33";
 }
 .icon-uni34:before {
-    content: "\34";
+  content: "\34";
 }
 .icon-uni35:before {
-    content: "\35";
+  content: "\35";
 }
 .icon-uni45:before {
-    content: "\45";
+  content: "\45";
 }
 .icon-uni48:before {
-    content: "\48";
+  content: "\48";
 }
 .icon-uni49:before {
-    content: "\49";
+  content: "\49";
 }
 .icon-uni4A:before {
-    content: "\4a";
+  content: "\4a";
 }
 .icon-uni4C:before {
-    content: "\4e";
+  content: "\4e";
 }
 .icon-uni4E:before {
-    content: "\4f";
+  content: "\4f";
 }
 .icon-uni4F:before {
-    content: "\50";
+  content: "\50";
 }
 .icon-uni51:before {
-    content: "\51";
+  content: "\51";
 }
 .icon-uni52:before {
-    content: "\52";
+  content: "\52";
 }
 .icon-uni66:before {
-    content: "\66";
+  content: "\66";
 }
 .icon-uni67:before {
-    content: "\67";
+  content: "\67";
 }
 .icon-uni68:before {
-    content: "\68";
+  content: "\68";
 }
 .icon-uni69:before {
-    content: "\69";
+  content: "\69";
 }
 .icon-check:before {
-    content: "\6a";
+  content: "\6a";
 }
 .icon-cross:before {
-    content: "\6b";
+  content: "\6b";
 }
 .icon-chevron-down:before {
-    content: "\63";
+  content: "\63";
 }
 .icon-chevron-left:before {
-    content: "\62";
+  content: "\62";
 }
 .icon-chevron-right:before {
-    content: "\61";
+  content: "\61";
 }
 .icon-chevron-up:before {
-    content: "\64";
+  content: "\64";
 }
 .icon-bell:before {
-    content: "\4b";
+  content: "\4b";
 }
 .icon-book:before {
-    content: "\53";
+  content: "\53";
 }
 .icon-lab-flask:before {
-    content: "\54";
-}
-.icon-cog:before {
-    content: "\46";
-}
-.icon-log-out:before {
-    content: "\47";
-}
-.icon-tablet:before {
-    content: "\59";
+  content: "\54";
 }
 .icon-cny:before {
-    content: "\4c";
+  content: "\4c";
 }
 .icon-th-large:before {
-    content: "\6c";
+  content: "\6c";
 }
 

saea-borad.html

@@ -109,44 +109,36 @@
 		<table class="table table-bordered table-condensed">
 			<tbody>
 			<tr>
-				<th class="taC" width="100" rowspan="2">费用管理简介</th>
-				<td><a href="">在线查阅《CLD费用管理简介》</a></td>
-			</tr>
-			<tr>
-				<td><a href="">点击下载《CLD费用管理简介》</a></td>
+				<th class="taC colRed" width="100">费用管理简介<br>（必读）</th>
+				<td class="taC"><a href="">在线查阅《CLD费用管理简介》</a></td>
+				<td class="taC"><a href="">点击下载《CLD费用管理简介》</a></td>
 			</tr>
 			</tbody>
 		</table>
 		<table class="table table-bordered table-condensed">
 			<tbody>
 			<tr>
-				<th class="taC" width="100" rowspan="2">费用申请人</th>
-				<td><a href="">在线查阅《费用申请人使用手册》</a></td>
-			</tr>
-			<tr>
-				<td><a href="">点击下载《费用申请人使用手册》</a></td>
+				<th class="taC" width="100">费用申请人</th>
+				<td class="taC"><a href="">在线查阅《费用申请人使用手册》</a></td>
+				<td class="taC"><a href="">点击下载《费用申请人使用手册》</a></td>
 			</tr>
 			</tbody>
 		</table>
 		<table class="table table-bordered table-condensed">
 			<tbody>
 			<tr>
-				<th class="taC" width="100" rowspan="2">费用审批人</th>
-				<td><a href="">在线查阅《费用审批人使用手册》</a></td>
-			</tr>
-			<tr>
-				<td><a href="">点击下载《费用审批人使用手册》</a></td>
+				<th class="taC" width="100">费用审批人</th>
+				<td class="taC"><a href="">在线查阅《费用审批人使用手册》</a></td>
+				<td class="taC"><a href="">点击下载《费用审批人使用手册》</a></td>
 			</tr>
 			</tbody>
 		</table>
 		<table class="table table-bordered table-condensed">
 			<tbody>
 			<tr>
-				<th class="taC" width="100" rowspan="2">费用执行人</th>
-				<td><a href="">在线查阅《费用执行人使用手册》</a></td>
-			</tr>
-			<tr>
-				<td><a href="">点击下载《费用执行人使用手册》</a></td>
+				<th class="taC" width="100">费用执行人</th>
+				<td class="taC"><a href="">在线查阅《费用执行人使用手册》</a></td>
+				<td class="taC"><a href="">点击下载《费用执行人使用手册》</a></td>
 			</tr>
 			</tbody>
 		</table>