公告

src/components/drawers/NoticePub.vue

@@ -6,20 +6,33 @@
     <div class="switch">
       <a-switch v-model:checked="noticeChecked" size="small" /><span
         style="margin-left: 16px"
-        >开启</span
       >
+        开启
+      </span>
     </div>
     <template v-if="noticeChecked">
       <p>公告内容</p>
+      <!-- 文本 -->
+      <div
+        v-if="!editOn"
+        style="height: 120px; border: 1px solid  rgb(217, 217, 217"
+      >
+        {{ noticeContent }}
+      </div>
       <a-textarea
+        v-if="editOn"
         v-model:value="noticeContent"
         :maxlength="150"
         placeholder="公告信息最多输入150个字"
         style="margin-top: -10px; height: 120px"
       />
-      <div class="publish">
+      <!-- 按钮 -->
-        <div class="iconPub"></div>
+      <div v-if="!editOn" class="btn-content">
-        <div class="btnText" @click="pubNotice">发布</div>
+        <a-button type="primary" @click="handleEdit">编辑</a-button>
+      </div>
+      <div v-if="editOn" class="btn-content">
+        <a-button class="cancel" @click="handleCancel">取消</a-button>
+        <a-button type="primary" @click="pubNotice" class="sure">发布</a-button>
       </div>
     </template>
   </div>
