From 4a4ef27e5a4ddc4def1d15935224dfe8e1e031d4 Mon Sep 17 00:00:00 2001
From: myf <>
Date: Mon, 9 May 2022 11:15:34 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=A4=96=E9=93=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Menu/index.tsx                 |  2 +-
 .../Board/components/BoardCard/BoardCard.tsx  | 36 +++++++----
 .../components/BoardCard/CardHeading.tsx      | 59 ++++++++++++++++++-
 3 files changed, 81 insertions(+), 16 deletions(-)

diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index daf32a4..3f604f6 100644
--- a/src/components/Menu/index.tsx
+++ b/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)
   }
diff --git a/src/views/Board/components/BoardCard/BoardCard.tsx b/src/views/Board/components/BoardCard/BoardCard.tsx
index 62445c2..0cece1d 100644
--- a/src/views/Board/components/BoardCard/BoardCard.tsx
+++ b/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,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)}
diff --git a/src/views/Board/components/BoardCard/CardHeading.tsx b/src/views/Board/components/BoardCard/CardHeading.tsx
index a09d1eb..bf2639a 100644
--- a/src/views/Board/components/BoardCard/CardHeading.tsx
+++ b/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>
   )
 }