diff --git a/src/main/ui/static/templates/payment/payment.css b/src/main/ui/static/templates/payment/payment.css
index f484957fe..dd5055f81 100644
--- a/src/main/ui/static/templates/payment/payment.css
+++ b/src/main/ui/static/templates/payment/payment.css
@@ -10,17 +10,23 @@ body {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-div, span, p, ul, li ,button,img{
+div, span, p, ul, li {
     box-sizing: border-box;
 }
 
-.weui_grid {
-    padding: 7px;
-    height: 49px;
+.ff.key {
+    position: relative;
 }
 
 .ff {
-    font-size: 24px;
+    font-size: 26px;
+    color: #333333;
+}
+
+.ff img {
+    margin: 10px auto;
+    display: block;
+    width: 34px;
 }
 
 div.wait {
@@ -43,13 +49,13 @@ div.wait {
     color: #aaaaaa;
     text-align: center;
     margin-top: 10px;
+    margin-bottom: 10px;
 }
 
 .rmbcurrency {
     font-size: 18px;
-    color: #777777;
+    color: #888888;
     vertical-align: text-bottom;
-    margin-left: 10px;
     line-height: 38px;
 }
 
@@ -60,10 +66,20 @@ div.wait {
 
 .rmbvalue {
     font-size: 24px;
-    color: #777777;
+    color: #888888;
     vertical-align: text-bottom;
     float: right;
-    padding-right: 10px;
+}
+
+.rmbvalue:before {
+    content: '≈¥';
+    font-size: 16px;
+}
+
+.paydetail {
+    float: right;
+    margin-top: 5px;
+    margin-left: 5px;
 }
 
 .static .rmbvalue {
@@ -71,10 +87,11 @@ div.wait {
 }
 
 .currency {
-    font-size: 33px;
-    color: #3cc51f;
+    font-size: 40px;
+    color: #000;
+    line-height: 66px;
     vertical-align: text-bottom;
-    padding-left: 10px;
+    margin-right: 10px;
 }
 
 .static .currency {
@@ -83,12 +100,11 @@ div.wait {
 }
 
 .value {
-    font-size: 32px;
-    color: #3cc51f;
+    font-size: 40px;
+    line-height: 66px;
+    color: #000;
     margin-left: -5px;
-    text-align: right;
     vertical-align: text-bottom;
-    float: right;
     padding-right: 10px;
 }
 
@@ -127,6 +143,7 @@ input.value:focus {
 
 .row {
     width: 100%;
+    padding: 0 20px;
 }
 
 .hidden {
@@ -173,7 +190,7 @@ input.value:focus {
     width: 100%;
 }
 
-.logo-box .banner{
+.logo-box .banner {
     width: 100%;
     display: block;
 }
@@ -182,28 +199,24 @@ input.value:focus {
     margin: auto;
     display: block;
     margin-top: 20px;
-    max-height: 150px;
+    max-height: 60px;
     max-width: 80%;
 }
 
-.logo-small {
-    max-height: 100px;
+.logo-box {
+    margin-bottom: 280px;
 }
 
-.paynow {
-    height: 55px;
-    line-height: 55px;
-    padding: 0px;
-    top: 6px;
-    font-size: 25px;
-    margin-left: 5px;
-    margin-right: 5px;
-    border-radius: 0;
-    margin-top: 0 !important;
+.logo-small {
+    max-height: 100px;
 }
 
 .currencyrow {
     box-sizing: border-box;
+    margin-top: 20px;
+    text-align: left;
+    margin-bottom: 20px;
+    background: #fff;
 }
 
 .currencyrow:after {
@@ -214,18 +227,28 @@ input.value:focus {
 
 .currencyrow > * {
     display: inline-block;
-    float: left;
     vertical-align: bottom;
     margin-bottom: 0;
-    width: 50%;
     box-sizing: border-box;
 }
 
+.currencyrow > .remark-btn {
+    float: right;
+    display: block;
+    width: 30px;
+    height: 30px;
+    margin-top: 17px;
+    background: url(../../../images/remark_btn.png) no-repeat;
+    background-size: cover;
+}
+
 .remark-input {
     width: 100%;
     font-size: 26px;
     border-radius: 0;
     outline: none;
+    background: #FFFFFF;
+    border: 1px solid #E9E9E9;
 }
 
 .remark-box {
@@ -252,95 +275,216 @@ input.value:focus {
 
 .coupons {
     width: 100%;
+    margin-top: -1px;
+    background: #fff;
+    max-height: 350px;
+    overflow: auto;
+    padding: 0 10px;
+    border-radius: 0 0 6px 6px;
 }
 
 .coupons > li {
     display: block;
     width: 100%;
-    border-bottom: 1px dashed #aaa;
-    padding: 5px;
-    position: relative;
+    float: none;
+    color: #888888;
+    border-radius: 6px;
+    padding: 10px;
+    margin: 15px 0;
+    background: #fff;
+    box-shadow: 0 0 10px #aaa;
+}
+
+.coupons > li:after {
+    content: '';
+    clear: both;
+    display: block
 }
 
 .coupons > li:last-child {
     border: none;
+    border-radius: 0 15px 15px 0;
 }
 
-.coupons > li:before {
-    content: '惠';
-    color: #fff;
-    background: #f00;
-    margin: 5px;
-    text-align: center;
-    width: 20px;
-    height: 20px;
-    box-sizing: border-box;
-    font-size: 0.6em;
-    font-weight: bold;
-    left: -5px;
-    position: absolute;
+.coupons > li .coupon-content {
+    position: relative;
+    width: 100%;
+    border-radius: 4px;
+    border: 1px dashed #aaa;
+    padding: 10px 15px;
 }
 
 .coupons .title, .coupons .desc, .coupons label {
     display: block;
-    margin-left: 20px;
+}
+
+.coupons .coupon-content {
+    display: block;
+    float: left;
 }
 
 .coupons .title {
     font-weight: bold;
     font-size: 1em;
+    color: #000000;
+    position: relative;
+}
+
+.coupon-background-image {
+    width: 100%;
+}
+
+.coupon-logo {
+    height: 25px;
+    padding-right: 5px;
+    position: relative;
+    top: 6px;
+}
+
+.coupon-image {
+    width: 100%;
+    position: relative;
+    display: block;
+}
+
+.coupon-box-title .coupon-image {
+    margin: 0;
 }
 
 .coupons .use-check {
     position: absolute;
-    right: 25px;
-    top: 14px;
-    width: 25px;
-    background-repeat: no-repeat;
-    height: 25px;
-    background-size: contain;
+    display: block;
+    top: 0;
+    background-size: cover;
+    width: 34px;
+    height: 34px;
+    right: 0;
 }
 
 .coupons .use-check.checked {
-    background-image: url(/static/images/checkbox-checked.png);
+    background-image: url(/static/images/coupon_checked@3x.png);
 }
 
 .coupons .use-check.unchecked {
-    background-image: url(/static/images/checkbox-unchecked.png);
+    background-image: url(/static/images/coupon_unchecked@2x.png);
 }
 
-.coupons .use-check.disabled{
-    background-image: url(/static/images/checkbox-disabled.png)!important;
+.coupons .use-check.disabled {
+    background-image: url(/static/images/coupon_disabled@2x.png) !important;
 }
 
 .coupons .desc {
-    font-size: 0.8em;
+    font-size: 13px;
+    color: #323200;
+    margin-top: 5px;
+    letter-spacing: 0px;
+    position: relative;
+    line-height: 18px;
 }
 
 .weui-wepay-logos {
     background: transparent;
 }
 
+.row.weui_grids:before, .row.weui_grids .weui_grid:before, .row.weui_grids .weui_grid:after {
+    display: none;
+}
 
-.goodpay {
-    height: 55px;
-    line-height: 55px;
-    padding: 0px;
-    top: 6px;
-    font-size: 25px;
-    border-radius: 0;
-    margin-top: 0 !important;
+.keyboard-grids {
+    padding: 0;
+    margin-top: 10px;
+    background: #fff;
+    position: fixed;
+    bottom: 0;
 }
 
-.weui_cell:before{
-    left:0;
+.keyboard-grids:after {
+    display: block;
+    content: '';
+    clear: both;
+}
+
+.keyboard-grids .key {
+    float: left;
+    position: relative;
+    width: 25%;
+    text-align: center;
+    border-right: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+    margin-right: -1px;
+    margin-bottom: -1px;
+    height: 60px;
+    line-height: 60px;
+}
+
+.keyboard-grids .key.del > img {
+    height: 24px;
+    display: block;
+    position: relative;
+    margin: 19px auto;
+}
+
+.keyboard-grids .key.paynow {
+    height: 180px;
+    float: right;
+    background: #09bb07;
+    color: #fff;
+}
+
+.keyboard-grids .key.paynow.alipay {
+    background: #108ee9;
+}
+
+.alipay {
+    color: #108ee9;
+}
+
+.wechat {
+    color: #09bb07;
+}
+
+.keyboard-grids .key.paynow > .label {
+    display: block;
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.keyboard-grids .key.zero-btn {
+    width: 50%;
+}
+
+.pay-brands {
+    text-align: center;
+    line-height: 20px;
+    font-size: 24px;
+    position: fixed;
+    width: 100%;
+    padding-top: 5px;
+    padding-bottom: 10px;
+    bottom: 240px;
+    color: #dddddd;
+    background: #fbf9fe;
+}
+
+.pay-brands img {
+    height: 18px;
+}
+
+.pay-brands img.wechat-logo {
+    height: 14px;
+}
+
+.weui_dialog_bd .final {
+    font-weight: bold;
 }
 
 #coupon-box-toggle {
     padding: 0 20px;
-    margin-bottom: 10px;
+    margin-top: 10px;
     text-align: right;
-    color: #30af69;
     font-size: 12px;
     cursor: pointer;
 }
@@ -356,7 +500,7 @@ input.value:focus {
     display: none;
 }
 
-.coupons-container.show{
+.coupons-container.show {
     display: block;
 }
 
@@ -376,35 +520,66 @@ input.value:focus {
     left: 50%;
     top: 50%;
     width: 95%;
-    background: #fff;
-    padding: 10px;
     transform: translate(-50%, -50%);
 }
 
-.coupons-container .coupon-box-title{
+.coupons-container .coupon-box-title {
     width: 100%;
     display: block;
-    background: #fff;
-    padding: 0 10px 5px;
-    font-size: 14px;
-    border-bottom: 1px solid #d0d0d0;
+    position: relative;
 }
 
-.coupons-container .coupon-box-title:after{
+.coupons-container .coupon-box-title:after {
     content: '';
     display: block;
     clear: both;
 }
 
-.coupons-container .coupon-box-title>.title{
-    float: left;
+.coupon-close-image {
+    width: 30px;
+}
+
+.coupons-container .coupon-box-title > .title {
     display: block;
-    color: #0BB20C;
+    text-align: center;
+    font-size: 18px;
+    color: #FFFFFF;
+    position: absolute;
+    width: 100%;
+    bottom: 34%;
 }
 
-.coupons-container .coupon-box-title>#close-coupon-box{
+.coupons-container .coupon-box-title > #close-coupon-box {
     color: #700;
-    float: right;
+    position: absolute;
     display: block;
     cursor: pointer;
+    top: -40px;
+    right: 0;
+}
+
+textarea::-webkit-input-placeholder {
+    font-size: 14px;
+    color: #AAAAAA;
+    letter-spacing: 0px;
+}
+
+textarea {
+    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
+    -webkit-appearance: none;
+    resize: none;
+}
+
+input {
+    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
+    -webkit-appearance: none;
+    resize: none;
+}
+
+.weui_dialog_ft:after {
+    border-top: 0;
+}
+
+.weui_dialog {
+    border-radius: 5px;
 }
\ No newline at end of file