UI优化

src/components/CommonPopup/CommonPopup.tsx

@@ -55,17 +55,17 @@ const CommonPopup: React.FC<CommonPopupProps> = ({
 
   const handleTouchStart = (e: any) => {
     if (!enableDragToClose) return
-    
+
     touchStartY.current = e.touches[0].clientY
     setIsDragging(true)
   }
 
   const handleTouchMove = (e: any) => {
     if (!enableDragToClose || !isDragging) return
-    
+
     const currentY = e.touches[0].clientY
     const deltaY = currentY - touchStartY.current
-    
+
     // 只允许向下拖动，限制最大拖动距离
     if (deltaY > 0) {
       setDragOffset(Math.min(deltaY, 200))
@@ -74,14 +74,14 @@ const CommonPopup: React.FC<CommonPopupProps> = ({
 
   const handleTouchEnd = () => {
     if (!enableDragToClose || !isDragging) return
-    
+
     setIsDragging(false)
-    
+
     // 如果拖动距离超过阈值，关闭弹窗
     if (dragOffset > 100) {
       onClose()
     }
-    
+
     // 重置拖动偏移
     setDragOffset(0)
   }
@@ -94,14 +94,14 @@ const CommonPopup: React.FC<CommonPopupProps> = ({
       closeable={false}
       onClose={onClose}
       className={`${styles['common-popup']} ${className ? className : ''}`}
-      style={{ 
-        zIndex: zIndex ? zIndex : undefined, 
-        ...style 
+      style={{
+        zIndex: zIndex ? zIndex : undefined,
+        ...style
       }}
     >
       {enableDragToClose && (
         <View className={styles['common-popup__drag-handle-container']}>
-          <View 
+          <View
             className={styles['common-popup__drag-handle']}
             style={{
               transform: `translateX(-50%) translateY(${dragOffset * 0.3}px)`,
@@ -118,6 +118,12 @@ const CommonPopup: React.FC<CommonPopupProps> = ({
       {showHeader && (
         <View className={styles['common-popup__header']}>
           {typeof title === 'string' ? <Text className={styles['common-popup__title']}>{title}</Text> : title}
+          <View className={styles["close_button"]} onClick={onClose}>
+            <View className={styles["close_icon"]}>
+              <View className={styles["close_line"]}></View>
+              <View className={styles["close_line"]}></View>
+            </View>
+          </View>
         </View>
       )}
 

src/components/CommonPopup/index.module.scss

@@ -3,9 +3,11 @@
 .common-popup {
   position: fixed;
   z-index: 9999 !important;
+
   .common-popup__drag-handle-container {
     position: position;
   }
+
   .common-popup__drag-handle {
     position: absolute;
     top: 6px;
@@ -22,22 +24,71 @@
       background-color: #9ca3af;
     }
   }
+
   padding: 0;
   box-sizing: border-box;
   max-height: calc(100vh - 10px);
   display: flex;
   flex-direction: column;
   background-color: theme.$page-background-color;
-  .common-popup__header {
-    padding: 12px 16px;
-    font-size: 16px;
-    font-weight: 600;
-    color: #1f2329;
-    border-bottom: 1px solid #f0f1f5;
-  }
 
-  .common-popup__title {
-    display: inline-block;
+  // .common-popup__header {
+  //   padding: 12px 16px;
+  //   font-size: 16px;
+  //   font-weight: 600;
+  //   color: #1f2329;
+  //   border-bottom: 1px solid #f0f1f5;
+  // }
+
+  .common-popup__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+
+    .common-popup__title {
+      font-family: 'PingFang SC';
+      font-weight: 600;
+      font-size: 22px;
+      line-height: 1.27em;
+      color: #000000;
+      text-align: center;
+    }
+
+    .close_button {
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #FFFFFF;
+      border: 1px solid rgba(0, 0, 0, 0.06);
+      border-radius: 50%;
+      cursor: pointer;
+      box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06);
+
+      .close_icon {
+        position: relative;
+        width: 24px;
+        height: 24px;
+
+        .close_line {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          width: 17px;
+          height: 3px;
+          border-radius: 3px;
+          background: #000000;
+          transform: translate(-50%, -50%) rotate(45deg);
+
+          &:nth-child(2) {
+            transform: translate(-50%, -50%) rotate(-45deg);
+          }
+        }
+      }
+    }
   }
 
   .common-popup__body {
@@ -83,4 +134,4 @@
     border-radius: 12px !important;
     padding: 4px 10px;
   }
-}
+}