parent
cc4d5de06d
commit
4bb06d152a
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 718 B |
@ -0,0 +1,39 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
import { agreementList } from './data';
|
||||
|
||||
export default function Copyright({ className }: { className?: string }) {
|
||||
return (
|
||||
<div className={`w-[1200px] mx-auto text-[rgba(255,255,255,0.4)] text-[12px] leading-[17px] ${className}`}>
|
||||
{/* 备案信息 */}
|
||||
<p className="w-fit mt-[25px] mx-auto mb-[6px]">
|
||||
<Link
|
||||
className="hover:text-[rgba(255,255,255,0.7)]"
|
||||
href="https://beian.miit.gov.cn/#/Integrated/index/"
|
||||
target="_blank"
|
||||
>
|
||||
粤ICP备2024190175号-1
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
className="hover:text-[rgba(255,255,255,0.7)]"
|
||||
href="https://beian.mps.gov.cn/#/query/webSearch?code=44030002002777"
|
||||
target="_blank"
|
||||
>
|
||||
粤公网安备44030002002777号
|
||||
</Link>
|
||||
|
||||
<span>深圳雀乐文化科技有限责任公司 Shenzhen QueYue Culture Technology Co., Ltd.</span>
|
||||
</p>
|
||||
|
||||
{/* 协议 */}
|
||||
<p className="w-fit mx-auto mt-[5px]">
|
||||
{agreementList.map(({ name, url }) => (
|
||||
<Link className="mx-[4px] hover:text-[rgba(255,255,255,0.7)]" href={url} key={name} target="_blank">
|
||||
{name}
|
||||
</Link>
|
||||
))}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
export default function DownLoadItem({
|
||||
name,
|
||||
imgUrl,
|
||||
className,
|
||||
}: {
|
||||
name: string;
|
||||
imgUrl: string;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className={`w-[56px] cursor-pointer ${className}`}>
|
||||
<div
|
||||
className={`w-[36px] h-[36px] mx-auto bg-no-repeat bg-cover`}
|
||||
style={{ backgroundImage: `url(${imgUrl})` }}
|
||||
/>
|
||||
<div className="w-fit mt-[3px] mx-auto text-[12px] leading-[17px]">{name}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
import Copyright from './Copyright';
|
||||
import FooterDownload from './FooterDownload';
|
||||
import FooterPlatform from './FooterPlatform';
|
||||
import FooterSocial from './FooterSocial';
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="h-[320px] pt-[48px] bg-[rgba(0,0,0,0.9)]">
|
||||
<div className="w-[1200px] mx-auto">
|
||||
<div className="flex flex-row">
|
||||
{/* 开放平台 */}
|
||||
<FooterPlatform />
|
||||
{/* 社交账号 */}
|
||||
<FooterSocial className="ml-[126px]" />
|
||||
{/* 下载客户端 */}
|
||||
<FooterDownload className="ml-[110px]" />
|
||||
</div>
|
||||
|
||||
<Copyright className="absolute bottom-[48px]" />
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
import { downloadList } from './data';
|
||||
import DownLoadItem from './DownLoadItem';
|
||||
|
||||
export default function FooterPlatform({ className }: { className?: string }) {
|
||||
return (
|
||||
<div className={`w-auto text-[#fff] text-opacity-60 ${className}`}>
|
||||
<h3 className="text-[12px] leading-[17px]">下载雀乐客户端</h3>
|
||||
<ul className="flex flex-row mt-[24px] gap-[40px]">
|
||||
{downloadList.map((item, index) => (
|
||||
<DownLoadItem key={index} name={item.name} imgUrl={item.imgUrl} />
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
import { platformList } from './data';
|
||||
|
||||
export default function FooterPlatform({ className }: { className?: string }) {
|
||||
return (
|
||||
<div className={`w-auto text-[#fff] text-opacity-60 ${className}`}>
|
||||
<h3 className="text-[12px] leading-[17px]">雀乐开放平台</h3>
|
||||
<ul className="mt-[24px]">
|
||||
{platformList.map((item, index) => (
|
||||
<li key={index} className="mt-[9px]">
|
||||
<Link className="text-[12px] leading-[17px]" href={item.url}>
|
||||
{item.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,30 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
import { socialList } from './data';
|
||||
|
||||
const Line = ({ data }: { data: Array<{ name: string; url: string; target?: string }> }) => {
|
||||
return (
|
||||
<div className="flex flex-row gap-[24px]">
|
||||
{data.map((item, index) => (
|
||||
<li key={index} className="mb-[9px]">
|
||||
<Link className="text-[12px] leading-[17px]" href={item.url} target={item.target || '_blank'}>
|
||||
{item.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function FooterSocial({ className }: { className?: string }) {
|
||||
return (
|
||||
<div className={`w-auto text-[#fff] text-opacity-60 ${className}`}>
|
||||
<h3 className="text-[12px] leading-[17px]">雀乐社交账号</h3>
|
||||
<ul className="mt-[24px]">
|
||||
{socialList.map((line, index) => (
|
||||
<Line key={index} data={line} />
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,23 +1,6 @@
|
||||
export default function Footer() {
|
||||
const agreementList = [
|
||||
{
|
||||
name: '知识产权说明',
|
||||
url: 'http://cdn.indie.cn/html/agreement/intellectualPropertyDescription.html',
|
||||
},
|
||||
{
|
||||
name: '注册协议',
|
||||
url: 'http://cdn.indie.cn/html/agreement/registrationAgreement.html',
|
||||
},
|
||||
{
|
||||
name: '隐私政策',
|
||||
url: 'http://cdn.indie.cn/html/agreement/privacyPolicy.html',
|
||||
},
|
||||
{
|
||||
name: '投诉指引',
|
||||
url: 'http://cdn.indie.cn/html/agreement/complaintGuidelines.html',
|
||||
},
|
||||
];
|
||||
import { agreementList } from './data';
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="absolute bottom-[40px] flex flex-col items-center w-full justify-center text-center text-[12px] leading-[16.8px]">
|
||||
<div className="w-[1200px] mx-auto">
|
||||
@ -0,0 +1,96 @@
|
||||
export const agreementList = [
|
||||
{
|
||||
name: '知识产权说明',
|
||||
url: 'http://cdn.indie.cn/html/agreement/intellectualPropertyDescription.html',
|
||||
},
|
||||
{
|
||||
name: '注册协议',
|
||||
url: 'http://cdn.indie.cn/html/agreement/registrationAgreement.html',
|
||||
},
|
||||
{
|
||||
name: '隐私政策',
|
||||
url: 'http://cdn.indie.cn/html/agreement/privacyPolicy.html',
|
||||
},
|
||||
{
|
||||
name: '投诉指引',
|
||||
url: 'http://cdn.indie.cn/html/agreement/complaintGuidelines.html',
|
||||
},
|
||||
];
|
||||
|
||||
export const platformList = [
|
||||
{
|
||||
name: '雀乐音乐人',
|
||||
url: '#',
|
||||
},
|
||||
{
|
||||
name: '雀乐商场',
|
||||
url: '#',
|
||||
},
|
||||
];
|
||||
|
||||
export const socialList: { name: string; url: string; target?: '_blank' | '_self' | '_parent' | '_top' }[][] = [
|
||||
[
|
||||
{
|
||||
name: '雀乐微博',
|
||||
url: 'https://weibo.com/u/1886232237',
|
||||
},
|
||||
{
|
||||
name: '雀乐公众号',
|
||||
url: '#',
|
||||
},
|
||||
{
|
||||
name: '邮箱',
|
||||
url: '#',
|
||||
},
|
||||
{
|
||||
name: '豆瓣',
|
||||
url: '#',
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
name: '雀乐微信群',
|
||||
url: '#',
|
||||
},
|
||||
{
|
||||
name: '关于雀乐',
|
||||
url: '/about',
|
||||
target: '_self',
|
||||
},
|
||||
{
|
||||
name: '抖音',
|
||||
url: '#',
|
||||
},
|
||||
{
|
||||
name: '小红书',
|
||||
url: '#',
|
||||
},
|
||||
{
|
||||
name: 'B站',
|
||||
url: '#',
|
||||
},
|
||||
],
|
||||
];
|
||||
|
||||
export const downloadList = [
|
||||
{
|
||||
name: 'iPhone版',
|
||||
downloadUrl: '#',
|
||||
imgUrl: '/img/download/footer_ios.svg',
|
||||
},
|
||||
{
|
||||
name: 'Android版',
|
||||
downloadUrl: '#',
|
||||
imgUrl: '/img/download/footer_android.svg',
|
||||
},
|
||||
{
|
||||
name: 'Mac版',
|
||||
downloadUrl: '#',
|
||||
imgUrl: '/img/download/footer_mac.svg',
|
||||
},
|
||||
{
|
||||
name: 'Pad版',
|
||||
downloadUrl: '#',
|
||||
imgUrl: '/img/download/footer_pad.svg',
|
||||
},
|
||||
];
|
||||
Loading…
Reference in new issue