调整外链

This commit is contained in:
myf 2022-05-09 11:15:34 +08:00
parent 4abf265197
commit 4a4ef27e5a
3 changed files with 81 additions and 16 deletions

View File

@ -46,7 +46,7 @@ const Menu = (props) => {
const links = Object.keys(item.linkMap).map((key) => {
return { name: key, link: item.linkMap[key], icon: item.iconResource.url }
})
return { icon: item.iconResource.url, list: links, key: index + item.name }
return { icon: item.iconResource.url, list: links, key: index + item.name, name: item.name }
})
setSocialLink(list)
}

View File

@ -58,8 +58,8 @@ const FCard = styled.div`
box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 24px;
/* justify-content: space-around; */
/* padding: 24px; */
position: relative;
text-align: center;
min-height: 410px;
@ -77,6 +77,14 @@ const ExpandingWrapper = styled.div<{ expanded: boolean }>`
overflow: hidden;
`
const CardDiv = styled.div`
min-height: calc(410px - 90px);
padding: 0 20px;
display: flex;
flex-direction: column;
justify-content: space-around;
`
interface NodeCardProps {
board: any
removed: boolean
@ -91,16 +99,20 @@ const BoardCard: React.FC<NodeCardProps> = ({ board, account }) => {
return (
<FCard>
<CardHeading name={t(board.name)} img={board.img} tokenSymbol={board.tokenSymbol} />
<div>
<FlexText name={t('HCC Currency amount')} value={board.userData?.amount} />
{board.userData?.name === 'Board' ? (
<FlexText name={t('Lock up time')} value={board.userData?.unlockTime} />
) : (
''
)}
<FlexText name={t('possess LP')} value={board.userData?.rewardDebt} />
</div>
<CardActionsContainer board={board} account={account} />
<CardDiv>
<div>
<FlexText name={t('HCC Currency amount')} value={board.userData?.amount} />
{board.userData?.name === 'Board' ? (
<FlexText name={t('Lock up time')} value={board.userData?.unlockTime} />
) : (
''
)}
<FlexText name={t('possess LP')} value={board.userData?.rewardDebt} />
</div>
<CardActionsContainer board={board} account={account} />
</CardDiv>
{/* <Divider />
<ExpandableSectionButton
onClick={() => setShowExpandableSection(!showExpandableSection)}

View File

@ -12,20 +12,73 @@ export interface ExpandableSectionProps {
}
const Wrapper = styled(Flex)`
height: 90px;
background: linear-gradient(90deg, #f1ecf2 0%, #e9f1f5 100%);
font-size: 30px;
color: #280d5f;
padding-left: 20px;
border-radius: 32px 32px 0 0;
position: relative;
svg {
margin-right: 4px;
}
.ribbon {
width: 88px;
height: 89px;
overflow: hidden;
position: absolute;
top: 0px;
right: 0px;
}
.ribbon1 {
line-height: 12px;
text-align: center;
transform: rotate(50deg);
position: relative;
padding: 8px 0;
right: 15px;
top: 20px;
width: 150px;
background: linear-gradient(180deg, #b43ff9 0%, #7a44db 100%);
color: white;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
letter-spacing: 1px;
font-size: 14px;
}
.ribbon1:before,
.ribbon1:after {
content: '';
border-top: 3px solid #4e7c7d;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position: absolute;
bottom: -4px;
}
.ribbon1:before {
left: 0;
}
.ribbon1:after {
right: 0;
}
`
const HeaderFlex = styled(Flex)``
const CardHeading: React.FC<ExpandableSectionProps> = ({ name, img, tokenSymbol }) => {
const { t } = useTranslation()
return (
<Wrapper justifyContent="space-between" alignItems="center" mb="12px">
<Image src={`/images/nodes/${img}.png`} width={64} height={64} />
<Flex>
{/* <Image src={`/images/nodes/${img}.png`} width={64} height={64} /> */}
<HeaderFlex>
<Heading mb="4px">{name}</Heading>
{/* <Question text={t('To join board, you need to stake at least 0.1% total supply of Token')} /> */}
</Flex>
</HeaderFlex>
{/* <div className="ribbon">
<div className="ribbon1"></div>
</div> */}
</Wrapper>
)
}