parent
4bbecacbec
commit
cca563dd58
|
After Width: | Height: | Size: 436 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
@ -1,16 +1,45 @@
|
||||
import React from 'react';
|
||||
import { Layout } from '@arco-design/web-react';
|
||||
import React, { memo } from 'react';
|
||||
import { Layout, Typography, Space, Link } from '@arco-design/web-react';
|
||||
import { FooterProps } from '@arco-design/web-react/es/Layout/interface';
|
||||
import cs from 'classnames';
|
||||
import styles from './style/index.module.less';
|
||||
|
||||
const LayoutFooter = Layout.Footer;
|
||||
const { Paragraph, Text } = Typography;
|
||||
|
||||
function Footer(props: FooterProps = {}) {
|
||||
const { className, ...restProps } = props;
|
||||
return (
|
||||
<Layout.Footer className={cs(styles.footer, className)} {...restProps}>
|
||||
Arco Design Pro
|
||||
</Layout.Footer>
|
||||
<LayoutFooter className={cs(styles.footer, className)} {...restProps}>
|
||||
<Paragraph className={styles.nav}>
|
||||
<Link hoverable={false} href="https://www.indie.cn/" target="_blank">
|
||||
雀乐
|
||||
</Link>
|
||||
<span className={styles.splitLine}> | </span>
|
||||
<Link hoverable={false}>音乐商城</Link>
|
||||
<span className={styles.splitLine}> | </span>
|
||||
<Link hoverable={false}>联系我们</Link>
|
||||
</Paragraph>
|
||||
<Space className={styles.msg}>
|
||||
<Link
|
||||
hoverable={false}
|
||||
href="https://beian.miit.gov.cn/#/Integrated/index"
|
||||
target="_blank"
|
||||
>
|
||||
粤ICP备2024190175号-1
|
||||
</Link>
|
||||
<Link
|
||||
hoverable={false}
|
||||
href="https://beian.mps.gov.cn/#/query/webSearch"
|
||||
target="_blank"
|
||||
>
|
||||
粤公网安备44030002002777号
|
||||
</Link>
|
||||
<Text>深圳雀乐文化科技有限责任公司</Text>
|
||||
<Text>Shenzhen QueYue Culture Technology Co., Ltd.</Text>
|
||||
</Space>
|
||||
</LayoutFooter>
|
||||
);
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
export default memo(Footer);
|
||||
|
||||
@ -1,8 +1,51 @@
|
||||
@import '@/style/variable.less';
|
||||
@import '@/style/common.less';
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
.verticalCenter();
|
||||
padding: 28px 28px 33px;
|
||||
background: #101011;
|
||||
color: #ffffff99;
|
||||
|
||||
.nav {
|
||||
.center();
|
||||
|
||||
.splitLine {
|
||||
margin-top: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.arco-typography) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
:global(.arco-link),
|
||||
:global(.arco-typography) {
|
||||
color: #ffffff99;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 16.8px;
|
||||
text-align: center;
|
||||
color: var(--color-text-2);
|
||||
}
|
||||
|
||||
:global(.arco-link) {
|
||||
&:hover {
|
||||
color: rgba(#ffffff99, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.msg {
|
||||
margin-top: 4px;
|
||||
|
||||
:global(.arco-link),
|
||||
:global(.arco-typography) {
|
||||
color: #ffffff66;
|
||||
}
|
||||
|
||||
:global(.arco-link) {
|
||||
&:hover {
|
||||
color: rgba(#ffffff66, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue