ui调整

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

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`

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)