| | |
| | | height: '100%', |
| | | width: '50%', |
| | | }, |
| | | spinWrapper: { |
| | | height: '100%', |
| | | }, |
| | | threeContainer: { |
| | | zIndex: 99, |
| | | width: '100%', |
| | | height: '688.88px', |
| | | height: '100%', |
| | | }, |
| | | tableInfo: { |
| | | height: '100%', |
| | | width: '50%', |
| | | padding: '0 10px 0 15px' |
| | | padding: '0 10px 0 15px', |
| | | overflow: 'auto', |
| | | } |
| | | } |
| | | }) |
| | |
| | | return ( |
| | | <> |
| | | <div className={styles.infoBox}> |
| | | <div className={styles.threeInfo}> |
| | | <div className={`${styles.threeInfo} three-spin`}> |
| | | <Spin |
| | | spinning={loading} |
| | | indicator={<LoadingOutlined spin />} |
| | | size={'large'} |
| | | wrapperClassName={styles.spinWrapper} |
| | | > |
| | | <div ref={refContainer} className={styles.threeContainer}></div> |
| | | </Spin> |
| | |
| | | children: 'Prepaid', |
| | | }, |
| | | { |
| | | key: '1', |
| | | label: 'Product', |
| | | children: 'Cloud Database', |
| | | }, |
| | | { |
| | | key: '2', |
| | | label: 'Billing Mode', |
| | | children: 'Prepaid', |
| | | }, |
| | | { |
| | | key: '1', |
| | | label: 'Product', |
| | | children: 'Cloud Database', |
| | | }, |
| | | { |
| | | key: '2', |
| | | label: 'Billing Mode', |
| | | children: 'Prepaid', |
| | | }, |
| | | { |
| | | key: '1', |
| | | label: 'Product', |
| | | children: 'Cloud Database', |
| | | }, |
| | | { |
| | | key: '2', |
| | | label: 'Billing Mode', |
| | | children: 'Prepaid', |
| | | }, |
| | | { |
| | | key: '3', |
| | | label: 'Automatic Renewal', |
| | | children: <Button> submit</Button>, |
| | |
| | | height: 95%; |
| | | padding: 12px; |
| | | } |
| | | |
| | | .three-spin .ant-spin-container { |
| | | height: 100%; |
| | | } |