From 2ef06fee91b946a7db06bbc71bf306d80fc6d12a Mon Sep 17 00:00:00 2001
From: myf <>
Date: Mon, 18 Apr 2022 18:34:40 +0800
Subject: [PATCH] =?UTF-8?q?ui=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../recommend/components/BuyNftModal.tsx      | 23 ++++++++++++++++---
 .../components/RegimentalComponent.tsx        | 13 +++++++++++
 src/views/recommend/index.tsx                 | 13 ++++++++++-
 3 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/views/recommend/components/BuyNftModal.tsx b/src/views/recommend/components/BuyNftModal.tsx
index 010a29b..5d1e997 100644
--- a/src/views/recommend/components/BuyNftModal.tsx
+++ b/src/views/recommend/components/BuyNftModal.tsx
@@ -6,6 +6,7 @@ import TextFlex from './TextFlex'
 import FlexCom from './FlexCom'
 
 const ModalDiv = styled(Modal)`
+  width: 80%;
   & > .jCXCIB {
     border-bottom: none;
     text-align: center;
@@ -13,6 +14,9 @@ const ModalDiv = styled(Modal)`
       justify-content: center;
     }
   }
+
+  ${({ theme }) => theme.mediaQueries.xs} {
+  }
 `
 
 const InfoDiv = styled.div`
@@ -23,13 +27,25 @@ const InfoDiv = styled.div`
   box-shadow: 0px 1px 8px rgba(15, 161, 146, 0.28);
 `
 const UpBtn = styled(Button)`
-  width: 40%;
+  width: 50%;
   margin: 20px auto 0px auto;
   border-radius: 50px;
   /* background: ${({ theme }) => theme.colors.gradients.violet}; */
   background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
   border: none;
 `
+const ImageDiv = styled(Image)`
+  width: 300px;
+  height: 300px;
+  margin-bottom: 20px;
+  ${({ theme }) => theme.mediaQueries.sm} {
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+  }
+  ${({ theme }) => theme.mediaQueries.xs} {
+  }
+`
 
 export default function BuyNftModal() {
   const { t } = useTranslation()
@@ -38,9 +54,10 @@ export default function BuyNftModal() {
     console.log('aaa')
   }
   return (
-    <ModalDiv title={t('Buy commander NFT')} onDismiss={onDismiss} style={{ width: '50rem' }}>
+    <ModalDiv title={t('Buy commander NFT')} onDismiss={onDismiss}>
       <Flex alignItems="center" flexWrap="wrap" justifyContent="center">
-        <Image src="/images/recommend/logo.svg" width={300} height={300} marginBottom="20px" />
+        {/* <ImageDiv src="/images/recommend/logo.svg" alt="" width={300} height={300}></ImageDiv> */}
+        <Image src="/images/recommend/logo.svg" width={250} height={250} marginBottom="20px" />
         <InfoDiv>
           <TextFlex
             text={t('Upgrade recommendation rights, can enjoy the share of secondary recommendation')}
diff --git a/src/views/recommend/components/RegimentalComponent.tsx b/src/views/recommend/components/RegimentalComponent.tsx
index d3b0070..82c74c8 100644
--- a/src/views/recommend/components/RegimentalComponent.tsx
+++ b/src/views/recommend/components/RegimentalComponent.tsx
@@ -75,6 +75,19 @@ const ContengDiv = styled.div`
   background: rgba(255, 255, 255, 0.39);
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
   border-radius: 40px;
+
+  ${({ theme }) => theme.mediaQueries.sm} {
+    width: 60%;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    width: 60%;
+  }
+  ${({ theme }) => theme.mediaQueries.xs} {
+    width: 90%;
+    height: 80vh;
+    overflow-y: auto;
+  }
 `
 
 const MainDiv = styled.div`
diff --git a/src/views/recommend/index.tsx b/src/views/recommend/index.tsx
index 0b651f0..1a21177 100644
--- a/src/views/recommend/index.tsx
+++ b/src/views/recommend/index.tsx
@@ -21,11 +21,22 @@ const ContengDiv = styled.div`
   background: rgba(255, 255, 255, 0.39);
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
   border-radius: 40px;
+
+  ${({ theme }) => theme.mediaQueries.sm} {
+    width: 60%;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    width: 60%;
+  }
+  ${({ theme }) => theme.mediaQueries.xs} {
+    width: 90%;
+  }
 `
 
 const Nft: React.FC = () => {
   //  邀请false普通邀请 true军团长邀请
-  const [type, typeState] = useState(false)
+  const [type, typeState] = useState(true)
   //  是否连接钱包
   const [status, statusState] = useState(true)