优惠券加名字

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="left" >
-        <div class="price">¥{{ item.unit }}</div>
-        <div class="type">{{ item.type }}</div>
-      </div>
-      <div class="right">
-        <div>满{{ item.salesUnit }}元可用</div>
-        <div class="time">
-          <div>有效期：</div>
-          <span>{{ item.begin_date }}</span>~
-          <span>{{ item.end_date }}</span>
+      <div class="name">{{ item.name }}</div>
+        <div class="nr">
+          <div class="left" >
+          <div class="price">¥{{ item.unit }}</div>
+          <div class="type">{{ item.type }}</div>
+        </div>
+        <div class="right">
+          <div>满{{ item.salesUnit }}元可用</div>
+          <div class="time">
+            <div>有效期：</div>
+            <span>{{ item.begin_date }}</span>~
+            <span>{{ item.end_date }}</span>
+          </div>
         </div>
       </div>
+      
     </div>
     <div class="btn-plus" @click="handleAddCoupon"><span>+</span></div>
   </div>
@@ -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%;
 }