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

src/assets/scss/common.scss

@@ -374,3 +374,112 @@ textarea {
 }
 
 //弹窗--------------------------------------------------------
+
+
+//面授管理弹窗
+.FacMa {
+  .ant-modal {
+    width: 424px;
+    height: 258px;
+
+    .ant-modal-content {
+      width: 424px;
+      height: 258px;
+
+      .ant-modal-body {
+        width: 424px;
+        height: 258px;
+        padding: 0px;
+
+        .head {
+          width: 424px;
+          height: 68px;
+          // position: absolute;
+          // left: 0;
+          // top: 0;
+          background: linear-gradient(180deg,
+              rgba(78, 166, 255, 0.2) 0%,
+              rgba(78, 166, 255, 0) 100%);
+          display: flex;
+
+          justify-content: center;
+
+          .inhead {
+            width: 90%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .left {
+              display: flex;
+              align-items: center;
+
+              .gan {
+                width: 16px;
+                height: 16px;
+                background-image: url(../../assets/images/taskpage/gan.png);
+              }
+
+              .tis {
+                margin-left: 5px;
+                width: 32px;
+                font-size: 16px;
+                font-weight: 600;
+                color: #333333;
+              }
+            }
+
+            .right {
+              width: 22px;
+              height: 22px;
+              background-image: url(../../assets/images/basicinfo/close.png);
+              background-size: 100% 100%;
+              cursor: pointer;
+            }
+          }
+        }
+
+        .main {
+          margin-top: 20px;
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          font-size: 14px;
+          font-weight: 400;
+          color: #333333;
+        }
+
+        .butn {
+          width: 100%;
+          display: flex;
+          margin-top: 60px;
+          justify-content: center;
+
+          .btn {
+            width: 100px;
+            height: 40px;
+            border-radius: 4px;
+            cursor: pointer;
+          }
+
+          .btn1 {
+            color: #387df7;
+
+            background: #ffffff;
+            border: 1px solid #387df7;
+          }
+
+          .btn2 {
+            background: #388be1;
+            color: #fff;
+            border: 0;
+            margin-left: 10px;
+          }
+        }
+      }
+    }
+  }
+}
+
+//面授管理弹窗

src/components/drawers/FaceManage.vue

@@ -119,8 +119,7 @@
         v-model:visible="showmodal"
         centered="true"
         :footer="null"
-        dialogClass="me"
-        style="width: 424px; height: 258px; padding: 0px; position: relative"
+        wrapClassName="FacMa"
       >
         <div class="head">
           <div class="inhead">
