✨ feat: 捐赠证书样式调整

@@ -15,7 +15,7 @@
       </van-row>
       </van-row>
     </div>
     </div>
     <div class="content">
     <div class="content">
-      感谢您对“童声无界-声音漂流记”活动的支持。上海市儿童基金会已收到您的捐助，您的捐助将全部用于多民族语言发展项目，感谢您的爱心捐赠！
+      感谢您为“童声无界”活动的捐赠，让更多的孩子体验到了阅读的乐趣。您的爱心行为增加了两地儿童的牵绊，使更多的孩子交到了远方的朋友。共读一本书，传递一份爱。初心为爱，童声无界感谢您对公益事业的支持。
     </div>
     </div>
     <div class="price">
     <div class="price">
       <div>爱心捐赠</div>
       <div>爱心捐赠</div>
@@ -34,6 +34,12 @@
       </div>
       </div>
     </div>
     </div>
     <div class="date">{{ item.donate_date }}</div>
     <div class="date">{{ item.donate_date }}</div>
+    <!-- TODO: 编号需要联调 -->
+    <div style="color: #713610; padding: 1rem 2rem; font-size: 0.9rem;">
+      证书编号：TSWJ202205260005
+    </div>
+    <div class="wrapper-border" />
+    <div style="height: 2rem;" />
   </div>
   </div>
 </template>
 </template>
 
 
@@ -42,17 +48,6 @@ import icon_cert from '@images/zhengshu@2x.png'
 import icon_stamp01 from '@images/stamp01.png'
 import icon_stamp01 from '@images/stamp01.png'
 import icon_stamp02 from '@images/stamp02.png'
 import icon_stamp02 from '@images/stamp02.png'
 
 
-import { ref, reactive, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import axios from '@/utils/axios';
-import $ from 'jquery'
-import { Toast } from 'vant';
-const $route = useRoute();
-const $router = useRouter();
-
-onMounted(() => {
-
-})
 </script>
 </script>
 
 
 <script>
 <script>
@@ -86,51 +81,68 @@ export default {
   width: 100%;
   width: 100%;
   position: relative;
   position: relative;
   border-radius: 10px;
   border-radius: 10px;
-  height: 85vh;
+  // height: 85vh;
   .header-bg {
   .header-bg {
     text-align: center;
     text-align: center;
   }
   }
+
   .title {
   .title {
     padding: 0 2rem;
     padding: 0 2rem;
   }
   }
+
   .content {
   .content {
-    font-size: 0.85rem; 
-    padding: 2rem; 
+    font-size: 0.85rem;
+    padding: 2rem;
     line-height: 1.75;
     line-height: 1.75;
   }
   }
+
   .price {
   .price {
     margin-left: 5rem;
     margin-left: 5rem;
+
     div:first-child {
     div:first-child {
-      display: inline-block; 
-      font-size: 0.5rem; 
+      display: inline-block;
+      font-size: 0.5rem;
       vertical-align: middle;
       vertical-align: middle;
-       margin-right: 0.5rem;
+      margin-right: 0.5rem;
     }
     }
+
     div:last-child {
     div:last-child {
-      display: inline-block; 
-      font-size: 1.25rem; 
-      color: red; 
+      display: inline-block;
+      font-size: 1.25rem;
+      color: red;
       vertical-align: middle;
       vertical-align: middle;
     }
     }
   }
   }
+
   .organizer {
   .organizer {
-    margin: 1rem; 
+    margin: 1rem;
     overflow: hidden;
     overflow: hidden;
+
     .wrapper {
     .wrapper {
       float: right;
       float: right;
-      font-size: 0.8rem; 
-      text-align: center; 
-      line-height: 2; 
-      position: relative; 
-      color: #0B3A72; 
+      font-size: 0.8rem;
+      text-align: center;
+      line-height: 2;
+      position: relative;
+      color: #0B3A72;
       padding: 0.5rem 0;
       padding: 0.5rem 0;
     }
     }
   }
   }
+
   .date {
   .date {
-    color: #272727; 
-    font-size: 0.85rem; 
-    text-align: right; 
+    color: #272727;
+    font-size: 0.85rem;
+    text-align: right;
     padding-right: 2rem;
     padding-right: 2rem;
   }
   }
+  .wrapper-border {
+    position: absolute;
+    border: 1px dashed #000;
+    height: 95%;
+    top: 0;
+    width: 93%;
+    margin: 3%;
+    border-radius: 1rem;
+  }
 }
 }
 </style>
 </style>