Merge branch 'master' of ssh://gitlab.dongwu-inc.com:10022/BOE/fe-manage

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,7 +76,7 @@
       </div>
       <!-- 搜索框及按钮 -->
     </div>
-    <!-- 新建选择线上还是面授课弹窗 -->
+    <!-- 选择线上还是面授课弹窗 -->
     <a-modal v-model:visible="of_hs" style="margin-top: 400px">
       <div
         class="selectonlineface"
@@ -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%",
+    width: "10%",
-    align: "center",
+    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,
+      rg_hs:false,
-      graduate_hs:true,
+      graduate_hs:false,
-      agreestudy_hs:true,
+      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,
     };
   },
 });
@@ -2825,6 +2964,7 @@ export default defineComponent({
     }
   }
 }
+//faceteach
 .modalStyle {
   .ant-modal{
     .modalHeader {
@@ -3004,9 +3144,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 +3216,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 +3224,7 @@ export default defineComponent({
       );
     }
     .of_main {
-      width: calc(100%);
+      width: 100%;
       position: relative;
       .ofm_header {
         display: flex;
@@ -3074,6 +3271,12 @@ export default defineComponent({
           }
           .b_input{
             flex:1;
+            position: relative;
+            .inp_num{
+              position: absolute;
+              right:10px;
+              top:10px;
+            }
           }
           .bc_box {
             display: flex;
@@ -3141,13 +3344,10 @@ export default defineComponent({
       }
     }
 }
-.ant-modal{
+//createschooltime
-  .ant-modal-content{
+.createschooltime {
-    width:679px !important;
-    .ant-modal-body{
-      .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 +3356,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 +3364,7 @@ export default defineComponent({
       );
     }
     .cst_main {
-            width: calc(100%);
+      width: 100%;
       position: relative;
       .cstm_header {
         display: flex;
@@ -3257,17 +3457,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 +3552,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 +3654,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 +3760,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 +3809,13 @@ export default defineComponent({
               background-size: 100% 100%;
             }
           }
-          .agree_body{
+          .agreem_body{
-            width: 100%;
+            .body_box{
-            .brderbox{
               display:flex;
-              align-items:center;
               justify-content: center;
+              align-items:center;
+              width:100%;
+              margin:20px auto;
             }
           }
           .qrm_btnbox{
@@ -3649,10 +3853,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 +4376,8 @@ export default defineComponent({
                   .ops1,
                   .ops2 {
                     margin-right: 10px;
+                    cursor: pointer;
+                  }
                 }
               }
             }
@@ -4177,8 +4385,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/projectcenter/ProjectManage.vue

@@ -55,12 +55,10 @@
           <div class="search"></div>
           <div class="btnText">重置</div>
         </div>       
-        <router-link to="/projectadd">
+          <div class="btn btn3" @click="showModal1">
-          <div class="btn btn3">
             <div class="search"></div>
             <div class="btnText">创建项目</div>
           </div>
-        </router-link>
       </div>
     </div>
     <!-- 搜索框及按钮 -->
@@ -109,6 +107,96 @@
       </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.2000) 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">
+            <div class="taskbox" style="margin-right: 24px;background:linear-gradient(180deg,rgba(221, 234, 255, 1) 100%,rgba(240, 248, 254, 1) 100%);">
+                <div class="leftt"><img src="../../assets/images/taskpage/left2.png"/></div>
+                <div class="photo"><img src="../../assets/images/taskpage/picture4.png"/></div>
+                <div class="rightt"><img src="../../assets/images/taskpage/right2.png"/></div>
+                <div class="centerbox" style="color: rgba(78, 166, 255, 1)">单层子项目</div>
+            </div>
+            <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/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.2000) 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" 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>
 </template>
 <script>
@@ -446,8 +534,11 @@ export default {
       currentPage: 1,
       tableDataTotal: 20,
       pageSize: 10,
+      sonproject: false,
+      estabish: false,
     });
 
+
     onMounted(() => {
       // console.log("执行");
     });
@@ -496,7 +587,10 @@ 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"
@@ -1268,11 +1362,32 @@ export default {
     };
     getTableDate();
 
+    const showModal = () => {
+      state.sonproject = true;
+     
+    };
+    const closeModal = () => {
+      state.sonproject = false;
+      
+    };
+    
+    const showModal1 = () => {
+      
+      state.estabish = true;
+    };
+    const closeModal1 = () => {
+      state.estabish = false;
+      
+    };
     return {
       ...toRefs(state),
       columns,
       selectProjectName,
       expandTable,
+      showModal,
+      closeModal,
+      showModal1,
+      closeModal1,
       getTableDate,
     };
   },
@@ -1441,4 +1556,126 @@ export default {
     }
   }
 }
+.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/TaskPage.vue

@@ -1,50 +1,41 @@
 <!-- 任务页面 -->
 <template>
 <div class="taskpage">
-    <div class="header">
+    <div class="addhead" style="flex-shrink: 0">
-        <div class="box">
+      <div class="leftimg">
-            <img src="../../assets/images/projectadd/picture.png"/>
+        <img class="img" src="../../assets/images/projectadd/picture.png" />
       </div>
       <div class="imgfor">
         <div class="forz">管理者进阶-腾飞班</div>
-            <div class="fort">项目经理：黄华/刘俊</div>
+        <div class="fort">项目经理：黄华、刘俊</div>
-            <div class="fort">起止时间：2022-07-21 00:00至2020-10-21 00:00</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">
+        <img class="img1" src="../../assets/images/leveladd/ma.png" />
-                <div style="margin-top: 20px;margin-left: 10px">
+        <div class="line"></div>
-                    <img class="endimg" src="../../assets/images/projectadd/ending.png"/>
+        <img class="img2" src="../../assets/images/leveladd/pub.png" />
-                    <span class="endtext">结束项目</span>
+        <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 class="line"></div>
-                <div style="margin-top: 20px;margin-left: 10px">
+        <router-link to="/projectmanage"
-                    <img class="endimg" src="../../assets/images/leveladd/more.png"/>
+          ><div style="display: flex">
-                    <div class="tableSelect" style="margin-left: 10px;margin-right: 20px">
+            <img class="img2" src="../../assets/images/leveladd/back.png" />
-                  <a-select
+            <div class="return">返回</div>
-                    style="width: 50px; color: #7096E3"
+          </div></router-link
-                    value="更多"
-                    dropdownClassName="tabledropdown"
         >
-                    <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,33 @@
             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 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>
+            </a-tab-pane>
             <a-tab-pane key="2" tab="任务" force-render>
                 <div class="split"></div>
                 <div class="onerow">
@@ -249,68 +266,360 @@
             <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">取消</a-button>
+                    <a-button class="pubtn2">发布</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;
+        justify-content: space-between;
-        .box {
+        align-items: center;
-            border: 12px solid #E7F2FF;
+        position: relative;
-            margin: 16px 0 16px 19px;
+        .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;
+      //right: 0;
-            //top: 5px;
+      display: flex;
-            //float: right;
+      align-items: center;
-            .end {
+      .img1 {
-                border-left: 1px solid #E8EFFA;
+        width: 24px;
-                height: 82px;
+        height: 24px;
-                margin-top:30px;
+        margin-right: 50px;
-                //width: 113px;
+      }
-                .endimg {
+      .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;
+        margin-top: 5px;
-                    padding: 7px;
+        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 +700,51 @@
                 }
             }
         }
+        .second {
+            display: flex;
+            justify-content: center;
+            flex-wrap: wrap;
+            margin-top: 40px;
+            .taskbox {
+                width: 412px;
+                height: 160px;
+                border-radius: 10px;
+                position: relative;
+                margin-right: 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;
+                }
+            }
+        }
         .stage {
             display: flex;
             height: 49px;

src/views/projectcenter/TemplateLibrary.vue

@@ -1 +1,166 @@
-<!-- 模板库页面 -->
+<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>
+export default {
+    name: "TemplateLibrary",
+    // import { reactive, defineComponent, ref } from "vue";
+    // export default defineComponent({
+    //     setup() { 
+    //         const state = reactive({
+                
+    //         })
+    //     }
+    // })
+}
+
+</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{
+
+                }
+            }
+        }
+    }
+</style>