diff --git a/packages/coupon-list/test/__snapshots__/index.spec.js.snap b/packages/coupon-list/test/__snapshots__/index.spec.js.snap
index 021657bce..c6cfa051e 100644
--- a/packages/coupon-list/test/__snapshots__/index.spec.js.snap
+++ b/packages/coupon-list/test/__snapshots__/index.spec.js.snap
@@ -39,11 +39,11 @@ exports[`render coupon list 1`] = `
           <div class="van-coupon">
             <div class="van-coupon__content">
               <div class="van-coupon__head">
-                <h2></h2>
+                <h2 class="van-coupon__amount"></h2>
                 <p>无使用门槛</p>
               </div>
               <div class="van-coupon__body">
-                <h2></h2>
+                <h2 class="van-coupon__name"></h2>
                 <p>有效期：2017.03.10 - 2017.12.30</p>
               </div>
             </div>
@@ -51,14 +51,14 @@ exports[`render coupon list 1`] = `
           <div class="van-coupon">
             <div class="van-coupon__content">
               <div class="van-coupon__head">
-                <h2><span>¥</span> 1.5</h2>
+                <h2 class="van-coupon__amount"><span>¥</span> 1.5</h2>
                 <p>无使用门槛</p>
               </div>
               <div class="van-coupon__body">
-                <h2>name</h2>
+                <h2 class="van-coupon__name">name</h2>
                 <p>有效期：2017.03.10 - 2017.12.30</p>
                 <div class="van-checkbox van-coupon__corner">
-                  <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
+                  <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="border-color: #f44; background-color: rgb(255, 68, 68);">
                       <!----></i></div>
                 </div>
               </div>
@@ -68,11 +68,11 @@ exports[`render coupon list 1`] = `
           <div class="van-coupon">
             <div class="van-coupon__content">
               <div class="van-coupon__head">
-                <h2><span>¥</span> 1</h2>
+                <h2 class="van-coupon__amount"><span>¥</span> 1</h2>
                 <p>无使用门槛</p>
               </div>
               <div class="van-coupon__body">
-                <h2>name</h2>
+                <h2 class="van-coupon__name">name</h2>
                 <p>有效期：2017.03.10 - 2017.12.30</p>
               </div>
             </div>
@@ -81,11 +81,11 @@ exports[`render coupon list 1`] = `
           <div class="van-coupon">
             <div class="van-coupon__content">
               <div class="van-coupon__head">
-                <h2><span>¥</span> 1.23</h2>
+                <h2 class="van-coupon__amount"><span>¥</span> 1.23</h2>
                 <p>无使用门槛</p>
               </div>
               <div class="van-coupon__body">
-                <h2>name</h2>
+                <h2 class="van-coupon__name">name</h2>
                 <p>有效期：2017.03.10 - 2017.12.30</p>
               </div>
             </div>
@@ -94,11 +94,11 @@ exports[`render coupon list 1`] = `
           <div class="van-coupon">
             <div class="van-coupon__content">
               <div class="van-coupon__head">
-                <h2>8.8折</h2>
-                <p>满0.50元可用</p>
+                <h2 class="van-coupon__amount">8.8折</h2>
+                <p>满0.5元可用</p>
               </div>
               <div class="van-coupon__body">
-                <h2>name</h2>
+                <h2 class="van-coupon__name">name</h2>
                 <p>有效期：2017.03.10 - 2017.12.30</p>
               </div>
             </div>
@@ -106,11 +106,11 @@ exports[`render coupon list 1`] = `
           <div class="van-coupon">
             <div class="van-coupon__content">
               <div class="van-coupon__head">
-                <h2>9折</h2>
-                <p>满0.50元可用</p>
+                <h2 class="van-coupon__amount">9折</h2>
+                <p>满0.5元可用</p>
               </div>
               <div class="van-coupon__body">
-                <h2>name</h2>
+                <h2 class="van-coupon__name">name</h2>
                 <p>有效期：2017.03.10 - 2017.12.30</p>
               </div>
             </div>
