diff --git a/src/components/sp-image/index.scss b/src/components/sp-image/index.scss index 922860391..fb85457bf 100644 --- a/src/components/sp-image/index.scss +++ b/src/components/sp-image/index.scss @@ -5,7 +5,7 @@ .sp-image-container { position: relative; overflow: hidden; /* 防止圆角溢出 */ - background-color: transparent; + background-color: #fff; height: 100%; display: flex; align-items: center; diff --git a/src/components/sp-privacy-modal/index.js b/src/components/sp-privacy-modal/index.js index 1ab380905..442f95637 100755 --- a/src/components/sp-privacy-modal/index.js +++ b/src/components/sp-privacy-modal/index.js @@ -4,13 +4,12 @@ */ import React, { useState, useEffect } from 'react' import Taro from '@tarojs/taro' -import { View, Image, Button, Text } from '@tarojs/components' +import { View, Text, RootPortal } from '@tarojs/components' import { AtButton } from 'taro-ui' import { useImmer } from 'use-immer' -import { SpImage } from '@/components' import api from '@/api' import { classNames, styleNames } from '@/utils' -import { useLogin } from '@/hooks' +import { useLogin, useThemsColor } from '@/hooks' import './index.scss' @@ -21,6 +20,7 @@ const initState = { } function SpPrivacyModal(props) { + const { themeColor } = useThemsColor() const { login, updatePolicyTime, getUserInfoAuth } = useLogin() const { open = false, onCancel = () => {}, onConfirm = () => {} } = props const [info, setInfo] = useImmer(initState) @@ -56,11 +56,13 @@ function SpPrivacyModal(props) { onCancel() } - return ( + // RootPortal 脱离 SpPage,根节点需注入 themeColor(),子树内 var(--color-primary) 才能生效 + const modal = ( @@ -95,6 +97,13 @@ function SpPrivacyModal(props) { ) + + // 微信小程序:scroll-view 内图片等同层渲染节点可能盖住普通 fixed 层;挂到页面根节点保证最顶层 + if (process.env.TARO_ENV === 'weapp') { + return {modal} + } + + return modal } SpPrivacyModal.options = { diff --git a/src/components/sp-render-goods/compact-card.scss b/src/components/sp-render-goods/compact-card.scss index 401d976b1..a0050747d 100644 --- a/src/components/sp-render-goods/compact-card.scss +++ b/src/components/sp-render-goods/compact-card.scss @@ -8,6 +8,7 @@ &__image { width: 100%; position: relative; + background-color: #fff; .soldout-mask { position: absolute; diff --git a/src/components/sp-render-goods/grid-card.scss b/src/components/sp-render-goods/grid-card.scss index 849fd1ca0..abe7bc95f 100644 --- a/src/components/sp-render-goods/grid-card.scss +++ b/src/components/sp-render-goods/grid-card.scss @@ -7,6 +7,7 @@ width: 100%; aspect-ratio: 1/1; position: relative; + background-color: #fff; .soldout-mask { position: absolute; diff --git a/src/components/sp-render-goods/hero-card.scss b/src/components/sp-render-goods/hero-card.scss index e1212ea48..f679401a8 100644 --- a/src/components/sp-render-goods/hero-card.scss +++ b/src/components/sp-render-goods/hero-card.scss @@ -10,6 +10,7 @@ aspect-ratio: 1/1; position: relative; overflow: hidden; + background-color: #fff; .soldout-mask { position: absolute; diff --git a/src/pages/home/wgts/couponcard/index.jsx b/src/pages/home/wgts/couponcard/index.jsx index 523c8508e..3642db21d 100644 --- a/src/pages/home/wgts/couponcard/index.jsx +++ b/src/pages/home/wgts/couponcard/index.jsx @@ -67,7 +67,7 @@ function WgtCouponCard(props) { const receiveBtnStyle = useMemo(() => { const { color, textColor } = receiveBtn return { - 'background-color': color, + backgroundColor: color, color: textColor } }, [receiveBtn]) diff --git a/src/pages/home/wgts/goods/index.scss b/src/pages/home/wgts/goods/index.scss index 13dd773cf..f1f239731 100644 --- a/src/pages/home/wgts/goods/index.scss +++ b/src/pages/home/wgts/goods/index.scss @@ -59,7 +59,7 @@ &-img { width: 157px; height: 157px; - background: #d6d6d6; + background: #fff; overflow: hidden; position: relative;