diff --git a/src/index.less b/src/index.less
index b129536..c15ba5e 100644
--- a/src/index.less
+++ b/src/index.less
@@ -62,6 +62,10 @@ code {
   margin-left: 120px;
 }
 
+.ml-16 {
+  margin-left: 16px;
+}
+
 .mr-16 {
   margin-right: 16px;
 }
@@ -86,6 +90,10 @@ code {
   margin-right: 24px;
 }
 
+.mb-28 {
+  margin-bottom: 28px;
+}
+
 .mt-50 {
   margin-top: 50px;
 }
@@ -94,6 +102,14 @@ code {
   margin-bottom: 50px;
 }
 
+.helper-text {
+  height: 24px;
+  font-size: 12px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.45);
+  line-height: 24px;
+}
+
 .float-left {
   width: 100%;
   height: auto;
@@ -132,6 +148,10 @@ code {
   flex-direction: column;
 }
 
+.flex-1 {
+  flex: 1;
+}
+
 .c-admin {
   font-size: 14px;
   font-weight: 400;
diff --git a/src/pages/course/compenents/create.module.less b/src/pages/course/compenents/create.module.less
index e69de29..b44cb43 100644
--- a/src/pages/course/compenents/create.module.less
+++ b/src/pages/course/compenents/create.module.less
@@ -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;
+  }
+}
diff --git a/src/pages/course/compenents/create.tsx b/src/pages/course/compenents/create.tsx
index 8fbe953..476078d 100644
--- a/src/pages/course/compenents/create.tsx
+++ b/src/pages/course/compenents/create.tsx
@@ -9,11 +9,13 @@ import {
   Input,
   Modal,
   message,
+  Image,
 } from "antd";
 import styles from "./create.module.less";
 import { course, department } from "../../../api/index";
 import { UploadImageButton } from "../../../compenents";
 import { ExclamationCircleFilled } from "@ant-design/icons";
+import { getHost } from "../../../utils/index";
 
 const { confirm } = Modal;
 
@@ -30,12 +32,16 @@ interface Option {
 
 export const CourseCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
   const [form] = Form.useForm();
+  const defaultThumb1 = getHost() + "thumb/thumb1.png";
+  const defaultThumb2 = getHost() + "thumb/thumb2.png";
+  const defaultThumb3 = getHost() + "thumb/thumb3.png";
   const [loading, setLoading] = useState<boolean>(true);
   const [departments, setDepartments] = useState<any>([]);
   const [categories, setCategories] = useState<any>([]);
   const [thumb, setThumb] = useState<string>("");
   const [type, setType] = useState<string>("open");
   const [chapterType, setChapterType] = useState(0);
+  const [selThumb, setSelThumb] = useState(1);
 
   useEffect(() => {
     getParams();
@@ -45,14 +51,14 @@ export const CourseCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
   useEffect(() => {
     form.setFieldsValue({
       title: "",
-      thumb: "",
+      thumb: defaultThumb1,
       dep_ids: [],
       category_ids: [],
       type: "open",
       desc: "",
       hasChapter: 0,
     });
-    setThumb("");
+    setThumb(defaultThumb1);
   }, [form, open]);
 
   const getParams = () => {
@@ -226,18 +232,95 @@ export const CourseCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
               name="thumb"
               rules={[{ required: true, message: "请上传课程封面!" }]}
             >
-              <div className="c-flex">
-                <div className="d-flex">
-                  <UploadImageButton
-                    onSelected={(url) => {
-                      setThumb(url);
-                      form.setFieldsValue({ thumb: url });
-                    }}
-                  ></UploadImageButton>
+              <div className="d-flex">
+                <Image
+                  src={thumb}
+                  width={160}
+                  height={120}
+                  style={{ borderRadius: 6 }}
+                  preview={false}
+                />
+                <div className="c-flex ml-8 flex-1">
+                  <div className="d-flex mb-28">
+                    <div
+                      className={
+                        selThumb === 1
+                          ? styles["thumb-item-avtive"]
+                          : styles["thumb-item"]
+                      }
+                      onClick={() => {
+                        setSelThumb(1);
+                        setThumb(defaultThumb1);
+                        form.setFieldsValue({
+                          thumb: defaultThumb1,
+                        });
+                      }}
+                    >
+                      <Image
+                        src={defaultThumb1}
+                        width={80}
+                        height={60}
+                        style={{ borderRadius: 6 }}
+                        preview={false}
+                      />
+                    </div>
+                    <div
+                      className={
+                        selThumb === 2
+                          ? styles["thumb-item-avtive"]
+                          : styles["thumb-item"]
+                      }
+                      onClick={() => {
+                        setSelThumb(2);
+                        setThumb(defaultThumb2);
+                        form.setFieldsValue({
+                          thumb: defaultThumb2,
+                        });
+                      }}
+                    >
+                      <Image
+                        src={defaultThumb2}
+                        width={80}
+                        height={60}
+                        style={{ borderRadius: 6 }}
+                        preview={false}
+                      />
+                    </div>
+                    <div
+                      className={
+                        selThumb === 3
+                          ? styles["thumb-item-avtive"]
+                          : styles["thumb-item"]
+                      }
+                      onClick={() => {
+                        setSelThumb(3);
+                        setThumb(defaultThumb3);
+                        form.setFieldsValue({
+                          thumb: defaultThumb3,
+                        });
+                      }}
+                    >
+                      <Image
+                        src={defaultThumb3}
+                        width={80}
+                        height={60}
+                        style={{ borderRadius: 6 }}
+                        preview={false}
+                      />
+                    </div>
+                  </div>
+                  <div className="d-flex">
+                    <UploadImageButton
+                      onSelected={(url) => {
+                        setThumb(url);
+                        form.setFieldsValue({ thumb: url });
+                      }}
+                    ></UploadImageButton>
+                    <span className="helper-text ml-16">
+                      （推荐尺寸:400x300px）
+                    </span>
+                  </div>
                 </div>
-                {thumb && (
-                  <img className="form-course-thumb mt-10" src={thumb} alt="" />
-                )}
               </div>
             </Form.Item>
             <Form.Item label="课程简介" name="desc">