优惠券加名字

wx_application/src/views/coupon/detail.vue

 <template>
   <div class="contain">
     <div class="box">
+      <div class="name">{{ form.name }}</div>
       <div class="yhq"> 
         <div class="left">
           <div class="price">¥{{ form.unit }}</div>
@@ -30,6 +31,7 @@ export default {
   data() {
     return {
       form: {
+        name: '优惠券',
         unit: '100',
         type: '老用户回馈券',
         usageAmount: '500',
@@ -73,6 +75,11 @@ export default {
 </script>
 
 <style  scoped>
+.name {
+  font-size: 22px;
+  padding-bottom: 16px;
+  text-align: center;
+}
 .contain {
   background-color: rgb(237, 239, 243);
   height: 100%;
@@ -83,7 +90,7 @@ export default {
   height: 50%;
   background-color: #fff;
   width: 90%;
-  padding: 50px 20px;
+  padding: 20px 20px 50px;
 }
 .yhq {
   background-color: #F39B00;

wx_application/src/views/coupon/list.vue

 <template>
   <div class="contain">
     <div class="box"  v-for="(item,index) in list" :key="index" @click="handleCoupon(item.id)">
+      <div class="name">{{ item.name }}</div>
+        <div class="nr">
           <div class="left" >
           <div class="price">¥{{ item.unit }}</div>
           <div class="type">{{ item.type }}</div>
@@ -14,6 +16,8 @@
           </div>
         </div>
       </div>
+      
+    </div>
     <div class="btn-plus" @click="handleAddCoupon"><span>+</span></div>
   </div>
 </template>
@@ -67,6 +71,14 @@ export default {
 </script>
 
 <style scoped>
+.name {
+  display: flex;
+  align-items: center;
+  font-size: 20px;
+  width: 100%;
+  border-bottom: 1px dashed #ccc;
+  padding-bottom: 10px;
+}
 .contain {
   background-color: rgb(237, 239, 243);
   height: auto;
@@ -80,6 +92,7 @@ export default {
 }
 .box {
   display: flex;
+  flex-direction: column;
   align-items: center;
   width: 90%;
   padding: 20px;
@@ -88,6 +101,11 @@ export default {
   border: 1px solid #777;
   margin-top: 18px;
 }
+.nr {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
 .left {
   width: 35%;
 }