From eeb4d0d07cb2656fcb0dffc89e578765f4deb746 Mon Sep 17 00:00:00 2001 From: myf <> Date: Sun, 24 Apr 2022 18:50:13 +0800 Subject: [PATCH] =?UTF-8?q?=E5=85=AC=E5=91=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/images/announcement/goback-icon.svg | 10 ++ public/images/announcement/search-icon.svg | 10 ++ public/locales/zh-CN.json | 9 +- src/App.tsx | 5 + src/components/Menu/config.ts | 5 + src/config/localization/translations.json | 9 +- src/services/announcement.ts | 18 ++ src/views/Announcement/components/Detail.tsx | 67 +++++++ .../Announcement/components/ListItem.tsx | 53 ++++++ src/views/Announcement/index.tsx | 170 ++++++++++++++++++ src/views/Board/components/HeaderItem.tsx | 36 ++++ src/views/Board/index.tsx | 19 +- 12 files changed, 406 insertions(+), 5 deletions(-) create mode 100644 public/images/announcement/goback-icon.svg create mode 100644 public/images/announcement/search-icon.svg create mode 100644 src/services/announcement.ts create mode 100644 src/views/Announcement/components/Detail.tsx create mode 100644 src/views/Announcement/components/ListItem.tsx create mode 100644 src/views/Announcement/index.tsx create mode 100644 src/views/Board/components/HeaderItem.tsx diff --git a/public/images/announcement/goback-icon.svg b/public/images/announcement/goback-icon.svg new file mode 100644 index 0000000..1d83b63 --- /dev/null +++ b/public/images/announcement/goback-icon.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/public/images/announcement/search-icon.svg b/public/images/announcement/search-icon.svg new file mode 100644 index 0000000..84de184 --- /dev/null +++ b/public/images/announcement/search-icon.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/public/locales/zh-CN.json b/public/locales/zh-CN.json index 232069f..4c120fa 100644 --- a/public/locales/zh-CN.json +++ b/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":"持有人数量" } diff --git a/src/App.tsx b/src/App.tsx index 56fa646..44c7424 100644 --- a/src/App.tsx +++ b/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 = () => { + + + {/* @@ -153,6 +157,7 @@ const App: React.FC = () => { + {/* Redirect */} {/* diff --git a/src/components/Menu/config.ts b/src/components/Menu/config.ts index 3516e8d..9244c4a 100644 --- a/src/components/Menu/config.ts +++ b/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', diff --git a/src/config/localization/translations.json b/src/config/localization/translations.json index e7f2c6e..6cc8b8b 100644 --- a/src/config/localization/translations.json +++ b/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" } diff --git a/src/services/announcement.ts b/src/services/announcement.ts new file mode 100644 index 0000000..bd4131e --- /dev/null +++ b/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 diff --git a/src/views/Announcement/components/Detail.tsx b/src/views/Announcement/components/Detail.tsx new file mode 100644 index 0000000..8186d32 --- /dev/null +++ b/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 = ({ title, publishTime, content, close }) => { + const { t } = useTranslation() + const closeDetail = () => { + close() + } + return ( + <> + + + + {t('return')} + + {title} + {dayjs(publishTime).format('YYYY-MM-DD HH:mm')} + {content} + + + ) +} +export default Detail diff --git a/src/views/Announcement/components/ListItem.tsx b/src/views/Announcement/components/ListItem.tsx new file mode 100644 index 0000000..9f9f1df --- /dev/null +++ b/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 = ({ title, content, publishTime }) => { + return ( + <> + + + {title} + {content} + + {publishTime} + + + ) +} +export default ListItem diff --git a/src/views/Announcement/index.tsx b/src/views/Announcement/index.tsx new file mode 100644 index 0000000..60b1d14 --- /dev/null +++ b/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({ 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 ( + + {detailVisible ? ( + + ) : ( + + + + + + + + + + + {list.map((item) => ( + lookDetail(item.id)}> + + + ))} + + + )} + + ) +} +export default Announcement diff --git a/src/views/Board/components/HeaderItem.tsx b/src/views/Board/components/HeaderItem.tsx new file mode 100644 index 0000000..f40c3f0 --- /dev/null +++ b/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 = ({ title, price }) => { + return ( + <> + + + {price} + + + {title} + + + + ) +} + +export default HeaderItem diff --git a/src/views/Board/index.tsx b/src/views/Board/index.tsx index aa45de6..37b8ea5 100644 --- a/src/views/Board/index.tsx +++ b/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 = () => { <>
- {t('Boards')} + {t('Total capital pool')} - + {/* {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', )} - + */} + + 1.000.000.000.000 + + + + + + +
{renderContent()}