@@ -129,11 +129,11 @@ exports[`render disabled coupon 1`] = `
 <div class="van-coupon van-coupon--disabled">
   <div class="van-coupon__content">
     <div class="van-coupon__head">
-      <h2><span>¥</span> 1.5</h2>
+      <h2 class="van-coupon__amount"><span>¥</span> 1.5</h2>
       <p>无使用门槛</p>
     </div>
     <div class="van-coupon__body">
-      <h2>name</h2>
+      <h2 class="van-coupon__name">name</h2>
       <p>有效期：2017.03.10 - 2017.12.30</p>
     </div>
   </div>
diff --git a/packages/coupon/index.js b/packages/coupon/index.js
index 99bd948fa..609703b13 100644
--- a/packages/coupon/index.js
+++ b/packages/coupon/index.js
@@ -1,4 +1,5 @@
 import { use } from '../utils';
+import { RED } from '../utils/color';
 import Checkbox from '../checkbox';
 
 const [sfc, bem, t] = use('coupon');
@@ -9,7 +10,9 @@ function padZero(num) {
 
 function getDate(timeStamp) {
   const date = new Date(timeStamp * 1000);
-  return `${date.getFullYear()}.${padZero(date.getMonth() + 1)}.${padZero(date.getDate())}`;
+  return `${date.getFullYear()}.${padZero(date.getMonth() + 1)}.${padZero(
+    date.getDate()
+  )}`;
 }
 
 function formatDiscount(discount) {
@@ -33,25 +36,31 @@ export default sfc({
 
   computed: {
     validPeriod() {
-      return `${t('valid')}：${getDate(this.coupon.startAt)} - ${getDate(this.coupon.endAt)}`;
+      const { startAt, endAt } = this.coupon;
+      return `${t('valid')}：${getDate(startAt)} - ${getDate(endAt)}`;
     },
 
     faceAmount() {
       const { coupon } = this;
+
       if (coupon.valueDesc) {
         return `${coupon.valueDesc}<span>${coupon.unitDesc || ''}</span>`;
       }
-      return coupon.denominations
-        ? `<span>${this.currency}</span> ${formatAmount(this.coupon.denominations)}`
-        : coupon.discount
-          ? t('discount', formatDiscount(this.coupon.discount))
-          : '';
+
+      if (coupon.denominations) {
+        return `<span>${this.currency}</span> ${formatAmount(this.coupon.denominations)}`;
+      }
+
+      if (coupon.discount) {
+        return t('discount', formatDiscount(this.coupon.discount));
+      }
+
+      return '';
     },
 
     conditionMessage() {
-      let condition = this.coupon.originCondition;
-      condition = condition % 100 === 0 ? Math.round(condition / 100) : (condition / 100).toFixed(2);
-      return condition === 0 ? t('unlimited') : t('condition', condition);
+      const condition = formatAmount(this.coupon.originCondition);
+      return condition === '0' ? t('unlimited') : t('condition', condition);
     }
   },
 
@@ -63,13 +72,15 @@ export default sfc({
       <div class={bem({ disabled })}>
         <div class={bem('content')}>
           <div class={bem('head')}>
-            <h2 domPropsInnerHTML={this.faceAmount} />
+            <h2 class={bem('amount')} domPropsInnerHTML={this.faceAmount} />
             <p>{this.coupon.condition || this.conditionMessage}</p>
           </div>
           <div class={bem('body')}>
-            <h2>{coupon.name}</h2>
+            <h2 class={bem('name')}>{coupon.name}</h2>
             <p>{this.validPeriod}</p>
-            {this.chosen && <Checkbox value={true} class={bem('corner')} />}
+            {this.chosen && (
+              <Checkbox value={true} class={bem('corner')} checked-color={RED} />
+            )}
           </div>
         </div>
         {description && <p class={bem('description')}>{description}</p>}
diff --git a/packages/coupon/index.less b/packages/coupon/index.less
index 361366170..35be4d6f8 100644
--- a/packages/coupon/index.less
+++ b/packages/coupon/index.less
@@ -2,21 +2,21 @@
 @import '../style/mixins/ellipsis';
 
 .van-coupon {
-  margin: 0 15px 15px;
+  margin: @coupon-margin;
   overflow: hidden;
-  background-color: @white;
-  border-radius: 4px;
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+  background-color: @coupon-background-color;
+  border-radius: @coupon-border-radius;
+  box-shadow: @coupon-box-shadow;
 
   &:active {
-    background-color: @active-color;
+    background-color: @coupon-active-background-color;
   }
 
   &__content {
     display: flex;
     box-sizing: border-box;
-    height: 100px;
-    padding: 24px 0 0 15px;
+    height: @coupon-content-height;
+    padding: @coupon-content-padding;
   }
 
   p,
@@ -40,67 +40,62 @@
 
   &__head {
     position: relative;
-    min-width: 85px;
+    min-width: @coupon-head-width;
     padding-right: 10px;
 
-    h2 {
-      color: @red;
-      font-size: 24px;
-
-      span {
-        &:not(:empty) {
-          margin-left: 2px;
-        }
-
-        font-size: 50%;
-      }
-    }
-
     p {
       white-space: pre-wrap;
     }
   }
 
+  &__amount {
+    color: @coupon-amount-color;
+    font-size: @coupon-amount-font-size;
+
+    span {
+      font-size: @coupon-currency-font-size;
+
+      &:not(:empty) {
+        margin-left: 2px;
+      }
+    }
+  }
+
   &__body {
     position: relative;
     flex: 1;
-    border-radius: 0 4px 4px 0;
+    border-radius: 0 @coupon-border-radius @coupon-border-radius 0;
+  }
 
-    h2 {
-      font-size: 16px;
-    }
+  &__name {
+    font-size: @coupon-name-font-size;
   }
 
   &__corner {
     position: absolute;
     top: 16px;
     right: 15px;
-
-    .van-icon {
-      background-color: @red;
-      border-color: @red;
-    }
   }
 
   &__description {
-    padding: 7px 15px;
-    background-color: @background-color-light;
-    border-top: 1px dashed @border-color;
+    padding: @coupon-description-padding;
+    background-color: @coupon-description-background-color;
+    border-top: 1px dashed @coupon-description-border-color;
   }
 
   &--disabled {
     &:active {
-      background-color: @white;
+      background-color: @coupon-background-color;
     }
 
     .van-coupon-item__content {
-      height: 90px;
+      height: @coupon-content-height - 10px;
     }
 
     p,
     h2,
     span {
-      color: @gray-dark;
+      color: @coupon-disabled-text-color;
     }
   }
 }
diff --git a/packages/style/var.less b/packages/style/var.less
index 8e8d40c83..9522a5879 100644
--- a/packages/style/var.less
+++ b/packages/style/var.less
@@ -166,6 +166,24 @@
 @contact-list-add-button-z-index: 9999;
 @contact-list-item-padding: 15px;
 
+// Coupon
+@coupon-margin: 0 15px 15px;
+@coupon-content-height: 100px;
+@coupon-content-padding: 24px 0 0 15px;
+@coupon-background-color: @white;
+@coupon-active-background-color: @active-color;
+@coupon-border-radius: 4px;
+@coupon-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+@coupon-head-width: 85px;
+@coupon-amount-color: @red;
+@coupon-amount-font-size: 24px;
+@coupon-currency-font-size: 50%;
+@coupon-name-font-size: 16px;
+@coupon-disabled-text-color: @gray-dark;
+@coupon-description-padding: 7px 15px;
+@coupon-description-background-color: @background-color-light;
+@coupon-description-border-color: @border-color;
+
 // Dialog
 @dialog-width: 85%;
 @dialog-font-size: 16px;