parent
8201e187e1
commit
2ca7c99096
@ -0,0 +1,128 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Typography,
|
||||
Radio,
|
||||
Message,
|
||||
Form,
|
||||
Input,
|
||||
Button,
|
||||
Select,
|
||||
} from '@arco-design/web-react';
|
||||
import styles from './style/index.module.less';
|
||||
|
||||
const { Title } = Typography;
|
||||
const FormItem = Form.Item;
|
||||
|
||||
function StepArtistInfo() {
|
||||
const [form] = Form.useForm();
|
||||
const [agree, setAgree] = useState(false);
|
||||
|
||||
return (
|
||||
<Form
|
||||
form={form}
|
||||
className={styles.formWrap}
|
||||
autoComplete="off"
|
||||
labelCol={{ flex: '103px' }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
onValuesChange={(v, vs) => {
|
||||
console.log(v, vs);
|
||||
}}
|
||||
onSubmit={(v) => {
|
||||
console.log(v);
|
||||
}}
|
||||
>
|
||||
<FormItem
|
||||
field="artistName"
|
||||
rules={[{ required: true, message: '歌手名是必填项' }]}
|
||||
wrapperCol={{ flex: 1 }}
|
||||
>
|
||||
<div className={styles.artistName}>
|
||||
<div className={styles.hi}>Hi</div>
|
||||
<Input
|
||||
className={styles.artistNameInp}
|
||||
placeholder="请输入您的歌手名"
|
||||
/>
|
||||
</div>
|
||||
</FormItem>
|
||||
<div className={styles.heightHolder} />
|
||||
<FormItem
|
||||
label="艺人头像"
|
||||
field="avatar"
|
||||
rules={[{ required: true, message: '艺人头像是必填项' }]}
|
||||
>
|
||||
<Input placeholder="please enter your age" />
|
||||
</FormItem>
|
||||
<FormItem label="主页背景" field="mainBg">
|
||||
<Input placeholder="please enter your age" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="后台截图"
|
||||
field="clipPic"
|
||||
rules={[{ required: true, message: '后台截图是必填项' }]}
|
||||
>
|
||||
<Input placeholder="please enter your age" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="所在地区"
|
||||
field="clipPic"
|
||||
rules={[{ required: true, message: '所在地区是必填项' }]}
|
||||
>
|
||||
<Select placeholder="please enter your age" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="流派/风格"
|
||||
field="style"
|
||||
rules={[{ required: true, message: '流派/风格是必填项' }]}
|
||||
>
|
||||
<Select placeholder="please enter your age" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="类型"
|
||||
field="style2"
|
||||
rules={[{ required: true, message: '类型是必填项' }]}
|
||||
>
|
||||
<Select placeholder="please enter your age" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="艺人简介"
|
||||
field="artistIntro"
|
||||
rules={[{ required: true, message: '艺人简介是必填项' }]}
|
||||
>
|
||||
<Input placeholder="please enter your age" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="后台登录名"
|
||||
field="loginName"
|
||||
rules={[{ required: true, message: '后台登录名是必填项' }]}
|
||||
>
|
||||
<Input placeholder="please enter your age" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="登录密码"
|
||||
field="loginPwd"
|
||||
rules={[{ required: true, message: '登录密码是必填项' }]}
|
||||
>
|
||||
<Input placeholder="please enter your age" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
wrapperCol={{ offset: 3 }}
|
||||
field="agree"
|
||||
rules={[
|
||||
{ required: true, message: '请先同意《雀乐音乐用户服务协议》' },
|
||||
]}
|
||||
>
|
||||
<Radio>
|
||||
<span className={styles.policyName}>同意</span>
|
||||
<span className={styles.policyName}>《雀乐音乐用户服务协议》</span>
|
||||
</Radio>
|
||||
</FormItem>
|
||||
<FormItem wrapperCol={{ span: 24 }} className={styles.submitWrap}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
提交申请
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
export default StepArtistInfo;
|
||||
@ -0,0 +1,55 @@
|
||||
.formWrap {
|
||||
width: 800px;
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
padding-top: 39px;
|
||||
padding-bottom: 38px;
|
||||
padding-left: 30px;
|
||||
padding-right: 47px;
|
||||
margin-bottom: 54px;
|
||||
|
||||
.artistName {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #ededed;
|
||||
font-family: PingFang SC;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
padding: 17px 22px;
|
||||
box-sizing: border-box;
|
||||
color: #4e5969;
|
||||
|
||||
.hi {
|
||||
margin-right: 24px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.artistNameInp {
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #4e5969;
|
||||
background-color: transparent;
|
||||
|
||||
&:placeholder-shown {
|
||||
color: #c9cdd4;
|
||||
font-family: PingFang SC;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.heightHolder {
|
||||
height: 33px;
|
||||
}
|
||||
|
||||
.submitWrap {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
.policy {
|
||||
width: 800px;
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
padding-top: 39px;
|
||||
padding-bottom: 38px;
|
||||
|
||||
.policyTitle {
|
||||
font-family: PingFang SC;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
padding-left: 34px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.policyCont {
|
||||
padding-left: 34px;
|
||||
padding-right: 68px;
|
||||
color: #4e5969;
|
||||
font-family: PingFang SC;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.nextStep {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 30px;
|
||||
|
||||
.policyName {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue