Refactor TransferMessage component to improve layout and styling. Adjust icon size and add status display for better user experience.

Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/TransferMessage/TransferMessage.module.scss

@@ -38,20 +38,18 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
-  background: #ffffff;
+  width: 36px;
+  height: 36px;
   border-radius: 50%;
   flex-shrink: 0;
   font-size: 18px;
-  color: #ff9500;
+  color: #ffffff;
+  border: 2px solid #ffffff;
 }
 
 .transferAmount {
-  font-size: 20px;
-  font-weight: 600;
+  font-size: 16px;
   color: #ffffff;
-  line-height: 1.2;
   flex: 1;
 }
 

Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/TransferMessage/index.tsx

@@ -50,11 +50,14 @@ const TransferMessage: React.FC<TransferMessageProps> = ({ content }) => {
         <div className={styles.transferCard}>
           <div className={styles.transferHeader}>
             <div className={styles.transferIcon}>
-              <SwapOutlined />
+              <SwapOutlined style={{ fontSize: 20 }} />
+            </div>
+            <div className="destion">
+              <div className={styles.transferAmount}>{amount}</div>
+              <div className={styles.transferStatus}>{statusText}</div>
             </div>
-            <div className={styles.transferAmount}>{amount}</div>
           </div>
-          <div className={styles.transferStatus}>{statusText}</div>
+
           <div className={styles.transferDivider}></div>
           <div className={styles.transferFooter}>
             <span className={styles.transferLabel}>微信转账</span>