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() {
|
import { agreementList } from './data';
|
||||||
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 default function Footer() {
|
||||||
return (
|
return (
|
||||||
<footer className="absolute bottom-[40px] flex flex-col items-center w-full justify-center text-center text-[12px] leading-[16.8px]">
|
<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">
|
<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