About page&home/estate change

src/pages/about/index.tsx

@@ -3,19 +3,89 @@
  * Routes:
  *   - ./src/pages/routes
  */
-import React from 'react';
-import Header from '@/components/Header';
+import React, { useState } from 'react';
 import { formatMessage } from 'umi-plugin-locale';
+import FittedImage from 'react-fitted-image';
+import { Modal } from 'antd';
+import { QRCanvas } from 'qrcanvas-react';
+import Header from '@/components/Header';
+import config from '@/config';
+import logo from '@/assets/bg_login.png';
+import pAndroid from '@/assets/a_android.png';
+import pIOS from '@/assets/a_ios.png';
+import pTelegram from '@/assets/a_telegram.png';
 
 import styles from './style.less';
 
 const AboutPage: React.FC = () => {
+  const [info, setInfo] = useState('');
+
+  const showInfo = (
+    <Modal
+      visible={Boolean(info)}
+      title={formatMessage({ id: 'common.prompt' })}
+      footer={null}
+      onCancel={() => setInfo('')}
+    >
+      <div className={styles.dlg}>
+        {info && <QRCanvas options={{
+          data: info,
+          size: 240,
+        }} />}
+        <span>{info}</span>
+      </div>
+    </Modal>
+  );
+
   return (
     <div className={styles.container}>
       <Header title={formatMessage({ id: 'about.title' })} />
-      <div  className={styles.body}>
-        body
+      <div className={styles.body}>
+        <div className="logo">
+          <FittedImage src={logo} fit="cover" />
+        </div>
+
+        <span className="app-name">{formatMessage({ id: 'app.name' })}</span>
+        <span className="app-desc">{formatMessage({ id: 'about.desc' })}</span>
+
+        <div className={styles.content}>
+          {(config.linkAndroid || config.linkIOS) && (
+            <div className="section">
+              <span className="title">{formatMessage({ id: 'about.appTitle' })}</span>
+              <span className="desc">{formatMessage({ id: 'about.appDesc' })}</span>
+              <div className="icon-list">
+                {config.linkAndroid && <div className="icon-item" onClick={() => setInfo(config.linkAndroid)}>
+                  <div className="icon-icon"><FittedImage src={pAndroid} /></div>
+                  <span className="icon-name">Android</span>
+                </div>}
+                {config.linkIOS && <div className="icon-item" onClick={() => setInfo(config.linkIOS)}>
+                  <div className="icon-icon"><FittedImage src={pIOS} /></div>
+                  <span className="icon-name">iOS</span>
+                </div>}
+              </div>
+            </div>
+          )}
+          {config.linkTelegram && (
+            <div className="section">
+              <span className="title">{formatMessage({ id: 'about.comTitle' })}</span>
+              <span className="desc">{formatMessage({ id: 'about.comDesc' })}</span>
+              <div className="icon-list">
+                <div className="icon-item" onClick={() => setInfo(config.linkTelegram)}>
+                  <div className="icon-icon"><FittedImage src={pTelegram} /></div>
+                  <span className="icon-name">Telegram</span>
+                </div>
+              </div>
+            </div>
+          )}
+          <div className="section">
+            <span className="title">{formatMessage({ id: 'about.contact' })}</span>
+            <span className="desc">{config.linkEmail}</span>
+          </div>
+        </div>
+
+        <div>{formatMessage({ id: 'about.copyright' })}</div>
       </div>
+      {showInfo}
     </div>
   );
 }