diff --git a/README.md b/README.md
index e8f06404..b27ce9df 100644
--- a/README.md
+++ b/README.md
@@ -43,7 +43,8 @@ LevelCheck.vue查看页面
 
 ```
 ProjectManage.vue:项目页面
-ProjectAdd.vue:创建项目页面
+ProjectAdd.vue:创建单层项目页面
+SonProject.vue:创建单层子项目页面
 TaskPage.vue:任务页面
 TaskAdd.vue:创建任务页面
 TemplateLibrary.vue:模板页面
diff --git a/src/views/projectcenter/ClassAdd.vue b/src/views/projectcenter/ClassAdd.vue
new file mode 100644
index 00000000..af9fbaf7
--- /dev/null
+++ b/src/views/projectcenter/ClassAdd.vue
@@ -0,0 +1,536 @@
+<!---- 创建班级页面 --->
+<template>
+  <div class="projectAdd">
+    <div class="header">
+      <span class="title">创建/编辑班级</span>
+      <router-link to="/projectmanage" class="goback">
+        <span class="return"></span
+        ><span class="returntext">返回</span></router-link
+      >
+    </div>
+    <div class="content">
+      <div class="main">
+      <div class="name">
+          <div class="namebox">
+            <img
+              class="nameimg"
+              src="../../assets/images/basicinfo/asterisk.png"
+            />
+            <div class="inname">项目归属</div>
+          </div>
+          <div class="in">
+            <div style="color: #C7CBD2;font-size: 14px;margin-left: 15px">管理者进阶/管理者进阶-腾飞班</div>
+          </div>
+        </div>
+        <div class="name">
+          <div class="namebox">
+            <img
+              class="nameimg"
+              src="../../assets/images/basicinfo/asterisk.png"
+            />
+            <div class="inname">班级名称</div>
+          </div>
+
+          <div class="in">
+            <a-input class="ant-input1" v-model:value="valueE" placeholder="请输入班级名称" show-count :maxlength="30"/>
+          </div>
+        </div>
+        <div class="name">
+          <div class="namebox">
+            <img
+              class="nameimg"
+              src="../../assets/images/basicinfo/asterisk.png"
+            />
+            <div class="inname">分类</div>
+          </div>
+          <div class="in select">
+            <a-select
+              :value="classifySelect"
+              placeholder="四个养成"
+              style="width: 100%"
+              :options="classifyList"
+              allowClear
+              showSearch
+            ></a-select>
+          </div>
+        </div>
+        <div class="name">
+          <div class="namebox">
+            <img
+              class="nameimg"
+              src="../../assets/images/basicinfo/asterisk.png"
+            />
+            <div class="inname">封面图</div>
+          </div>
+          <div
+            class="box"
+            style="
+              width: 100px;
+              height: 100px;
+              border: 1px solid rgba(78, 166, 255, 1);
+              border-radius: 5px;
+              cursor: pointer;
+            "
+          >
+            <div class="box1"></div>
+            <div class="box2"></div>
+          </div>
+        </div>
+        <div class="name">
+          <div class="namebox">
+            <img
+              class="nameimg"
+              src="../../assets/images/basicinfo/asterisk.png"
+            />
+            <div class="inname">项目时间</div>
+          </div>
+
+          <div class="in">
+            <a-range-picker
+              separator="至"
+              style="width: 100%; height: 40px; border-radius: 5px"
+              show-time
+            />
+          </div>
+        </div>
+        <div class="name">
+          <div class="namebox">
+            <img
+              class="nameimg"
+              src="../../assets/images/basicinfo/asterisk.png"
+            />
+            <div class="inname">项目经理</div>
+          </div>
+          <div class="in select">
+            <a-select
+              :value="classifySelect"
+              placeholder="请选择项目经理"
+              style="width: 100%"
+              :options="classifyList"
+              allowClear
+              showSearch
+            ></a-select>
+          </div>
+        </div>
+        <div class="name">
+          <div class="namebox">
+            <img
+              class="nameimg"
+              src="../../assets/images/basicinfo/asterisk.png"
+            />
+            <div class="inname">资源归属</div>
+          </div>
+
+          <div class="in">
+            <a-input v-model:value="valueE" placeholder="自动带出 可修改" />
+          </div>
+        </div>
+        <div class="name name2">
+          <div class="namebox">
+            <div class="inname" style="margin-top: 13px">项目说明</div>
+          </div>
+          <div class="in">
+            <a-textarea
+              v-model:value="valuei"
+              style="height: 80px"
+              placeholder="请输入项目说明"
+              show-count :maxlength="200"
+            />
+          </div>
+        </div>
+        <div class="name name2">
+          <div class="namebox">
+            <div class="inname">同步学习记录</div>
+          </div>
+          <div class="in">
+            <a-radio v-model:checked="checked"
+              ><span
+                style="
+                  width: 100%;
+                  color: rgba(109, 117, 132, 1);
+                  font-size: 14px;
+                "
+                >同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</span
+              ></a-radio
+            >
+          </div>
+        </div>
+        <div class="name">
+          <div class="namebox">
+            <img
+              class="nameimg"
+              src="../../assets/images/basicinfo/asterisk.png"
+            />
+            <div class="inname">项目级别</div>
+          </div>
+          <div class="in">
+            <a-input
+              v-model:value="valueE"
+              placeholder="集团级/组织级/现地级/部门级"
+            />
+          </div>
+        </div>
+        <div class="name">
+          <div class="namebox">
+            <img
+              class="nameimg"
+              src="../../assets/images/basicinfo/asterisk.png"
+            />
+            <div class="inname">培训体系</div>
+          </div>
+          <div class="in">
+            <a-input
+              v-model:value="valueE"
+              placeholder="集团级/组织级/现地级/部门级"
+            />
+          </div>
+        </div>
+        <div class="name">
+          <div class="namebox">
+            <img
+              class="nameimg"
+              src="../../assets/images/basicinfo/asterisk.png"
+            />
+            <div class="inname">是否BOEU实施</div>
+          </div>
+          <div class="in">
+            <a-radio v-model:checked="checked"
+              ><span
+                style="
+                  width: 100%;
+                  color: rgba(109, 117, 132, 1);
+                  font-size: 14px;
+                "
+                >BOEU实施</span
+              ></a-radio
+            >
+          </div>
+        </div>
+        <div class="name name2">
+          <div class="namebox" style="margin-top: 8px">
+            <img
+              class="nameimg"
+              src="../../assets/images/basicinfo/asterisk.png"
+            />
+            <div class="inname">附件</div>
+          </div>
+          <div class="filebox">
+            <div style="cursor: pointer">
+              <img
+                class="fileimg"
+                src="../../assets/images/projectadd/enclosure.png"
+              />
+              <span class="filetext">上传附件</span>
+            </div>
+            <div class="support">
+              支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="template">
+        <div class="name">
+          <div class="inname" style="width: 50px">模板</div>
+          <div class="in select" style="margin-left: 2px">
+            <a-select
+              v-model:value="value1"
+              placeholder="请选择模板"
+              :size="size"
+              style="width: 100%"
+              :options="options"
+            ></a-select>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="btn">
+        <a-button
+          type="primary"
+          style="width: 100px; height: 40px; border-radius: 8px"
+          >确认</a-button
+        >
+        <a-button
+          type="primary"
+          ghost
+          style="
+            width: 100px;
+            height: 40px;
+            margin-left: 14px;
+            border-radius: 8px;
+          "
+          >取消</a-button
+        >
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { reactive, toRefs } from "vue";
+export default {
+  name: "sonProject",
+  setup() {
+    const state = reactive({
+      classifyList: [
+        {
+          id: 1,
+          name: "分类一",
+          label: "分类一",
+        },
+        {
+          id: 2,
+          name: "分类二",
+          label: "分类二",
+        },
+        {
+          id: 3,
+          name: "分类三",
+          label: "分类三",
+        },
+        {
+          id: 4,
+          name: "分类四",
+          label: "分类四",
+        },
+      ],
+      classifySelect: null,
+      classifySelectId: null,
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+<style lang="scss">
+.projectAdd {
+  width: 100%;
+  // height: inherit;
+  // flex: 1;
+  // flex-shrink: 0;
+  // overflow-y: scroll;
+
+  .header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    .title {
+      color: #000000;
+      font-size: 18px;
+      //line-height: 36px;
+      padding-top: 30px;
+      padding-left: 37px;
+      //font-weight: 500;
+    }
+    .goback {
+      padding-right: 70px;
+      //padding-top: 37px;
+      position: relative;
+      .return {
+        display: inline-block;
+        width: 42px;
+        height: 42px;
+        margin-top: 17px;
+        margin-right: 10px;
+        background-image: url("../../assets/images/projectadd/return.png");
+      }
+      .returntext {
+        display: inline-block;
+        position: absolute;
+        top: 27px;
+        color: #4ea6ff;
+        font-size: 14px;
+      }
+    }
+  }
+  .content {
+    display: flex;
+    .main {
+      width: 50%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      //justify-content: center;
+      float: left;
+      border-right: 1px solid rgba(153, 155, 163, 0.3);
+      .name {
+        width: 78%;
+        // background-color: lightcoral;
+        display: flex;
+        margin-top: 20px;
+        align-items: center;
+        //height: 40px;
+        // border: 1px solid black;
+        .namebox {
+          width: 120px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          flex-shrink: 0;
+          .nameimg {
+            width: 10px;
+            height: 10px;
+          }
+        }
+        .d {
+          margin-top: 8px;
+          font-size: 25px;
+          color: #ff4e4e;
+        }
+        .box {
+          position: relative;
+          margin-left: 14px;
+          .box1 {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: 50px;
+            margin-left: -25px;
+            margin-top: -5px;
+            border-top: 2px solid rgba(78, 166, 255, 1);
+          }
+          .box2 {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            height: 50px;
+            //margin-left: -5px;
+            margin-top: -25px;
+            border-left: 2px solid rgba(78, 166, 255, 1);
+          }
+        }
+        .inname {
+          color: #6f6f6f;
+          font-size: 14px;
+          margin-left: 7px;
+        }
+        .in {
+          margin-left: 14px;
+          flex: 1;
+          // .ant-radio-wrapper {
+          // }
+          .ant-input-textarea-show-count {
+              position: relative;
+              height: 88px;
+            }
+            .ant-input-textarea-show-count::after {
+              position: absolute;
+              right: 10px;
+              bottom: 0px;
+            } 
+          .ant-input {
+            border-radius: 5px;
+            // height: 120%;
+            width: 100%;
+            height: 40px;
+          }
+          .ant-input1 {
+                border-radius: 5px;
+                width: 100%;
+            .ant-input {
+                height: 30px;               
+            }
+          }
+          .ant-select-selector {
+            border-radius: 5px;
+            // height: 120%;
+            width: 100%;
+            height: 40px;
+          }
+        }
+        .filebox {
+          margin-left: 14px;
+          flex: 1;
+          .fileimg {
+            width: 15px;
+            height: 15px;
+            margin-right: 6px;
+          }
+          .filetext {
+            font-size: 14px;
+            font-weight: 400;
+            color: #4ea6ff;
+            line-height: 36px;
+          }
+          .support {
+            font-size: 14px;
+            font-weight: 400;
+            color: #999ba3;
+            line-height: 36px;
+            //margin-top: 8px;
+            word-break: break-all;
+          }
+        }
+      }
+      .name2 {
+        display: flex;
+        align-items: flex-start;
+        .ant-input-textarea {
+            .ant-input {
+                height: 88px;
+            }
+        }
+      }
+    }
+    .template {
+      width: 50%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      //justify-content: center;
+      float: right;
+      .name {
+        width: 78%;
+        // background-color: lightcoral;
+        display: flex;
+        margin-top: 20px;
+        align-items: center;
+        height: 40px;
+        // border: 1px solid black;
+        .d {
+          margin-top: 8px;
+          font-size: 25px;
+          color: #ff4e4e;
+        }
+        .inname {
+          color: #6f6f6f;
+          font-size: 14px;
+          margin-left: 7px;
+          width: 65px;
+        }
+        .in {
+          margin-left: 14px;
+          width: 81%;
+          .ant-input {
+            border-radius: 5px;
+            // height: 120%;
+            width: 100%;
+            height: 40px;
+          }
+          .ant-select-selector {
+            border-radius: 5px;
+            // height: 120%;
+            width: 100%;
+            height: 40px;
+          }
+        }
+      }
+    }
+  }
+  .footer {
+    width: 100%;
+    margin-top: 31px;
+    margin-bottom: 14px;
+    padding-bottom: 20px;
+    .btn {
+      display: flex;
+      justify-content: center;
+    }
+    .text {
+      color: rgba(153, 155, 163, 1);
+      font-size: 14px;
+      margin-left: 223px;
+    }
+  }
+}
+</style>
diff --git a/src/views/projectcenter/ProjectManage.vue b/src/views/projectcenter/ProjectManage.vue
index 45a04780..29acaa1d 100644
--- a/src/views/projectcenter/ProjectManage.vue
+++ b/src/views/projectcenter/ProjectManage.vue
@@ -133,12 +133,12 @@
           </div>
         </div>
         <div class="modalMain">
-            <div class="taskbox" style="margin-right: 24px;background:linear-gradient(180deg,rgba(221, 234, 255, 1) 100%,rgba(240, 248, 254, 1) 100%);">
+            <router-link to="/sonproject" class="taskbox" style="margin-right: 24px;background:linear-gradient(180deg,rgba(221, 234, 255, 1) 100%,rgba(240, 248, 254, 1) 100%);">
                 <div class="leftt"><img src="../../assets/images/taskpage/left2.png"/></div>
                 <div class="photo"><img src="../../assets/images/taskpage/picture4.png"/></div>
                 <div class="rightt"><img src="../../assets/images/taskpage/right2.png"/></div>
                 <div class="centerbox" style="color: rgba(78, 166, 255, 1)">单层子项目</div>
-            </div>
+            </router-link>
             <div class="taskbox" @click="showModal3" style="background:linear-gradient(180deg,rgba(254, 243, 221, 1) 100%,rgba(255, 250, 240, 1) 100%);"> 
                 <div class="leftt"><img src="../../assets/images/taskpage/left1.png"/></div>
                 <div class="photo"><img src="../../assets/images/taskpage/picture5.png"/></div>
@@ -912,7 +912,7 @@ export default {
                         </a-select-option>
                       </a-select>
                     </div>
-                    <span class="operation3">创建班级</span>
+                    <router-link to="/classadd" class="operation3">创建班级</router-link>
                     <div class="tableSelect">
                       <a-select
                         style="width: 50px"
@@ -960,7 +960,7 @@ export default {
                       </a-select>
                     </div>
 
-                    <span class="operation3">创建班级</span>
+                    <router-link to="/classadd" class="operation3">创建班级</router-link>
                     <span class="more">复制</span>
                   </div>
                 ) : item.state === "已结束" ? (
diff --git a/src/views/projectcenter/SonProject.vue b/src/views/projectcenter/SonProject.vue
new file mode 100644
index 00000000..0f5291e3
--- /dev/null
+++ b/src/views/projectcenter/SonProject.vue
@@ -0,0 +1,528 @@
+<!---- 创建单层子项目页面 --->
+<template>
+  <div class="projectAdd">
+    <div class="header">
+      <span class="title">创建/编辑单层子项目</span>
+      <router-link to="/projectmanage" class="goback">
+        <span class="return"></span
+        ><span class="returntext">返回</span></router-link
+      >
+    </div>
+    <div class="content">
+      <div class="main">
+      <div class="name">
+          <div class="namebox">
+            <img
+              class="nameimg"
+              src="../../assets/images/basicinfo/asterisk.png"
+            />
+            <div class="inname">项目归属</div>
+          </div>
+          <div class="in">
+            <div style="color: #C7CBD2;font-size: 14px;margin-left: 15px">HRBP2.0</div>
+          </div>
+        </div>
+        <div class="name">
+          <div class="namebox">
+            <img
+              class="nameimg"
+              src="../../assets/images/basicinfo/asterisk.png"
+            />
+            <div class="inname">子项目名称</div>
+          </div>
+          <div class="in">
+            <div style="color: #C7CBD2;font-size: 14px;margin-left: 15px">HRBP2.0-band</div>
+          </div>
+        </div>
+        <div class="name">
+          <div class="namebox">
+            <img
+              class="nameimg"
+              src="../../assets/images/basicinfo/asterisk.png"
+            />
+            <div class="inname">分类</div>
+          </div>
+          <div class="in select">
+            <a-select
+              :value="classifySelect"
+              placeholder="四个养成"
+              style="width: 100%"
+              :options="classifyList"
+              allowClear
+              showSearch
+            ></a-select>
+          </div>
+        </div>
+        <div class="name">
+          <div class="namebox">
+            <img
+              class="nameimg"
+              src="../../assets/images/basicinfo/asterisk.png"
+            />
+            <div class="inname">封面图</div>
+          </div>
+          <div
+            class="box"
+            style="
+              width: 100px;
+              height: 100px;
+              border: 1px solid rgba(78, 166, 255, 1);
+              border-radius: 5px;
+              cursor: pointer;
+            "
+          >
+            <div class="box1"></div>
+            <div class="box2"></div>
+          </div>
+        </div>
+        <div class="name">
+          <div class="namebox">
+            <img
+              class="nameimg"
+              src="../../assets/images/basicinfo/asterisk.png"
+            />
+            <div class="inname">项目时间</div>
+          </div>
+
+          <div class="in">
+            <a-range-picker
+              separator="至"
+              style="width: 100%; height: 40px; border-radius: 5px"
+              show-time
+            />
+          </div>
+        </div>
+        <div class="name">
+          <div class="namebox">
+            <img
+              class="nameimg"
+              src="../../assets/images/basicinfo/asterisk.png"
+            />
+            <div class="inname">项目经理</div>
+          </div>
+          <div class="in select">
+            <a-select
+              :value="classifySelect"
+              placeholder="请选择项目经理"
+              style="width: 100%"
+              :options="classifyList"
+              allowClear
+              showSearch
+            ></a-select>
+          </div>
+        </div>
+        <div class="name">
+          <div class="namebox">
+            <img
+              class="nameimg"
+              src="../../assets/images/basicinfo/asterisk.png"
+            />
+            <div class="inname">资源归属</div>
+          </div>
+
+          <div class="in">
+            <a-input v-model:value="valueE" placeholder="自动带出 可修改" />
+          </div>
+        </div>
+        <div class="name name2">
+          <div class="namebox">
+            <div class="inname" style="margin-top: 13px">项目说明</div>
+          </div>
+          <div class="in">
+            <a-textarea
+              v-model:value="valuei"
+              style="height: 80px"
+              placeholder="请输入项目说明"
+              show-count :maxlength="200"
+            />
+          </div>
+        </div>
+        <div class="name name2">
+          <div class="namebox">
+            <div class="inname">同步学习记录</div>
+          </div>
+          <div class="in">
+            <a-radio v-model:checked="checked"
+              ><span
+                style="
+                  width: 100%;
+                  color: rgba(109, 117, 132, 1);
+                  font-size: 14px;
+                "
+                >同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</span
+              ></a-radio
+            >
+          </div>
+        </div>
+        <div class="name">
+          <div class="namebox">
+            <img
+              class="nameimg"
+              src="../../assets/images/basicinfo/asterisk.png"
+            />
+            <div class="inname">项目级别</div>
+          </div>
+          <div class="in">
+            <a-input
+              v-model:value="valueE"
+              placeholder="集团级/组织级/现地级/部门级"
+            />
+          </div>
+        </div>
+        <div class="name">
+          <div class="namebox">
+            <img
+              class="nameimg"
+              src="../../assets/images/basicinfo/asterisk.png"
+            />
+            <div class="inname">培训体系</div>
+          </div>
+          <div class="in">
+            <a-input
+              v-model:value="valueE"
+              placeholder="集团级/组织级/现地级/部门级"
+            />
+          </div>
+        </div>
+        <div class="name">
+          <div class="namebox">
+            <img
+              class="nameimg"
+              src="../../assets/images/basicinfo/asterisk.png"
+            />
+            <div class="inname">是否BOEU实施</div>
+          </div>
+          <div class="in">
+            <a-radio v-model:checked="checked"
+              ><span
+                style="
+                  width: 100%;
+                  color: rgba(109, 117, 132, 1);
+                  font-size: 14px;
+                "
+                >BOEU实施</span
+              ></a-radio
+            >
+          </div>
+        </div>
+        <div class="name name2">
+          <div class="namebox" style="margin-top: 8px">
+            <img
+              class="nameimg"
+              src="../../assets/images/basicinfo/asterisk.png"
+            />
+            <div class="inname">附件</div>
+          </div>
+          <div class="filebox">
+            <div style="cursor: pointer">
+              <img
+                class="fileimg"
+                src="../../assets/images/projectadd/enclosure.png"
+              />
+              <span class="filetext">上传附件</span>
+            </div>
+            <div class="support">
+              支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="template">
+        <div class="name">
+          <div class="inname" style="width: 50px">模板</div>
+          <div class="in select" style="margin-left: 2px">
+            <a-select
+              v-model:value="value1"
+              placeholder="请选择模板"
+              :size="size"
+              style="width: 100%"
+              :options="options"
+            ></a-select>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="btn">
+        <a-button
+          type="primary"
+          style="width: 100px; height: 40px; border-radius: 8px"
+          >确认</a-button
+        >
+        <a-button
+          type="primary"
+          ghost
+          style="
+            width: 100px;
+            height: 40px;
+            margin-left: 14px;
+            border-radius: 8px;
+          "
+          >取消</a-button
+        >
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { reactive, toRefs } from "vue";
+export default {
+  name: "sonProject",
+  setup() {
+    const state = reactive({
+      classifyList: [
+        {
+          id: 1,
+          name: "分类一",
+          label: "分类一",
+        },
+        {
+          id: 2,
+          name: "分类二",
+          label: "分类二",
+        },
+        {
+          id: 3,
+          name: "分类三",
+          label: "分类三",
+        },
+        {
+          id: 4,
+          name: "分类四",
+          label: "分类四",
+        },
+      ],
+      classifySelect: null,
+      classifySelectId: null,
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+<style lang="scss">
+.projectAdd {
+  width: 100%;
+  // height: inherit;
+  // flex: 1;
+  // flex-shrink: 0;
+  // overflow-y: scroll;
+
+  .header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    .title {
+      color: #000000;
+      font-size: 18px;
+      //line-height: 36px;
+      padding-top: 30px;
+      padding-left: 37px;
+      //font-weight: 500;
+    }
+    .goback {
+      padding-right: 70px;
+      //padding-top: 37px;
+      position: relative;
+      .return {
+        display: inline-block;
+        width: 42px;
+        height: 42px;
+        margin-top: 17px;
+        margin-right: 10px;
+        background-image: url("../../assets/images/projectadd/return.png");
+      }
+      .returntext {
+        display: inline-block;
+        position: absolute;
+        top: 27px;
+        color: #4ea6ff;
+        font-size: 14px;
+      }
+    }
+  }
+  .content {
+    display: flex;
+    .main {
+      width: 50%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      //justify-content: center;
+      float: left;
+      border-right: 1px solid rgba(153, 155, 163, 0.3);
+      .name {
+        width: 78%;
+        // background-color: lightcoral;
+        display: flex;
+        margin-top: 20px;
+        align-items: center;
+        //height: 40px;
+        // border: 1px solid black;
+        .namebox {
+          width: 120px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          flex-shrink: 0;
+          .nameimg {
+            width: 10px;
+            height: 10px;
+          }
+        }
+        .d {
+          margin-top: 8px;
+          font-size: 25px;
+          color: #ff4e4e;
+        }
+        .box {
+          position: relative;
+          margin-left: 14px;
+          .box1 {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: 50px;
+            margin-left: -25px;
+            margin-top: -5px;
+            border-top: 2px solid rgba(78, 166, 255, 1);
+          }
+          .box2 {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            height: 50px;
+            //margin-left: -5px;
+            margin-top: -25px;
+            border-left: 2px solid rgba(78, 166, 255, 1);
+          }
+        }
+        .inname {
+          color: #6f6f6f;
+          font-size: 14px;
+          margin-left: 7px;
+        }
+        .in {
+          margin-left: 14px;
+          flex: 1;
+          // .ant-radio-wrapper {
+          // }
+          .ant-input-textarea-show-count {
+              position: relative;
+              height: 88px;
+            }
+            .ant-input-textarea-show-count::after {
+              position: absolute;
+              right: 10px;
+              bottom: 0px;
+            } 
+          .ant-input {
+            border-radius: 5px;
+            // height: 120%;
+            width: 100%;
+            height: 40px;
+          }
+          .ant-select-selector {
+            border-radius: 5px;
+            // height: 120%;
+            width: 100%;
+            height: 40px;
+          }
+        }
+        .filebox {
+          margin-left: 14px;
+          flex: 1;
+          .fileimg {
+            width: 15px;
+            height: 15px;
+            margin-right: 6px;
+          }
+          .filetext {
+            font-size: 14px;
+            font-weight: 400;
+            color: #4ea6ff;
+            line-height: 36px;
+          }
+          .support {
+            font-size: 14px;
+            font-weight: 400;
+            color: #999ba3;
+            line-height: 36px;
+            //margin-top: 8px;
+            word-break: break-all;
+          }
+        }
+      }
+      .name2 {
+        display: flex;
+        align-items: flex-start;
+        .ant-input-textarea {
+            .ant-input {
+                height: 88px;
+            }
+        }
+      }
+    }
+    .template {
+      width: 50%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      //justify-content: center;
+      float: right;
+      .name {
+        width: 78%;
+        // background-color: lightcoral;
+        display: flex;
+        margin-top: 20px;
+        align-items: center;
+        height: 40px;
+        // border: 1px solid black;
+        .d {
+          margin-top: 8px;
+          font-size: 25px;
+          color: #ff4e4e;
+        }
+        .inname {
+          color: #6f6f6f;
+          font-size: 14px;
+          margin-left: 7px;
+          width: 65px;
+        }
+        .in {
+          margin-left: 14px;
+          width: 81%;
+          .ant-input {
+            border-radius: 5px;
+            // height: 120%;
+            width: 100%;
+            height: 40px;
+          }
+          .ant-select-selector {
+            border-radius: 5px;
+            // height: 120%;
+            width: 100%;
+            height: 40px;
+          }
+        }
+      }
+    }
+  }
+  .footer {
+    width: 100%;
+    margin-top: 31px;
+    margin-bottom: 14px;
+    padding-bottom: 20px;
+    .btn {
+      display: flex;
+      justify-content: center;
+    }
+    .text {
+      color: rgba(153, 155, 163, 1);
+      font-size: 14px;
+      margin-left: 223px;
+    }
+  }
+}
+</style>