✨ 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,26 +81,31 @@ 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;
     font-size: 0.85rem;
     padding: 2rem;
     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;
       display: inline-block;
       font-size: 0.5rem;
       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;
       display: inline-block;
       font-size: 1.25rem;
       font-size: 1.25rem;
@@ -113,9 +113,11 @@ export default {
       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;
       font-size: 0.8rem;
@@ -126,11 +128,21 @@ export default {
       padding: 0.5rem 0;
       padding: 0.5rem 0;
     }
     }
   }
   }
+
   .date {
   .date {
     color: #272727;
     color: #272727;
     font-size: 0.85rem;
     font-size: 0.85rem;
     text-align: right;
     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>