调整军团长ui

public/locales/zh-CN.json

@@ -1098,5 +1098,13 @@
   "Number of first-level subordinates":"一级下级人数",
   "Immediately to receive":"立即领取",
   "buy again":"再次购买",
-  "Connect the purse":"连接钱包"
+  "Connect the purse":"连接钱包",
+  "HCC total revenue percentage :10%":"HCC总收益(分成比例:10%)",
+  "Contract address":"合约地址",
+  "Assets agreement":"资产协议",
+  "Assets and chain":"资产公链",
+  "1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time":"1.当倒计时少于1小时时，每次加价增加倒计时时间1小时",
+  "2. Each auction has a fixed 10% markup. After the countdown, the item will be awarded to the bidder who made the last bid":"2.拍卖每次固定加价10%，倒计时结束后，拍卖品由最后出价的出价人获得",
+  "3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee":"3.拍卖成功后，平台将收取发布人收益的6%作为手续费"
+
 }

src/config/localization/translations.json

@@ -1225,5 +1225,12 @@
   "Number of first-level subordinates":"Number of first-level subordinates",
   "Immediately to receive":"Immediately to receive",
   "buy again":"buy again",
-  "Connect the purse":"Connect the purse"
+  "Connect the purse":"Connect the purse",
+  "HCC total revenue percentage :10%":"HCC total revenue percentage :10%",
+  "Contract address":"ontract address",
+  "Assets agreement":"Assets agreement",
+  "Assets and chain":"Assets and chain",
+  "1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time":"1.当倒计时少于1小时时，每次加价增加倒计时时间1小时",
+  "2. Each auction has a fixed 10% markup. After the countdown, the item will be awarded to the bidder who made the last bid":"2.拍卖每次固定加价10%，倒计时结束后，拍卖品由最后出价的出价人获得",
+  "3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee":"3.拍卖成功后，平台将收取发布人收益的6%作为手续费"
 }

src/views/recommend/components/BuyNftModal.tsx

