Gatsby无法在手机上正确渲染

Question

我已经尝试了很长一段时间，但无法正确呈现图标。

在台式机版本上，我的菜单很好，但在移动版本上，选项卡彼此重叠。

我试图对此进行几乎所有方面的修改，但仍无法正确呈现标签页

我试图了解与此有关的问题。

我认为这可能是rc-tabs模块呈现信息的方式

我希望该标签在移动版本中一个接一个地显示。

预先感谢您的帮助。

Desktop Version

mobile version

import React from 'react';
import PropTypes from 'prop-types';
import Tabs, { TabPane } from 'rc-tabs';
import TabContent from 'rc-tabs/lib/TabContent';
import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';
import Box from 'reusecore/src/elements/Box';
import Text from 'reusecore/src/elements/Text';
import Heading from 'reusecore/src/elements/Heading';
import IntrusionModalWrapper from './ModalInstrusion.style';
import 'rc-tabs/assets/index.css';
import { injectIntl, Link, FormattedMessage } from "gatsby-plugin-intl"

import Image from "reusecore/src/elements/Image";
import intrusionlogo from "common/src/assets/image/agency/intrusionlogo.png";
import pres1 from "common/src/assets/image/agency/pres1.jpg";
import webin1 from "common/src/assets/image/agency/webin1.jpg";
import test4 from "common/src/assets/image/agency/test4.jpg";

const ModalIntrusion = ({
                            row,
                            col,
                            colTabRight,
                            colTabLeft,
                            rowTab,
                            logoStyle,
                            insidePhoto,
                            titleStyle,

                            descriptionStyle,
                    }) => {

    return (
        <IntrusionModalWrapper>
            <Box className="row" {...row}>

                <Box className="col tabCol" {...col}>
                    <Box >
                        <Image src={intrusionlogo} {...logoStyle}/>
                        <Tabs
                            defaultActiveKey="trainingtab1"
                            renderTabBar={() => <ScrollableInkTabBar />}
                            renderTabContent={() => <TabContent />}



                        >

                            <TabPane tab={<FormattedMessage id="ModalIntrusionTab1Title"/>} key="intrusiontab1">

                                <Box className="row" {...rowTab}>
                                    <Box className="col" {...colTabLeft}>

                                        <Image src={pres1} {...insidePhoto}/>
                                    </Box>
                                    <Box className="col" {...colTabRight}>
                                        <Heading content={<FormattedMessage id="ModalIntrusionTab1Title"/>} {...titleStyle} />
                                        <Text
                                            content={<FormattedMessage id="ModalIntrusionTab1Text"/>}
                                            {...descriptionStyle}
                                        />
                                    </Box>

                                </Box>

                            </TabPane>


                            <TabPane tab={<FormattedMessage id="ModalIntrusionTab2Title"/>} key="intrusiontab2">

                                <Box className="row" {...rowTab}>
                                    <Box className="col" {...colTabLeft}>

                                        <Image src={pres1} {...insidePhoto}/>
                                    </Box>
                                    <Box className="col" {...colTabRight}>
                                        <Heading content={<FormattedMessage id="ModalIntrusionTab2Title"/>} {...titleStyle} />
                                        <Text
                                            content={<FormattedMessage id="ModalIntrusionTab2Text"/>}
                                            {...descriptionStyle}
                                        />
                                    </Box>

                                </Box>

                            </TabPane>


                            <TabPane tab={<FormattedMessage id="ModalIntrusionTab3Title"/>} key="intrusiontab3">

                                <Box className="row" {...rowTab}>
                                    <Box className="col" {...colTabLeft}>

                                        <Image src={pres1} {...insidePhoto}/>
                                    </Box>
                                    <Box className="col" {...colTabRight}>
                                        <Heading content={<FormattedMessage id="ModalIntrusionTab3Title"/>} {...titleStyle} />
                                        <Text
                                            content={<FormattedMessage id="ModalIntrusionTab3Text"/>}
                                            {...descriptionStyle}
                                        />
                                    </Box>

                                </Box>

                            </TabPane>

                            <TabPane tab={<FormattedMessage id="ModalIntrusionTab4Title"/>} key="intrusiontab4">

                                <Box className="row" {...rowTab}>
                                    <Box className="col" {...colTabLeft}>

                                        <Image src={pres1} {...insidePhoto}/>
                                    </Box>
                                    <Box className="col" {...colTabRight}>
                                        <Heading content={<FormattedMessage id="ModalIntrusionTab4Title"/>} {...titleStyle} />
                                        <Text
                                            content={<FormattedMessage id="ModalIntrusionTab4Text"/>}
                                            {...descriptionStyle}
                                        />
                                    </Box>

                                </Box>

                            </TabPane>

                        </Tabs>
                    </Box>
                </Box>
            </Box>
        </IntrusionModalWrapper>
    );
};

// Features1Modal style props
ModalIntrusion.propTypes = {
    row: PropTypes.object,
    col: PropTypes.object,
    colTabLeft: PropTypes.object,
    colTabRight: PropTypes.object,
    rowTab: PropTypes.object,
    insidePhoto: PropTypes.object,
    logoStyle: PropTypes.object,
    titleStyle: PropTypes.object,
    hintTextStyle: PropTypes.object,

    descriptionStyle: PropTypes.object,
    googleButtonStyle: PropTypes.object,
};

// Features1Modal default style
ModalIntrusion.defaultProps = {
    // Team member row default style
    row: {
        flexBox: true,
        flexWrap: 'wrap',
    },
    // Team member col default style
    col: {
        width: [1]

    },
    colTabLeft: {
        width: [1/3],
    },
    colTabRight: {
        width: [1/2],
        marginTop:"33%",
    },
    rowTab:{
        flexBox: true,
        flexWrap: 'wrap',
        ml: '-15px',
        mr: '-15px',

    },
    // Default logo size
    logoStyle: {
        width: '128px',
        height: 'auto',
        ml: '15px',
        alignItem:'center',
        display:'flex',
        justifyContent:'center',
    },
    // Title default style
    titleStyle: {
        fontSize: ['22px', '36px', '50px'],
        fontWeight: '400',
        color: '#20201D',
        letterSpacing: '-0.025em',
        mt: '35px',
        mb: '10px',
    },
    // Description default style
    descriptionStyle: {
        color: 'rgba(52, 61, 72, 0.8)',
        fontSize: '15px',
        lineHeight: '26px',
        letterSpacing: '-0.025em',
        mb: '23px',
        ml: '1px',
    },
    insidePhoto:{
        width: '95%',
    },
    // Default button style
    btnStyle: {
        minWidth: '156px',
        fontSize: '14px',
        fontWeight: '500',
    },
    // Outline button outline style
    outlineBtnStyle: {
        minWidth: '156px',
        fontSize: '14px',
        fontWeight: '500',
        color: '#10ac84',

    },
    // Google button style
    googleButtonStyle: {
        bg: '#ffffff',
        color: '#343D48',
    },
};

export default injectIntl(ModalIntrusion);