选择、上传封面模块

This commit is contained in:
禺狨 2023-03-16 10:47:43 +08:00
parent 52e6dc2e05
commit aab33715e8
2 changed files with 25 additions and 8 deletions

View File

@ -41,7 +41,6 @@ export const CourseCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
const [thumb, setThumb] = useState<string>(""); const [thumb, setThumb] = useState<string>("");
const [type, setType] = useState<string>("open"); const [type, setType] = useState<string>("open");
const [chapterType, setChapterType] = useState(0); const [chapterType, setChapterType] = useState(0);
const [selThumb, setSelThumb] = useState(1);
useEffect(() => { useEffect(() => {
getParams(); getParams();
@ -154,7 +153,6 @@ export const CourseCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
onClose={onCancel} onClose={onCancel}
maskClosable={false} maskClosable={false}
open={open} open={open}
bodyStyle={{ paddingBottom: 80 }}
footer={ footer={
<Space className="j-r-flex"> <Space className="j-r-flex">
<Button onClick={() => onCancel()}> </Button> <Button onClick={() => onCancel()}> </Button>
@ -244,12 +242,11 @@ export const CourseCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
<div className="d-flex mb-28"> <div className="d-flex mb-28">
<div <div
className={ className={
selThumb === 1 thumb === defaultThumb1
? styles["thumb-item-avtive"] ? styles["thumb-item-avtive"]
: styles["thumb-item"] : styles["thumb-item"]
} }
onClick={() => { onClick={() => {
setSelThumb(1);
setThumb(defaultThumb1); setThumb(defaultThumb1);
form.setFieldsValue({ form.setFieldsValue({
thumb: defaultThumb1, thumb: defaultThumb1,
@ -266,12 +263,11 @@ export const CourseCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
</div> </div>
<div <div
className={ className={
selThumb === 2 thumb === defaultThumb2
? styles["thumb-item-avtive"] ? styles["thumb-item-avtive"]
: styles["thumb-item"] : styles["thumb-item"]
} }
onClick={() => { onClick={() => {
setSelThumb(2);
setThumb(defaultThumb2); setThumb(defaultThumb2);
form.setFieldsValue({ form.setFieldsValue({
thumb: defaultThumb2, thumb: defaultThumb2,
@ -288,12 +284,11 @@ export const CourseCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
</div> </div>
<div <div
className={ className={
selThumb === 3 thumb === defaultThumb3
? styles["thumb-item-avtive"] ? styles["thumb-item-avtive"]
: styles["thumb-item"] : styles["thumb-item"]
} }
onClick={() => { onClick={() => {
setSelThumb(3);
setThumb(defaultThumb3); setThumb(defaultThumb3);
form.setFieldsValue({ form.setFieldsValue({
thumb: defaultThumb3, thumb: defaultThumb3,

View File

@ -0,0 +1,22 @@
.thumb-item {
width: 80px;
height: 60px;
cursor: pointer;
margin-right: 8px;
border-radius: 6px;
&:last-child {
margin-right: 0;
}
}
.thumb-item-avtive {
width: 80px;
height: 60px;
border: 2px solid #ff4d4f;
cursor: pointer;
margin-right: 8px;
border-radius: 8px;
&:last-child {
margin-right: 0;
}
}