UI修改

src/components/RewardUs.vue

@@ -74,6 +74,7 @@ watch(
 
 <template>
   <view class="container">
+    <image src="../static/donate.png" mode="widthFix" />
     <text>感谢您对我们公益项目的支持！</text>
     <view class="amounts">
       <button
@@ -125,7 +126,12 @@ watch(
   align-items: center;
   transition: all 0.3s ease-in-out;
 }
-.container > text:first-child {
+.container > image:first-child {
+  width: 200rpx;
+  position: absolute;
+  top: -114rpx;
+}
+.container > text:nth-child(2) {
   font-weight: 500;
   font-size: 28rpx;
   color: #333333;
@@ -156,40 +162,40 @@ watch(
 .amounts > button > text:last-child {
   font-size: 34rpx;
 }
-.container > view:nth-child(3) {
+.container > view:nth-child(4) {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   margin-top: 20rpx;
 }
-.container > view:nth-child(3) > view {
+.container > view:nth-child(4) > view {
   width: 32rpx;
   height: 32rpx;
   margin: 0 10rpx;
   border: 1rpx solid #e3e3e3;
   border-radius: 50%;
 }
-.container > view:nth-child(3) > image {
+.container > view:nth-child(4) > image {
   width: 32rpx;
   height: 32rpx;
   margin: 0 10rpx;
 }
-.container > view:nth-child(3) > text {
+.container > view:nth-child(4) > text {
   font-size: 24rpx;
   color: #333333;
   margin: 20rpx 0;
 }
-.container > view:nth-child(4) {
+.container > view:nth-child(5) {
   margin-bottom: 25rpx;
 }
-.container > view:nth-child(4) > view {
+.container > view:nth-child(5) > view {
   width: 100%;
   display: flex;
   justify-content: flex-start;
   margin-bottom: 20rpx;
 }
-.container > view:nth-child(4) > view > text {
+.container > view:nth-child(5) > view > text {
   font-size: 24rpx;
   color: #333333;
   width: 30%;
@@ -198,7 +204,7 @@ watch(
   height: 60rpx;
   line-height: 60rpx;
 }
-.container > view:nth-child(4) > view > input {
+.container > view:nth-child(5) > view > input {
   border-radius: 12rpx;
   border: 1rpx solid #fed848;
   height: 40rpx;
@@ -206,9 +212,10 @@ watch(
   padding: 10rpx 20rpx;
   font-size: 30rpx;
   margin-right: 10rpx;
+  width: 55%;
 }
-.container > view:nth-child(4) > view > textarea {
-  width: 70%;
+.container > view:nth-child(5) > view > textarea {
+  width: 55%;
   border-radius: 12rpx;
   border: 1rpx solid #fed848;
   height: 100rpx;

src/components/ScreenHint2.vue

@@ -53,8 +53,7 @@ const props = defineProps({
   position: relative;
   width: 75vw;
   margin-bottom: 15px;
-  border-radius: 20px;
-  overflow: hidden;
+  border-radius: 30rpx;
   background: #fff;
 }
 .container > view:first-child > image {
@@ -62,5 +61,7 @@ const props = defineProps({
   width: 100%;
   z-index: -1;
   top: 0;
+  border-top-left-radius: 30rpx;
+  border-top-right-radius: 30rpx;
 }
 </style>