mirror of
https://github.com/PlayEdu/backend
synced 2025-06-08 06:54:28 +08:00
首页概览初步优化
This commit is contained in:
禺狨
parent
eddf3ab5e9
commit
5a12f0d79f
@ -46,7 +46,7 @@ export const UploadImageButton = (props: PropsInterface) => {
|
||||
const [imageList, setImageList] = useState<ImageItem[]>([]);
|
||||
const [refresh, setRefresh] = useState(false);
|
||||
const [page, setPage] = useState(1);
|
||||
const [size, setSize] = useState(12);
|
||||
const [size, setSize] = useState(15);
|
||||
const [total, setTotal] = useState(0);
|
||||
|
||||
// 获取图片列表
|
||||
@ -92,11 +92,11 @@ export const UploadImageButton = (props: PropsInterface) => {
|
||||
setShowModal(false);
|
||||
}}
|
||||
open={true}
|
||||
width="1000px"
|
||||
width={820}
|
||||
maskClosable={false}
|
||||
>
|
||||
<Row gutter={16}>
|
||||
<Col span={4}>
|
||||
<Row style={{ width: 752, minHeight: 520, marginTop: 24 }}>
|
||||
<Col span={7}>
|
||||
<TreeCategory
|
||||
type="no-cate"
|
||||
resourceTotal={0}
|
||||
@ -105,8 +105,8 @@ export const UploadImageButton = (props: PropsInterface) => {
|
||||
onUpdate={(keys: any) => setCategoryIds(keys)}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={20}>
|
||||
<Row style={{ marginBottom: 24 }}>
|
||||
<Col span={17}>
|
||||
<Row style={{ marginBottom: 24, paddingLeft: 10 }}>
|
||||
<Col span={24}>
|
||||
<UploadImageSub
|
||||
categoryIds={category_ids}
|
||||
@ -116,12 +116,7 @@ export const UploadImageButton = (props: PropsInterface) => {
|
||||
></UploadImageSub>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row
|
||||
gutter={[
|
||||
{ xs: 8, sm: 16, md: 24, lg: 32 },
|
||||
{ xs: 4, sm: 8, md: 12, lg: 16 },
|
||||
]}
|
||||
>
|
||||
<div className="image-list-box">
|
||||
{imageList.length === 0 && (
|
||||
<Col span={24}>
|
||||
<Empty description="暂无图片" />
|
||||
@ -129,37 +124,33 @@ export const UploadImageButton = (props: PropsInterface) => {
|
||||
)}
|
||||
|
||||
{imageList.map((item) => (
|
||||
<Col
|
||||
<div
|
||||
key={item.id}
|
||||
span={6}
|
||||
className="image-item"
|
||||
style={{ backgroundImage: `url(${item.url})` }}
|
||||
onClick={() => {
|
||||
props.onSelected(item.url);
|
||||
setShowModal(false);
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
preview={false}
|
||||
width={120}
|
||||
height={80}
|
||||
src={item.url}
|
||||
/>
|
||||
</Col>
|
||||
></div>
|
||||
))}
|
||||
|
||||
{imageList.length > 0 && (
|
||||
<Col span={24}>
|
||||
<Pagination
|
||||
showSizeChanger
|
||||
onChange={(currentPage, currentSize) => {
|
||||
setPage(currentPage);
|
||||
setSize(currentSize);
|
||||
}}
|
||||
defaultCurrent={page}
|
||||
total={total}
|
||||
/>
|
||||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
</div>
|
||||
{imageList.length > 0 && (
|
||||
<Col
|
||||
span={24}
|
||||
style={{ display: "flex", flexDirection: "row-reverse" }}
|
||||
>
|
||||
<Pagination
|
||||
showSizeChanger
|
||||
onChange={(currentPage, currentSize) => {
|
||||
setPage(currentPage);
|
||||
setSize(currentSize);
|
||||
}}
|
||||
defaultCurrent={page}
|
||||
total={total}
|
||||
/>
|
||||
</Col>
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
</Modal>
|
||||
|
||||
@ -540,6 +540,26 @@ textarea.ant-input {
|
||||
}
|
||||
}
|
||||
|
||||
.image-list-box {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-left: 10px;
|
||||
display: grid;
|
||||
gap: 21px;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
margin-bottom: 24px;
|
||||
.image-item {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 6px;
|
||||
aspect-ratio: 1/1;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center center;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-video-title {
|
||||
margin-left: 4px;
|
||||
width: 346px;
|
||||
|
||||
@ -67,13 +67,13 @@
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
margin-top: 24px;
|
||||
.link-mode {
|
||||
width: 176px;
|
||||
width: auto;
|
||||
height: 76px;
|
||||
border-radius: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 24px;
|
||||
padding: 8%;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: #fafafa;
|
||||
@ -99,18 +99,20 @@
|
||||
border-radius: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
margin-top: 24px;
|
||||
.banner {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: 196px;
|
||||
left: 20%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.link {
|
||||
margin-left: 352px;
|
||||
margin-right: 10%;
|
||||
width: auto;
|
||||
height: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
@ -175,7 +177,7 @@
|
||||
margin-right: 8px;
|
||||
}
|
||||
.item-name {
|
||||
width: 150px;
|
||||
width: 100px;
|
||||
height: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
|
||||
@ -2,9 +2,6 @@ import React, { useState, useEffect } from "react";
|
||||
import styles from "./index.module.less";
|
||||
import { Row, Col, message } from "antd";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { DepartmentCreate } from "../department/compenents/create";
|
||||
import { MemberCreate } from "../member/compenents/create";
|
||||
import { CourseCreate } from "../course/compenents/create";
|
||||
import banner from "../../assets/images/dashboard/img-a1.png";
|
||||
import icon from "../../assets/images/dashboard/icon-more.png";
|
||||
import iconN1 from "../../assets/images/dashboard/icon-n1.png";
|
||||
@ -13,10 +10,6 @@ import iconN3 from "../../assets/images/dashboard/icon-n3.png";
|
||||
|
||||
export const Dashboard: React.FC<any> = () => {
|
||||
const navigate = useNavigate();
|
||||
const [departmentVisible, setDepartmentVisible] = useState<boolean>(false);
|
||||
const [memberVisible, setMembeVisible] = useState<boolean>(false);
|
||||
const [uploadVideoVisible, setUploadVideoVisible] = useState<boolean>(false);
|
||||
const [courseVisible, setCourseVisible] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
renderPieView({
|
||||
@ -88,7 +81,7 @@ export const Dashboard: React.FC<any> = () => {
|
||||
label: {
|
||||
show: true,
|
||||
position: "center",
|
||||
formatter: ("总资源数" + num), // 可以自定义，也可以{a}{b}{c}这种
|
||||
formatter: "总资源数" + num, // 可以自定义，也可以{a}{b}{c}这种
|
||||
textStyle: {
|
||||
// 主标题样式
|
||||
fontSize: 14,
|
||||
@ -110,24 +103,6 @@ export const Dashboard: React.FC<any> = () => {
|
||||
return (
|
||||
<>
|
||||
<Row gutter={24}>
|
||||
<DepartmentCreate
|
||||
open={departmentVisible}
|
||||
onCancel={() => {
|
||||
setDepartmentVisible(false);
|
||||
}}
|
||||
/>
|
||||
<MemberCreate
|
||||
open={memberVisible}
|
||||
onCancel={() => {
|
||||
setMembeVisible(false);
|
||||
}}
|
||||
/>
|
||||
<CourseCreate
|
||||
open={courseVisible}
|
||||
onCancel={() => {
|
||||
setCourseVisible(false);
|
||||
}}
|
||||
/>
|
||||
<Col span={12}>
|
||||
<div className="playedu-main-top">
|
||||
<div className="j-b-flex">
|
||||
@ -169,7 +144,7 @@ export const Dashboard: React.FC<any> = () => {
|
||||
<div
|
||||
className={styles["link-mode"]}
|
||||
onClick={() => {
|
||||
setMembeVisible(true);
|
||||
navigate("/member");
|
||||
}}
|
||||
>
|
||||
<i
|
||||
@ -178,7 +153,12 @@ export const Dashboard: React.FC<any> = () => {
|
||||
></i>
|
||||
<span>添加学员</span>
|
||||
</div>
|
||||
<div className={styles["link-mode"]}>
|
||||
<div
|
||||
className={styles["link-mode"]}
|
||||
onClick={() => {
|
||||
navigate("/videos");
|
||||
}}
|
||||
>
|
||||
<i
|
||||
className="iconfont icon-upvideo"
|
||||
style={{ color: "#419FFF", fontSize: 36 }}
|
||||
@ -188,19 +168,19 @@ export const Dashboard: React.FC<any> = () => {
|
||||
<div
|
||||
className={styles["link-mode"]}
|
||||
onClick={() => {
|
||||
setCourseVisible(true);
|
||||
navigate("/course");
|
||||
}}
|
||||
>
|
||||
<i
|
||||
className="iconfont icon-onlinelesson"
|
||||
style={{ color: "#B284FF", fontSize: 36 }}
|
||||
></i>
|
||||
<span>新建线上课</span>
|
||||
<span>线上课</span>
|
||||
</div>
|
||||
<div
|
||||
className={styles["link-mode"]}
|
||||
onClick={() => {
|
||||
setDepartmentVisible(true);
|
||||
navigate("/department");
|
||||
}}
|
||||
>
|
||||
<i
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user