94 lines
3.2 KiB
TypeScript
94 lines
3.2 KiB
TypeScript
/**
|
|
* Title: 地产详情
|
|
* Routes:
|
|
* - ./src/pages/routes
|
|
*/
|
|
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}>
|
|
<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>
|
|
);
|
|
}
|
|
|
|
export default AboutPage;
|