parent
72c4fa2c77
commit
6c9b39f5c7
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,51 @@
|
||||
import React from 'react';
|
||||
import { Image, Space, Button } from '@arco-design/web-react';
|
||||
import {
|
||||
IconHeart,
|
||||
IconThumbUp,
|
||||
IconMessage,
|
||||
} from '@arco-design/web-react/icon';
|
||||
|
||||
import styles from './style/index.module.less';
|
||||
|
||||
export interface AlbumItemProps {
|
||||
data: any;
|
||||
}
|
||||
|
||||
function AlbumItem(props?: AlbumItemProps) {
|
||||
const { data } = props || {};
|
||||
|
||||
return (
|
||||
<div className={styles.wrap}>
|
||||
<div className={styles.contWrap}>
|
||||
<Image className={styles.img} src={data?.pic} alt="专辑封面" />
|
||||
<h5 className={styles.name}>{data.name}</h5>
|
||||
<p className={styles.desc}>{data.desc}</p>
|
||||
<p className={styles.income}>
|
||||
收益 <span className={styles.incomeMoney}>￥{data.income}</span>
|
||||
</p>
|
||||
<div className={styles.other}>
|
||||
<Space className={styles.otherItem} size={3}>
|
||||
<IconHeart />
|
||||
<span>{data.collection}</span>
|
||||
</Space>
|
||||
<Space className={styles.otherItem} size={3}>
|
||||
<IconThumbUp />
|
||||
<span>{data.like}</span>
|
||||
</Space>
|
||||
<Space className={styles.otherItem} size={3}>
|
||||
<IconMessage />
|
||||
<span>{data.comment}</span>
|
||||
</Space>
|
||||
</div>
|
||||
</div>
|
||||
<Space className={styles.status}>
|
||||
<Button type="text" size="small">
|
||||
下架
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AlbumItem;
|
||||
@ -0,0 +1,108 @@
|
||||
.wrap {
|
||||
width: 175px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
|
||||
&:hover .contWrap {
|
||||
border-color: #165dff;
|
||||
}
|
||||
}
|
||||
|
||||
.contWrap {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f7f8fa;
|
||||
transition: border-color 0.3s;
|
||||
border: 1px solid #f7f8fa;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 145px;
|
||||
height: 145px;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 19.6px;
|
||||
text-align: left;
|
||||
color: #1d2129;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.desc {
|
||||
width: 100%;
|
||||
font-family: PingFang SC;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 16.8px;
|
||||
text-align: left;
|
||||
color: #4e5969;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.income {
|
||||
width: 100%;
|
||||
font-family: PingFang SC;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 16.8px;
|
||||
text-align: left;
|
||||
color: #86909c;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0;
|
||||
|
||||
.incomeMoney {
|
||||
font-family: PingFang SC;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 16.8px;
|
||||
text-align: left;
|
||||
color: #1d2129;
|
||||
}
|
||||
}
|
||||
|
||||
.other {
|
||||
width: 100%;
|
||||
color: #86909c;
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.otherItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
// padding-left: 15px;
|
||||
// padding-right: 15px;
|
||||
text-align: left;
|
||||
margin-top: 9px;
|
||||
|
||||
:global(.arco-btn) {
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #4e5969;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,65 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { Breadcrumb, Steps } from '@arco-design/web-react';
|
||||
import Step1 from './step1';
|
||||
import Step2 from './step2';
|
||||
import Step3, { AgreeStep3 } from './step3';
|
||||
|
||||
import styles from './style/index.module.less';
|
||||
|
||||
const Step = Steps.Step;
|
||||
const AllSteps = [
|
||||
{ title: '专辑信息', desc: '请填写专辑基本信息' },
|
||||
{ title: '上传歌曲', desc: '上传歌曲并填写信息' },
|
||||
{ title: '签约授权', desc: '对专辑进行签约授权' },
|
||||
];
|
||||
|
||||
function CreateAlbum() {
|
||||
const [curStep, setCurStep] = useState(1);
|
||||
const steps = useMemo(() => AllSteps.slice(0, curStep), [curStep]);
|
||||
|
||||
const handleStep1Next = (step1Values) => {
|
||||
console.log(step1Values);
|
||||
setCurStep(2);
|
||||
};
|
||||
|
||||
const handleStep2Pre = () => {
|
||||
setCurStep(1);
|
||||
};
|
||||
|
||||
const handleStep2Next = () => {
|
||||
setCurStep(3);
|
||||
};
|
||||
|
||||
const handleStep3Next = () => {
|
||||
// TOOD:
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.warp}>
|
||||
<Breadcrumb className={styles.breadcrumbWrap}>
|
||||
{steps.map((node, index) => (
|
||||
<Breadcrumb.Item key={index}>{node.title}</Breadcrumb.Item>
|
||||
))}
|
||||
</Breadcrumb>
|
||||
<section className={styles.contWrap}>
|
||||
<Steps
|
||||
className={styles.stepsWrap}
|
||||
current={curStep}
|
||||
style={{ maxWidth: 780, marginBottom: 40 }}
|
||||
>
|
||||
{AllSteps.map(({ title, desc }) => (
|
||||
<Step title={title} description={desc} key={title} />
|
||||
))}
|
||||
</Steps>
|
||||
{curStep === 1 && <Step1 onNext={handleStep1Next} />}
|
||||
{curStep === 2 && (
|
||||
<Step2 onPre={handleStep2Pre} onNext={handleStep2Next} />
|
||||
)}
|
||||
{curStep === 3 && <Step3 />}
|
||||
</section>
|
||||
{curStep === 3 && <AgreeStep3 onNext={handleStep3Next} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CreateAlbum;
|
||||
@ -0,0 +1,41 @@
|
||||
.warp {
|
||||
width: 800px;
|
||||
min-height: 100%;
|
||||
margin: auto;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 67px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.breadcrumbWrap {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.contWrap {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 50px 40px 80px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stepsWrap {
|
||||
:global(.arco-steps-item) {
|
||||
width: 232px;
|
||||
}
|
||||
}
|
||||
|
||||
.submitWrap {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
|
||||
@ -0,0 +1,20 @@
|
||||
.uploadArea {
|
||||
width: 494px;
|
||||
height: 224px;
|
||||
margin: auto;
|
||||
|
||||
:global(.arco-upload-trigger),
|
||||
:global(.arco-upload-trigger .arco-upload-trigger-drag) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.uploadAreaTip {
|
||||
width: 462px;
|
||||
white-space: pre-wrap;
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,36 @@
|
||||
.title {
|
||||
font-family: PingFang SC;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
color: #1d2129;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.contTitle {
|
||||
font-family: PingFang SC;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.article {
|
||||
font-family: PingFang SC;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
color: #4e5969;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.agreeWrap {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
Loading…
Reference in new issue