发布球局

src/components/ActivityTypeSwitch/index.module.scss

@@ -0,0 +1,49 @@
+.activity-type-switch {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 12px;
+  padding: 0 4px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  height: 40px;
+  border-radius: 12px;
+  padding: 4px;
+  overflow: hidden;
+}
+
+.switch-tab {
+  flex: 1;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  cursor: pointer;
+  border: 1px solid #e5e5e5;
+  color: #1890ff;
+  opacity: 0.3;
+  box-shadow: none;
+  border: none;
+}
+
+.switch-tab.active {
+  background: white;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  box-shadow: 0px 4px 48px 0px rgba(0, 0, 0, 0.08);
+  opacity: 1;
+}
+
+.icon-style {
+  width: 20px;
+  height: 20px;
+}
+
+.tab-icon {
+  font-size: 18px;
+  line-height: 1;
+}
+
+.tab-text {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}

src/components/ActivityTypeSwitch/index.scss

@@ -1,50 +0,0 @@
-@use '~@/scss/themeColor.scss' as theme;
-
-.activity-type-switch {
-  display: flex;
-  gap: 12px;
-  margin-bottom: 12px;
-  padding: 0 4px;
-  border: 1px solid rgba(0, 0, 0, 0.06);
-  height: 40px;
-  border-radius: 12px;
-  padding: 4px;
-  overflow: hidden;
-  .switch-tab {
-    flex: 1;
-    border-radius: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    cursor: pointer;
-    border: 1px solid #e5e5e5;
-    color: theme.$primary-color;
-    opacity: 0.3;
-    box-shadow: none;
-    border: none;
-    .icon-style {
-      width: 20px;
-      height: 20px;
-    }
-    &.active {
-      background: white;
-      border: 1px solid rgba(0, 0, 0, 0.06);
-      box-shadow: 0px 4px 48px 0px rgba(0, 0, 0, 0.08);
-      opacity: 1;
-    }
-
-    .tab-icon {
-      font-size: 18px;
-      line-height: 1;
-    }
-
-    .tab-text {
-      font-size: 14px;
-      color: #333;
-      font-weight: 500;
-    }
-
- 
-  }
-}

src/components/ActivityTypeSwitch/index.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import { View, Text, Image } from '@tarojs/components'
 import images from '@/config/images'
-
-import './index.scss'
+import styles from './index.module.scss'
 
 export type ActivityType = 'individual' | 'group'
 
@@ -13,22 +12,22 @@ interface ActivityTypeSwitchProps {
 
 const ActivityTypeSwitch: React.FC<ActivityTypeSwitchProps> = ({ value, onChange }) => {
   return (
-    <View className='activity-type-switch'>
+    <View className={styles['activity-type-switch']}>
       <View 
-        className={`switch-tab ${value === 'individual' ? 'active' : ''}`}
+        className={`${styles['switch-tab']} ${value === 'individual' ? styles.active : ''}`}
         onClick={() => onChange('individual')}
       >
-        <View className='tab-icon'>
-          <Image src={images.ICON_PERSONAL} className='icon-style' />
+        <View className={styles['tab-icon']}>
+          <Image src={images.ICON_PERSONAL} className={styles['icon-style']} />
         </View>
-        <Text className='tab-text'>个人约球</Text>
+        <Text className={styles['tab-text']}>个人约球</Text>
       </View>
       <View 
-        className={`switch-tab ${value === 'group' ? 'active' : ''}`}
+        className={`${styles['switch-tab']} ${value === 'group' ? styles.active : ''}`}
         onClick={() => onChange('group')}
       >
-        <Image src={images.ICON_CHANGDA} className='icon-style' />
-        <Text className='tab-text'>畅打活动</Text>
+        <Image src={images.ICON_CHANGDA} className={styles['icon-style']} />
+        <Text className={styles['tab-text']}>畅打活动</Text>
       </View>
     </View>
   )