@@ -50,6 +50,9 @@ export default function BuyNftModal() {
           <TextFlex text={t('Commander NFT can be traded in the NFT market')} color="#F5FFF9" />
           <FlexCom name={t('First stage sharing ratio')} value="10％" />
           <FlexCom name={t('Secondary split ratio')} value="5％" />
+          <FlexCom name={t('Contract address')} value={t('Contract address')} />
+          <FlexCom name={t('Assets agreement')} value={t('Assets agreement')} />
+          <FlexCom name={t('Assets and chain')} value={t('Assets and chain')} />
         </InfoDiv>
       </Flex>
 

src/views/recommend/components/ConnectedComponent.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'contexts/Localization'
-import { Button, Heading, Image, useModal } from '@pancakeswap/uikit'
+import { Button, Heading, Image, useModal, Text } from '@pancakeswap/uikit'
 import FlexCom from './FlexCom'
 import BuyNftModal from './BuyNftModal'
 import HeaderMian from './HeaderMain'
@@ -38,22 +38,29 @@ const UpBtn = styled(Button)`
 const FooterBtn = styled.div`
   width: 100%;
   box-sizing: border-box;
-  padding: 0 30px 20px 30px;
+  padding-bottom: 20px;
+  /* padding: 0 0px 20px 0px; */
 `
 const MainDiv = styled.div`
   padding: 0 30px;
 `
-
+const FooterDiv = styled.div`
+  margin: 0 auto 3rem auto;
+`
+const TextDiv = styled(Text)`
+  margin-top: 10px;
+  font-size: 14px;
+`
 export default function ConnectedCom() {
   const { t } = useTranslation()
   const [onBuyModal] = useModal(<BuyNftModal />)
 
   return (
     <MainDiv>
-      <HeaderMian title={t('recommend')} />
+      <HeaderMian title={t('recommend')} tip={false} />
       <>
         <FlexCom name={t('The lower the number of')} value="100000(人)" />
-        <FlexCom name={t('NFT total revenue')} value="100000.00(HCC)" />
+        {/* <FlexCom name={t('NFT total revenue')} value="100000.00(HCC)" /> */}
         <FlexCom name={t('HCC total revenue')} value="100000.00(HCC)" />
         <FlexCom name={t('To get profit')} value="100000.00(HCC)" />
       </>
@@ -62,6 +69,21 @@ export default function ConnectedCom() {
         <ButtonDiv variant="secondary">{t('No income is received temporarily')}</ButtonDiv>
         <UpBtn onClick={onBuyModal}>{t('Upgrade commander')}</UpBtn>
       </FooterBtn>
+      <FooterDiv>
+        <TextDiv color="textSubtle">
+          {t('1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time')}
+        </TextDiv>
+        <TextDiv color="textSubtle">
+          {t(
+            '2. Each auction has a fixed 10% markup. After the countdown, the item will be awarded to the bidder who made the last bid',
+          )}
+        </TextDiv>
+        <TextDiv color="textSubtle">
+          {t(
+            "3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee",
+          )}
+        </TextDiv>
+      </FooterDiv>
     </MainDiv>
   )
 }

src/views/recommend/components/HeaderMain.tsx

@@ -13,10 +13,11 @@ const TipDiv = styled(Image)`
   top: 24px;
   left: 0;
 `
-export default function HeaderMian({ title }) {
+export default function HeaderMian({ title, tip = true }) {
   return (
     <HeadingDiv scale="xl" mb="24px" textAlign="center">
-      <TipDiv src="/images/recommend/tip.svg" width={25} height={25} />
+      {tip ? <TipDiv src="/images/recommend/tip.svg" width={25} height={25} /> : ''}
+      {/* <TipDiv src="/images/recommend/tip.svg" width={25} height={25} /> */}
       {title}
     </HeadingDiv>
   )

src/views/recommend/components/RegimentalComponent.tsx

@@ -5,9 +5,9 @@ import { Flex, Text, Image, Button, Heading } from '@pancakeswap/uikit'
 import FlexCom from './FlexCom'
 import HeaderMian from './HeaderMain'
 
-const MainDiv = styled.div`
+// const MainDiv = styled.div`
-  width: 60%;
+//   width: 60%;
-`
+// `
 const HeaderFlex = styled(Flex)`
   padding-left: 20px;
 `
@@ -38,42 +38,110 @@ const InfoDiv = styled.div`
   margin-top: 50px;
   padding: 0 30px 35px 30px;
 `
+// const ButtonDiv = styled(Button)`
+//   width: 100%;
+//   margin: 20px auto 0px auto;
+//   border-radius: 50px;
+//   border: 1px solid ${({ theme }) => theme.colors.primaryDark};
+//   color: ${({ theme }) => theme.colors.primaryDark};
+// `
+
 const ButtonDiv = styled(Button)`
   width: 100%;
   margin: 20px auto 0px auto;
   border-radius: 50px;
-  border: 1px solid ${({ theme }) => theme.colors.primaryDark};
+  border: 1px solid ${({ theme }) => theme.colors.textDisabled};
-  color: ${({ theme }) => theme.colors.primaryDark};
+  color: ${({ theme }) => theme.colors.textDisabled};
 `
+
+const UpBtn = styled(Button)`
+  width: 100%;
+  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 FooterBtn = styled.div`
+  width: 100%;
+  box-sizing: border-box;
+  padding-bottom: 20px;
+  /* padding: 0 0px 20px 0px; */
+`
+
+const ContengDiv = styled.div`
+  width: 60%;
+  background: rgba(255, 255, 255, 0.39);
+  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
+  border-radius: 40px;
+`
+
+const MainDiv = styled.div`
+  padding: 0 30px;
+`
+const FooterDiv = styled.div`
+  margin: 0 auto 3rem auto;
+`
+const TextDiv = styled(Text)`
+  margin-top: 10px;
+  font-size: 14px;
+`
+const LogoImage = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
 export default function RegimentalCom() {
   const { t } = useTranslation()
   return (
+    <ContengDiv>
       <MainDiv>
-      <HeaderFlex>
+        <HeaderMian title="军团长推荐" tip={false} />
-        <Image src="/images/recommend/logo.svg" width={60} height={60} />
+        <LogoImage>
-        <BuyButton>{t('buy again')}</BuyButton>
+          <Image src="/images/recommend/logo.svg" width={249} height={249} />
-      </HeaderFlex>
+        </LogoImage>
-      <ContentFlex>
+
-        <InfoDiv>
+        <>
-          <HeaderMian title={t('recommend')} />
+          <FlexCom name={t('First stage sharing ratio')} value="100000(人)" />
-          <FlexCom name={t('The lower the number of')} value="100000(人)" />
+          <FlexCom
-          <FlexCom name={t('NFT total revenue')} value="100000.00(HCC)" />
+            name={t('HCC total revenue percentage :10%')}
+            paddings="0 10px"
+            leftColor="textSubtle"
+            value="100000.00(HCC)"
+          />
+          <FlexCom name={t('Number of secondary subordinates')} value="100000.00(人)" />
+          <FlexCom
+            name={t('HCC total revenue percentage :10%')}
+            paddings="0 10px"
+            leftColor="textSubtle"
+            value="100000.00(HCC)"
+          />
           <FlexCom name={t('HCC total revenue')} value="100000.00(HCC)" />
           <FlexCom name={t('To get profit')} value="100000.00(HCC)" />
-          <ButtonDiv variant="secondary">{t('Immediately to receive')}</ButtonDiv>
+        </>
-          {/* <ButtonNoDiv variant="secondary">{t('No income is received temporarily)}</ButtonNoDiv> */}
+
-        </InfoDiv>
+        <FooterBtn>
-        <InfoDiv>
+          <ButtonDiv variant="secondary">{t('No income is received temporarily')}</ButtonDiv>
-          <HeaderMian title={t('Regimental recommendation')} />
+          {/* <UpBtn onClick={onBuyModal}>{t('Upgrade commander')}</UpBtn> */}
-          <FlexCom name={t('Number of first-level subordinates')} value="100000(人)" />
+        </FooterBtn>
-          <FlexCom name={t('NFT total revenue')} paddings="0 10px" leftColor="textSubtle" value="100000.00(HCC)" />
+        <FooterDiv>
-          <FlexCom name={t('Number of secondary subordinates')} value="" />
+          <TextDiv color="textSubtle">
-          <FlexCom name={t('HCC total revenue')} paddings="0 10px" leftColor="textSubtle" value="100000.00(HCC)" />
+            {t('1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time')}
-          <FlexCom name={t('To get profit')} value="100000.00(HCC)" />
+          </TextDiv>
-          <ButtonDiv variant="secondary">{t('Immediately to receive')}</ButtonDiv>
+          <TextDiv color="textSubtle">
-          {/* <ButtonNoDiv variant="secondary">{t('No income is received temporarily)}</ButtonNoDiv> */}
+            {t(
-        </InfoDiv>
+              '2. Each auction has a fixed 10% markup. After the countdown, the item will be awarded to the bidder who made the last bid',
-      </ContentFlex>
+            )}
+          </TextDiv>
+          <TextDiv color="textSubtle">
+            {t(
+              "3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee",
+            )}
+          </TextDiv>
+        </FooterDiv>
       </MainDiv>
+    </ContengDiv>
   )
 }

src/views/recommend/components/UnunitedCom.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'contexts/Localization'
-import { Button, Heading } from '@pancakeswap/uikit'
+import { Button, Heading, Text } from '@pancakeswap/uikit'
 
 const HeadingDiv = styled(Heading)`
   padding-top: 5rem;
@@ -9,9 +9,20 @@ const HeadingDiv = styled(Heading)`
 
 const ButtonDiv = styled(Button)`
   width: 80%;
-  margin: 5rem auto 3rem auto;
+  margin: 5rem auto 10px auto;
+  margin-left: 10%;
+  border-radius: 50px;
+`
+const FooterDiv = styled.div`
+  width: 80%;
+  margin: 0 auto 3rem auto;
   margin-left: 10%;
 `
+const TextDiv = styled(Text)`
+  margin-top: 10px;
+  font-size: 14px;
+`
+
 export default function UnunitedCom() {
   const { t } = useTranslation()
   return (
@@ -20,6 +31,21 @@ export default function UnunitedCom() {
         {t('recommend')}
       </HeadingDiv>
       <ButtonDiv>{t('Connect the purse')}</ButtonDiv>
+      <FooterDiv>
+        <TextDiv color="textSubtle">
+          {t('1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time')}
+        </TextDiv>
+        <TextDiv color="textSubtle">
+          {t(
+            '2. Each auction has a fixed 10% markup. After the countdown, the item will be awarded to the bidder who made the last bid',
+          )}
+        </TextDiv>
+        <TextDiv color="textSubtle">
+          {t(
+            "3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee",
+          )}
+        </TextDiv>
+      </FooterDiv>
     </>
   )
 }