feat:合并

README.md

@@ -36,17 +36,19 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 LearningPath.vue:学习路径页面
 LevelAdd.vue:关卡页面
 LevelAddDetail.vue:创建关卡页面
-
+LevelCheck.vue查看页面
 ```
 
 ### 二、projectcenter:项目文件夹
 
 ```
 ProjectManage.vue:项目页面
-ProjectAdd.vue:创建项目页面
+ProjectAdd.vue:创建单层项目页面
+SonProject.vue:创建单层子项目页面
 TaskPage.vue:任务页面
 TaskAdd.vue:创建任务页面
 TemplateLibrary.vue:模板页面
+LibraryAdd.vue:模板库查看页面
 
 ```
 

src/components/BreadCrumb.vue

@@ -68,6 +68,21 @@ export default {
             },
           ];
         }
+        if (n === "/levelcheck" || n === "/LevelCheck") {
+          state.list = [
+            {
+              name: "学习路径",
+              href: "/learningpath",
+            },
+            {
+              name: "关卡",
+              href: "/leveladd",
+            },
+            {
+              name: "查看",
+            },
+          ];
+        }
         if (n === "/projectmanage" || n === "/ProjectManage") {
           state.list = [
             {
@@ -117,7 +132,7 @@ export default {
             },
             {
               name: "添加任务",
-            }
+            },
           ];
         }
         if (n === "/templatelibrary" || n === "/TemplateLibrary") {
@@ -130,6 +145,20 @@ export default {
             },
           ];
         }
+        if (n === "/libraryadd" || n === "/LibraryAdd") {
+          state.list = [
+            {
+              name: "项目中心",
+            },
+            {
+              name: "模板库",
+            },
+            {
+              name: "查看",
+              href:"/libraryadd",
+            },
+          ];
+        }
         if (n === "/coursemanage" || n === "/CourseManage") {
           state.list = [
             {

src/components/NavLeft.vue

@@ -258,6 +258,12 @@ export default {
           selectedKeys: "sub1",
           pagename: "关卡",
         },
+        {
+          href: "/levelcheck",
+          openKeys: "sub1",
+          selectedKeys: "sub1",
+          pagename: "查看",
+        },
         {
           href: "/leveladddetail",
           openKeys: "sub1",
@@ -282,6 +288,12 @@ export default {
           selectedKeys: "sub2-2",
           pagename: "模板库",
         },
+        {
+          href: "/libraryadd",
+          openKeys: "sub2",
+          selectedKeys: "sub2-2",
+          pagename: "查看",
+        },
         {
           href: "/coursemanage",
           openKeys: "sub3",

src/store/index.js

@@ -7,6 +7,7 @@ export default createStore({
 			href: "/learningpath",
 			active: true,
 		},]
+
 	},
 	getters: {
 

src/views/courselibrary/CoursewareManage.vue

@@ -7,21 +7,21 @@
         <div class="filterItems">
           <div class="fi_input fitems">
             <a-input
-              v-model:value="value"
+              v-model:value="value1"
               style="width: 270px; height: 40px; border-radius: 8px"
               placeholder="请输入项目名称"
             />
           </div>
           <div class="fi_input fitems">
             <a-input
-              v-model:value="value"
+              v-model:value="value2"
               style="width: 270px; height: 40px; border-radius: 8px"
               placeholder="请输入名称"
             />
           </div>
           <div class="fi_input fitems">
             <a-input
-              v-model:value="value"
+              v-model:value="value3"
               style="width: 270px; height: 40px; border-radius: 8px"
               placeholder="请输入所属项目"
             />
@@ -49,7 +49,7 @@
           </div>
           <div class="select fitems">
             <a-range-picker
-              v-model:value="value2"
+              v-model:value="value4"
               separator="至"
               :placeholder="['        开始时间', '        结束时间']"
             />
@@ -76,8 +76,8 @@
       </div>
       <!-- 搜索框及按钮 -->
     </div>
-    <!-- 新建选择线上还是面授课弹窗 -->
-    <a-modal v-model:visible="of_hs" style="margin-top: 400px">
+    <!-- 选择线上还是面授课弹窗 -->
+    <a-modal v-model:visible="of_hs" :closable="false" :footer="null" style="margin-top: 400px">
       <div
         class="selectonlineface"
         :style="{ display: of_hs ? 'block' : 'none' }"
@@ -97,11 +97,12 @@
               </div>
               <div class="b_input">
                 <a-input
-                  v-model:value="value"
+                  v-model:value="value5"
                   maxlength="20"
                   style="width: 440px; height: 40px; border-radius: 8px"
                   placeholder="请输入课程名称"
                 />
+                <div class="inp_num"><span style="color:#C7CBD2">{{ value5.length }}/20</span></div>
               </div>
               <!-- <div class="showcount">{{ valueE.length }}/20</div> -->
             </div>
@@ -183,7 +184,7 @@
             </div>
             <div class="b_footer">
               <div class="btn btn5">
-                <div class="btnText">取消</div>
+                <div class="btnText" @click="of_exit">取消</div>
               </div>
               <div class="btn btn6">
                 <div class="btnText" @click="createft">确定</div>
@@ -193,7 +194,7 @@
         </div>
       </div>
     </a-modal>
-    <!-- 新建选择线上还是面授课弹窗 -->
+    <!-- 选择线上还是面授课弹窗 -->
     <!-- 确定新建面授课弹窗 -->
     <div class="faceteach" :style="{ display: ft_hs ? 'block' : 'none' }">
       <div class="ft_main">
@@ -203,7 +204,7 @@
             height: 40px;
             background: #388be1;
             border-radius: 8px;
-            font-size: 14px;
+            font-size: 14px;faceteach
             font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
             color: #ffffff;
@@ -253,10 +254,12 @@
                     <div class="item_inp">
                       <div class="i1_input">
                         <a-input
-                          v-model:value="value"
+                          v-model:value="value6"
+                          maxlength="90"
                           style="width: 440px; height: 40px; border-radius: 8px"
                           placeholder="请输入课程名称"
-                        />
+                        >
+                        </a-input>
                       </div>
                     </div>
                   </div>
@@ -334,7 +337,8 @@
                     <div class="item_inp">
                       <div class="i1_input">
                         <a-input
-                          v-model:value="value"
+                          v-model:value="value7"
+                          maxlength="50"
                           style="width: 440px; height: 40px; border-radius: 8px"
                           placeholder="请输入目标人群"
                         />
@@ -348,7 +352,8 @@
                     <div class="item_inp">
                       <div class="i1_input">
                         <a-input
-                          v-model:value="value"
+                          v-model:value="value8"
+                          maxlength="200"
                           style="width: 440px; height: 40px; border-radius: 8px"
                           placeholder="请输入课程价值"
                         />
@@ -416,7 +421,7 @@
                     <div class="item_inp">
                       <div class="i1_input">
                         <a-input
-                          v-model:value="value"
+                          v-model:value="value10"
                           style="width: 440px; height: 40px; border-radius: 8px"
                           placeholder="请输入"
                         />
@@ -431,7 +436,8 @@
                     <div class="item_inp">
                       <div class="i10_textarea">
                         <a-textarea
-                          v-model:value="value"
+                          v-model:value="value11"
+                          maxlength="150"
                           style="width: 440px; height: 100px; border-radius: 8px"
                           placeholder="请输入"
                         />
@@ -513,6 +519,27 @@
                   </div>
                 </div>
               </div>
+              <div class="m_footer">
+                <div class="fotnam">
+                  <span>课程大纲</span>
+                </div>
+                <div class="fotarea">
+                  <div class="fuwenben"></div>
+                  <a-textarea
+                    v-model:value="value25"
+                    style="width: 926px; height: 130px; border-radius: 8px; padding-top:20px;"
+                    placeholder=""
+                  />
+                </div>
+              </div>
+              <div class="m_btn">
+                <div class="btn btn5">
+                  <div class="btnText" @click="ft_exit">取消</div>
+                </div>
+                <div class="btn btn6">
+                  <div class="btnText" @click="ft_exit">确定</div>
+                </div>
+              </div>
             </div>
         </a-modal>
       </div>
@@ -540,7 +567,7 @@
       />
     </div>
     <!-- 表格 -->
-    <!-- 操作管理在线课程管理页面 -->
+    <!-- 操作在线课程管理页面 -->
     <a-modal
       v-model:visible="om_1"
       title="Title"
@@ -592,7 +619,7 @@
                           class="select"
                           ref="select"
                           placeholder="请选择状态"
-                          v-model:value="value"
+                          v-model:value="value12"
                           style="width: 200px"
                           @focus="focus"
                           @change="handleChange"
@@ -605,7 +632,7 @@
                       </div>
                       <div class="bm_input">
                         <a-input
-                          v-model:value="value"
+                          v-model:value="value13"
                           style="width: 200px; height: 40px; border-radius: 8px"
                           placeholder="姓名"
                         />
@@ -630,8 +657,8 @@
           </div>
         </div>
     </a-modal>
-    <!-- 操作管理在线课程管理页面 -->
-    <!-- 操作管理面授课程管理页面 -->
+    <!-- 操作在线课程管理页面 -->
+    <!-- 操作面授课程管理页面 -->
     <a-modal
       v-model:visible="ftm_1"
       title="Title"
@@ -682,7 +709,7 @@
                       class="select"
                       ref="select"
                       placeholder="请选择状态"
-                      v-model:value="value"
+                      v-model:value="value14"
                       style="width: 200px"
                       @focus="focus"
                       @change="handleChange"
@@ -695,7 +722,7 @@
                   </div>
                   <div class="bm_input">
                     <a-input
-                      v-model:value="value"
+                      v-model:value="value15"
                       style="width: 200px; height: 40px; border-radius: 8px"
                       placeholder="姓名"
                     />
@@ -726,8 +753,8 @@
           </div>
         </div>
     </a-modal>
-    <!-- 操作管理面授课程管理页面 -->
-    <!-- 操作管理面授课程管理查看详情页面 -->
+    <!-- 操作面授课程管理页面 -->
+    <!-- 面授课程管理查看详情页面 -->
     <a-modal
       v-model:visible="om_ckxq"
       title="Title"
@@ -772,7 +799,7 @@
           </div>
         </div>
     </a-modal>
-    <!-- 操作管理面授课程管理查看详情页面 -->
+    <!-- 面授课程管理查看详情页面 -->
     <!-- 操作授权页面 -->
     <a-modal
       v-model:visible="gpm_hs"
@@ -804,7 +831,7 @@
             <div class="gp_main">
               <div class="gpm_inputbtn">
                 <a-input
-                v-model:value="value"
+                v-model:value="value16"
                   style="
                     width: 270px;
                     height: 40px;
@@ -833,6 +860,7 @@
               </div>
               <div class="gpm_table">
                 <a-table
+                  :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                   :columns="columns5"
                   :data-source="tableData5"
                   :loading="tableDataTotal === -1 ? true : false"
@@ -899,7 +927,7 @@
             <div class="st_main">
               <div class="stm_inputbtn">
                 <a-input
-                  v-model:value="value"
+                  v-model:value="value17"
                   style="
                     width: 270px;
                     height: 40px;
@@ -909,7 +937,7 @@
                   placeholder="请输入创建人"
                 />
                 <a-input
-                  v-model:value="value"
+                  v-model:value="value18"
                   style="
                     width: 270px;
                     height: 40px;
@@ -996,7 +1024,7 @@
             </div>
             <div class="b_input">
               <a-input
-                v-model:value="value"
+                v-model:value="value19"
                 style="width: 440px; height: 40px; border-radius: 8px"
                 placeholder="请输入开课名称"
               />
@@ -1009,7 +1037,7 @@
             </div>
             <div class="b_input">
               <a-input
-                v-model:value="value"
+                v-model:value="value20"
                 style="width: 440px; height: 40px; border-radius: 8px"
                 placeholder="请输入详细地点"
               />
@@ -1023,7 +1051,7 @@
             <div class="select fitems">
               <a-range-picker
                 style="width: 440px; height: 40px; border-radius: 8px"
-                v-model:value="value2"
+                v-model:value="value21"
                 separator="至"
                 :placeholder="['        开始时间', '        结束时间']"
               />
@@ -1036,7 +1064,7 @@
             </div>
             <div class="b_input">
               <a-input
-                v-model:value="value"
+                v-model:value="value22"
                 style="width: 440px; height: 40px; border-radius: 8px"
                 placeholder="请输入教师"
               />
@@ -1112,7 +1140,7 @@
           </div>
           <div class="items_btn">
             <div class="cstm_btn btn5">
-              <div class="btnText">取消</div>
+              <div class="btnText" @click="cstm_exit">取消</div>
             </div>
             <div class="cstm_btn btn6">
               <div class="btnText" @click="cstm_exit">确定</div>
@@ -1122,7 +1150,7 @@
       </div>
     </a-modal>
     <!--新建开课页面 -->
-    <!--开课学员管理页面页面 -->
+    <!--开课学员管理页面 -->
     <a-modal
       v-model:visible="sm_hs"
       title="Title"
@@ -1170,7 +1198,7 @@
                 <div class="stmm_i5">
                   <div class="i5_left">
                     <a-input
-                      v-model:value="value"
+                      v-model:value="value23"
                       style="
                         width: 270px;
                         height: 40px;
@@ -1264,7 +1292,7 @@
           </div>
         </div>
     </a-modal>
-    <!--开课学员管理页面页面 -->
+    <!--开课学员管理页面 -->
     <!--二维码页面 -->
     <a-modal v-model:visible="QR_hs" :footer="null" :closable="closableQR" style="margin-top: 400px">
       <div
@@ -1281,7 +1309,7 @@
           <div class="qrm_body"><div class="QR_img"></div></div>
           <div class="qrm_btnbox">
             <div class="qrm_btn btn1">
-              <div class="btnText">取消</div>
+              <div class="btnText" @click="qr_exit">取消</div>
             </div>
             <div class="qrm_btn btn2">
               <div class="btnText" @click="qr_exit">确定</div>
@@ -1312,7 +1340,7 @@
               </div>
               <div class="rgmb_input">
                 <a-input
-                  v-model:value="value"
+                  v-model:value="value24"
                   maxlength="20"
                   style="width: 440px; height: 40px; border-radius: 8px"
                   placeholder=""
@@ -1322,7 +1350,7 @@
           </div>
           <div class="qrm_btnbox">
             <div class="qrm_btn btn1">
-              <div class="btnText">取消</div>
+              <div class="btnText" @click="rg_exit">取消</div>
             </div>
             <div class="qrm_btn btn2">
               <div class="btnText" @click="rg_exit">确定</div>
@@ -1367,7 +1395,7 @@
           </div>
           <div class="qrm_btnbox">
             <div class="qrm_btn btn1">
-              <div class="btnText">取消</div>
+              <div class="btnText" @click="graduate_exit">取消</div>
             </div>
             <div class="qrm_btn btn2">
               <div class="btnText" @click="graduate_exit">确定</div>
@@ -1392,12 +1420,13 @@
           </div>
           <div class="agreem_body">
             <div class="body_box">
-              <span>请确定是否同意此学员学习此课程</span>
+              <div>请确定是否同意此学员学习此课程</div>
+              
             </div>
           </div>
           <div class="qrm_btnbox">
             <div class="qrm_btn btn1">
-              <div class="btnText">取消</div>
+              <div class="btnText" @click="agreestudy_exit">取消</div>
             </div>
             <div class="qrm_btn btn2">
               <div class="btnText" @click="agreestudy_exit">确定</div>
@@ -1407,6 +1436,37 @@
       </div>
     </a-modal>
     <!--请确定是否同意此学员学习此课程弹窗 -->
+    <!--请确定是否拒绝此学员学习此课程弹窗 -->
+    <a-modal v-model:visible="rejectstudy_hs" :footer="null" :closable="closableQR" style="margin-top: 400px">
+      <div
+        class="agreestudy"
+        :style="{ display: rejectstudy_hs ? 'block' : 'none' }"
+      >
+        <div class="agree_header"></div>
+        <div class="agree_main">
+          <div class="agreem_header">
+            <div class="agreem_icon"></div>
+            <span>提示</span>
+            <div class="close_exit" @click="rejectstudy_exit"></div>
+          </div>
+          <div class="agreem_body">
+            <div class="body_box">
+              <div>请确定是否拒绝此学员学习此课程</div>
+              
+            </div>
+          </div>
+          <div class="qrm_btnbox">
+            <div class="qrm_btn btn1">
+              <div class="btnText" @click="rejectstudy_exit">取消</div>
+            </div>
+            <div class="qrm_btn btn2">
+              <div class="btnText" @click="rejectstudy_exit">确定</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-modal>
+    <!--请确定是否拒绝此学员学习此课程弹窗 -->
   </div>
 </template>
 <script>
@@ -1594,35 +1654,35 @@ const columns5 = [
     title: "姓名",
     dataIndex: "name",
     key: "name",
-    width: "18%",
-    align: "center",
+    width: "10%",
+    align: "left",
   },
   {
     title: "归属组织",
     dataIndex: "organization",
     key: "organization",
-    width: "18%",
+    width: "19%",
     align: "center",
   },
   {
     title: "岗位",
     dataIndex: "position",
     key: "position",
-    width: "18%",
+    width: "19%",
     align: "center",
   },
   {
     title: "拥有权限",
     dataIndex: "authority",
     key: "authority",
-    width: "18%",
+    width: "19%",
     align: "center",
   },
   {
     title: "操作",
     dataIndex: "opacation",
     key: "opacation",
-    width: "30%",
+    width: "34%",
     align: "center",
   },
 ];
@@ -2077,11 +2137,17 @@ export default defineComponent({
       sm_hs: false,
       QR_hs:false,
       closableQR: false,
-      rg_hs:true,
-      graduate_hs:true,
-      agreestudy_hs:true,
+      rg_hs:false,
+      graduate_hs:false,
+      agreestudy_hs:false,
+      rejectstudy_hs:false,
       value:"",
+      // value1:"",
+      // value2:"",
+      value5:"",
+      value6:"",
       valueE:"",
+      selectedRowKeys: [],
     });
     const fileList = ref([]);
     const loading = ref(false);
@@ -2402,6 +2468,7 @@ export default defineComponent({
       state.tableData = datas;
     };
     getTableDate();
+
     const getTableDate2 = () => {
       let data2 = state.tableData7;
       data2.map((value) => {
@@ -2413,10 +2480,17 @@ export default defineComponent({
                 {value.status === "待审核" ? (
                   <div class="nselect">
                     <div class="ops1">
-                      <div class="jc">通过</div>
+                      <div class="jc"
+                        onClick={() => {
+                          state.agreestudy_hs = true;
+                        }}
+                      >通过</div>
                     </div>
                     <div class="ops1">
-                      <div class="jc">拒绝</div>
+                      <div class="jc"
+                         onClick={() => {
+                          state.rejectstudy_hs = true;
+                        }}>拒绝</div>
                     </div>
                     <div class="ops2">
                       <div class="jc">删除</div>
@@ -2451,6 +2525,7 @@ export default defineComponent({
       state.tableData = data2;
     };
     getTableDate2();
+
     const getTableDate3 = () => {
       let datas = state.tableData6;
       datas.map((value) => {
@@ -2508,6 +2583,61 @@ export default defineComponent({
       state.tableData = datas;
     };
     getTableDate3();
+
+    const getTableDate4 = () => {
+      let data2 = state.tableData7;
+      data2.map((value) => {
+        {
+          //单层项目
+          value.overstatus = (
+            <div class="operation">
+              <div class="nSelect">
+                {value.status === "待审核" ? (
+                  <div class="nselect">
+                    <div class="ops2">
+                      <div class="jc">-</div>
+                    </div>
+                  </div>
+                ) : (
+                  <div></div>
+                )}
+                {value.status === "已通过" ? (
+                  <div class="nselect">
+                    <div class="ops1">
+                      <div class="jc"
+                        onClick={() => {
+                          state.rg_hs = true;
+                        }}
+                      >成功录入</div>
+                    </div>
+                    <div class="ops1">
+                      <div class="jc"
+                         onClick={() => {
+                          state.graduate_hs = true;
+                        }}>结业</div>
+                    </div>
+                  </div>
+                ) : (
+                  <div></div>
+                )}
+                {value.status === "已拒绝" ? (
+                  <div class="nselect">
+                    <div class="ops2">
+                      <div class="jc">删除</div>
+                    </div>
+                  </div>
+                ) : (
+                  <div></div>
+                )}
+              </div>
+            </div>
+          );
+        }
+      });
+      state.tableData = data2;
+    };
+    getTableDate4();
+
     const onftvalue = ref();
     const options1 = ref([
       {
@@ -2619,6 +2749,13 @@ export default defineComponent({
     const agreestudy_exit = () => {
       state.agreestudy_hs = false;
     }
+    const rejectstudy_exit = () => {
+      state.rejectstudy_hs = false;
+    }
+    const onSelectChange = selectedRowKeys => {
+      console.log('selectedRowKeys changed: ', selectedRowKeys);
+      state.selectedRowKeys = selectedRowKeys;
+    };
     return {
       onftvalue,
       current,
@@ -2659,6 +2796,8 @@ export default defineComponent({
       rg_exit,
       graduate_exit,
       agreestudy_exit,
+      rejectstudy_exit,
+      onSelectChange,
     };
   },
 });
@@ -2672,6 +2811,7 @@ export default defineComponent({
 //     color: #4EA6FF !important;
 // }
 // }
+
 .courseManage {
   width: 100%;
   height: 100%;
@@ -2825,6 +2965,7 @@ export default defineComponent({
     }
   }
 }
+//faceteach
 .modalStyle {
   .ant-modal{
     .modalHeader {
@@ -3004,9 +3145,66 @@ export default defineComponent({
           }
         }
       }
+      .m_footer{
+        display:flex;
+        margin:20px 0;
+        .fotnam{
+          width:100px;
+          display: flex;
+          justify-content: end;
+          padding-right:15px;
+        }
+        .fotarea{
+          position: relative;
+          .fuwenben{
+            width: 90%;
+            height:20px;
+            background-color: rgb(95, 95, 95);
+            position: absolute;
+            left:50%;
+            transform: translate(-50%,0);
+            top: 3px;
+            z-index: 9999;
+          }
+        }
+      }
+      .m_btn {
+          width: 100%;
+          margin-top: 25px;
+          margin-bottom: 20px;
+          display: flex;
+          justify-content: center;
+          align-content: center;
+          .btn {
+            width: 100px;
+            height: 40px;
+            background: rgba(64, 158, 255, 0);
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 14px;
+            flex-shrink: 0;
+            cursor: pointer;
+            .btnText {
+              font-size: 14px;
+              font-weight: 400;
+              line-height: 40px;
+            }
+          }
+          .btn5 {
+            border: 1px solid rgba(64, 158, 255, 1);
+            color: #4ea6ff;
+          }
+          .btn6 {
+            background-color: #4ea6ff;
+            color: #ffffff;
+          }
+        }
     }
   }
 }
+
 .selectonlineface {
     z-index: 999;
     width: 679px;
@@ -3019,7 +3217,7 @@ export default defineComponent({
     transform: translate(-50%, -50%);
     .of_header {
       position: absolute;
-      width: calc(100%);
+      width: 100%;
       height: 40px;
       background: linear-gradient(
         rgba(78, 166, 255, 0.2) 0%,
@@ -3027,7 +3225,7 @@ export default defineComponent({
       );
     }
     .of_main {
-      width: calc(100%);
+      width: 100%;
       position: relative;
       .ofm_header {
         display: flex;
@@ -3074,6 +3272,12 @@ export default defineComponent({
           }
           .b_input{
             flex:1;
+            position: relative;
+            .inp_num{
+              position: absolute;
+              right:10px;
+              top:10px;
+            }
           }
           .bc_box {
             display: flex;
@@ -3141,13 +3345,10 @@ export default defineComponent({
       }
     }
 }
-.ant-modal{
-  .ant-modal-content{
-    width:679px !important;
-    .ant-modal-body{
-      .createschooltime {
+//createschooltime
+.createschooltime {
     z-index: 999;
-          width: 100%;
+    width: 679px;
     background: #ffffff;
     box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
     position: absolute;
@@ -3156,7 +3357,7 @@ export default defineComponent({
     transform: translate(-50%, -50%);
     .cst_header {
       position: absolute;
-            width: calc(100%);
+      width: 100%;
       height: 40px;
       background: linear-gradient(
         rgba(78, 166, 255, 0.2) 0%,
@@ -3164,7 +3365,7 @@ export default defineComponent({
       );
     }
     .cst_main {
-            width: calc(100%);
+      width: 100%;
       position: relative;
       .cstm_header {
         display: flex;
@@ -3257,17 +3458,16 @@ export default defineComponent({
         }
       }
     }
-      }
-    }
-  }
 }
+
+//QR
 .ant-modal{
   .ant-modal-content{
-  width:479px !important;
+  // width:479px !important;
   .ant-modal-body{
     .QR{
         z-index: 999;
-        width: 100%;
+        width:520px;
         background: #ffffff;
         box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
         position: absolute;
@@ -3353,13 +3553,15 @@ export default defineComponent({
   }
   }
 }
+
+//recordgrade
 .ant-modal{
   .ant-modal-content{
-  width:679px !important;
+  // width:679px !important;
   .ant-modal-body{
     .recordgrade{
         z-index: 999;
-        width: 100%;
+        width:679px;
         background: #ffffff;
         box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
         position: absolute;
@@ -3453,13 +3655,14 @@ export default defineComponent({
   }
   }
 }
+//graduate
 .ant-modal{
   .ant-modal-content{
-    width:679px !important;
+    // width:679px !important;
   .ant-modal-body{
     .graduate{
         z-index: 999;
-        width: 100%;
+        width:679px;
         background: #ffffff;
         box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
         position: absolute;
@@ -3558,13 +3761,14 @@ export default defineComponent({
   }
   }
 }
+//agreestudy
 .ant-modal{
   .ant-modal-content{
-    width:679px !important;
+    // width:679px !important;
   .ant-modal-body{
     .agreestudy{
         z-index: 999;
-        width: 100%;
+        width:679px;
         background: #ffffff;
         box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
         position: absolute;
@@ -3606,12 +3810,13 @@ export default defineComponent({
               background-size: 100% 100%;
             }
           }
-          .agree_body{
-            width: 100%;
-            .brderbox{
+          .agreem_body{
+            .body_box{
               display:flex;
-              align-items:center;
               justify-content: center;
+              align-items:center;
+              width:100%;
+              margin:20px auto;
             }
           }
           .qrm_btnbox{
@@ -3649,10 +3854,12 @@ export default defineComponent({
   }
   }
 }
+
+//onlinemanage faceteachmanage ftsturecord givepower schooltime studentsmanage
 .modalStyle { 
   .ant-modal{
   .ant-modal-content{
-  width:1358px !important;
+  // width:1358px !important;
     .ant-modal-body{
       .modalHeader {
         display: flex;
@@ -4170,6 +4377,8 @@ export default defineComponent({
                   .ops1,
                   .ops2 {
                     margin-right: 10px;
+                    cursor: pointer;
+                  }
                 }
               }
             }
@@ -4177,8 +4386,6 @@ export default defineComponent({
         }
       }
     }
-
-}
   }
 }
 }

src/views/courselibrary/conponents/OnlineManage.vue

@@ -1,279 +0,0 @@
-<template>
-    <div class="onlinemanage">
-        <div class="om_header">
-        </div>
-        <div class="main">
-            <div class="m_header">
-                <div class="pc_icon"></div>
-                <span>在线课程管理</span>
-                <div class="pc_exit">x</div>
-            </div>
-            <div class="m_body">
-                <div class="b_title">课程：BMOT2021年职级晋升-安全管理（高级）</div>
-                <div class="b_sub">
-                    <div class="bs_type">类型：</div>
-                    <div class="bs_right">录播课</div>
-                    <div class="bs_left">内容分类：</div>
-                    <div class="bs_right">领导力</div>
-                    <div class="bs_left">状态：</div>
-                    <div class="bs_right">已审核</div>
-                </div>
-                <div class="b_menu">
-                    <a-menu v-model:selectedKeys="current" mode="horizontal">
-                        <a-menu-item key="mail">
-                            报名管理
-                        </a-menu-item>
-                        <a-menu-item key="sub2">
-                            学习记录
-                        </a-menu-item>
-                        <a-menu-item key="sub3">
-                            资源完成情况
-                        </a-menu-item>
-                    </a-menu>
-                </div>
-                <div class="b_menunav">
-                    <div class="bm_select">
-                        <a-select
-                            class="select"
-                            ref="select"
-                            placeholder="请选择状态"
-                            v-model:value="value1"
-                            style="width: 200px;"
-                            @focus="focus"
-                            @change="handleChange"
-                            >
-                            <a-select-option value="status">状态</a-select-option>
-                            <a-select-option value="passed">已通过</a-select-option>
-                            <a-select-option value="weishenhe">未审核</a-select-option>
-                            <a-select-option value="reject">管理员拒绝</a-select-option>
-                        </a-select>
-                    </div>
-                    <div class="bm_input">
-                        <a-input v-model:value="value" style="width: 200px ;height:40px;border-radius: 8px;" placeholder="姓名" />
-                    </div>
-                    <div class="bm_btn">
-                        <div class="btn btn1">
-                            <div class="search"></div>
-                            <div class="btnText">搜索</div>
-                        </div>
-                    </div>
-                </div>
-                <div class="bm_table">
-                    <a-table
-                        :columns="columns"
-                        :data-source="tableData"
-                        :loading="tableDataTotal === -1 ? true : false"
-                        :pagination="false"
-                    />
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import { reactive, toRefs, ref } from "vue";
-const columns = [
-    {
-        title: "姓名",
-        dataIndex: "projectName",
-        key: "projectName",
-        width: '16%',
-        align: "center",
-    },
-    {
-        title: "工号",
-        dataIndex: "numb",
-        key: "numb",
-        width: '16%',
-        align: "center",
-    },
-    {
-        title: "报名时间",
-        dataIndex: "applytime",
-        key: "applytime",
-        width: '16%',
-        align: "center",
-    },
-    {
-        title: "签到时间",
-        dataIndex: "signtime",
-        key: "signtime",
-        width: '16%',
-        align: "center",
-    },
-    {
-        title: "状态",
-        dataIndex: "status",
-        key: "status",
-        width: '16%',
-        align: "center",
-    },
-    {
-        title: "操作",
-        dataIndex: "opacation",
-        key: "opacation",
-        width: '16%',
-        align: "center",
-    },
-];
-export default {
-name: "onlineManage",
-setup() {
-    const current = ref(['mail']);
-    const state = reactive({
-        tableData: [
-            {
-                key: 1,
-                projectName:"刘莉",
-                numb: "10064511",
-                applytime:"2022-07-20 14:00:00",
-                signtime: "-",
-                status: "已通过",
-            },
-            {
-                key: 2,
-                projectName:"",
-                numb: "",
-                applytime:"2022-07-20 14:00:00",
-                signtime: "2022-09-26 13:30:30",
-                status:"已通过",
-            },
-        ],
-    });
-
-    
-    return {
-        columns,
-        current,
-        ...toRefs(state),
-    };
-  },
-};
-</script>
-<style lang="scss" scoped>
-.onlinemanage{
-    width: 1358px;
-    min-width: 1000px;
-    height: 537px;
-    background: #FFFFFF;
-    box-shadow: 0px 1px 35px 0px rgba(118,136,166,0.21);
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%,-50%);
-    font-size: 14px;
-    font-family: PingFangSC-Regular;
-    color: #000000;
-    overflow: auto;
-    .om_header{
-        position: absolute;
-        width:calc(100%);
-        height: 40px;
-        background: linear-gradient( rgba(78,166,255,0.2) 0%, rgba(78,166,255,0) 100%);
-    }
-    .main{
-        width:calc(100%);
-        position: relative;
-        .m_header{
-            display: flex;
-            align-items: center;
-            padding-top: 20px;
-            padding-left: 26px;
-            font-size: 16px;
-            .pc_icon{
-                width: 16px;
-                height: 16px;
-                margin-right: 10px;
-                background-image: url(@/assets/images/coursewareManage/pc.png);
-            }
-            .pc_exit{
-                position: absolute;
-                right:42px;
-                cursor: pointer;
-            }
-        }
-        .m_body{
-            width:calc(100% - 50px);
-            padding-left: 50px;
-            padding-top: 17px;
-            .b_title{
-                color: #4F5156;
-                font-weight: 500;
-                margin-bottom: 19px;
-            }
-            .b_sub{
-                display: flex;
-                margin-bottom: 10px;
-                .bs_type{
-                    color: #999BA3;
-                }
-                .bs_left{
-                    color: #999BA3;
-                    margin-left: 35px;
-                }
-                .bs_right{
-                    color: #4F5156;
-                }
-            }
-            .b_menu{
-                width:calc(100%);
-            }
-            .b_menunav{
-                display: flex;
-                margin-top: 20px;
-                margin-bottom: 20px;
-                .bm_select{
-                    margin-right: 20px;
-                }
-                .bm_input{
-                    margin-right: 20px;
-                }
-                .bm_btn {
-                display: flex;
-                // flex-wrap: wrap;
-                .btn {
-                    padding: 0px 26px 0px 26px;
-                    height: 40px;
-                    background: rgba(64, 158, 255, 0);
-                    border-radius: 8px;
-                    border: 1px solid rgba(64, 158, 255, 1);
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    margin-right: 14px;
-                    flex-shrink: 0;
-                    .search {
-                    background-size: 100%;
-                    }
-                    .btnText {
-                    font-size: 14px;
-                    font-weight: 400;
-                    color: rgba(64, 158, 255, 1);
-                    line-height: 36px;
-                    margin-left: 5px;
-                    }
-                }
-                .btn1 {
-                    .search {
-                    width: 15px;
-                    height: 17px;
-                    background-image: url("@/assets/images/coursewareManage/search1.png");
-                    }
-                }
-                .btn1:hover {
-                    background: rgba(64, 158, 255, 1);
-                    .search {
-                    background-image: url("@/assets/images/coursewareManage/search0.png");
-                    }
-                    .btnText {
-                    color: #ffffff;
-                    }
-                }
-            }
-            }
-        }
-    }
-}
-
-</style>

src/views/learningpath/LearningPath.vue

@@ -92,9 +92,9 @@
 
     <a-modal
       :closable="sh"
+      centered="true"
       v-model:visible="out"
       :footer="null"
-      style="margin-top: 400px"
     >
       <div class="out">
         <div class="top">
@@ -572,7 +572,17 @@ export default {
 };
 </script>
 <style lang="scss">
-.out {
+.ant-modal {
+  width: 680px !important;
+  height: 528px !important;
+  .ant-modal-content {
+    width: 680px !important;
+    height: 528px !important;
+    .ant-modal-body {
+      width: 680px !important;
+      height: 528px !important;
+      padding: 0 !important;
+      .out {
         display: block;
         position: absolute;
         top: 90px;
@@ -739,6 +749,9 @@ export default {
             }
           }
         }
+      }
+    }
+  }
 }
 .clearfix:before,
 .clearfix:after {

src/views/learningpath/LevelAdd.vue

@@ -667,16 +667,19 @@ export default {
           width: 110,
           align: "center",
           scopedSlots: { customRender: "action" }, //引入的插槽
-          customRender: () => {
+          customRender: (text) => {
             return (
               <div class="opa">
                 <div class="opacation">
+                  <routerLink to="/levelcheck">
                     <span style="color:#4EA6FF;margin-right:25px;cursor:pointer">
                       查看
                     </span>
+                  </routerLink>
                   <span
                     onClick={() => {
                       state.visible = true;
+                      console.log(text.record.cur);
                     }}
                     style="color:#4EA6FF;margin-right:25px;cursor:pointer"
                   >
@@ -719,8 +722,11 @@ export default {
   clear: both;
 }
 .ant-modal {
+  width: 549px !important;
+  height: 245px !important;
   .ant-modal-content {
     width: 549px !important;
+    height: 245px !important;
     .ant-modal-body {
       padding: 0 !important;
       width: 549px !important;
@@ -1317,6 +1323,20 @@ export default {
             cursor: pointer;
             margin-right: 20px;
           }
+          .select {
+            .ant-select {
+              //
+              // border: 0 !important;
+              border-radius: 11px;
+              .ant-select-selector {
+                border: 1px solid #4ea6ff !important;
+                .ant-select-selection-placeholder {
+                  padding-left: 15px;
+                  color: #4ea6ff;
+                }
+              }
+            }
+          }
         }
         .talk {
           margin-top: 24px;

src/views/learningpath/LevelAddDetail.vue

@@ -5,7 +5,7 @@
         <div class="tit" style="margin-left: 18px">关卡</div>
         <div class="btn btn3" style="margin-left: 19px">
           <div class="search"></div>
-          <div class="btnText">添加关卡</div>
+          <div class="btnText" @click="showModal">添加关卡</div>
         </div>
         <div class="maincon" style="background-color: #fff">
           <div class="item" v-for="item in level" :key="item.id">
@@ -24,6 +24,52 @@
         </div>
       </div>
     </div>
+    <a-modal
+      v-model:visible="modal"
+      centered="true"
+      :footer="null"
+      :closable="clos"
+    >
+      <div class="header">
+        <div class="headmain">
+          <div class="add">添加关卡</div>
+          <div class="img" style="cursor: pointer" @click="closeModal"></div>
+        </div>
+      </div>
+      <div class="main">
+        <div class="inma">
+          <div class="name">
+            <div class="fir">关卡名称：</div>
+            <div class="input">
+              <a-input
+                style="width: 100%"
+                v-model:value="value1"
+                :maxlength="20"
+                placeholder="请输入关卡名称"
+              />
+            </div>
+            <div class="co">{{ value1.length }}/20</div>
+          </div>
+          <div class="name">
+            <div class="fir">关卡说明：</div>
+            <div class="input">
+              <a-textarea
+                style="width: 100%"
+                v-model:value="value2"
+                :maxlength="100"
+                placeholder="请输入关卡说明"
+                :rows="5"
+              />
+            </div>
+            <div class="co1">{{ value2.length }}/100</div>
+          </div>
+          <div class="btn">
+            <button class="btn1">取消</button>
+            <button class="btn2">确定</button>
+          </div>
+        </div>
+      </div>
+    </a-modal>
     <div class="right">
       <div class="addhead">
         <div class="filt">
@@ -587,6 +633,10 @@ export default {
       tableDataTotal: 100,
       pageSize: 10,
       visible: false,
+      modal: false,
+      clos: false,
+      value1: "",
+      value2: "",
       selectedRowKeys: [],
     });
     const selectProjectName = (value, index) => {
@@ -596,7 +646,13 @@ export default {
       console.log("value", value, index);
     };
     const showDrawer = () => {
-      state.visible = !state.visible;
+      state.visible = true;
+    };
+    const showModal = () => {
+      state.modal = true;
+    };
+    const closeModal = () => {
+      state.modal = false;
     };
     const afterVisibleChange = (bool) => {
       console.log("visible", bool);
@@ -746,6 +802,8 @@ export default {
       selectProjectName2,
       tableDataFunc,
       showDrawer,
+      showModal,
+      closeModal,
       afterVisibleChange,
       drawercolumns,
       onSelectChange,
@@ -761,7 +819,141 @@ export default {
   display: block;
   clear: both;
 }
+.ant-modal {
+  width: 624px !important;
+  height: 388px !important;
+  .ant-modal-content {
+    width: 624px !important;
+    height: 388px !important;
+    border-radius: 4px !important;
+    .ant-modal-body {
+      // background-color: blue;
+      width: 100% !important;
+      height: 100% !important;
+      padding: 0 !important;
 
+      .header {
+        width: 624px;
+        height: 68px;
+        background: linear-gradient(
+          180deg,
+          rgba(78, 166, 255, 0.2) 0%,
+          rgba(78, 166, 255, 0) 100%
+        );
+        display: flex;
+        justify-content: center;
+        .headmain {
+          width: 90%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .add {
+            font-size: 16px;
+            font-weight: 600;
+            color: #333333;
+          }
+          .img {
+            width: 20px;
+            height: 20px;
+            background-image: url(../../assets/images/basicinfo/close22.png);
+            background-size: 100% 100%;
+          }
+        }
+      }
+      .main {
+        width: 100%;
+        height: calc(100% - 68px);
+        // background-color: #bfa;
+        display: flex;
+        justify-content: center;
+        .inma {
+          width: 75%;
+          height: 100%;
+          // background-color: lightblue;
+          .name {
+            display: flex;
+            position: relative;
+            margin-top: 30px;
+            .fir {
+              font-size: 14px;
+              font-weight: 400;
+              color: rgba(0, 0, 0, 0.85);
+              white-space: nowrap;
+              margin-top: 3px;
+            }
+            .input {
+              width: 100%;
+              .ant-input {
+                border-radius: 8px;
+                border: 1px solid #c7cbd2;
+                &::placeholder {
+                  font-size: 12px;
+                  position: absolute;
+                  top: 5px;
+                }
+              }
+              .ant-textarea {
+                border-radius: 8px;
+                border: 1px solid #c7cbd2;
+                &::placeholder {
+                  font-size: 12px;
+                  position: absolute;
+                  top: 5px;
+                }
+              }
+            }
+            .co {
+              position: absolute;
+              right: 10px;
+              top: 4px;
+
+              font-size: 14px;
+              font-weight: 400;
+              color: #c7cbd2;
+            }
+            .co1 {
+              position: absolute;
+              right: 10px;
+              bottom: 8px;
+
+              font-size: 14px;
+              font-weight: 400;
+              color: #c7cbd2;
+            }
+          }
+          .btn {
+            margin-top: 40px;
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            .btn1 {
+              width: 100px;
+              height: 40px;
+              border-radius: 4px;
+              border: 1px solid #387df7;
+              font-size: 14px;
+              color: #387df7;
+              cursor: pointer;
+              background: #ffffff;
+              margin-right: 20px;
+            }
+            .btn2 {
+              width: 100px;
+              height: 40px;
+              border-radius: 4px;
+              font-size: 14px;
+              color: #fff;
+              cursor: pointer;
+              border: 0;
+              background: #388be1;
+            }
+          }
+        }
+      }
+    }
+  }
+}
 .drawerStyle {
   .ant-drawer-content-wrapper {
     // max-width: 1000px;

src/views/learningpath/LevelCheck.vue

@@ -0,0 +1,356 @@
+<template>
+  <div class="checkwrapper">
+    <div class="header">
+      <div class="left">
+        <div class="img"></div>
+        <div class="msg">
+          <div class="name">哈哈</div>
+          <div class="cur">产研部门-产品经理</div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="lne"></div>
+        <div class="jin">
+          <div class="jint">进度排行</div>
+          <div class="jinc">
+            <span style="color: #ff90ae">2&nbsp;</span>/&nbsp;10
+          </div>
+        </div>
+        <div class="lne"></div>
+        <div class="jin">
+          <div class="jint">完成必修</div>
+          <div class="jinc">
+            <span style="color: #a497ff">3&nbsp;</span>/&nbsp;5
+          </div>
+        </div>
+        <div class="lne"></div>
+        <div class="jin">
+          <div class="jint">已获取证书</div>
+          <div class="jinc">
+            <span style="color: #ffb64e">1</span>
+          </div>
+        </div>
+        <div class="lne"></div>
+        <router-link to="/leveladd">
+          <div class="return">
+            <div class="im"></div>
+            <div class="fan">返回</div>
+          </div>
+        </router-link>
+      </div>
+    </div>
+    <div class="pad"></div>
+    <div class="bottom">
+      <div class="padd"></div>
+      <div class="bomcen">
+        <div class="centop">
+          <div class="d"></div>
+          <div class="topinf">产品经理进阶路径</div>
+          <div class="infor">
+            <div class="sy">说明 &nbsp;></div>
+          </div>
+        </div>
+        <div class="item">
+          <div v-for="item in gq" :key="item.id">
+            <div class="minc">
+              <div class="itmtit">关卡{{ item.id }}名称：{{ item.title }}</div>
+            </div>
+            <div :class="item.haschild ? 'show' : 'i'">
+              <div v-for="it in item.child" :key="it.id" class="ite">
+                <div class="title">{{ it.title }}</div>
+                <div class="btn">
+                  <button
+                    :class="it.done ? 'btnoo' : 'btno'"
+                    style="z-index: 999"
+                  >
+                    已完成
+                  </button>
+                  <button :class="it.done ? 'btntt' : 'btnt'">未完成</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="padd"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { toRefs, reactive } from "vue";
+export default {
+  name: "LevelCheck",
+  setup() {
+    const state = reactive({
+      gq: [
+        {
+          id: 1,
+          title: "初级产品经理",
+          haschild: true,
+          child: [
+            {
+              id: 1 - 1,
+              done: true,
+              title: "「课程」如何成为一个产品经理",
+            },
+            {
+              id: 1 - 2,
+              done: false,
+              title: "「作业」产品作业",
+            },
+            {
+              id: 1 - 3,
+              done: false,
+              title: "「考试」产品考试",
+            },
+          ],
+        },
+        {
+          id: 2,
+          title: "中级产品经理",
+        },
+      ],
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+
+<style lang="scss" >
+.clearfix:before,
+.clearfix:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.checkwrapper {
+  width: 100%;
+  height: 100%;
+  .header {
+    display: flex;
+    width: 100%;
+    // background-color: #bfa;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding: 20px;
+    .left {
+      display: flex;
+      height: 100%;
+      align-items: center;
+      .img {
+        width: 90px;
+        height: 90px;
+        background-color: red;
+        border-radius: 50%;
+        border: 8px solid #e7f2ff;
+        background-image: url(../../assets/px.jpg);
+        background-size: 100% 100%;
+      }
+      .msg {
+        height: 100%;
+        margin-left: 27px;
+        .name {
+          font-size: 16px;
+          font-weight: 500;
+          color: #363636;
+        }
+        .cur {
+          margin-top: 20px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #878b92;
+        }
+      }
+    }
+    .right {
+      display: flex;
+      height: 100%;
+      align-items: center;
+      .lne {
+        width: 1px;
+        height: 82px;
+        background: #e8effa;
+      }
+      .jin {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-left: 50px;
+        margin-right: 50px;
+
+        .jint {
+          font-size: 16px;
+          font-weight: 400;
+          color: #333330;
+        }
+        .jinc {
+          font-size: 18px;
+          font-weight: 600;
+          color: #959595;
+        }
+      }
+      .return {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        margin-left: 30px;
+        margin-right: 40px;
+        .im {
+          width: 42px;
+          height: 42px;
+          background-size: 100% 100%;
+          background-image: url(../../assets/images/leveladd/back.png);
+        }
+        .fan {
+          font-size: 14px;
+          font-weight: 400;
+          color: #4ea6ff;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+  .pad {
+    // #EFF4FC
+    width: 100%;
+    height: 20px;
+    // background-color: #edf0f5;
+    background-image: linear-gradient(90deg, #edf0f5, #eff4fc);
+  }
+  .bottom {
+    width: 100%;
+    height: 100%;
+    // background-color: #bfa;
+    display: flex;
+    .padd {
+      width: 40px;
+      height: 100%;
+    }
+    .bomcen {
+      // 内容区
+      width: 100%;
+      height: 100%;
+      // background-color: lavenderblush;
+      .centop {
+        margin-top: 25px;
+        display: flex;
+        align-items: center;
+        .d {
+          width: 4px;
+          height: 13px;
+          background: #4ea6ff;
+          border-radius: 2px;
+        }
+        .topinf {
+          font-size: 16px;
+          font-weight: 500;
+          color: #333333;
+          margin-left: 16px;
+        }
+        .infor {
+          display: flex;
+          margin-top: 4px;
+          margin-left: 17px;
+          cursor: pointer;
+          .sy {
+            font-size: 14px;
+            font-weight: 400;
+            color: #4ea6ff;
+            text-align: center;
+          }
+        }
+      }
+      .item {
+        width: 100%;
+        margin-top: 30px;
+        .minc {
+          width: 100%;
+          height: 50px;
+          background: #eff4fc;
+          display: flex;
+          align-items: center;
+          .itmtit {
+            font-size: 14px;
+            font-weight: 400;
+            color: #409eff;
+            margin-left: 20px;
+          }
+        }
+        .show {
+          .ite {
+            width: 100%;
+            height: 49px;
+            border: 1px solid #f0f4fe;
+            border-top: 0;
+            display: flex;
+            align-items: center;
+            position: relative;
+            .title {
+              font-size: 14px;
+              font-weight: 400;
+              color: #6f6f6f;
+              margin-left: 22px;
+            }
+            .btn {
+              position: absolute;
+              // background-color: red;
+              left: 550px;
+
+              .btno {
+                width: 73px;
+                height: 23px;
+                border-radius: 4px;
+                top: -12px;
+                border: 0;
+                color: #ffffff;
+                background: #5dc988;
+                position: absolute;
+                z-index: 999;
+              }
+              .btnoo {
+                width: 73px;
+                height: 23px;
+                border-radius: 4px;
+                top: -12px;
+                border: 0;
+                color: #ffffff;
+                background: #5dc988;
+                position: absolute;
+                z-index: 998;
+              }
+              .btnt {
+                width: 73px;
+                height: 23px;
+                border-radius: 4px;
+                top: -12px;
+                border: 0;
+                position: absolute;
+                background: #f2f6fc;
+                color: #5dc988;
+                z-index: 999;
+              }
+              .btntt {
+                width: 73px;
+                height: 23px;
+                border-radius: 4px;
+                top: -12px;
+                border: 0;
+                position: absolute;
+                background: #f2f6fc;
+                color: #5dc988;
+                z-index: 998;
+              }
+            }
+          }
+        }
+        .i {
+          display: none;
+        }
+      }
+    }
+  }
+}
+</style>

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>

src/views/projectcenter/LibraryAdd.vue

@@ -0,0 +1,576 @@
+<template>
+    <div class="addwrapper">
+        <div class="addhead">
+        <div class="leftimg">
+          <img class="img" src="../../assets/images/projectadd/picture.png" />
+        </div>
+        <div class="imgfor">
+          <div class="forz">管理者进阶-腾飞班1备份</div>
+          <div class="fort">
+            <div class="fort1">项目经理：黄华、刘俊备份</div>
+            <div class="fort2">起止时间：2022-09-21 00:00 至 2022-10-21 00:00</div>
+          </div>
+        </div>
+        <div class="right">
+          <img class="img1" src="../../assets/images/leveladd/ma.png" />
+          <div class="line"></div>
+          <img class="img2" src="../../assets/images/projectadd/ending.png" />
+          <div class="pub">结束项目</div>
+          <div class="line"></div>
+          <img
+            style="margin-right: 15px"
+            class="img2"
+            src="../../assets/images/leveladd/more.png"
+          />
+          <div class="more">
+            <span style="color: #7096e3; cursor: pointer">更多</span>
+            <div class="moreArrow"></div>
+            <div class="moreItems">
+              <div class="sammo">撤回</div>
+              <div class="sammo">复制</div>
+            </div>
+          </div>
+          <div class="line"></div>
+          <router-link to="/templatelibrary"
+            ><div style="display: flex">
+              <img class="img2" src="../../assets/images/leveladd/back.png" />
+              <div class="return">返回</div>
+            </div></router-link
+          >
+        </div>
+        </div>
+        <div class="split"></div>
+        <div class="bom clearfix">
+        <a-tabs
+            class="tab"
+            v-model:activeKey="activeKey"
+            size="large"
+            :tabBarStyle="{ marginLeft: '10px' }"
+        >
+            <a-tab-pane key="1" tab="任务">
+                1
+            </a-tab-pane>
+            <a-tab-pane key="2" tab="公告" force-render>
+                <div class="notice">
+                    <div class="ntc_tit"><span>公告</span></div>
+                    <hr color="#E8E8E8"/>
+                    <div class="ntc_body">
+                        <div class="ntc_switch">
+                        <a-switch v-model:checked="checked" @click="changeopclo"/>
+                        <div class="opclo"
+                        :style="{ display: hideshow ? 'block' : 'none' }">
+                            <span>关闭</span>
+                        </div>
+                        <div class="opclo"
+                        :style="{ display: hideshow ? 'none' : 'block'  }">
+                            <span>开启</span>
+                        </div>
+                    </div>
+                    <div class="ntc_content"
+                    :style="{ display: hideshow ? 'block' : 'none' }">
+                        <div class="ntcc_tit">公告内容</div>
+                        <div class="textarea">
+                            <a-textarea v-model:value="value2" placeholder="公告信息最多输入150个字。" :maxlength="textnum" allow-clear />
+                            <div class="btnarea">
+                                <div>&nbsp;</div>
+                                <div class="area_btn">
+                                <div class="pub"></div>
+                                    <div class="btnText">发布</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    </div>
+                </div>
+            </a-tab-pane>
+            <a-tab-pane key="3" tab="项目积分">
+                <div class="projectscore">
+                    <div class="pjc_tit">
+                        <span>获取规则</span>
+                    </div>
+                    <hr color="#E8E8E8"/>
+                    <div class="pjc_body">
+                        <div class="pjcb_header">
+                            <span>规则</span>
+                            <div class="edit_btn">
+                                <div class="edit"></div>
+                                <div class="btnText">编辑</div>
+                            </div>
+                        </div>
+                        <div class="pjcb_content">
+                            <div class="content content1"><span>当前设计下，学员可以获得 10 积分</span></div>
+                            <div class="content content2"><span>完成【必修/选修】获得 5 积分</span></div>
+                            <div class="content content3"><span>优秀学员可获得 5 积分</span></div>
+                        </div>
+                    </div>
+                </div>
+            </a-tab-pane>
+            <a-tab-pane key="4" tab="设置">
+                <div class="setting">
+                    <div class="set_tit">
+                        <span>基本信息</span>
+                    </div>
+                    <hr color="#E8E8E8"/>
+                    <div class="set_body">
+                        <div class="set_content">
+                            <div class="setc_name"><span>项目名称：</span></div>
+                            <div class="setc_main">
+                                <span style="color:#999999;">管理者进阶 - 管理者腾飞班</span>
+                            </div>
+                        </div>
+                        <div class="set_content">
+                            <div class="setc_name"><span>封面图：</span></div>
+                            <div class="setc_main">
+                                <img src="@/assets/images/projectadd/picture.png" alt="">
+                            </div>
+                        </div>
+                        <div class="set_content">
+                            <div class="setc_name"><span>项目时间：</span></div>
+                            <div class="setc_main">
+                                <span style="color:#999999;">2022-7-16 12:30 ～ 2022-7-30 12:30</span>
+                            </div>
+                        </div>
+                        <div class="set_content">
+                            <div class="setc_name"><span>项目经理：</span></div>
+                            <div class="setc_main">
+                                <span style="color:#999999;">张雪</span>
+                            </div>
+                        </div>
+                        <div class="set_content">
+                            <div class="setc_name"><span>资源归属：</span></div>
+                            <div class="setc_main">
+                                <span style="color:#999999;">-</span>
+                            </div>
+                        </div>
+                        <div class="set_content">
+                            <div class="setc_name"><span>项目说明：</span></div>
+                            <div class="setc_main">
+                                <span style="color:#999999;">-</span>
+                            </div>
+                        </div>
+                        <div class="set_content">
+                            <div class="setc_name"><span>同步学习记录：</span></div>
+                            <div class="setc_main" @click="changecheck2">
+                                <a-radio v-model:checked="checked2"><span style="color:#333333">同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</span></a-radio>
+                            </div>
+                        </div>
+                        <div class="set_content">
+                            <div class="setc_name"><span>项目级别：</span></div>
+                            <div class="setc_main">
+                                <span style="color:#999999;">-</span>
+                            </div>
+                        </div>
+                        <div class="set_content">
+                            <div class="setc_name"><span>培训体系：</span></div>
+                            <div class="setc_main">
+                                <span style="color:#999999;">-</span>
+                            </div>
+                        </div>
+                        <div class="set_content">
+                            <div class="setc_name"><span>是否BOEU实施：</span></div>
+                            <div class="setc_main" @click="changecheck3">
+                                <a-radio v-model:checked="checked3"><span style="color:#333333">BOEU实施</span></a-radio>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </a-tab-pane>
+        </a-tabs>
+        <a-modal
+            style="padding: 0"
+            :closable="sh"
+            v-model:visible="visible"
+            :footer="null"
+            centered="true"
+        >
+            <div class="con">
+            <div class="header">
+              <div class="inhe">
+                <div class="mod"></div>
+                <div class="tz">调整关卡</div>
+                <div class="mg"></div>
+              </div>
+            </div>
+            <div class="mid">
+              <div class="inher">
+                <div class="cur">当前关卡：</div>
+                <div class="select">
+                  <a-select
+                    v-model:value="projectName"
+                    style="width: 100%"
+                    placeholder="请选择关卡"
+                    :options="projectNameList4"
+                    @change="selectProjectName4"
+                    allowClear
+                    showSearch
+                  ></a-select>
+                </div>
+                <div class="btn">
+                  <button class="sameb btn1">取消</button>
+                  <button class="sameb btn2">确定</button>
+                </div>
+              </div>
+            </div>
+            </div></a-modal
+        >
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, reactive, defineComponent, toRefs } from "vue";
+export default defineComponent({
+    name: "LibraryAdd",
+    setup() {
+    const state = reactive({
+        activeKey: ref("1"),
+        // value: ref(" "),
+        checked: false,
+        checked2: false,
+        checked3: false,
+        value3:false,
+        value4:false,
+        hideshow:false,
+    });
+        const value = ref('');
+        const value2 = ref('');
+        const textnum = '150'
+        const changeopclo = () => {
+            state.hideshow = !state.hideshow
+        }
+        const changecheck2 = () => {
+            state.checked2 = !state.checked2
+        }
+        const changecheck3 = () => {
+            state.checked3 = !state.checked3
+        }
+    return {
+        ...toRefs(state),
+        value,
+        value2,
+        textnum,
+        changeopclo,
+        changecheck2,
+        changecheck3,
+    };
+  },
+})
+
+</script>
+<style lang="scss" scoped>
+.clearfix:before,
+.clearfix:after {
+  content: " ";
+  display: block;
+  clear: both;
+}
+
+.addwrapper {
+  width: 100%;
+  height: 100%;
+  // background-color: green;
+  .addhead {
+    width: 100%;
+    height: 130px;
+    // background-color: lightgreen;
+    display: flex;
+    align-items: center;
+    position: relative;
+    .leftimg {
+      width: 151px;
+      height: 100px;
+      border: 10px solid #e7f2ff;
+      border-radius: 8px;
+      margin-left: 20px;
+      .img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .imgfor {
+      margin-left: 32px;
+      color: #333333;
+      .forz {
+        font-size: 16px;
+        font-weight: 500;
+      }
+      .fort {
+        font-weight: 400;
+        font-size: 14px;
+        margin-top: 20px;
+      }
+    }
+    @media screen and (max-width: 1030px) {
+      .imgfor {
+        margin-left: 20px;
+      }
+    }
+    .right {
+      // width: 500px;
+      height: 100%;
+      // background-color: red;
+      position: absolute;
+      right: 0;
+      display: flex;
+      align-items: center;
+      .img1 {
+        width: 24px;
+        height: 24px;
+        margin-right: 50px;
+      }
+      .line {
+        height: 65%;
+        width: 1px;
+        background-color: #e8effa;
+        margin-right: 28px;
+      }
+      .img2 {
+        width: 42px;
+        height: 42px;
+        margin-right: 22px;
+      }
+      .pub {
+        // color: #ffb64e;
+        color: #65A4F8;
+        font-size: 14px;
+        margin-top: 5px;
+        margin-right: 30px;
+        cursor: pointer;
+      }
+      .return {
+        color: #4ea6ff;
+        font-size: 14px;
+        margin-top: 10px;
+        margin-right: 60px;
+      }
+      .more {
+        color: #7895DD;
+        position: relative;
+        margin-right: 30px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        .moreArrow {
+          width: 13px;
+          height: 7px;
+          display: inline-block;
+          background-image: url("../../assets/images/navtop/down.png");
+          background-size: 100%;
+          margin: 2px;
+          margin-left: 15px;
+        }
+        .moreItems {
+          width: 110px;
+          height: 80px;
+          display: none;
+          background: #ffffff;
+          box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
+          // border-radius: 3px;
+          border: 0px solid #dcdcdc;
+          position: absolute;
+          left: -48px;
+          top: 30px;
+          z-index: 100;
+          cursor: pointer;
+          .sammo {
+            text-align: center;
+            margin-top: 12px;
+            cursor: pointer;
+          }
+          .sammo:hover {
+            color: #4ea6ff;
+          }
+        }
+        .moreItems:hover {
+          display: block;
+        }
+      }
+      @media screen and (max-width: 1240px) {
+        .line {
+          margin-right: 10px;
+        }
+        .img1 {
+          margin-right: 15px;
+        }
+        .img2 {
+          margin-right: 10px;
+        }
+        .return {
+          margin-right: 10px;
+        }
+        .pub {
+          margin-right: 10px;
+        }
+        .more {
+          margin-right: 10px;
+        }
+      }
+      .more:hover .moreArrow {
+        background-image: url("../../assets/images/navtop/up.png");
+      }
+      .more:hover .moreItems {
+        display: block;
+      }
+    }
+  }
+  .split {
+    width: 100%;
+    height: 20px;
+    background-color: #edf0f5;
+  }
+  .bom {
+    .tab {
+      margin-top: 10px;
+      // margin-left: 10px;
+    }
+    .ant-tabs > .ant-tabs-nav,
+    .ant-tabs > div > .ant-tabs-nav {
+      margin-left: 0px !important;
+      padding-left: 32px !important;
+    }
+
+    .notice{
+        .ntc_tit{
+            margin-left: 34px;
+            font-size:18px;
+            font-weight: 500;
+            color:#232425;
+        }
+        .ntc_body{
+            margin-left: 34px;
+            margin-right: 34px;
+            .ntc_switch{
+            display: flex;
+            margin: 32px 0px;
+            .opclo{
+                margin-left: 9px;
+            }
+        }
+        .ntc_content{
+            .ntcc_tit{
+                margin-bottom: 16px;
+            }
+            .textarea{
+                display: flex;
+                flex-direction: column;
+                .btnarea{
+                    display: flex;
+                    justify-content: flex-end;
+                }
+                .area_btn{
+                    width: 100px;
+                    // padding: 0px 26px 0px 26px;
+                    height: 38px;
+                    margin-top: 24px;
+                    background: rgb(64, 158, 255);
+                    border-radius: 8px;
+                    border: 1px solid rgba(64, 158, 255, 1);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-shrink: 0;
+                    cursor: pointer;
+                    .pub {
+                        width: 15px;
+                        height: 15px;
+                        background-image: url(@/assets/images/coursewareManage/export1.png);
+                        background-size: 100% 100%;
+                    }
+                    .btnText {
+                        font-size: 14px;
+                        font-weight: 400;
+                        color: rgb(255, 255, 255);
+                        line-height: 36px;
+                        margin-left: 5px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .projectscore{
+        .pjc_tit{
+            margin-left: 34px;
+            font-size:18px;
+            font-weight: 500;
+            color:#232425;
+        }
+        .pjc_body{
+            margin-left:34px;
+            margin-right:34px;
+            .pjcb_header{
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin:24px auto;
+                .edit_btn{
+                    width: 100px;
+                    // padding: 0px 26px 0px 26px;
+                    height: 38px;
+                    background: rgb(64, 158, 255);
+                    border-radius: 8px;
+                    border: 1px solid rgba(64, 158, 255, 1);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-shrink: 0;
+                    cursor: pointer;
+                    .edit {
+                        width: 15px;
+                        height: 15px;
+                        background-image: url(@/assets/images/coursewareManage/export1.png);
+                        background-size: 100% 100%;
+                    }
+                    .btnText {
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: rgb(255, 255, 255);
+                    line-height: 36px;
+                    margin-left: 5px;
+                    }
+                }
+            }
+            .pjcb_content{
+                border: 1px solid #388BE1;
+                padding: 32px;
+                .pjcb_content :last-child{
+                    margin-bottom:0px;
+                }
+                .content{
+                    margin-bottom:24px;
+                }
+
+            }
+        }
+    }
+
+    .setting{
+        .set_tit{
+            margin-left: 34px;
+            font-size:18px;
+            font-weight: 500;
+            color:#232425;
+        }
+        .set_body{
+            margin-left:34px;
+            margin-right:34px;
+            .set_content{
+                margin: 32px auto;
+                display: flex;
+                    // justify-content: end;
+                .setc_name{
+                    width:150px;
+                    display: flex;
+                    justify-content: end;
+                }
+                .setc_main{
+                    flex:1;
+                    margin-left: 12px;
+                }
+            }
+        }
+    }
+  }
+}
+</style>

src/views/projectcenter/ProjectAdd.vue

@@ -393,8 +393,8 @@ export default {
         .in {
           margin-left: 14px;
           flex: 1;
-          .ant-radio-wrapper {
-          }
+          // .ant-radio-wrapper {
+          // }
           .ant-input {
             border-radius: 5px;
             // height: 120%;

src/views/projectcenter/ProjectManage.vue

@@ -55,12 +55,10 @@
           <div class="search"></div>
           <div class="btnText">重置</div>
         </div>
-        <router-link to="/projectadd">
-          <div class="btn btn3">
+        <div class="btn btn3" @click="showModal1">
           <div class="search"></div>
           <div class="btnText">创建项目</div>
         </div>
-        </router-link>
       </div>
     </div>
     <!-- 搜索框及按钮 -->
@@ -109,6 +107,434 @@
       </a-table>
     </div>
     <!-- 表格 -->
+    <!-- 创建子项目弹窗 -->
+    <div>
+      <a-modal
+        v-model:visible="sonproject"
+        :title="null"
+        @ok="closeModal"
+        :footer="null"
+        :closable="false"
+        wrapClassName="sonproject"
+        width="764px"
+        height="356px"
+      >
+        <div
+          class="modalHeader"
+          style="
+            width: 100%;
+            height: 68px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: linear-gradient(
+              0deg,
+              rgba(78, 166, 255, 0) 0%,
+              rgba(78, 166, 255, 0.2) 100%
+            );
+          "
+        >
+          <div class="headerLeft" style="margin-left: 32px">
+            <span class="headerLeftText" style="font-size: 16px"
+              >请选择项目类别</span
+            >
+          </div>
+          <div style="cursor: pointer; margin-right: 32px" @click="closeModal">
+            <img
+              style="width: 22px; height: 22px"
+              src="../../assets/images/basicinfo/close22.png"
+            />
+          </div>
+        </div>
+        <div class="modalMain">
+          <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>
+          </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>
+            <div class="rightt">
+              <img src="../../assets/images/taskpage/right1.png" />
+            </div>
+            <div class="centerbox" style="color: rgba(255, 182, 78, 1)">
+              多层子项目
+            </div>
+          </div>
+        </div>
+      </a-modal>
+    </div>
+    <!-- 创建子项目弹窗 -->
+    <!-- 创建项目弹窗 -->
+    <div>
+      <div>
+        <a-modal
+          v-model:visible="estabish"
+          :title="null"
+          @ok="closeModal1"
+          :footer="null"
+          :closable="false"
+          wrapClassName="estabish"
+          width="638px"
+          height="468px"
+        >
+          <div
+            class="modalHeader"
+            style="
+              width: 100%;
+              height: 68px;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              background: linear-gradient(
+                0deg,
+                rgba(78, 166, 255, 0) 0%,
+                rgba(78, 166, 255, 0.2) 100%
+              );
+            "
+          >
+            <div class="headerLeft" style="margin-left: 32px">
+              <span class="headerLeftText" style="font-size: 16px"
+                >请选择项目类别</span
+              >
+            </div>
+            <div
+              style="cursor: pointer; margin-right: 32px"
+              @click="closeModal1"
+            >
+              <img
+                style="width: 22px; height: 22px"
+                src="../../assets/images/basicinfo/close22.png"
+              />
+            </div>
+          </div>
+          <div class="modalMain">
+            <router-link to="/projectadd">
+              <div
+                class="taskbox"
+                style="
+                  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/picture6.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 class="centermain">
+                  不包含子项目，直接填写项目基础信息后创建任务
+                </div>
+              </div>
+            </router-link>
+            <div
+              class="taskbox"
+              @click="showModal2"
+              style="
+                margin-bottom: 40px;
+                background: linear-gradient(
+                  180deg,
+                  rgba(229, 246, 236, 1) 100%,
+                  rgba(238, 249, 243, 1) 100%
+                );
+              "
+            >
+              <div class="leftt">
+                <img src="../../assets/images/taskpage/left3.png" />
+              </div>
+              <div class="photo">
+                <img src="../../assets/images/taskpage/picture7.png" />
+              </div>
+              <div class="rightt">
+                <img src="../../assets/images/taskpage/right3.png" />
+              </div>
+              <div class="centerbox1" style="color: rgba(93, 201, 136, 1)">
+                多层项目
+              </div>
+              <div class="centermain1">
+                包含子项目，分为多层子项目和单层子项目，多层子项目可创建班级，通过班级填写基础信息并创建任务
+              </div>
+            </div>
+          </div>
+        </a-modal>
+      </div>
+    </div>
+    <!-- 创建项目弹窗 -->
+    <!-- 创建多层项目弹窗 -->
+    <div>
+      <a-modal
+        v-model:visible="doublepro"
+        :title="null"
+        @ok="closeModal2"
+        :footer="null"
+        :closable="false"
+        wrapClassName="doublepro"
+        width="624px"
+        height="476px"
+      >
+        <div
+          class="modalHeader"
+          style="
+            width: 100%;
+            height: 68px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: linear-gradient(
+              0deg,
+              rgba(78, 166, 255, 0) 0%,
+              rgba(78, 166, 255, 0.2) 100%
+            );
+          "
+        >
+          <div class="headerLeft" style="margin-left: 32px">
+            <span class="headerLeftText" style="font-size: 16px"
+              >创建多层项目</span
+            >
+          </div>
+          <div style="cursor: pointer; margin-right: 32px" @click="closeModal2">
+            <img
+              style="width: 22px; height: 22px"
+              src="../../assets/images/basicinfo/close22.png"
+            />
+          </div>
+        </div>
+        <div class="modalMain">
+          <div class="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">项目名称:</div>
+            <div class="in">
+              <a-input
+                v-model:value="value"
+                show-count
+                :maxlength="30"
+                placeholder="请输入项目名称"
+                style="border-radius: 8px"
+              />
+            </div>
+          </div>
+          <div class="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">分类:</div>
+            <div class="in">
+              <a-select
+                v-model:value="value"
+                placeholder="四个养成"
+                style="border-radius: 8px; height: 40px"
+              />
+            </div>
+          </div>
+          <div class="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">项目经理:</div>
+            <div class="in">
+              <a-input
+                v-model:value="value"
+                placeholder="请选择项目经理"
+                style="border-radius: 8px; height: 40px"
+              />
+            </div>
+          </div>
+          <div class="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">资源归属:</div>
+            <div class="in">
+              <a-input
+                v-model:value="value"
+                style="border-radius: 8px; height: 40px"
+              />
+            </div>
+          </div>
+          <div class="pubtn">
+            <a-button class="pubtn1" @click="closeModal2">取消</a-button>
+            <a-button class="pubtn2" @click="closeModal2">确定</a-button>
+          </div>
+        </div>
+      </a-modal>
+    </div>
+    <!-- 创建多层项目弹窗 -->
+    <!-- 创建多层子项目弹窗 -->
+    <div>
+      <a-modal
+        v-model:visible="doublesonpro"
+        :title="null"
+        @ok="closeModal3"
+        :footer="null"
+        :closable="false"
+        wrapClassName="doublesonpro"
+        width="624px"
+        height="476px"
+      >
+        <div
+          class="modalHeader"
+          style="
+            width: 100%;
+            height: 68px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: linear-gradient(
+              0deg,
+              rgba(78, 166, 255, 0) 0%,
+              rgba(78, 166, 255, 0.2) 100%
+            );
+          "
+        >
+          <div class="headerLeft" style="margin-left: 32px">
+            <span class="headerLeftText" style="font-size: 16px"
+              >创建多层子项目</span
+            >
+          </div>
+          <div style="cursor: pointer; margin-right: 32px" @click="closeModal3">
+            <img
+              style="width: 22px; height: 22px"
+              src="../../assets/images/basicinfo/close22.png"
+            />
+          </div>
+        </div>
+        <div class="modalMain">
+          <div style="margin-left: 40px; margin-top: 40px">
+            <span style="color: #000000; font-size: 14px">项目归属：</span>
+            <span style="color: #999999; font-size: 14px; margin-left: 10px"
+              >管理者进阶</span
+            >
+          </div>
+          <div class="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">子项目名称:</div>
+            <div class="in">
+              <a-input
+                v-model:value="value"
+                placeholder="请输入项目名称"
+                style="border-radius: 8px; height: 40px"
+              />
+            </div>
+          </div>
+          <div class="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">分类:</div>
+            <div class="in">
+              <a-select
+                v-model:value="value"
+                placeholder="四个养成"
+                style="border-radius: 8px; height: 40px"
+              />
+            </div>
+          </div>
+          <div class="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">子项目经理:</div>
+            <div class="in">
+              <a-input
+                v-model:value="value"
+                placeholder="自动带出 可编辑"
+                style="border-radius: 8px; height: 40px"
+              />
+            </div>
+          </div>
+          <div class="name">
+            <div class="star" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">资源归属:</div>
+            <div class="in">
+              <a-input
+                v-model:value="value"
+                style="border-radius: 8px; height: 40px"
+              />
+            </div>
+          </div>
+          <div class="pubtn">
+            <a-button class="pubtn1" @click="closeModal3">取消</a-button>
+            <a-button class="pubtn2" @click="closeModal3">确定</a-button>
+          </div>
+        </div>
+      </a-modal>
+    </div>
+    <!-- 创建多层子项目弹窗 -->
   </div>
 </template>
 <script>
@@ -446,6 +872,10 @@ export default {
       currentPage: 1,
       tableDataTotal: 20,
       pageSize: 10,
+      sonproject: false,
+      estabish: false,
+      doublepro: false,
+      doublesonpro: false,
     });
 
     onMounted(() => {
@@ -496,7 +926,15 @@ export default {
                     </a-select-option>
                   </a-select>
                 </div>
-                <span class="operation3">创建子项目</span>
+                <span
+                  class="operation3"
+                  style="cursor: pointer"
+                  onClick={() => {
+                    state.sonproject = true;
+                  }}
+                >
+                  创建子项目
+                </span>
                 <div class="tableSelect">
                   <a-select
                     style="width: 50px"
@@ -617,7 +1055,9 @@ 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"
@@ -665,7 +1105,9 @@ export default {
                       </a-select>
                     </div>
 
-                    <span class="operation3">创建班级</span>
+                    <router-link to="/classadd" class="operation3">
+                      创建班级
+                    </router-link>
                     <span class="more">复制</span>
                   </div>
                 ) : item.state === "已结束" ? (
@@ -710,7 +1152,7 @@ export default {
                 a.operation =
                   a.state === "草稿" ? (
                     <div class="operation">
-                      <span class="operation1"></span>
+                      <span class="operation1">编辑</span>
                       <div class="tableSelect">
                         <a-select
                           style="width: 50px"
@@ -927,7 +1369,7 @@ export default {
               item.operation =
                 item.state === "草稿" ? (
                   <div class="operation">
-                    <span class="operation1"></span>
+                    <span class="operation1">编辑</span>
                     <div class="tableSelect">
                       <a-select
                         style="width: 50px"
@@ -1146,7 +1588,11 @@ export default {
           //单层项目
           value.operation = (
             <div class="operation">
+              {value.state === "草稿" ? (
+                <span class="operation1">编辑</span>
+              ) : (
                 <span class="operation1"></span>
+              )}
               <div class="tableSelect">
                 <a-select
                   style="width: 50px"
@@ -1268,11 +1714,48 @@ export default {
     };
     getTableDate();
 
+    const showModal = () => {
+      state.sonproject = true;
+    };
+    const closeModal = () => {
+      state.sonproject = false;
+    };
+
+    const showModal1 = () => {
+      state.estabish = true;
+    };
+    const closeModal1 = () => {
+      state.estabish = false;
+    };
+
+    const showModal2 = () => {
+      state.doublepro = true;
+      state.estabish = false;
+    };
+    const closeModal2 = () => {
+      state.doublepro = false;
+    };
+
+    const showModal3 = () => {
+      state.doublesonpro = true;
+      state.sonproject = false;
+    };
+    const closeModal3 = () => {
+      state.doublesonpro = false;
+    };
     return {
       ...toRefs(state),
       columns,
       selectProjectName,
       expandTable,
+      showModal,
+      closeModal,
+      showModal1,
+      closeModal1,
+      showModal2,
+      closeModal2,
+      showModal3,
+      closeModal3,
       getTableDate,
     };
   },
@@ -1441,4 +1924,289 @@ export default {
     }
   }
 }
+.doublesonpro {
+  .ant-modal {
+    .ant-modal-body {
+      padding: 0;
+      .modalMain {
+        display: flex;
+        flex-direction: column;
+        //align-items: center;
+        margin-left: 60px;
+        .name {
+          //width: 90%;
+          // background-color: lightcoral;
+          display: flex;
+          justify-content: right;
+          margin-top: 32px;
+          align-items: center;
+          height: 40px;
+          // border: 1px solid black;
+
+          .inname {
+            color: #000000;
+            font-size: 14px;
+            margin-left: 7px;
+          }
+          .in {
+            margin-left: 14px;
+            width: 80%;
+            .ant-input {
+              border-radius: 5px;
+              // height: 120%;
+              width: 80%;
+              height: 30px;
+            }
+            .ant-select {
+              border-radius: 5px;
+              // height: 120%;
+              width: 80%;
+              height: 40px;
+              .ant-select-selector {
+                border-radius: 8px;
+                // height: 120%;
+                width: 100%;
+                height: 40px;
+              }
+            }
+          }
+        }
+        .pubtn {
+          display: flex;
+          justify-content: center;
+          margin-top: 25px;
+          //margin-bottom: 29px;
+          .pubtn1 {
+            width: 100px;
+            height: 40px;
+            margin-right: 16px;
+            margin-bottom: 29px;
+            border: 1px solid #409eff;
+            border-radius: 4px;
+            color: rgba(78, 166, 255, 1);
+            font-size: 14px;
+            //line-height: 36px;
+            align-items: center;
+            background: rgba(255, 255, 255, 1);
+          }
+          .pubtn2 {
+            width: 100px;
+            height: 40px;
+            margin-bottom: 29px;
+            border: 1px solid #409eff;
+            border-radius: 4px;
+            color: #ffffff;
+            font-size: 14px;
+            align-items: center;
+            //line-height: 36px;
+            background: #409eff;
+          }
+        }
+      }
+    }
+  }
+}
+.doublepro {
+  .ant-modal {
+    .ant-modal-body {
+      padding: 0;
+      .modalMain {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .name {
+          width: 78%;
+          // background-color: lightcoral;
+          display: flex;
+          justify-content: right;
+          margin-top: 32px;
+          align-items: center;
+          height: 40px;
+          // border: 1px solid black;
+
+          .inname {
+            color: #000000;
+            font-size: 14px;
+            margin-left: 7px;
+          }
+          .in {
+            margin-left: 14px;
+            width: 81%;
+            .ant-input {
+              border-radius: 5px;
+              // height: 120%;
+              width: 100%;
+              height: 30px;
+            }
+            .ant-select {
+              border-radius: 5px;
+              // height: 120%;
+              width: 100%;
+              height: 40px;
+              .ant-select-selector {
+                border-radius: 8px;
+                // height: 120%;
+                width: 100%;
+                height: 40px;
+              }
+            }
+          }
+        }
+        .pubtn {
+          display: flex;
+          justify-content: center;
+          margin-top: 25px;
+          //margin-bottom: 29px;
+          .pubtn1 {
+            width: 100px;
+            height: 40px;
+            margin-right: 16px;
+            margin-bottom: 29px;
+            border: 1px solid #409eff;
+            border-radius: 4px;
+            color: rgba(78, 166, 255, 1);
+            font-size: 14px;
+            //line-height: 36px;
+            align-items: center;
+            background: rgba(255, 255, 255, 1);
+          }
+          .pubtn2 {
+            width: 100px;
+            height: 40px;
+            margin-bottom: 29px;
+            border: 1px solid #409eff;
+            border-radius: 4px;
+            color: #ffffff;
+            font-size: 14px;
+            align-items: center;
+            //line-height: 36px;
+            background: #409eff;
+          }
+        }
+      }
+    }
+  }
+}
+.sonproject {
+  .ant-modal {
+    .ant-modal-body {
+      padding: 0 !important;
+      .modalMain {
+        display: flex;
+        justify-content: center;
+        margin-top: 48px;
+        //margin-bottom: 40px;
+        .taskbox {
+          width: 310px;
+          height: 160px;
+          border-radius: 10px;
+          position: relative;
+          margin-bottom: 80px;
+          cursor: pointer;
+          .leftt {
+            position: absolute;
+            top: 18px;
+            left: 0;
+          }
+          .photo {
+            position: absolute;
+            top: 44px;
+            left: 40px;
+          }
+          .rightt {
+            position: absolute;
+            top: 69px;
+            right: 26px;
+          }
+          .centerbox {
+            position: absolute;
+            top: 66px;
+            left: 136px;
+            font-size: 20px;
+            font-weight: 700;
+            //line-height: 36px;
+          }
+          .centermain {
+            color: rgba(135, 139, 146, 1);
+            font-size: 14px;
+            position: absolute;
+            left: 144px;
+            bottom: 49px;
+          }
+        }
+      }
+    }
+  }
+}
+.estabish {
+  .ant-modal {
+    .ant-modal-body {
+      padding: 0 !important;
+      .modalMain {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-top: 48px;
+        //margin-bottom: 40px;
+        .taskbox {
+          width: 438px;
+          height: 160px;
+          border-radius: 10px;
+          position: relative;
+          margin-bottom: 24px;
+          cursor: pointer;
+          .leftt {
+            position: absolute;
+            top: 18px;
+            left: 0;
+          }
+          .photo {
+            position: absolute;
+            top: 44px;
+            left: 40px;
+          }
+          .rightt {
+            position: absolute;
+            top: 69px;
+            right: 26px;
+          }
+          .centerbox {
+            position: absolute;
+            top: 42px;
+            left: 120px;
+            font-size: 20px;
+            font-weight: 500;
+            //line-height: 36px;
+          }
+          .centerbox1 {
+            position: absolute;
+            top: 32px;
+            left: 120px;
+            font-size: 20px;
+            font-weight: 500;
+            //line-height: 36px;
+          }
+          .centermain {
+            color: rgba(135, 139, 146, 1);
+            font-size: 14px;
+            line-height: 20px;
+            position: absolute;
+            width: 252px;
+            left: 120px;
+            top: 78px;
+          }
+          .centermain1 {
+            color: rgba(135, 139, 146, 1);
+            font-size: 14px;
+            line-height: 20px;
+            position: absolute;
+            width: 252px;
+            left: 120px;
+            top: 68px;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

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>

src/views/projectcenter/TaskAdd.vue

@@ -298,16 +298,16 @@
               <div class="namebox">
                 <div class="inname">阶段说明：</div>
               </div>
-              <div class="in">
+              <div class="intext" style="margin-left: 14px">
                 <a-textarea  v-model:value="value" style="height: 88px" show-count :maxlength="100"  placeholder="请输入阶段说明" />
               </div>
           </div>
           <div style="display: flex;width: 100%;justify-content: center;margin-top: 40px">
             <button @click="closeModal"
-              style=" cursor: pointer;height: 40px;width: 100px;border: 1px solid #387DF7;border-radius: 4px;color: #387DF7;background-color: #FFFFFF"
+              style=" cursor: pointer;height: 40px;width: 100px;border: 1px solid #409EFF;border-radius: 4px;color: #409EFF;background-color: #FFFFFF"
             >取消</button>
             <button @click="closeModal"
-              style=" cursor: pointer;margin-left: 16px;margin-bottom: 40px;height: 40px;width: 100px;border: 1px solid #388BE1;border-radius: 4px;color: #FFFFFF;background-color: #388BE1"
+              style=" cursor: pointer;margin-left: 16px;margin-bottom: 40px;height: 40px;width: 100px;border: 1px solid #409EFF;border-radius: 4px;color: #FFFFFF;background-color: #409EFF"
             >确定</button>
           </div>
         </div>
@@ -791,7 +791,7 @@ export default {
             border-radius: 8px;
             // height: 120%;
             width: 384px;
-            height: 40px;
+            height: 88px;
 }
 .addstage {
   .ant-modal {
@@ -806,7 +806,7 @@ export default {
             .ant-input-textarea-show-count::after {
               position: absolute;
               right: 10px;
-              bottom: 10px;
+              bottom: 5px;
             }        
        }
       }

src/views/projectcenter/TaskPage.vue

@@ -1,50 +1,41 @@
 <!-- 任务页面 -->
 <template>
 <div class="taskpage">
-    <div class="header">
-        <div class="box">
-            <img src="../../assets/images/projectadd/picture.png"/>
+    <div class="addhead" style="flex-shrink: 0">
+      <div class="leftimg">
+        <img class="img" src="../../assets/images/projectadd/picture.png" />
       </div>
       <div class="imgfor">
         <div class="forz">管理者进阶-腾飞班</div>
-            <div class="fort">项目经理：黄华/刘俊</div>
-            <div class="fort">起止时间：2022-07-21 00:00至2020-10-21 00:00</div>
+        <div class="fort">项目经理：黄华、刘俊</div>
+        <div class="fort">起止时间：2022-07-21 00:00至2022-10-21 00:00</div>
       </div>
       <div class="right">
-            <div class="end" style="margin-right: 5px">
-                <div style="margin-top: 20px;margin-left: 10px">
-                    <img class="endimg" src="../../assets/images/projectadd/ending.png"/>
-                    <span class="endtext">结束项目</span>
+        <img class="img1" src="../../assets/images/leveladd/ma.png" />
+        <div class="line"></div>
+        <img class="img2" src="../../assets/images/leveladd/pub.png" />
+        <div class="pub">发布</div>
+        <div class="line"></div>
+        <img
+          style="margin-right: 15px"
+          class="img2"
+          src="../../assets/images/leveladd/more.png"
+        />
+        <div class="more">
+          <span style="color: #7096e3; cursor: pointer">更多</span>
+          <div class="moreArrow"></div>
+          <div class="moreItems">
+            <div class="sammo">撤回</div>
+            <div class="sammo">复制</div>
           </div>
         </div>
-            <div class="end">
-                <div style="margin-top: 20px;margin-left: 10px">
-                    <img class="endimg" src="../../assets/images/leveladd/more.png"/>
-                    <div class="tableSelect" style="margin-left: 10px;margin-right: 20px">
-                  <a-select
-                    style="width: 50px; color: #7096E3"
-                    value="更多"
-                    dropdownClassName="tabledropdown"
+        <div class="line"></div>
+        <router-link to="/projectmanage"
+          ><div style="display: flex">
+            <img class="img2" src="../../assets/images/leveladd/back.png" />
+            <div class="return">返回</div>
+          </div></router-link
         >
-                    <a-select-option value="撤回" label="撤回">
-                      <div>撤回</div>
-                    </a-select-option>
-                    <a-select-option value="复制" label="复制">
-                      <div>复制</div>
-                    </a-select-option>
-                    <a-select-option value="存为模板" label="存为模板">
-                      <div>存为模板</div>
-                    </a-select-option>
-                  </a-select>
-                </div>
-                </div>
-            </div>
-            <router-link to="/projectmanage" class="end">
-                 <div style="margin-top: 20px;margin-left: 10px;margin-right:30px">
-                    <img class="ending" src="../../assets/images/leveladd/back.png" />
-                    <span class="endtext" style="color:#4EA6FF">返回</span>
-                </div>
-            </router-link>
       </div>
     </div>
     <div class="split" style="flex-shrink: 0;"></div>
@@ -53,7 +44,114 @@
             v-model:activeKey="activeKey"
             size="large"
             :tabBarStyle="{ marginLeft: '10px',marginTop: '5px' }">
-            <a-tab-pane key="1" tab="概览"><div class="split"></div></a-tab-pane>
+            <a-tab-pane key="1" tab="概览">
+                <div class="split"></div>
+                <!-- 概览（无数据） -->
+                <div >
+                    <div class="onerow"><div class="taskmain">快速创建项目详情</div></div>
+                    <div class="second">
+                        <div class="taskbox" 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/picture1.png"/></div>
+                            <div class="rightt"><img src="../../assets/images/taskpage/right1.png"/></div>
+                            <div class="centerbox" style="color: rgba(255, 182, 78, 1)">添加任务</div>
+                            <div class="centermain">快速添加任务/阶段</div>
+                        </div>
+                        <div class="taskbox" style="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/picture2.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 class="centermain">快速添加学员</div>
+                        </div>
+                        <div class="taskbox" @click="showModal" style="background:linear-gradient(180deg,rgba(229, 246, 236, 1) 100%,rgba(238, 249, 243, 1) 100%);">
+                            <div class="leftt"><img src="../../assets/images/taskpage/left3.png"/></div>
+                            <div class="photo"><img src="../../assets/images/taskpage/picture3.png"/></div>
+                            <div class="rightt"><img src="../../assets/images/taskpage/right3.png"/></div>
+                            <div class="centerbox" style="color: rgba(93, 201, 136, 1)">发布</div>
+                            <div class="centermain">快速发布项目</div>
+                        </div>
+                    </div>
+                </div>               
+                <!-- 概览（无数据） -->
+                <!-- 概览（有数据） -->
+                <div style="display: none">
+                    <div class="onerow"><div class="taskmain">项目概览</div></div>
+                    <div class="second" style="margin-top: 0">
+                        <div class="nubbox">
+                            <span class="nub1">200</span>
+                            <div class="nub2">总人数</div>
+                        </div>
+                        <div class="nubbox">
+                            <span class="nub1" style="color: #FF90AE">15</span>
+                            <div class="nub2">必修课</div>
+                        </div>
+                        <div class="nubbox">
+                            <span class="nub1" style="color: #A497FF">15</span>
+                            <div class="nub2">选修课</div>
+                        </div>
+                        <div class="nubbox">
+                            <div>
+                                <span class="nub1" style="color: #5DC988">50</span><span style="color: #5DC988;font-size: 14px">%</span>
+                            </div>   
+                            <div class="nub2">完成率</div>
+                        </div>
+                        <div class="nubbox">
+                            <div>
+                                <span class="nub1" style="color: #FF90AE">30</span><span style="color: #FF90AE;font-size: 14px">%</span>
+                            </div>   
+                            <div class="nub2">必修完成率</div>
+                        </div>
+                        <div class="nubbox">
+                            <div>
+                                <span class="nub1" style="color: #A497FF">30</span><span style="color: #A497FF;font-size: 14px">%</span>
+                            </div>   
+                            <div class="nub2">选修完成率</div>
+                        </div>
+                    </div>
+                    <div class="onerow"><div class="taskmain">阶段信息</div></div>
+                    <div class="stagemess">
+                        <div class="stage1">阶段1</div>
+                        <div class="stage2">阶段2</div>
+                    </div>
+                    <div class="stagesecond">
+                        <div class="staname">阶段名称：</div>
+                        <div class="stamess">管理者进阶-腾飞班1第一阶段</div>
+                    </div>
+                    <div class="stagelast">
+                        <div class="stagepro">
+                            <a-progress type="dashboard" gapDegree="0"  :percent="50" :width="140" />
+                            <div class="protext">课程完成率</div>
+                        </div>
+                        <div class="stagepro">
+                            <a-progress type="dashboard" gapDegree="0" :percent="50" :width="140" />
+                            <div class="protext">考试通过率</div>
+                        </div>
+                        <div class="stagepro" style="margin-right: 0">
+                            <a-progress type="dashboard" gapDegree="0" :percent="50" :width="140" />
+                            <div class="protext">作业合格率</div>
+                        </div>
+                        <div class="proright">
+                            <div class="pronub" style="margin-left: 280px">10</div>
+                            <div class="proright1">
+                                <span class="textpro">阶段任务总数</span>
+                                <a-progress :percent="50" style="width: 369px" />
+                            </div>
+                            <div class="pronub" style="margin-left: 206px">5</div>
+                            <div class="proright1">
+                                <span class="textpro">必修课</span>
+                                <a-progress :percent="25" style="width: 369px"/>
+                            </div>
+                            <div class="pronub" style="margin-left: 142px">1</div>
+                            <div class="proright1">
+                                <span class="textpro">选修课</span>
+                                <a-progress :percent="5" style="width: 369px"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- 概览（有数据） -->
+            </a-tab-pane>
             <a-tab-pane key="2" tab="任务" force-render>
                 <div class="split"></div>
                 <div class="onerow">
@@ -249,68 +347,362 @@
             <a-tab-pane key="7" tab="设置">Content of Tab Pane 3</a-tab-pane>
         </a-tabs>
     </div>
+<!-- 项目发布弹窗 -->
+    <div>
+        <a-modal
+            v-model:visible="pubproject"
+            :title="null"
+            @ok="closeModal"
+            :footer="null"
+            :closable="false"
+            wrapClassName="pubproject"
+            width="679px"
+            height="437px"
+            >
+            <div class="modalHeader" 
+                style="width: 100%;height: 68px;display: flex;align-items: center;justify-content: space-between;background:linear-gradient(0deg,rgba(78, 166, 255, 0) 0%,rgba(78, 166, 255, 0.2000) 100%)"
+                >
+                <div class="headerLeft" style="margin-left: 32px">
+                    <span style="width: 15px;height: 15px"><img src="../../assets/images/taskpage/pub.png"/></span>
+                    <span class="headerLeftText" style="font-size: 16px;margin-left:10px">项目发布</span>
+                </div>
+                <div style="cursor: pointer;margin-right:32px" @click="closeModal">
+                <img
+                    style="width: 22px; height: 22px"
+                    src="../../assets/images/basicinfo/close22.png"
+                />
+                </div>
+            </div>
+            <div class="modalMain">
+                <div class="projectname">管理者进阶-腾飞班1</div>
+                <div class="projecttime"><span class="timeti">项目时间：</span><span class="timeme">2022/08/01-2022/08/30</span></div>
+                <div class="projectbox">
+                    <div class="promessage">
+                        <div class="messageme">项目信息</div>
+                        <div class="messagege">当前项目共0个阶段，0个任务</div>
+                    </div>
+                    <div class="stumessage">
+                        <div class="messageme1">学员信息</div>
+                        <div class="messagege1">项目共0名学员</div>
+                    </div>                   
+                </div>
+                <div class="send">
+                    <a-switch v-model:checked="checked" size="small" />
+                    <span class="sendtext">发送项目通知</span>
+                </div>
+                <div class="ckb">
+                    <a-checkbox v-model:checked="checked1"><span class="sendpeo">发给老师</span></a-checkbox>
+                    <a-checkbox v-model:checked="checked2"><span class="sendpeo">发给学员</span></a-checkbox>
+                </div>
+                <div class="pubtn">
+                    <a-button class="pubtn1" @click="closeModal">取消</a-button>
+                    <a-button class="pubtn2" @click="closeModal">发布</a-button>
+                </div>
+            </div>
+        </a-modal>
+    </div>
+<!-- 项目发布弹窗 -->
 </div>
 </template>
-<script lang="ts">
+<script>
+import { reactive, toRefs } from "vue";
+export default {
+    name:"taskPage",
+    setup(){
+        const state = reactive({
+            pubproject: false,
+            checked: false,
+            checked1: true,
+            checked2: false,
+            activeKey: '1',
+        });
+        const showModal = () => {
+            state.pubproject = true;
+        };
+        const closeModal = () => {
+            state.pubproject = false;       
+        };
+        return {
+            ...toRefs(state),
+            showModal,
+            closeModal,
+        };
+    },
+}
 </script>
 <style lang="scss">
+.pubproject {
+  .ant-modal {
+    .ant-modal-body {
+      padding: 0;  
+      .modalMain {
+        .projectname {
+            color: rgba(79, 81, 86, 1);
+            font-size: 14px;
+            line-height: 36px;
+            margin-left: 62px;
+            font-weight: 500;
+        }
+        .projecttime {
+            margin-left: 221px;
+            .timeti {
+                color: rgba(153, 155, 163, 1);
+                font-size: 14px;
+                line-height: 36px;
+            }
+            .timeme {
+                color: rgba(79, 81, 86, 1);
+                font-size: 14px;
+                line-height: 36px;
+            }
+        }
+        .projectbox {
+            margin-top: 26px;
+            display: flex;
+            justify-content: center;
+            .promessage {
+                width: 280px;
+                height: 110px;
+                background:linear-gradient(180deg,rgba(254, 243, 221, 1),rgba(255, 250, 240, 1));
+                border-radius: 10px;
+                margin-right: 7px;
+                .messageme {
+                    color: rgba(255, 182, 78, 1);
+                    font-size: 14px;
+                    line-height: 36px;
+                    margin-top: 17px;
+                    margin-left: 30px;
+                }
+                .messagege {
+                    color: rgba(153, 155, 163, 1);
+                    font-size: 14px;
+                    margin-left: 30px;
+                }
+            }
+            .stumessage {
+                width: 280px;
+                height: 110px;
+                background:linear-gradient(180deg,rgba(221, 234, 255, 1),rgba(240, 248, 254, 1));
+                border-radius: 10px;
+                .messageme1 {
+                    color: rgba(78, 166, 255, 1);
+                    font-size: 14px;
+                    line-height: 36px;
+                    margin-top: 17px;
+                    margin-left: 30px;
+                }
+                .messagege1 {
+                    color: rgba(153, 155, 163, 1);
+                    font-size: 14px;
+                    margin-left: 30px;
+                }
+            }
+        }
+        .send {
+            margin-top: 30px;
+            margin-left: 61px;
+            .sendtext {
+                margin-left: 11px;
+                color: rgba(109, 117, 132, 1);
+                font-size: 14px;
+            }
+        }
+        .ckb {
+            margin-top: 20px;
+            margin-left: 62px;
+            .sendpeo {
+                color: rgba(109, 117, 132, 1);
+                font-size: 14px;
+            }
+            .ant-checkbox-inner {
+                border-radius: 4px;
+            }
+        }
+        .pubtn {
+            display: flex;
+            justify-content: center;
+            margin-top: 25px;
+            //margin-bottom: 29px;
+            .pubtn1 {
+                width: 100px;
+                height: 40px;
+                margin-right: 16px;
+                margin-bottom: 29px;
+                border: 1px solid #409EFF;
+                border-radius: 4px;
+                color: rgba(78, 166, 255, 1);
+                font-size: 14px;
+                //line-height: 36px;
+                align-items: center;
+                background: rgba(255, 255, 255, 1)
+            }
+            .pubtn2 {
+                width: 100px;
+                height: 40px;
+                margin-bottom: 29px;
+                border: 1px solid #409EFF;
+                border-radius: 4px;
+                color: #FFFFFF;
+                font-size: 14px;
+                align-items: center;
+                //line-height: 36px;
+                background: #409EFF;
+            }
+        }
+      }
+    }
+  }
+}
 .taskpage {
     width: 100%;
     display: flex;
     flex-direction: column;
     //position: relative;
-    .header {
+    .addhead {
         width: 100%;
+        height: 130px;
+        // background-color: lightgreen;
         display: flex;
-        flex-wrap: wrap;
-        .box {
-            border: 12px solid #E7F2FF;
-            margin: 16px 0 16px 19px;
+        justify-content: space-between;
+        align-items: center;
+        position: relative;
+        .leftimg {
+        width: 151px;
+        height: 100px;
+        border: 10px solid #e7f2ff;
         border-radius: 8px;
-            //float: left;
+        margin-left: 20px;
+        .img {
+            width: 100%;
+            height: 100%;
+        }
         }
         .imgfor {
+            margin-left: 32px;
             display: flex;
             flex: 1;
             flex-direction: column;
-            margin-top: 38px;
-            margin-left: 15px;
-            //float: left;
-            //position: absolute;
-            //left: 210px;
             .forz {
-                font-size: 16px;
                 color: #363636;
-                font-weight: 500;
+                font-weight: 600;
+                font-size: 16px;
             }
             .fort {
+                display: flex;
+                flex-wrap: wrap;
+                color: #878b92;
                 font-size: 14px;
-                color: #878B92;
-
+                margin-top: 2px;
+            }
+        }
+        @media screen and (max-width: 1030px) {
+        .imgfor {
+            margin-left: 20px;
         }
     }
     .right {
-            display: flex;
+      // width: 500px;
+      height: 100%;
+      // background-color: red;
       //position: absolute;
-            //right: 10px;
-            //top: 5px;
-            //float: right;
-            .end {
-                border-left: 1px solid #E8EFFA;
-                height: 82px;
-                margin-top:30px;
-                //width: 113px;
-                .endimg {
+      //right: 0;
+      display: flex;
+      align-items: center;
+      .img1 {
+        width: 24px;
+        height: 24px;
+        margin-right: 50px;
+      }
+      .line {
+        height: 65%;
+        width: 1px;
+        background-color: #e8effa;
+        margin-right: 28px;
+      }
+      .img2 {
         width: 42px;
         height: 42px;
-                    
+        margin-right: 22px;
       }
-                .endtext {
+      .pub {
+        color: #ffb64e;
         font-size: 14px;
-                    color: #57C887;
-                    padding: 7px;
+        margin-top: 5px;
+        margin-right: 30px;
+        cursor: pointer;
       }
-                
+      .return {
+        color: #4ea6ff;
+        font-size: 14px;
+        margin-top: 10px;
+        margin-right: 60px;
+      }
+      .more {
+        position: relative;
+        margin-right: 30px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        .moreArrow {
+          width: 13px;
+          height: 7px;
+          display: inline-block;
+          background-image: url("../../assets/images/navtop/down.png");
+          background-size: 100%;
+          margin: 2px;
+          margin-left: 15px;
+        }
+        .moreItems {
+          width: 110px;
+          height: 80px;
+          display: none;
+          background: #ffffff;
+          box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
+          // border-radius: 3px;
+          border: 0px solid #dcdcdc;
+          position: absolute;
+          left: -48px;
+          top: 30px;
+          z-index: 100;
+          cursor: pointer;
+          .sammo {
+            text-align: center;
+            margin-top: 12px;
+            cursor: pointer;
+          }
+          .sammo:hover {
+            color: #4ea6ff;
+          }
+        }
+        .moreItems:hover {
+          display: block;
+        }
+      }
+      @media screen and (max-width: 1240px) {
+        .line {
+          margin-right: 10px;
+        }
+        .img1 {
+          margin-right: 15px;
+        }
+        .img2 {
+          margin-right: 10px;
+        }
+        .return {
+          margin-right: 10px;
+        }
+        .pub {
+          margin-right: 10px;
+        }
+        .more {
+          margin-right: 10px;
+        }
+      }
+      .more:hover .moreArrow {
+        background-image: url("../../assets/images/navtop/up.png");
+      }
+      .more:hover .moreItems {
+        display: block;
       }
     }
   }
@@ -391,6 +783,173 @@
                 }
             }
         }
+        .second {
+            display: flex;
+            justify-content: left;
+            flex-wrap: wrap;
+            margin-top: 40px;
+            margin-left: 20px;
+            .nubbox {
+                width: 253px;
+                height: 116px;
+                margin-top: 20px;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                background: #FAFBFC;
+                border-radius: 10px;
+                margin-left: 15px;
+                .nub1 {
+                    color: #FFB54A;
+                    font-size: 30px;
+                    font-weight: 700;
+                }
+                .nub2 {
+                    color: #6D7584;
+                    font-size: 14px;
+                }
+            }
+            .taskbox {
+                width: 412px;
+                height: 160px;
+                border-radius: 10px;
+                position: relative;
+                margin-left: 68px;
+                margin-bottom: 40px;
+                cursor: pointer;
+                .leftt {
+                    position: absolute;
+                    top: 18px;
+                    left: 0;
+                }
+                .photo {
+                    position: absolute;
+                    top: 42px;
+                    left: 37px;
+                }
+                .rightt {
+                    position: absolute;
+                    top: 69px;
+                    right: 26px;
+                }
+                .centerbox {
+                    position: absolute;
+                    top: 52px;
+                    left: 145px;
+                    font-size: 20px;
+                    font-weight: 700;
+                    //line-height: 36px;
+                }
+                .centermain {
+                    color: rgba(135, 139, 146, 1);
+                    font-size: 14px;
+                    position: absolute;
+                    left: 144px;
+                    bottom: 49px;
+                }
+            }
+        }
+        .stagemess {
+            display: flex;
+            margin-left: 38px;
+            .stage1 {
+                width: 100px;
+                height: 33px;
+                text-align: center;
+                line-height: 34px;
+                border-radius: 6px;
+                color: #FFFFFF;
+                font-size: 16px;
+                background: #4EA6FF;
+                margin-right: 10px;
+                margin-top: 19px;
+                cursor: pointer;
+            }
+            .stage2 {
+                width: 100px;
+                height: 33px;
+                text-align: center;
+                line-height: 34px;
+                border-radius: 6px;
+                border: 1px solid #EBEEF3;
+                color: #000000;
+                font-size: 16px;
+                background: #FFFFFF;
+                margin-right: 10px;
+                margin-top: 19px;
+                cursor: pointer;
+            }
+        }
+        .stagesecond {
+            display: flex;
+            margin-left: 39px;
+            margin-top: 29px;
+            .staname {
+                color: #999BA3;
+                font-size: 14px;
+            }
+            .stamess {
+                color: #4F5156;
+                font-size: 14px;
+            }
+        }
+        .stagelast {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            margin-bottom: 55px;
+            .stagepro {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                margin-top: 55px;
+                margin-right: 120px;
+                .ant-progress-circle-path {
+                    stroke: #4EA6FF;
+                }
+                .ant-progress-text {
+                    color: #4EA6FF;
+                    font-weight: 700;
+                }
+                .protext {
+                    color: #6D7584;
+                    font-size: 14px;
+                    margin-top: 25px;
+                }
+            }
+            .proright {
+                width: 500px;
+                margin-top: 55px;
+                margin-left: 50px;
+                .ant-progress-bg {
+                    height: 24px !important;
+                    background: #4EA6FF;
+                }
+                .ant-progress-inner {
+                    height: 24px;
+                }
+                .pronub {
+                    color: #4EA6FF;
+                    font-size: 14px;
+                    margin: 5px 0;
+                }
+                .proright1 {
+                    display: flex;
+                    justify-content: right;
+                    .textpro {
+                        color: #6D7584;
+                        font-size: 14px;
+                        margin-right: 20px;
+                    }
+                    .ant-progress-text {
+                        color: #4EA6FF;
+                        font-size: 14px;
+                        font-weight: 700;
+                    }
+                }
+            }
+        }
         .stage {
             display: flex;
             height: 49px;
@@ -479,6 +1038,7 @@
             }
             .progress {
                 width: 168px;
+                margin-left: 10px;
                 margin-right: 50px;
                 flex-grow: 1;
                 .progresstext {

src/views/projectcenter/TemplateLibrary.vue

@@ -1 +1,306 @@
-<!-- 模板库页面 -->
+<template>
+  <div class="templatelibrary">
+    <div class="tmpl">
+        <div class="tmpl_header">
+            <div class="tmplh_inp">
+                <div class="inpbox">
+                    <div class="inpbox1">
+                        <span>模版名称：</span>
+                        <a-input
+                            v-model:value="value1"
+                            style="
+                                width: 270px;
+                                height: 40px;
+                                border-radius: 8px;
+                                margin-right: 14px;
+                            "
+                            placeholder="请输入项目名称"
+                        />
+                    </div>
+                    <div class="inpbox1">
+                        <span>创建时间：</span>
+                        <a-date-picker
+                            v-model="selectTime"
+                            type="date"
+                            placeholder="创建时间"
+                            style="width: 270px; margin-right: 14px"
+                        />
+                    </div>
+                </div>
+            </div>
+            <div class="tmplh_btn">
+                <div class="btn btn1">
+                    <div class="search"></div>
+                    <div class="btnText btnText1">搜索</div>
+                </div>
+                <div class="btn btn2">
+                    <div class="search"></div>
+                    <div class="btnText btnText2">重置</div>
+                </div>
+            </div>
+        </div>
+        <div class="tmpl_body">
+            <div class="tmpl_tabbox">
+                <a-table
+                    :columns="columns1"
+                    :data-source="tableData1"
+                    :loading="tableDataTotal === -1 ? true : false"
+                    expandRowByClick="true"
+                    @expand="expandTable"
+                    :pagination="false"
+                />
+            </div>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { reactive, defineComponent, toRefs } from "vue";
+
+const columns1 = [
+
+  {
+    title: "模版名称",
+    width: '20%',
+    dataIndex: "name",
+    key: "name",
+    ellipsis: true,
+    align: "center",
+  },
+  {
+    title: "状态",
+    width: '15%',
+    dataIndex: "status",
+    key: "status",
+    align: "center",
+  },
+
+  {
+    title: "创建人",
+    width: '18%',
+    dataIndex: "creator",
+    key: "creator",
+    align: "center",
+  },
+  {
+    title: "最近学习时间",
+    width: '25%',
+    dataIndex: "stutime",
+    key: "stutime",
+    align: "center",
+  },
+  {
+    title: "操作",
+    width: '22%',
+    className: "h",
+    dataIndex: "operation",
+    key: "operation",
+    align: "center",
+  },
+];
+
+export default defineComponent({
+    name: "TemplateLibrary",
+    setup() {
+        const state = reactive({
+            tableData1: [
+                {
+                    key: "1",
+                    name: "管理者进阶-腾飞班Z1",
+                    status: "已发布",
+                    creator: "李部长",
+                    stutime: "2022-10-31  23:12:00",
+                    operation: "operation",
+                },
+                {
+                    key: "2",
+                    name: "管理者进阶-腾飞班Z2",
+                    status: "已发布",
+                    creator: "毛继禹",
+                    stutime: "2022-10-31  23:12:00",
+                    operation: "operation",
+                },
+                {
+                    key: "3",
+                    name: "管理者进阶-腾飞班Z3",
+                    status: "已发布",
+                    creator: "毛继禹",
+                    stutime: "2022-10-31  23:12:00",
+                    operation: "operation",
+                },
+                {
+                    key: "4",
+                    name: "管理者进阶-腾飞班Z4",
+                    status: "未发布",
+                    creator: "毛继禹",
+                    stutime: "2022-10-31  23:12:00",
+                    operation: "operation",
+                },
+            ],
+        });
+        const getTableDate1 = () => {
+            let data = state.tableData1;
+            data.map((value) => {
+                {
+                //单层项目
+                value.operation = (
+                    <div class="operation" style="justify-content: flex-end;">
+                    <div class="nSelect">
+                        {value.status === "已发布" ? (
+                        <div class="nselect">
+                            <div class="ops2">
+                            <router-link to="/libraryadd">
+                                <div class="jc">查看</div>
+                            </router-link>
+                        </div>
+                        <div class="ops3">
+                            <div class="jc">撤回</div>
+                        </div>
+                        </div>
+                        ) : (
+                        <div></div>
+                        )}
+                        {value.status === "未发布" ? (
+                            <div class="nselect">
+                                <div class="ops1">
+                                    <div class="jc">发布  |</div>
+                                </div>
+                                <div class="ops2">
+                                    <router-link to="/libraryadd">
+                                        <div class="jc">查看</div>
+                                    </router-link>
+                                </div>
+                                <div class="ops3">
+                                    <div class="jc">删除</div>
+                                </div>
+                        </div>
+                        ) : (
+                        <div></div>
+                        )}
+                    </div>
+                    </div>
+                );
+                }
+            });
+            state.tableData = data;
+            };
+        getTableDate1();
+            return {
+                ...toRefs(state),
+                columns1,
+            }
+    }
+})
+
+
+</script>
+
+<style lang="scss">
+    .templatelibrary{
+        width: 100%;
+        .tmpl{
+            width:100%;
+            .tmpl_header{
+                display:flex;
+                justify-content: space-between;
+                margin: 32px;
+                .tmplh_inp{
+                    .inpbox{
+                        display: flex;
+                        .inpbox1{
+                            display:flex;
+                            justify-content: center;
+                            align-items: center;
+                            margin-right: 24px;
+                        }
+                    }
+                }
+                .tmplh_btn{
+                    display: flex;
+                    margin-left: 38px;
+                    .btn {
+                        padding: 0px 26px 0px 26px;
+                        height: 38px;
+                        border-radius: 8px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        margin-left: 14px;
+                        flex-shrink: 0;
+                        .search {
+                        background-size: 100%;
+                        }
+                        .btnText {
+                        font-size: 14px;
+                        font-weight: 400;
+                        line-height: 36px;
+                        margin-left: 5px;
+                        }
+                        .btnText1{
+                            color: rgb(255, 255, 255);
+                        }
+                        .btnText2{
+                            color: rgba(64, 158, 255, 1);
+                        }
+                    }
+                    .btn1 {
+                        background: #409EFF;
+                        .search {
+                        width: 15px;
+                        height: 17px;
+                        background-image: url("../../assets/images/courseManage/search0.png");
+                        }
+                    }
+                    .btn2 {
+                        background: #FFFFFF;
+                        border: 1px solid #388BE1;
+                        .search {
+                        width: 16px;
+                        height: 18px;
+                        background-image: url("../../assets/images/courseManage/reset1.png");
+                        }
+                    }
+                    .btn1:hover {
+                        background: rgb(255, 255, 255);
+                        border: 1px solid #388BE1;
+                        .search {
+                        background-image: url("../../assets/images/courseManage/search1.png");
+                        }
+                        .btnText {
+                            color: rgba(64, 158, 255, 1);
+                        }
+                    }
+                    .btn2:hover {
+                        background: rgba(64, 158, 255, 1);
+                        .search {
+                        background-image: url("../../assets/images/courseManage/reset0.png");
+                        }
+                        .btnText {
+                        color: #ffffff;
+                        }
+                    }
+                }
+            }
+            .tmpl_body{
+                .tmpl_tabbox{
+                    .operation {
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        color: #4ea6ff;
+                        .nselect {
+                            justify-content: center;
+                            align-items: center;
+                            display: flex;
+                            .jc {
+                            margin-left: 20px;
+                            cursor: pointer;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>

src/views/research/ManagePage.vue

@@ -209,7 +209,7 @@ export default {
         font-weight: 500;
       }
       .messagebox {
-        width: 100%;
+        //width: 100%;
         //display: flex;
         margin-top: 20px;
         margin-left: 38px;

src/views/research/ResearchAdd.vue

@@ -64,7 +64,7 @@
             <img class="pictureimg" src="../../assets/images/research/picture.png"/>
             <div class="picturename">图片名称1.jpg</div>
             <img
-                style="width: 20px; height: 20px;position: absolute;right: 0;top:0"
+                style="cursor: pointer; width: 20px; height: 20px;position: absolute;right: 0;top:0"
                 src="../../assets/images/basicinfo/close.png"
             />
         </div>
@@ -99,7 +99,8 @@
                     <a-button class="btn">7</a-button>
                     <a-button class="btn">8</a-button>
                     <a-button class="btn">9</a-button>
-                <a-button class="btn" style="margin-right: 10px;">10</a-button>
+                    <a-button class="btn" style="display: flex;align-items:center;margin-right: 10px;justify-content: center">10</a-button>
+                
             </div>
             <div class="scoretext">非常不满意</div>
         </div>
@@ -181,6 +182,7 @@
                 border: 1px solid #D7E5FD;
                 border-radius: 5px;
                 margin: 0 10px;
+                padding: 5px;
                 .btn {
                     border: 1px solid #56A3F9;
                     border-radius: 5px; 
@@ -214,7 +216,8 @@
             display:flex;
         }
         .delete {
-            margin-top: 27px;
+            cursor: pointer;
+            margin-top: 32px;
             margin-left: 20px;
             float: right;
             color: #4EA6FF;
@@ -225,7 +228,7 @@
             // background-color: lightcoral;
             display: flex;
             margin-top: 20px;
-            align-items: center;
+            //align-items: center;
             //height: 40px;
             // border: 1px solid black;
             .namebox {
@@ -248,6 +251,7 @@
                     margin-left: 14px;
                     flex: 1;
                     .addimg {
+                        cursor:pointer;
                         color: rgba(78, 166, 255, 1);
                         font-size: 14px;
                     }