调整外链

src/components/Menu/index.tsx

@@ -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)
   }

src/views/Board/components/BoardCard/BoardCard.tsx

@@ -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,6 +99,8 @@ const BoardCard: React.FC<NodeCardProps> = ({ board, account }) => {
   return (
     <FCard>
       <CardHeading name={t(board.name)} img={board.img} tokenSymbol={board.tokenSymbol} />
+
+      <CardDiv>
         <div>
           <FlexText name={t('HCC Currency amount')} value={board.userData?.amount} />
           {board.userData?.name === 'Board' ? (
@@ -101,6 +111,8 @@ const BoardCard: React.FC<NodeCardProps> = ({ board, account }) => {
           <FlexText name={t('possess LP')} value={board.userData?.rewardDebt} />
         </div>
         <CardActionsContainer board={board} account={account} />
+      </CardDiv>
+
       {/* <Divider />
       <ExpandableSectionButton
         onClick={() => setShowExpandableSection(!showExpandableSection)}

src/views/Board/components/BoardCard/CardHeading.tsx

@@ -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>
   )
 }