fix(style): 内联样式改用 kebab-case 属性名

- SpImage / SpPage header / SpSearchOne / SpTabbar 等组件
- 首页微件、分类/门店商品标签、会员价列表、退款页 AtTabs
- 与小程序端样式解析一致，避免 backgroundColor、borderColor 等不生效

Made-with: Cursor

src/components/sp-image/index.js

@@ -96,8 +96,8 @@ function SpImage(props) {
           style={{
             width: '100%',
             height: '100%',
-            borderRadius: Taro.pxTransform(props.circle || props.radius),
-            backgroundColor: props.placeholderColor
+            'border-radius': Taro.pxTransform(props.circle || props.radius),
+            'background-color': props.placeholderColor
           }}
         ></View>
       )}

src/components/sp-page/header.js

@@ -49,7 +49,7 @@ const CustomNavigationHeader = memo((props) => {
     const headerBg =
       statusBarBgColor ?? immersiveScrollRevealBgColor ?? value?.navigateBackgroundColor
     if (headerBg) {
-      style.backgroundColor = headerBg
+      style['background-color'] = headerBg
     }
     if (value?.navigateBackgroundImage) {
       style['background-image'] = `url(${value?.navigateBackgroundImage})`

src/components/sp-search-one/index.jsx

@@ -88,7 +88,7 @@ function SpSearchOne(props) {
     >
       <View
         className='sp-search-one__input-wrap'
-        style={{ backgroundColor: props.backgroundColor, borderColor: props.borderColor }}
+        style={{ 'background-color': props.backgroundColor, 'border-color': props.borderColor }}
       >
         <SpImage src='fv_search.png' width={40} height={40} />
         {!props.inputEnabled && (

src/components/sp-tabbar/index.js

@@ -95,7 +95,7 @@ function SpTabbar() {
   }
 
   return (
-    <View className='sp-tabbar' style={{ backgroundColor: backgroundColor }}>
+    <View className='sp-tabbar' style={{ 'background-color': backgroundColor }}>
       {tabList?.map((item, index) => {
         const iconPath = index == currentIndex ? item.selectedIconPath : item.iconPath
         return (

src/marketing/pages/plusprice/detail-plusprice-list.js

@@ -167,7 +167,7 @@ export default class DetailPluspriceList extends Component {
           <View className='title'> {promotion_activity.marketing_name} </View>
           <View
             className='plusprice-goods__timer'
-            style={{ backgroundColor: timeBackgroundColor ? timeBackgroundColor : '#FC682D' }}
+            style={{ 'background-color': timeBackgroundColor ? timeBackgroundColor : '#FC682D' }}
           >
             <View>
               <Text className='time-text'>距结束</Text>

src/pages/category/comps/comp-goods-item.js

@@ -156,8 +156,8 @@ function CompGoodsItem(props) {
               key={item.tag_id}
               style={styleNames({
                 color: item.font_color,
-                borderColor: item.tag_color,
-                backgroundColor: item.tag_color
+                'border-color': item.tag_color,
+                'background-color': item.tag_color
               })}
             >
               {item.tag_name}

src/pages/home/wgts/comps/nav-bar/index.jsx

@@ -97,7 +97,7 @@ export default function LocationModuleNavBar(props) {
                   {base.navitemborder && isActive && (
                     <View
                       className='wgt-comps__nav-item-border'
-                      style={{ backgroundColor: `${base.navitembordercolor || 'transparent'}` }}
+                      style={{ 'background-color': `${base.navitembordercolor || 'transparent'}` }}
                     />
                   )}
                 </View>

src/pages/home/wgts/couponcard/index.jsx

@@ -67,7 +67,7 @@ function WgtCouponCard(props) {
   const receiveBtnStyle = useMemo(() => {
     const { color, textColor } = receiveBtn
     return {
-      backgroundColor: color,
+      'background-color': color,
       color: textColor
     }
   }, [receiveBtn])

src/pages/home/wgts/store.js

@@ -65,7 +65,7 @@ export default class WgtStore extends Component {
           <View
             className='store-wrap'
             key={item.id}
-            style={{ backgroundColor: base.backgroundColor || '#FFF' }}
+            style={{ 'background-color': base.backgroundColor || '#FFF' }}
           >
             <View className='store-info' onClick={this.handleStoreClick.bind(this, item.id)}>
               <SpImage

src/subpage/pages/trade/refund.js

@@ -285,7 +285,7 @@ export default class TradeRefund extends Component {
           current={curSegIdx}
           tabList={segTypes}
           onClick={this.handleClickTab}
-          customStyle={{ color: colors.data[0].primary, backgroundColor: colors.data[0].primary }}
+          customStyle={{ color: colors.data[0].primary, 'background-color': colors.data[0].primary }}
         >
           {/* {segTypes.map((panes, pIdx) => (
             <AtTabsPane current={curSegIdx} key={panes.status} index={pIdx}></AtTabsPane>

src/subpages/community/trade/refund.js

@@ -284,7 +284,7 @@ export default class TradeRefund extends Component {
           current={curSegIdx}
           tabList={segTypes}
           onClick={this.handleClickTab}
-          customStyle={{ color: colors.data[0].primary, backgroundColor: colors.data[0].primary }}
+          customStyle={{ color: colors.data[0].primary, 'background-color': colors.data[0].primary }}
         >
           {/* {segTypes.map((panes, pIdx) => (
             <AtTabsPane current={curSegIdx} key={panes.status} index={pIdx}></AtTabsPane>

src/subpages/store/comps/goods-item.js

@@ -151,8 +151,8 @@ function GoodsItem(props) {
               key={item.tag_id}
               style={styleNames({
                 color: item.font_color,
-                borderColor: item.tag_color,
-                backgroundColor: item.tag_color
+                'border-color': item.tag_color,
+                'background-color': item.tag_color
               })}
             >
               {item.tag_name}