公告

public/images/announcement/goback-icon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="20" viewBox="0 0 12 20">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #1fc7d4;
+      }
+    </style>
+  </defs>
+  <path id="展开" class="cls-1" d="M10.556,11.819c-.027.014-.05.038-.075.048a1.213,1.213,0,0,1-1.442-.257L.342,2.167A1.308,1.308,0,0,1,.391.352,1.227,1.227,0,0,1,2.158.4l7.8,8.477L17.882.436a1.225,1.225,0,0,1,1.735,0,1.307,1.307,0,0,1,.064,1.78L10.9,11.569c-.017.015-.043.022-.06.043a.313.313,0,0,0-.035.043,1.085,1.085,0,0,1-.25.163Z" transform="translate(12) rotate(90)"/>
+</svg>

public/images/announcement/search-icon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16.83" height="16.891" viewBox="0 0 16.83 16.891">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <path id="搜索" class="cls-1" d="M17.963,16.871l4.644,4.7a.774.774,0,1,1-1.1,1.088l-4.637-4.7a6.705,6.705,0,1,1,1.1-1.095Zm-5.257.993a5.157,5.157,0,1,0-5.157-5.157A5.157,5.157,0,0,0,12.706,17.863Z" transform="translate(-6 -6)"/>
+</svg>

public/locales/zh-CN.json

@@ -1105,6 +1105,13 @@
   "Assets and chain":"资产公链",
   "each time":"1.当倒计时少于1小时时，每次加价增加倒计时时间1小时",
   "last bid":"2.拍卖每次固定加价10%，倒计时结束后，拍卖品由最后出价的出价人获得",
-  "commission fee":"3.拍卖成功后，平台将收取发布人收益的6%作为手续费"
+  "commission fee":"3.拍卖成功后，平台将收取发布人收益的6%作为手续费",
+  "announcement":"公告",
+  "return":"返回",
+  "Total capital pool":"资金池总额",
+  "The total amount of dividends":"分红总额",
+  "Pending dividend":"待领取分红",
+  "Number of boards":"董事会数量",
+  "Number of holders":"持有人数量"
 
 }

src/App.tsx

@@ -52,6 +52,7 @@ const RemoveLiquidity = lazy(() => import('./views/RemoveLiquidity'))
 const Referral = lazy(() => import('./views/Referral'))
 const Board = lazy(() => import('./views/Board'))
 const Nft = lazy(() => import('./views/Nft'))