@@ -361,103 +360,6 @@ export default {
 </script>
 
 <style  lang="scss" >
-.me {
-  .ant-modal-body {
-    padding: 0px;
-  }
-}
-.ant-modal {
-  width: 424px !important;
-  height: 258px !important;
-  .ant-modal-content {
-    width: 424px !important;
-    height: 258px !important;
-    .ant-modal-body {
-      width: 424px !important;
-      height: 258px !important;
-      padding: 0px !important;
-      .head {
-        width: 424px;
-        height: 68px;
-        // position: absolute;
-        // left: 0;
-        // top: 0;
-        background: linear-gradient(
-          180deg,
-          rgba(78, 166, 255, 0.2) 0%,
-          rgba(78, 166, 255, 0) 100%
-        );
-        display: flex;
-
-        justify-content: center;
-        .inhead {
-          width: 90%;
-          height: 100%;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          .left {
-            display: flex;
-            align-items: center;
-            .gan {
-              width: 16px;
-              height: 16px;
-              background-image: url(../../assets/images/taskpage/gan.png);
-            }
-            .tis {
-              margin-left: 5px;
-              width: 32px;
-              font-size: 16px;
-              font-weight: 600;
-              color: #333333;
-            }
-          }
-          .right {
-            width: 22px;
-            height: 22px;
-            background-image: url(../../assets/images/basicinfo/close.png);
-            background-size: 100% 100%;
-            cursor: pointer;
-          }
-        }
-      }
-      .main {
-        margin-top: 20px;
-        width: 100%;
-        display: flex;
-        justify-content: center;
-        font-size: 14px;
-        font-weight: 400;
-        color: #333333;
-      }
-      .butn {
-        width: 100%;
-        display: flex;
-        margin-top: 60px;
-        justify-content: center;
-
-        .btn {
-          width: 100px;
-          height: 40px;
-          border-radius: 4px;
-          cursor: pointer;
-        }
-        .btn1 {
-          color: #387df7;
-
-          background: #ffffff;
-          border: 1px solid #387df7;
-        }
-        .btn2 {
-          background: #388be1;
-          color: #fff;
-          border: 0;
-          margin-left: 10px;
-        }
-      }
-    }
-  }
-}
 // .drawerStyle {
 //   .ant-drawer-content-wrapper {
 //     // max-width: 1000px;
@@ -470,6 +372,7 @@ export default {
 //   }
 
 // }
+
 .FaceManage {
   .drawerMain {
     min-width: 600px;
@@ -477,6 +380,7 @@ export default {
     overflow-x: scroll;
     display: flex;
     flex-direction: column;
+
     .header {
       height: 73px;
       border-bottom: 1px solid #e8e8e8;
@@ -485,6 +389,7 @@ export default {
       align-items: center;
       // background-color: red;
       margin-bottom: 20px;
+
       .headerTitle {
         font-size: 18px;
         font-weight: 600;
@@ -493,9 +398,11 @@ export default {
         // margin-left: 24px;
       }
     }
+
     .main {
       width: 100%;
       height: 100%;
+
       // background-color: #bfa;
       // overflow-y: auto;
       .endtime {
@@ -503,6 +410,7 @@ export default {
         font-weight: 500;
         color: #333333;
       }
+
       .search {
         width: 100%;
         display: flex;
@@ -513,9 +421,11 @@ export default {
           display: flex;
           flex-wrap: nowrap;
           margin-bottom: 10px;
+
           .name {
             margin-top: 8px;
           }
+
           // .name {
           //   margin-top: 8px;
 
@@ -524,6 +434,7 @@ export default {
           //   font-weight: 400;
           // }
         }
+
         .btns {
           display: flex;
           flex-wrap: nowrap;
@@ -536,6 +447,7 @@ export default {
             display: flex;
             justify-content: center;
             align-items: center;
+
             .img1 {
               width: 15px;
               height: 17px;
@@ -543,6 +455,7 @@ export default {
               background-size: 100% 100%;
               margin-right: 7px;
             }
+
             .img2 {
               width: 16px;
               height: 18px;
@@ -557,6 +470,7 @@ export default {
 
             color: #ffffff;
           }
+
           .btn2 {
             background: #ffffff;
 
@@ -565,6 +479,7 @@ export default {
           }
         }
       }
+
       .btnss {
         display: flex;
         flex-wrap: nowrap;
@@ -577,6 +492,7 @@ export default {
           display: flex;
           justify-content: center;
           align-items: center;
+
           .img1 {
             width: 15px;
             height: 17px;
@@ -584,6 +500,7 @@ export default {
             background-size: 100% 100%;
             margin-right: 7px;
           }
+
           .img2 {
             width: 17px;
             height: 16px;
@@ -598,6 +515,7 @@ export default {
 
           color: #ffffff;
         }
+
         .btn2 {
           background: #ffffff;
           margin-right: 20px;
@@ -605,6 +523,7 @@ export default {
           border: 1px solid #388be1;
         }
       }
+
       .line {
         width: 100%;
         height: 40px;
@@ -614,35 +533,42 @@ export default {
         align-items: center;
         margin-top: 20px;
         border: 1px solid #c3e6fc;
+
         .inline {
           width: 95%;
           height: 100%;
           display: flex;
           justify-content: space-between;
+
           // background-color: #bfa;
           .left {
             height: 100%;
             display: flex;
             align-items: center;
+
             .img {
               width: 14px;
               height: 15px;
               background-image: url(../../assets/images/leveladd/gan.png);
               background-size: 100% 100%;
             }
+
             .text {
               color: #999ba3;
             }
+
             .text2 {
               color: #4ea6ff;
               margin-left: 5px;
               margin-right: 5px;
             }
+
             .text3 {
               color: #999ba3;
               margin-left: 20px;
             }
           }
+
           .right {
             font-size: 14px;
             font-weight: 400;
@@ -654,28 +580,35 @@ export default {
           }
         }
       }
+
       .tableBox {
         .ant-table-selection-column {
           padding: 0px !important;
           // padding-left: 45px !important;
         }
+
         .ant-table-thead > tr > th {
           background-color: rgba(239, 244, 252, 1) !important;
         }
+
         .ant-table-selection-column {
           padding: 0 !important;
         }
+
         th.h {
           background-color: #eff4fc !important;
         }
+
         .head {
           padding-left: 0px !important;
         }
+
         .ant-table-tbody
           > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
           > td {
           background: #f6f9fd;
         }
+
         .pa {
           // left: 0;
           margin-top: 15px;
@@ -700,6 +633,7 @@ export default {
       align-items: center;
       justify-content: center;
       box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
+
       .btn1 {
         width: 100px;
         height: 40px;
@@ -709,6 +643,7 @@ export default {
         background-color: #fff;
         cursor: pointer;
       }
+
       .btn2 {
         cursor: pointer;
         width: 100px;

src/components/drawers/SubsetManage.vue

@@ -0,0 +1,211 @@
+<template>
+  <a-drawer
+    :visible="Svisible"
+    class="drawerStyle subset"
+    placement="right"
+    width="70%"
+    @after-visible-change="afterVisibleChange"
+  >
+    <div class="drawerMain">
+      <div class="header">
+        <div class="headerTitle">随机分组</div>
+        <img
+          style="width: 29px; height: 29px; cursor: pointer"
+          src="../../assets/images/basicinfo/close.png"
+          @click="closeDrawer"
+        />
+      </div>
+      <div class="main">
+        <div class="groupl">小组：</div>
+        <div>
+          <div class="groupin">         
+          <a-input
+                v-model:value="value"
+                placeholder="好好学习小组"
+                style="border-radius: 8px; height: 40px"
+          />
+          <div class="delete">删除</div>
+        </div>
+        <div class="groupin">          
+          <a-input
+                v-model:value="value"
+                placeholder="全能小组"
+                style="border-radius: 8px; height: 40px"
+          />
+          <div class="delete">删除</div>
+        </div>
+        <div class="groupin">
+
+          <a-input
+                v-model:value="value"
+                placeholder="宇宙第一最强小组"
+                style="border-radius: 8px; height: 40px"
+          />
+          <div class="delete">删除</div>
+        </div>
+        </div>
+        
+      </div>
+      <div class="addgroup">
+        <img src="../../assets/images/courseManage/add0.png"/>
+        <span class="grot">创建小组</span>
+      </div>
+      <div class="zhu">注：随机分组不对小组长生效</div>
+      <div class="btnn">
+        <button class="btn1">取消</button>
+        <button class="btn2">确定</button>
+      </div>
+    </div>
+  </a-drawer>
+</template>
+
+<script>
+import { reactive, toRefs } from "vue";
+export default {
+  name: "SubsetManage",
+  props: {
+    Svisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, ctx) {
+    const state = reactive({});
+    const closeDrawer = () => {
+      ctx.emit("update:Svisible", false);
+    };
+
+    const afterVisibleChange = (bool) => {
+      console.log("state", bool);
+    };
+
+    const showDrawer = () => {
+      state.Svisible = true;
+    };
+
+    return {
+      ...toRefs(state),
+      afterVisibleChange,
+      showDrawer,
+      closeDrawer,
+      // change,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss" >
+.subset {
+  .ant-drawer-content-wrapper {
+    // max-width: 1000px;
+    .ant-drawer-header {
+      display: none !important;
+    }
+    .ant-drawer-body {
+      padding: 0;
+    }
+  }
+  .drawerMain {
+    min-width: 600px;
+    margin: 0px 32px 0px 32px;
+    overflow-x: scroll;
+    display: flex;
+    flex-direction: column;
+    .header {
+      height: 73px;
+      border-bottom: 1px solid #e8e8e8;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      // background-color: red;
+      margin-bottom: 20px;
+      .headerTitle {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333333;
+        line-height: 25px;
+        // margin-left: 24px;
+      }
+    }
+    .main {
+      display: flex;
+      .groupin {
+        display: flex;
+        align-items: center;  
+        margin-top: 32px;
+        .ant-input {
+              border-radius: 5px;
+              // height: 120%;
+              width: 384px;
+              height: 40px;
+        }
+        .delete {
+          color: rgba(56, 125, 247, 1);
+          font-size: 14px;
+          margin-left: 10px;
+          cursor: pointer;
+        }     
+      }
+      .groupl {
+          color: rgba(0, 0, 0, 0.8500);
+          font-size: 16px;
+          margin-top: 36px;
+      }
+    }
+    .addgroup {
+        width: 130px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        //margin-right: 16px;
+        margin-top: 32px;
+        border: 1px solid #409eff;
+        border-radius: 8px;
+        background: #409eff;
+        cursor: pointer;
+        .grot {
+          color: #ffffff;
+          margin-left: 5px;
+          font-size: 14px;
+          
+        }
+      }
+    .zhu {
+      margin-top: 24px;
+      color: rgba(153, 153, 153, 1);
+      font-size: 14px;
+    }
+    .btnn {
+      height: 72px;
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
+      .btn1 {
+        width: 100px;
+        height: 40px;
+        border: 1px solid #4ea6ff;
+        border-radius: 8px;
+        color: #4ea6ff;
+        background-color: #fff;
+        cursor: pointer;
+      }
+      .btn2 {
+        cursor: pointer;
+        width: 100px;
+        height: 40px;
+        background: #4ea6ff;
+        border-radius: 8px;
+        border: 0;
+        margin-left: 15px;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>

src/components/drawers/WorkManage.vue

@@ -54,7 +54,11 @@
           </div>
         </div>
         <div class="btnss" style="margin-top: 20px">
-          <div class="btn btn1" style="margin-right: 20px">
+          <div
+            class="btn btn1"
+            style="margin-right: 20px; cursor: pointer"
+            @click="showModal"
+          >
             <div class="img1"></div>
             <div class="wz">导出数据</div>
           </div>
@@ -79,6 +83,13 @@
         <button class="btn1">取消</button>
         <button class="btn2">确定</button>
       </div>
+      <div class="modal">
+        <a-modal v-model:visible="visible" :closable="close" :footer="null">
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+        </a-modal>
+      </div>
     </div>
   </a-drawer>
 </template>
@@ -97,7 +108,8 @@ export default {
   setup(props, ctx) {
     const state = reactive({
       name: null,
-
+      visible: false, //导出数据弹窗
+      close: false, //导出弹窗的关闭按钮
       projectNameList: [
         {
           id: 1,
@@ -287,10 +299,18 @@ export default {
     const closeDrawer = () => {
       ctx.emit("update:Wvisible", false);
     };
+    const showModal = () => {
+      state.visible = true;
+    };
+    const closeModal = () => {
+      state.visible = false;
+    };
     return {
       ...toRefs(state),
       selectProjectName,
       closeDrawer,
+      showModal,
+      closeModal,
     };
   },
 };
@@ -310,6 +330,20 @@ export default {
 
 // }
 .WorkManage {
+  .modal {
+    .ant-modal {
+      width: 473px !important;
+      height: 308px !important;
+      .ant-modal-content {
+        width: 473px !important;
+        height: 308px !important;
+        .ant-modal-body {
+          width: 473px !important;
+          height: 308px !important;
+        }
+      }
+    }
+  }
   .drawerMain {
     min-width: 600px;
     margin: 0px 32px 0px 32px;

src/views/certificate/CertificateCenter.vue

@@ -27,7 +27,7 @@
         @ok="closeModal"
         :footer="null"
         :closable="false"
-        wrapClassName="modalStyle"
+        wrapClassName="modalStyle faceModal"
         width="80%"
       >
         <div class="modalHeader">
@@ -260,7 +260,7 @@ export default {
 .certificateCenter {
   width: 100%;
 }
-.modalStyle {
+.faceModal {
   .ant-modal {
     .modalHeader {
       display: flex;

src/views/projectcenter/TaskAdd.vue

@@ -402,7 +402,7 @@ const drawercolumns = [
   },
 ];
 export default {
-  name: "LevelAddDetail",
+  name: "TaskAdd",
   components: {
     AddOnline,
     EditOnline,

src/views/projectcenter/TaskPage.vue

@@ -75,11 +75,7 @@
               <div
                 class="taskbox"
                 style="
-                  background: linear-gradient(
-                    180deg,
-                    rgba(221, 234, 255, 1),
-                    rgba(240, 248, 254, 1)
-                  );
+                  background: linear-gradient(180deg,rgba(221, 234, 255, 1),rgba(240, 248, 254, 1));
                 "
               >
                 <div class="leftt">
@@ -100,11 +96,7 @@
                 class="taskbox"
                 @click="showModal"
                 style="
-                  background: linear-gradient(
-                    180deg,
-                    rgba(229, 246, 236, 1),
-                    rgba(238, 249, 243, 1)
-                  );
+                  background: linear-gradient( 180deg,rgba(229, 246, 236, 1),rgba(238, 249, 243, 1));
                 "
               >
                 <div class="leftt">
@@ -534,7 +526,7 @@
                   </div>
                 </div>
                 <div class="second2" style="margin-top: 20px">
-                  <div class="btn1" @click="showModal2">
+                  <div class="btn1">
                     <img src="../../assets/images/courseManage/add0.png" />
                     <span class="btn1text">添加学员</span>
                   </div>
@@ -561,7 +553,7 @@
                   </div>
                   <div class="clear">清空</div>
                 </div>
-                <div class="tab" style="margin: 20px 32px 0 32px">
+                <div class="tab" style="margin: 20px 32px 30px 32px">
                   <a-table
                     style="border: 1px solid #f2f6fe"
                     :columns="tablecolumns"
@@ -615,7 +607,7 @@
                     <img src="../../assets/images/courseManage/add0.png" />
                     <span class="btn1text">创建小组</span>
                   </div>
-                  <div class="btn2">
+                  <div class="btn2" @click="showSubset">
                     <img src="../../assets/images/courseManage/reset2.png" />
                     <span class="btn2text">随机分组</span>
                   </div>
@@ -816,7 +808,11 @@
         </a-tab-pane>
         <a-tab-pane key="4" tab="公告">Content of Tab Pane 3</a-tab-pane>
         <a-tab-pane key="5" tab="项目积分">Content of Tab Pane 3</a-tab-pane>
-        <a-tab-pane key="6" tab="排行榜">Content of Tab Pane 3</a-tab-pane>
+        <a-tab-pane key="6" tab="排行榜">
+					<div class="rankingList">
+						<div class="rankingListHeader"></div>
+					</div>
+				</a-tab-pane>
         <a-tab-pane key="7" tab="设置">Content of Tab Pane 3</a-tab-pane>
       </a-tabs>
     </div>
@@ -824,13 +820,15 @@
     <time-manage v-model:Tvisible="visible" />
     <!-- 面授管理抽屉 -->
     <face-manage v-model:Fvisible="FaceVisivle" />
+    <!-- 学员（小组管理）创建小组抽屉 -->
+    <subset-manage v-model:Svisible="subsetVisivle" />
     <!-- 面授学员抽屉 -->
     <face-stu v-model:FSvisible="FSvisible" />
     <!-- 活动考勤抽屉 -->
     <active-attendance v-model:AAvisible="AAvisible" />
     <!-- 作业管理抽屉 -->
     <work-manage v-model:Wvisible="Wvisible" />
-    <!-- 项目发布弹窗 -->
+    <!-- 概览（无数据）-项目发布弹窗 -->
     <div>
       <a-modal
         v-model:visible="pubproject"
@@ -850,11 +848,7 @@
             display: flex;
             align-items: center;
             justify-content: space-between;
-            background: linear-gradient(
-              0deg,
-              rgba(78, 166, 255, 0) 0%,
-              rgba(78, 166, 255, 0.2) 100%
-            );
+            background: linear-gradient(0deg,rgba(78, 166, 255, 0) 0%,rgba(78, 166, 255, 0.2) 100%);
           "
         >
           <div class="headerLeft" style="margin-left: 32px">
@@ -930,11 +924,7 @@
             display: flex;
             align-items: center;
             justify-content: space-between;
-            background: linear-gradient(
-              0deg,
-              rgba(78, 166, 255, 0) 0%,
-              rgba(78, 166, 255, 0.2) 100%
-            );
+            background: linear-gradient(0deg,rgba(78, 166, 255, 0) 0%, rgba(78, 166, 255, 0.2) 100% );
           "
         >
           <div class="headerLeft" style="margin-left: 32px">
@@ -967,7 +957,7 @@
           <div class="name">
             <div class="star" style="margin-top: -4px">
               <img
-                style="width: 10px; height: 10px"
+                style="width: 10px; height: 10px; margin-left: 15px"
                 src="../../assets/images/basicinfo/asterisk.png"
               />
             </div>
@@ -994,12 +984,20 @@
 import { reactive, toRefs } from "vue";
 import TimeManage from "../../components/drawers/TimeManage";
 import FaceManage from "../../components/drawers/FaceManage";
-import FaceStu from "../../components/drawers/FaceStu";
+import SubsetManage from "../../components/drawers/SubsetManage";
 import ActiveAttendance from "../../components/drawers/ActiveAttendance";
 import WorkManage from "../../components/drawers/WorkManage.vue";
+import FaceStu from "../../components/drawers/FaceStu";
 export default {
   name: "taskPage",
-  components: { TimeManage, FaceManage, FaceStu, ActiveAttendance, WorkManage },
+  components: {
+    TimeManage,
+    FaceManage,
+    SubsetManage,
+    FaceStu,
+    ActiveAttendance,
+    WorkManage,
+  },
   setup() {
     const state = reactive({
       goodstuList: [
@@ -1039,7 +1037,7 @@ export default {
           group: "天天向上",
           progress: "5/20",
           diploma: "0",
-          stutime: "2022-10-31 23:12:00",
+          stutime: "2022-10-21 23:12:00",
           putin: "手动加入",
         },
         {
@@ -1050,7 +1048,7 @@ export default {
           group: "好好学习",
           progress: "5/20",
           diploma: "0",
-          stutime: "2022-10-31 23:12:00",
+          stutime: "2022-10-11 23:12:00",
           putin: "手动加入",
         },
         {
@@ -1121,6 +1119,10 @@ export default {
           width: 50,
           align: "center",
           className: "h",
+          sorter: {
+            compare: (a, b) => a.stutime - b.stutime,
+            multiple: 3,
+          },
         },
         {
           title: "加入方式",
@@ -1141,6 +1143,7 @@ export default {
       ],
       visible: false, //时间管理
       FaceVisivle: false, //面授管理
+      subsetVisivle: false, //随机小组
       FSvisible: false, //面授学员
       AAvisible: false, //活动考勤
       Wvisible: false, //作业管理
@@ -1175,6 +1178,11 @@ export default {
       // console.log("点击管理");
       state.FaceVisivle = true;
     };
+    const showSubset = () => {
+      //面授管理的抽屉
+      // console.log("点击管理");
+      state.subsetVisivle = true;
+    };
     //面授学员的弹窗
     const showFS = () => {
       state.FSvisible = true;
@@ -1195,6 +1203,7 @@ export default {
       closeModal2,
       showTime,
       showFace,
+      showSubset,
       showFS,
       showAA,
       showWork,
@@ -1202,7 +1211,7 @@ export default {
   },
 };
 </script>
-  <style lang="scss">
+<style lang="scss">
 .pubproject {
   .ant-modal {
     .ant-modal-body {
@@ -1846,9 +1855,9 @@ export default {
         //height: 71px;
         margin-left: 12px;
         margin-right: 50px;
-        // .icon {
-        //   //position: absolute;
-        // }
+        .icon {
+          //position: absolute;
+        }
         .iconame {
           //position: absolute;
           color: #4f5156;