Selaa lähdekoodia

数字键盘样式修改

zhouna 6 vuotta sitten
vanhempi
commit
1f6e15f32b

+ 4 - 3
src/common/components/NumberPan/index.jsx

@@ -1,6 +1,7 @@
 import React,{Component} from 'react';
 import style from './index.less';
 import ReactDom from "react-dom";
+import backspace from '../../images/backspace.png'
 
 class NumberPan extends Component{
   constructor(props){
@@ -74,19 +75,19 @@ class NumberPan extends Component{
           <td><button onClick={select}>4</button></td>
           <td><button onClick={select}>5</button></td>
           <td><button onClick={select}>6</button></td>
-          <td><button onClick={this.handleBack.bind(this)}>回退</button></td>
+          <td><button onClick={this.handleBack.bind(this)}><img src={backspace} onClick={this.handleBack.bind(this)} /></button></td>
         </tr>
         <tr>
           <td><button onClick={select}>7</button></td>
           <td><button onClick={select}>8</button></td>
           <td><button onClick={select}>9</button></td>
-          <td><button onClick={this.handleClear.bind(this)}>清空</button></td>
+          <td><button onClick={this.handleClear.bind(this)} className={style['clearN']}>清空</button></td>
         </tr>
         <tr>
           <td><button onClick={select}>.</button></td>
           <td><button onClick={select}>0</button></td>
           <td><button onClick={select}>~</button></td>
-          <td><button onClick={this.handleClose.bind(this)}>确定</button></td>
+          <td><button onClick={this.handleClose.bind(this)} className={style['confirm']}>确定</button></td>
         </tr>
       </table>
       </div>

+ 20 - 0
src/common/components/NumberPan/index.less

@@ -21,4 +21,24 @@
   button:hover{
     border-color: @blue;
   }
+  .confirm{
+    color: #3B9ED0;
+    font-weight: bold;
+    text-align: center;
+    padding-left: 14px;
+    font-size: 14px;
+    line-height: normal;
+  }
+  .imgN{
+    text-align: right;
+    vertical-align: middle;
+    padding-right: 8px;
+    cursor: pointer;
+  }
+  .clearN{
+    color:#F6514A;
+    text-align: center;
+    padding-left: 8px;
+    font-weight: bold;
+  }
 }