+const Announcement = lazy(() => import('./views/Announcement'))
 
 // This config is required for number formatting
 BigNumber.config({
@@ -103,6 +104,9 @@ const App: React.FC = () => {
             <Route path="/nft">
               <Nft />
             </Route>
+            <Route path="/announcement">
+              <Announcement />
+            </Route>
             {/* <Route path="/lottery">
               <Lottery />
             </Route>
@@ -153,6 +157,7 @@ const App: React.FC = () => {
             <Route exact strict path="/remove/:tokens" component={RedirectOldRemoveLiquidityPathStructure} />
             <Route exact strict path="/remove/:currencyIdA/:currencyIdB" component={RemoveLiquidity} />
             <Route exact strict path="/nft" component={Nft} />
+            <Route exact strict path="/announcement" component={Announcement} />
 
             {/* Redirect */}
             {/* <Route path="/staking">

src/components/Menu/config.ts

@@ -50,6 +50,11 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [
     icon: 'TicketIcon',
     href: '/board',
   },
+  {
+    label: t('announcement'),
+    icon: 'TicketIcon',
+    href: '/announcement',
+  },
   // {
   //   label: t('Prediction (BETA)'),
   //   icon: 'PredictionsIcon',

src/config/localization/translations.json

@@ -1232,5 +1232,12 @@
   "Assets and chain":"Assets and chain",
   "each time":"1. When the countdown is less than 1 hour, the countdown time will be increased by 1 hour each time",
   "last bid":"2. Each auction has a fixed 10% markup. After the countdown, the item will be awarded to the bidder who made the last bid",
-  "commission fee":"3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee"
+  "commission fee":"3. After the auction is successful, the platform will charge 6% of the publisher's earnings as a commission fee",
+  "announcement":"announcement",
+  "return":"return",
+  "Total capital pool":"Total capital pool",
+  "The total amount of dividends":"The total amount of dividends",
+  "Pending dividend":"Pending dividend",
+  "Number of boards":"Number of boards",
+  "Number of holders":"Number of holders"
 }

src/services/announcement.ts

@@ -0,0 +1,18 @@
+import request from 'utils/request'
+
+export const getAnnouncementPage = (params) => {
+  return request.request({
+    url: '/high_city/app/api/announcement/page',
+    method: 'get',
+    params,
+  })
+}
+
+export const getAnnouncementDetail = (id) => {
+  return request.request({
+    url: `/high_city/app/api/announcement/detail/${id}`,
+    method: 'get',
+  })
+}
+
+export default getAnnouncementPage

src/views/Announcement/components/Detail.tsx

@@ -0,0 +1,67 @@
+import React, { useState, useEffect, useMemo, useRef } from 'react'
+import dayjs from 'dayjs'
+import styled from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Text, Flex, Image, Input, Heading } from '@pancakeswap/uikit'
+
+interface ListProps {
+  title?: string
+  publishTime?: number
+  content?: string
+  close: () => void
+}
+
+const DetailDiv = styled.div`
+  width: 80%;
+  background: rgba(255, 255, 255);
+  border-radius: 20px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 40px 30px;
+`
+const HeaderFlex = styled(Flex)`
+  align-items: center;
+  cursor: pointer;
+`
+const TextBack = styled(Text)`
+  font-size: 18px;
+  color: #1fc7d4;
+  margin-left: 10px;
+`
+const HeadingText = styled(Heading)`
+  margin-top: 17px;
+  color: #333333;
+  font-size: 32px;
+`
+const TextTime = styled(Text)`
+  font-size: 14px;
+  color: #999999;
+  padding: 30px 0 20px 0;
+  border-bottom: 1px solid #e3e3e3;
+`
+const TextInfo = styled(Text)`
+  font-size: 14px;
+  color: #999999;
+  margin-top: 30px;
+`
+
+const Detail: React.FC<ListProps> = ({ title, publishTime, content, close }) => {
+  const { t } = useTranslation()
+  const closeDetail = () => {
+    close()
+  }
+  return (
+    <>
+      <DetailDiv>
+        <HeaderFlex onClick={closeDetail}>
+          <Image src="/images/announcement/goback-icon.svg" alt="" width={12} height={20} />
+          <TextBack>{t('return')}</TextBack>
+        </HeaderFlex>
+        <HeadingText scale="xl">{title}</HeadingText>
+        <TextTime>{dayjs(publishTime).format('YYYY-MM-DD HH:mm')}</TextTime>
+        <TextInfo>{content}</TextInfo>
+      </DetailDiv>
+    </>
+  )
+}
+export default Detail

src/views/Announcement/components/ListItem.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { Text, Flex } from '@pancakeswap/uikit'
+
+interface InfoProps {
+  title?: string
+  content?: string
+  publishTime?: number
+}
+
+const FlexTable = styled(Flex)`
+  padding: 25px 0 20px 0;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  border-bottom: 1px solid #e3e3e3;
+`
+const TableInfo = styled.div`
+  width: 70%;
+`
+const TextTitle = styled(Text)`
+  font-size: 18px;
+  color: #333333;
+`
+const TextInfo = styled(Text)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  font-size: 14px;
+  color: #666666;
+  margin-top: 10px;
+`
+const TextTime = styled(Text)`
+  font-size: 18px;
+  color: #999999;
+`
+
+const ListItem: React.FC<InfoProps> = ({ title, content, publishTime }) => {
+  return (
+    <>
+      <FlexTable>
+        <TableInfo>
+          <TextTitle>{title}</TextTitle>
+          <TextInfo>{content}</TextInfo>
+        </TableInfo>
+        <TextTime color="textSubtle">{publishTime}</TextTime>
+      </FlexTable>
+    </>
+  )
+}
+export default ListItem

src/views/Announcement/index.tsx

@@ -0,0 +1,170 @@
+import React, { useState, useEffect, useMemo, useRef } from 'react'
+import styled from 'styled-components'
+import { getAnnouncementPage, getAnnouncementDetail } from 'services/announcement'
+import { Text, Flex, Image, Input, Heading } from '@pancakeswap/uikit'
+import ListItem from './components/ListItem'
+import Detail from './components/Detail'
+
+interface DetailProps {
+  title?: string
+  content?: string
+  publishTime?: number
+}
+
+const MainDiv = styled.div`
+  width: 100%;
+  min-height: calc(100vh - 64px);
+  background: ${({ theme }) => theme.colors.gradients.bubblegum};
+  box-sizing: border-box;
+  padding: 30px 0;
+`
+const TableDiv = styled.div`
+  width: 80%;
+  background: rgba(255, 255, 255);
+  border-radius: 20px;
+  margin: 0 auto;
+`
+
+const SearchDiv = styled(Flex)`
+  box-sizing: border-box;
+  border-bottom: 1px solid #e3e3e3;
+  width: 100%;
+  height: 105px;
+  align-items: center;
+  justify-content: center;
+`
+
+const InputMain = styled(Flex)`
+  width: 60%;
+  height: 45px;
+  border: 1px solid #1fc7d4;
+  border-radius: 30px;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 4px;
+`
+
+const SearchInput = styled(Input)`
+  background-color: transparent;
+  width: calc(100% - 80px);
+  :focus {
+  }
+`
+const SearchBtn = styled.div`
+  width: 50px;
+  height: 37px;
+  background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
+  border-radius: 19px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const ListMain = styled.div`
+  box-sizing: border-box;
+  padding: 0 30px;
+`
+
+const FlexTable = styled(Flex)`
+  padding: 25px 0 20px 0;
+  align-items: center;
+  justify-content: space-between;
+`
+const TableInfo = styled.div`
+  width: 70%;
+`
+const TextTitle = styled(Text)`
+  font-size: 18px;
+  color: #333333;
+`
+const DetailDiv = styled.div`
+  width: 80%;
+  background: rgba(255, 255, 255);
+  border-radius: 20px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 40px 30px;
+`
+const HeaderFlex = styled(Flex)`
+  align-items: center;
+  cursor: pointer;
+`
+const TextBack = styled(Text)`
+  font-size: 18px;
+  color: #1fc7d4;
+  margin-left: 10px;
+`
+const HeadingText = styled(Heading)`
+  margin-top: 17px;
+  color: #333333;
+  font-size: 32px;
+`
+const TextTime = styled(Text)`
+  font-size: 14px;
+  color: #999999;
+  padding: 30px 0 20px 0;
+  border-bottom: 1px solid #e3e3e3;
+`
+const TextInfo = styled(Text)`
+  font-size: 14px;
+  color: #999999;
+  margin-top: 30px;
+`
+
+const Announcement: React.FC = () => {
+  const [detailVisible, setDetailVisible] = useState(false)
+  const [list, setList] = useState([])
+  const [detailData, setDetailData] = useState<DetailProps>({ title: '', publishTime: 0, content: '' })
+  const getList = async (page: number, size: number) => {
+    const data = await getAnnouncementPage({ page, size })
+    console.log(data.content)
+    setList(data.content)
+  }
+  useEffect(() => {
+    getList(1, 10)
+  }, [])
+
+  const lookDetail = async (id) => {
+    const data = await getAnnouncementDetail(id)
+    setDetailData(data)
+    setDetailVisible(true)
+  }
+  const searchList = () => {
+    getList(1, 10)
+  }
+  const close = () => {
+    setDetailVisible(false)
+  }
+  return (
+    <MainDiv>
+      {detailVisible ? (
+        <Detail
+          title={detailData.title}
+          publishTime={detailData.publishTime}
+          content={detailData.content}
+          close={close}
+        />
+      ) : (
+        <TableDiv>
+          <SearchDiv>
+            <InputMain>
+              <SearchInput placeholder="输入关键字搜索" />
+              <SearchBtn onClick={searchList}>
+                <Image src="/images/announcement/search-icon.svg" alt="" width={16} height={16} />
+              </SearchBtn>
+            </InputMain>
+          </SearchDiv>
+          <ListMain>
+            {list.map((item) => (
+              <Text key={item.id} onClick={() => lookDetail(item.id)}>
+                <ListItem title={item.title} publishTime={item.publishTime} content={item.content} />
+              </Text>
+            ))}
+          </ListMain>
+        </TableDiv>
+      )}
+    </MainDiv>
+  )
+}
+export default Announcement

src/views/Board/components/HeaderItem.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Text } from '@pancakeswap/uikit'
+import styled from 'styled-components'
+
+interface InfoProps {
+  title: string
+  price: number
+}
+
+const HeaderMain = styled.div`
+  height: 84px;
+  background: linear-gradient(180deg, #c2f9ff 0%, #b596f5 100%);
+  box-shadow: 0px 2px 1px #371588;
+  opacity: 0.5;
+  border-radius: 20px;
+  box-sizing: border-box;
+  padding: 16px 0 0 20px;
+  text-align: left;
+`
+
+const HeaderItem: React.FC<InfoProps> = ({ title, price }) => {
+  return (
+    <>
+      <HeaderMain>
+        <Text color="text" fontSize="24px">
+          {price}
+        </Text>
+        <Text color="textSubtle" fontSize="14px">
+          {title}
+        </Text>
+      </HeaderMain>
+    </>
+  )
+}
+
+export default HeaderItem

src/views/Board/index.tsx

@@ -12,6 +12,7 @@ import useRefresh from 'hooks/useRefresh'
 import { fetchBoardUserDataAsync, fetchBoardsPublicDataAsync } from 'state/actions'
 import { useTranslation } from 'contexts/Localization'
 import BoardCard from './components/BoardCard/BoardCard'
+import HeaderItem from './components/HeaderItem'
 
 const Header = styled.div`
   padding: 32px 0px;
@@ -27,6 +28,9 @@ const Header = styled.div`
 const SecondText = styled(Text)`
   white-space: break-spaces;
 `
+const FlexLayoutMain = styled(FlexLayout)`
+  margin-top: 20px;
+`
 const Boards: React.FC = () => {
   const { t } = useTranslation()
   const boardsList = useBoards()
@@ -58,13 +62,22 @@ const Boards: React.FC = () => {
     <>
       <Header>
         <Heading as="h1" size="xl" color="text" mb="10px" mt="10px">
-          {t('Boards')}
+          {t('Total capital pool')}
         </Heading>
-        <SecondText fontSize="28px" color="text">
+        {/* <SecondText fontSize="28px" color="text">
           {t(
             'Joining the board of directors will obtain the governance token xcandy \n participate in the governance of the project, vote, obtain additional pledge income, \n and have a higher invitation airdrop reward',
           )}
-        </SecondText>
+        </SecondText> */}
+        <Text fontSize="32px" color="text">
+          1.000.000.000.000
+        </Text>
+        <FlexLayoutMain>
+          <HeaderItem title={t('The total amount of dividends')} price={1.0} />
+          <HeaderItem title={t('Pending dividend')} price={1.0} />
+          <HeaderItem title={t('Number of boards')} price={1.0} />
+          <HeaderItem title={t('Number of holders')} price={1.0} />
+        </FlexLayoutMain>
       </Header>
       <Page>{renderContent()}</Page>
     </>