@@ -44,6 +57,8 @@ export default {
       noticeChecked: true,
       projectInfo: {},
       noticeContent: "",
+
+      editOn: false,
     });
     const getTaskInfo = () => {
       getTask({ projectId: props.projectId }).then((res) => {
@@ -51,6 +66,14 @@ export default {
         state.projectInfo = res.data.data.projectInfo;
       });
     };
+
+    const handleEdit = () => {
+      state.editOn = true;
+    };
+    const handleCancel = () => {
+      state.editOn = false;
+    };
+
     const pubNotice = () => {
       if (state.noticeContent == "") {
         message.destroy();
@@ -66,10 +89,15 @@ export default {
         };
         publishNotice(obj)
           .then((res) => {
-            message.destroy();
+            // console.log("res");
-            message.success("发布成功", res);
+            // console.log(res);
-            state.noticeContent = "";
+            if (res.data.code === 200) {
-            emitter.emit("setNotice", false);
+              message.destroy();
+              message.success("发布成功", res);
+              state.noticeContent = res.data.data.notice;
+              handleCancel();
+              emitter.emit("setNotice", false);
+            }
           })
           .catch((err) => {
             message.destroy();
@@ -85,6 +113,8 @@ export default {
       ...toRefs(state),
       getTaskInfo,
       pubNotice,
+      handleEdit,
+      handleCancel,
     };
   },
 };
@@ -141,5 +171,12 @@ export default {
       margin-left: 5px;
     }
   }
+  .btn-content {
+    margin-top: 20px;
+    text-align: right;
+    .cancel {
+      margin-right: 10px;
+    }
+  }
 }
 </style>

src/views/projectcenter/LibraryAdd.vue

@@ -587,7 +587,7 @@
                     </div>
                     <div class="btnbox" style="margin: 20px">
                       <a-upload
-                      v-if="(docChecked==true)"
+                        v-if="docChecked == true"
                         v-model:file-list="fileList"
                         name="file"
                         action="/manageApi/file/upload"
@@ -604,7 +604,11 @@
                           alt=""
                         />
                       </a-upload>
-                      <div v-if="(docChecked==true)" class="btnbox" style="margin: 20px">
+                      <div
+                        v-if="docChecked == true"
+                        class="btnbox"
+                        style="margin: 20px"
+                      >
                         <span style="color: #999999">
                           支持：pdf.ppt.pptx.doc.docx.xls.xlsx.jpeg.png.gif.zip
                         </span>
@@ -928,24 +932,29 @@ export default defineComponent({
       api
         .templateDetail(localStorage.getItem("projectTemplateId"))
         .then((res) => {
-
+          console.log("get model list ----->", res, res.data.data.stageList);
-          console.log('get model list ----->',res, res.data.data.stageList)
 
           state.taskSyllabus = [];
           console.log(res);
           state.projectInfo.name = res.data.data.projectTemplateInfo.name;
-          state.projectInfo.beginTime = res.data.data.projectTemplateInfo.beginTime;
+          state.projectInfo.beginTime =
+            res.data.data.projectTemplateInfo.beginTime;
           state.projectInfo.endTime = res.data.data.projectTemplateInfo.endTime;
           state.projectInfo.manager = res.data.data.projectTemplateInfo.manager;
           state.projectInfo.notice = res.data.data.projectTemplateInfo.notice;
-          state.projectInfo.sourceBelongId = res.data.data.projectTemplateInfo.sourceBelongId;
+          state.projectInfo.sourceBelongId =
-          state.projectInfo.managerId = res.data.data.projectTemplateInfo.managerId;
+            res.data.data.projectTemplateInfo.sourceBelongId;
+          state.projectInfo.managerId =
+            res.data.data.projectTemplateInfo.managerId;
           state.projectInfo.remark = res.data.data.projectTemplateInfo.remark;
-          state.projectInfo.courseSyncFlag = res.data.data.projectTemplateInfo.courseSyncFlag;
+          state.projectInfo.courseSyncFlag =
+            res.data.data.projectTemplateInfo.courseSyncFlag;
           state.projectInfo.level = res.data.data.projectTemplateInfo.level;
-          state.projectInfo.systemId = res.data.data.projectTemplateInfo.systemId;
+          state.projectInfo.systemId =
+            res.data.data.projectTemplateInfo.systemId;
           state.projectInfo.boeFlag = res.data.data.projectTemplateInfo.boeFlag;
-          state.projectInfo.noticeFlag = res.data.data.projectTemplateInfo.noticeFlag;
+          state.projectInfo.noticeFlag =
+            res.data.data.projectTemplateInfo.noticeFlag;
           state.projectInfo.remark = res.data.data.projectTemplateInfo.remark;
           state.projectInfo.status = res.data.data.projectTemplateInfo.status;
           state.projectInfo.picUrl = res.data.data.projectTemplateInfo.picUrl;
@@ -953,7 +962,7 @@ export default defineComponent({
           let data = res.data.data.stageList;
           console.log("data=====", data);
           for (let i in data) {
-            console.log('what ------ > ', i,data)
+            console.log("what ------ > ", i, data);
             state.taskSyllabus.push({ text: data[i].name, children: [] });
             for (let j in data[i].taskList) {
               state.taskSyllabus[i].children.push({
@@ -995,9 +1004,9 @@ export default defineComponent({
         projectTemplateId: localStorage.getItem("projectTemplateId"),
         remark: state.projectInfo.remark,
         status: state.projectInfo.status,
-        attach:state.projectInfo.attach,
+        attach: state.projectInfo.attach,
       };
-      console.log("obj======",obj);
+      console.log("obj======", obj);
       api
         .templateEdit(obj)
         .then((res) => {
@@ -1126,26 +1135,26 @@ export default defineComponent({
         console.log("str", str);
         //要编辑项目
         api
-        .templateEdit({
+          .templateEdit({
-          name: state.projectInfo.name,
+            name: state.projectInfo.name,
-        category: state.projectInfo.category,
+            category: state.projectInfo.category,
-        picUrl: state.projectInfo.picUrl,
+            picUrl: state.projectInfo.picUrl,
-        beginTime: new Date(state.projectInfo.beginTime).getTime(),
+            beginTime: new Date(state.projectInfo.beginTime).getTime(),
-        endTime: new Date(state.projectInfo.endTime).getTime(),
+            endTime: new Date(state.projectInfo.endTime).getTime(),
-        manager: state.projectInfo.manager,
+            manager: state.projectInfo.manager,
-        managerId: state.projectInfo.managerId || 0,
+            managerId: state.projectInfo.managerId || 0,
-        sourceBelongId: state.projectInfo.sourceBelongId,
+            sourceBelongId: state.projectInfo.sourceBelongId,
-        level: state.projectInfo.level,
+            level: state.projectInfo.level,
-        systemId: state.projectInfo.systemId,
+            systemId: state.projectInfo.systemId,
-        boeFlag: state.projectInfo.boeFlag ? 1 : 0,
+            boeFlag: state.projectInfo.boeFlag ? 1 : 0,
-        courseSyncFlag: state.projectInfo.courseSyncFlag ? 1 : 0,
+            courseSyncFlag: state.projectInfo.courseSyncFlag ? 1 : 0,
-        notice: state.projectInfo.notice,
+            notice: state.projectInfo.notice,
-        noticeFlag: state.projectInfo.noticeFlag,
+            noticeFlag: state.projectInfo.noticeFlag,
-        projectTemplateId: localStorage.getItem("projectTemplateId"),
+            projectTemplateId: localStorage.getItem("projectTemplateId"),
-        remark: state.projectInfo.remark,
+            remark: state.projectInfo.remark,
-        status: state.projectInfo.status,
+            status: state.projectInfo.status,
-        attach:str,
+            attach: str,
-        })
+          })
           .then((res) => {
             console.log("上传成功", res);
           })
@@ -1312,426 +1321,426 @@ export default defineComponent({
   }
 }
 .sametab {
-    // margin-left: 30px;
+  // margin-left: 30px;
-    // margin-right: 30px;
+  // margin-right: 30px;
-    margin-top: 30px;
+  margin-top: 30px;
-    width: 100%;
+  width: 100%;
-    // background-color: green;
+  // background-color: green;
-    .Gcon {
+  .Gcon {
-      display: flex;
+    display: flex;
-      .pad {
+    .pad {
-        height: 100%;
+      height: 100%;
-        width: 40px;
+      width: 40px;
-      }
+    }
-      .Gin {
+    .Gin {
-        // background-color: #bfa;
+      // background-color: #bfa;
-        margin-top: 30px;
+      margin-top: 30px;
-        .headone {
+      .headone {
-          // background-color: red;
+        // background-color: red;
+        display: flex;
+        text-align: center;
+        .box {
+          width: 4px;
+          height: 20px;
+          background-color: #409eff;
+          border-radius: 2px;
+        }
+        .onetitle {
+          margin-left: 15px;
+          color: #333333;
+          font-size: 14px;
+        }
+        .oneedi {
+          margin-left: 15px;
+          color: #4ea6ff;
+          cursor: pointer;
+        }
+        .twobtn {
           display: flex;
-          text-align: center;
+          .btnone {
-          .box {
+            width: 42px;
-            width: 4px;
+            height: 24px;
-            height: 20px;
+            border: 1px solid rgba(64, 158, 255, 1);
-            background-color: #409eff;
+            border-radius: 4px;
-            border-radius: 2px;
+            color: rgba(64, 158, 255, 1);
-          }
+            margin-left: 20px;
-          .onetitle {
-            margin-left: 15px;
-            color: #333333;
-            font-size: 14px;
-          }
-          .oneedi {
-            margin-left: 15px;
-            color: #4ea6ff;
             cursor: pointer;
           }
-          .twobtn {
+          .btntwo {
-            display: flex;
+            width: 42px;
-            .btnone {
+            height: 24px;
-              width: 42px;
+            border: 1px solid rgba(64, 158, 255, 1);
-              height: 24px;
+            border-radius: 4px;
-              border: 1px solid rgba(64, 158, 255, 1);
+            color: #ffffff;
-              border-radius: 4px;
+            margin-left: 20px;
-              color: rgba(64, 158, 255, 1);
+            background: #409eff;
-              margin-left: 20px;
+            cursor: pointer;
-              cursor: pointer;
+          }
-            }
+        }
-            .btntwo {
+      }
-              width: 42px;
+      .btnbox {
-              height: 24px;
+        .ant-upload-list {
-              border: 1px solid rgba(64, 158, 255, 1);
+          display: none !important;
-              border-radius: 4px;
+        }
-              color: #ffffff;
+      }
-              margin-left: 20px;
+      .onemain {
-              background: #409eff;
+        margin-top: 20px;
-              cursor: pointer;
+        margin-left: 55px;
+        color: #6f6f6f;
+        font-size: 14px;
+        .checkcon {
+          position: relative;
+          .in {
+            position: absolute;
+            // margin-top: 10px;
+            left: 0;
+            top: 3px;
+          }
+          .yulan {
+            // color: yellow;
+            margin-left: 22px;
+            // display: inline-block;
+          }
+          .yulan2 {
+            margin-left: 22px;
+          }
+          .ant-input-number {
+            height: 24px;
+            width: 24px;
+            margin: 10px;
+            border-radius: 4px;
+            border: 1px solid #6d7584;
+            .ant-input-number-input {
+              width: 100%;
+              height: 100%;
+              font-size: 14px;
+              padding: 0;
+              color: #409eff;
+              text-align: center;
             }
           }
         }
-        .btnbox {
+      }
-          .ant-upload-list {
+      .twomain {
-            display: none !important;
+        margin-left: 20px;
-          }
+        margin-top: 20px;
+        .ant-switch-checked {
+          background-color: #5dc988;
         }
-        .onemain {
+        .info {
-          margin-top: 20px;
+          margin-left: 10px;
-          margin-left: 55px;
           color: #6f6f6f;
           font-size: 14px;
-          .checkcon {
+          // margin-top: 10px;
-            position: relative;
-            .in {
-              position: absolute;
-              // margin-top: 10px;
-              left: 0;
-              top: 3px;
-            }
-            .yulan {
-              // color: yellow;
-              margin-left: 22px;
-              // display: inline-block;
-            }
-            .yulan2 {
-              margin-left: 22px;
-            }
-            .ant-input-number {
-              height: 24px;
-              width: 24px;
-              margin: 10px;
-              border-radius: 4px;
-              border: 1px solid #6d7584;
-              .ant-input-number-input {
-                width: 100%;
-                height: 100%;
-                font-size: 14px;
-                padding: 0;
-                color: #409eff;
-                text-align: center;
-              }
-            }
-          }
         }
-        .twomain {
+        .infor {
-          margin-left: 20px;
+          margin-left: 38px;
-          margin-top: 20px;
+          margin-top: 10px;
-          .ant-switch-checked {
+          color: #c7cbd2;
-            background-color: #5dc988;
+          font-size: 14px;
-          }
+        }
-          .info {
+        .chooseshow {
-            margin-left: 10px;
+          // background-color: red;
+          margin-left: 38px;
+          margin-top: 12px;
+          .fane {
             color: #6f6f6f;
             font-size: 14px;
-            // margin-top: 10px;
-          }
-          .infor {
-            margin-left: 38px;
-            margin-top: 10px;
-            color: #c7cbd2;
-            font-size: 14px;
-          }
-          .chooseshow {
-            // background-color: red;
-            margin-left: 38px;
-            margin-top: 12px;
-            .fane {
-              color: #6f6f6f;
-              font-size: 14px;
-            }
-          }
-          .choo {
-            display: none;
-          }
-          .btm {
-            margin-left: 38px;
-            margin-top: 20px;
-            .bmo {
-              color: #6f6f6f;
-              font-size: 14px;
-            }
-            .bmt {
-              color: #c7cbd2;
-              font-size: 14px;
-              margin-top: 3px;
-            }
-            .chosecon {
-              display: flex;
-              margin-top: 6px;
-              margin-bottom: 20px;
-              .chose {
-                position: relative;
-                .inl {
-                  position: absolute;
-                  top: 2px;
-                }
-                .sh {
-                  margin-left: 23px;
-                  color: #6f6f6f;
-                }
-              }
-            }
           }
         }
-      }
+        .choo {
-    }
-    .Lhead {
-      display: flex;
-      .btns {
-        display: flex;
-        margin-left: 20px;
-        // flex-wrap: wrap;
-        .btn {
-          padding: 0px 26px 0px 26px;
-          height: 38px;
-          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;
-          cursor: pointer;
-          .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/courseManage/search1.png");
-          }
-        }
-        .btn2 {
-          .search {
-            width: 16px;
-            height: 18px;
-            background-image: url("../../assets/images/courseManage/reset1.png");
-          }
-        }
-        .btn3 {
-          margin-right: 0px;
-          .search {
-            width: 17px;
-            height: 18px;
-            background-image: url("../../assets/images/courseManage/add1.png");
-          }
-        }
-        .btn1:hover {
-          background: rgba(64, 158, 255, 1);
-          .search {
-            background-image: url("../../assets/images/courseManage/search0.png");
-          }
-          .btnText {
-            color: #ffffff;
-          }
-        }
-        .btn2:hover {
-          background: rgba(64, 158, 255, 1);
-          .search {
-            background-image: url("../../assets/images/courseManage/reset0.png");
-          }
-          .btnText {
-            color: #ffffff;
-          }
-        }
-        .btn3:hover {
-          background: rgba(64, 158, 255, 1);
-          .search {
-            background-image: url("../../assets/images/courseManage/add0.png");
-          }
-          .btnText {
-            color: #ffffff;
-          }
-        }
-      }
-    }
-    .Lbom {
-      position: relative;
-      margin-bottom: 20px;
-      .item {
-        width: 100%;
-        height: 200px;
-        // background-color: green;
-        margin-top: 40px;
-        border-radius: 8px;
-        border: 1px solid #f0f4fe;
-        .itemhead {
-          height: 50px;
-          width: 100%;
-          background-color: #f0f4fe;
-          display: flex;
-          align-items: center;
-          position: relative;
-          .lev {
-            margin-left: 27px;
-            margin-right: 16px;
-            line-height: 100%;
-            color: #409eff;
-            font-size: 16px;
-          }
-          .lin {
-            width: 1px;
-            height: 35%;
-            background-color: #c7cbd2;
-          }
-          .nam {
-            margin-left: 16px;
-            color: #4f5156;
-            line-height: 100%;
-            font-size: 16px;
-          }
-          .count {
-            position: absolute;
-            line-height: 100%;
-            color: #4f5156;
-            font-size: 14px;
-            right: 40px;
-            span:nth-child(2) {
-              color: #63ca8c;
-            }
-          }
-        }
-        .itembomm {
-          display: flex;
-          align-items: center;
-          height: 150px;
-          .it {
-            // margin-left: 110px;
-            // margin-right: 110px;
-            width: 13%;
-            text-align: center;
-            .on {
-              font-size: 30px;
-            }
-            .ittext {
-              color: #4f5156;
-              margin-top: 16px;
-              margin-left: -5px;
-            }
-          }
-          .linee {
-            background-color: #ecf2fb;
-            width: 1px;
-            height: 55%;
-          }
-          .itright {
-            position: absolute;
-            right: 45px;
-            display: flex;
-            .te {
-              color: #4ea6ff;
-              font-size: 14px;
-              cursor: pointer;
-            }
-            .more {
-              position: relative;
-              height: 30px;
-              display: flex;
-              .moreArrow {
-                width: 13px;
-                height: 7px;
-                display: inline-block;
-                background-image: url("../../assets/images/navtop/down.png");
-                background-size: 100%;
-                margin: 2px;
-                margin-left: 7px;
-                margin-top: 6px;
-              }
-              .moreItems {
-                width: 80px;
-                height: 70px;
-                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: 0px;
-                top: 20px;
-                z-index: 100;
-                .roleItem {
-                  font-size: 14px;
-                  font-weight: 400;
-                  color: rgba(79, 81, 86, 1);
-                  line-height: 36px;
-                  display: flex;
-                  justify-content: center;
-                  cursor: pointer;
-                }
-                .roleItem:hover {
-                  color: #4ea6ff;
-                }
-              }
-            }
-            .more:hover .moreArrow {
-              background-image: url("../../assets/images/navtop/up.png");
-            }
-            .more:hover .moreItems {
-              display: block;
-            }
-          }
-        }
-
-        .show {
-          color: blue;
-        }
-        .noshow {
           display: none;
         }
-      }
+        .btm {
-      .create {
+          margin-left: 38px;
-        margin-top: 40px;
+          margin-top: 20px;
-        .taskbox {
+          .bmo {
-          width: 412px;
+            color: #6f6f6f;
-          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;
+          .bmt {
-            bottom: 49px;
+            color: #c7cbd2;
+            font-size: 14px;
+            margin-top: 3px;
+          }
+          .chosecon {
+            display: flex;
+            margin-top: 6px;
+            margin-bottom: 20px;
+            .chose {
+              position: relative;
+              .inl {
+                position: absolute;
+                top: 2px;
+              }
+              .sh {
+                margin-left: 23px;
+                color: #6f6f6f;
+              }
+            }
           }
         }
       }
     }
   }
+  .Lhead {
+    display: flex;
+    .btns {
+      display: flex;
+      margin-left: 20px;
+      // flex-wrap: wrap;
+      .btn {
+        padding: 0px 26px 0px 26px;
+        height: 38px;
+        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;
+        cursor: pointer;
+        .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/courseManage/search1.png");
+        }
+      }
+      .btn2 {
+        .search {
+          width: 16px;
+          height: 18px;
+          background-image: url("../../assets/images/courseManage/reset1.png");
+        }
+      }
+      .btn3 {
+        margin-right: 0px;
+        .search {
+          width: 17px;
+          height: 18px;
+          background-image: url("../../assets/images/courseManage/add1.png");
+        }
+      }
+      .btn1:hover {
+        background: rgba(64, 158, 255, 1);
+        .search {
+          background-image: url("../../assets/images/courseManage/search0.png");
+        }
+        .btnText {
+          color: #ffffff;
+        }
+      }
+      .btn2:hover {
+        background: rgba(64, 158, 255, 1);
+        .search {
+          background-image: url("../../assets/images/courseManage/reset0.png");
+        }
+        .btnText {
+          color: #ffffff;
+        }
+      }
+      .btn3:hover {
+        background: rgba(64, 158, 255, 1);
+        .search {
+          background-image: url("../../assets/images/courseManage/add0.png");
+        }
+        .btnText {
+          color: #ffffff;
+        }
+      }
+    }
+  }
+  .Lbom {
+    position: relative;
+    margin-bottom: 20px;
+    .item {
+      width: 100%;
+      height: 200px;
+      // background-color: green;
+      margin-top: 40px;
+      border-radius: 8px;
+      border: 1px solid #f0f4fe;
+      .itemhead {
+        height: 50px;
+        width: 100%;
+        background-color: #f0f4fe;
+        display: flex;
+        align-items: center;
+        position: relative;
+        .lev {
+          margin-left: 27px;
+          margin-right: 16px;
+          line-height: 100%;
+          color: #409eff;
+          font-size: 16px;
+        }
+        .lin {
+          width: 1px;
+          height: 35%;
+          background-color: #c7cbd2;
+        }
+        .nam {
+          margin-left: 16px;
+          color: #4f5156;
+          line-height: 100%;
+          font-size: 16px;
+        }
+        .count {
+          position: absolute;
+          line-height: 100%;
+          color: #4f5156;
+          font-size: 14px;
+          right: 40px;
+          span:nth-child(2) {
+            color: #63ca8c;
+          }
+        }
+      }
+      .itembomm {
+        display: flex;
+        align-items: center;
+        height: 150px;
+        .it {
+          // margin-left: 110px;
+          // margin-right: 110px;
+          width: 13%;
+          text-align: center;
+          .on {
+            font-size: 30px;
+          }
+          .ittext {
+            color: #4f5156;
+            margin-top: 16px;
+            margin-left: -5px;
+          }
+        }
+        .linee {
+          background-color: #ecf2fb;
+          width: 1px;
+          height: 55%;
+        }
+        .itright {
+          position: absolute;
+          right: 45px;
+          display: flex;
+          .te {
+            color: #4ea6ff;
+            font-size: 14px;
+            cursor: pointer;
+          }
+          .more {
+            position: relative;
+            height: 30px;
+            display: flex;
+            .moreArrow {
+              width: 13px;
+              height: 7px;
+              display: inline-block;
+              background-image: url("../../assets/images/navtop/down.png");
+              background-size: 100%;
+              margin: 2px;
+              margin-left: 7px;
+              margin-top: 6px;
+            }
+            .moreItems {
+              width: 80px;
+              height: 70px;
+              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: 0px;
+              top: 20px;
+              z-index: 100;
+              .roleItem {
+                font-size: 14px;
+                font-weight: 400;
+                color: rgba(79, 81, 86, 1);
+                line-height: 36px;
+                display: flex;
+                justify-content: center;
+                cursor: pointer;
+              }
+              .roleItem:hover {
+                color: #4ea6ff;
+              }
+            }
+          }
+          .more:hover .moreArrow {
+            background-image: url("../../assets/images/navtop/up.png");
+          }
+          .more:hover .moreItems {
+            display: block;
+          }
+        }
+      }
+
+      .show {
+        color: blue;
+      }
+      .noshow {
+        display: none;
+      }
+    }
+    .create {
+      margin-top: 40px;
+      .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;
+        }
+      }
+    }
+  }
+}
 .editBtn {
   float: right;
   margin-right: 150px;