优化样式

src/assets/css/index.scss

@@ -1,4 +1,5 @@
 @import "./styles.scss";
+
 @font-face {
   font-family: 'iconfont';  /* project id 1995974 */
   src: url('https://at.alicdn.com/t/font_1995974_ihzpmuv4lpk.eot');
@@ -272,6 +273,15 @@ img {
   align-items: center;
 }
 
+.flex-base {
+  display: flex;
+  align-items: baseline;
+
+  &.center {
+    justify-content: center;
+  }
+}
+
 .flex-between {
   display: flex;
   align-items: center;

src/assets/css/styles.scss

@@ -7,6 +7,9 @@
 }
 
 @for $i from 1 through 30 {
+  .f-#{$i} {
+    font-size: #{$i}px;
+  }
   @each $p, $pv in (margin:m, padding:p) {
     .#{$pv}-#{$i} {
       #{$p}: #{$i}px;
@@ -27,3 +30,6 @@
     }
   }
 }
+.through{
+  text-decoration: line-through;
+}

src/components/AiPayment.vue

@@ -12,10 +12,13 @@
           <div class="c-f00 mt-16" v-text="`￥${pay.price}`"/>
         </div>
       </div>
-      <div v-if="search.module == '1' " class="payments mb-16">
+      <div v-else-if="search.module == '1' " class="payments mb-16">
         <div class="card" v-for="pay in payments" :key="pay.id" :class="{active:pay.id==selected.id}"
              @click="getQrcode(pay)">
-          <div class="c-f00 mt-16" v-text="`￥${pay.price}`"/>
+          <div class="mt-16 flex-base center">
+            <div class="c-f00 f-20 mr-4" v-text="`￥${pay.price}`"/>
+            <div class="c-999 through" v-text="`￥${pay.originPrice}`"/>
+          </div>
           <div class="c-999 mt-16" v-text="`${pay.coin}金币`"/>
         </div>
       </div>
@@ -31,7 +34,8 @@
           <div v-else class="qrcode c-666">请选择<br>项目</div>
           <div class="c-999 ml-16">
             <div class="flex-center mb-16">
-              应付金额：<div class="c-f00" style="font-size: 20px;">￥{{ selected.price }}</div>
+              应付金额：
+              <div class="c-f00" style="font-size: 20px;">￥{{ selected.price }}</div>
             </div>
             <div class="wechat flex-center">
               微信扫码支付
@@ -40,8 +44,8 @@
         </div>
       </el-row>
       <div class="bottom flex-center">
-        <el-button size="small">取消支付</el-button>
-        <el-button size="small">已扫码支付</el-button>
+        <el-button size="small" @click="$emit('cancel')">取消支付</el-button>
+        <el-button size="small" @click="$emit('ok')">已扫码支付</el-button>
       </div>
     </div>
   </section>
@@ -66,7 +70,7 @@ export default {
     }
   },
   computed: {
-    wechatLogo: v => require("../assets/wechat_logo.png")
+    wechatLogo: () => require("../assets/wechat_logo.png")
   },
   methods: {
     getPayments() {
@@ -121,6 +125,7 @@ export default {
 
     li {
       list-style-type: circle;
+      margin-left: 32px;
     }
   }
 
@@ -133,7 +138,7 @@ export default {
       user-select: none;
       text-align: center;
       border: 1px solid #ddd;
-      padding: 32px 64px;
+      padding: 32px 16px;
       border-radius: 4px;
 
       &.active {