style:学员导入的图片,添加学员的按钮距离

src/components/drawers/ImportStu.vue

@@ -33,7 +33,7 @@
                 <!-- 导入学员上传 -->
                 <!-- 导入学员上传（有状态）-正在上传 -->
                 <div class="alreadybox">
-                    <div class="alimg"></div>
+                    <div class="alimg"><img src="../../assets/images/studentimg/xls.png"/></div>
                     <div class="upproject">京东方商业模型.xls</div>
                     <div class="uping">正在上传</div>
                     <div class="progress">
@@ -48,7 +48,7 @@
                 <div class="uploadstate">上传失败</div>
                 <!-- 导入学员上传（有状态）-上传失败 -->
                 <div class="alreadybox">
-                    <div class="alimg"></div>
+                    <div class="alimg"><img src="../../assets/images/studentimg/xls.png"/></div>
                     <div class="upproject">京东方商业模型.xls</div>
                     <div class="uping" style="color: #FF7474">上传失败</div>
                     <div class="progress">
@@ -64,7 +64,7 @@
                 <div class="uploadstate" style="margin-top: 74px">上传成功</div>
                 <!-- 导入学员上传（有状态）-上传成功 -->
                 <div class="alreadybox">
-                    <div class="alimg"></div>
+                    <div class="alimg"><img src="../../assets/images/studentimg/xls.png"/></div>
                     <div class="upproject">京东方商业模型.xls</div>
                     <div class="uping" style="color: #35AE69">上传成功</div>
                     <div class="progress">
@@ -221,12 +221,12 @@ export default {
                 cursor: pointer;
             }
             .alimg {
-                width: 28px;
+                width: 32px;
-                height: 32px;
+                height: 34px;
                 position: absolute;
                 top: 66px;
                 left: 24px;
-                background: green;
+                //background: green;
             }
             .upproject {
                 position: absolute;

src/components/drawers/StuAdd.vue

@@ -98,7 +98,7 @@
                     <div class="namee">受众名称：</div>
                     <a-select
                         v-model:value="value"
-                        style="width: 264px; border-radius: 8px"
+                        style="width: 264px;border-radius: 8px"
                         placeholder="请输入组织名称"
                         :options="organizeList1"
                     />
@@ -168,12 +168,30 @@
             </div>
           </div>
           <div class="selecteds">
-            <div class="chose">李明</div>
+            <div class="chose">
-            <div class="chose">李大明</div>
+              李明
-            <div class="chose">李二明</div>
+              <div class="ch"></div>
-            <div class="chose">李明</div>
+            </div>
-            <div class="chose">李大明</div>
+            <div class="chose">
-            <div class="chose">李二明</div>
+              李大明
+              <div class="ch"></div>
+            </div>
+            <div class="chose">
+              李二明
+              <div class="ch"></div>
+            </div>
+            <div class="chose">
+              李明
+              <div class="ch"></div>
+            </div>
+            <div class="chose">
+              李大明
+              <div class="ch"></div>
+            </div>
+            <div class="chose">
+              李二明
+              <div class="ch"></div>
+            </div>
           </div>
         </div>
       </div>
@@ -448,20 +466,17 @@ export default {
 };
 </script>
 
-<style scoped lang="scss" >
+<style lang="scss" >
 .stuadd {
-  .ant-pagination-options {
+  // .ant-drawer-content-wrapper {
-    margin-top: 10px !important;
+  //   // max-width: 1000px;
-   }
+  //   .ant-drawer-header {
-  .ant-drawer-content-wrapper {
+  //     display: none !important;
-    // max-width: 1000px;
+  //   }
-    .ant-drawer-header {
+  //   .ant-drawer-body {
-      display: none !important;
+  //     padding: 0;
-    }
+  //   }
-    .ant-drawer-body {
+  // }
-      padding: 0;
-    }
-  }
   .drawerMain {
     min-width: 600px;
     margin: 0px 32px 0px 32px;
@@ -485,225 +500,281 @@ export default {
       }
     }
     .main {
-        display: flex;
+      display: flex;
-        height: 80%;
+      height: 80%;
-        .left {
+      .left {
-          width: 65%;
+        // overflow-y: auto;
-          height: 100%;
+        width: 65%;
-          border-right: 1px solid rgba(233, 233, 233, 1);
+        height: 100%;
-          .tabs {
+        border-right: 1px solid rgba(233, 233, 233, 1);
-            margin-right: 33px;
+        .tabs {
-            .tab1 {
+          margin-right: 33px;
-              display: flex;
+          .tab1 {
-              flex-wrap: wrap;
-              justify-content: space-between;
-              .nameinp {
-                display: flex;
-                align-items: center;
-                margin-top: 10px;
-                .namee {
-                  color: rgba(0, 0, 0, 0.8500);
-                  font-size: 14px;
-                }
-              }
-              .btns {
-                display: flex;
-                margin-top: 10px;
-                .btn1 {
-                  width: 100px;
-                  height: 40px;
-                  margin-right: 16px;
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-                  color: #FFFFFF;
-                  font-size: 14px;
-                  background: #409EFF;
-                  border-radius: 8px;
-                  border: 1px solid #409EFF;
-                  cursor: pointer;
-                  .wz {
-                    margin-left: 10px;
-                  }
-                }
-                .btn2 {
-                  width: 100px;
-                  height: 40px;
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-                  color: #409EFF;
-                  font-size: 14px;
-                  background: #FFFFFF;
-                  border-radius: 8px;
-                  cursor: pointer;
-                  border: 1px solid #409EFF;
-                  .wz {
-                    margin-left: 10px;
-                  }
-                }
-              }
-            }
-            .line {
-              width: 100%;
-              height: 40px;
-              background-color: #e9f6fe;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              margin-top: 20px;
-              border: 1px solid #c3e6fc;
-
-              .inline {
-                width: 95%;
-                height: 100%;
-                display: flex;
-                justify-content: space-between;
-
-                // background-color: #bfa;
-                .left1 {
-                  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;
-                  }
-                }
-
-                .right1 {
-                  font-size: 14px;
-                  font-weight: 400;
-                  color: #387df7;
-                  height: 100%;
-                  display: flex;
-                  align-items: center;
-                  cursor: pointer;
-                }
-              }
-            }
-            .tabb {
-              .ant-table-thead > tr > th {
-                background-color: rgba(240, 246, 252, 1);
-                color: rgba(0, 0, 0, 0.85);
-              }
-              .ant-table-tbody > tr > td {
-                border-bottom: 1px solid #f0f6fc;
-                color: rgba(0, 0, 0, 0.65);
-              }
-              th.h {
-                background-color: #eff4fc !important;
-              }
-
-              .ant-table-tbody
-                > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
-                > td {
-                background: rgba(250, 250, 250, 1);
-              }
-              .pa {
-                // left: 0;
-                margin-top: 15px;
-                width: 100%;
-                // height: 20px;
-                // background-color: red;
-                display: flex;
-                justify-content: center;
-                // position: absolute;
-                // bottom: 20px;
-              }
-            }
-            .tab2 {
-              display: flex;
-              align-items: center;
-              .organize {
-                color: rgba(0, 0, 0, 0.8500);
-                font-size: 14px;
-              }
-              .ant-cascader {
-                width: 264px;
-                height: 40px;
-                border-radius: 8px;
-                .ant-select-selector{
-                  height: 100%;
-                }
-                .ant-select-selection-search-input {
-                  height: 40px;
-                }
-              }
-            }
-          }
-        }
-        .right {
-          width: 35%;
-          .onerow {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            .already {
-              color: rgba(51, 51, 51, 1);
-              font-size: 16px;
-              font-weight: 500;
-              margin-left: 32px;
-            }
-            .clbox {
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              cursor: pointer;
-              width: 104px;
-              height: 32px;
-              border-radius: 4px;
-              background: #409EFF;
-              .colose {
-                width: 16px;
-                height: 16px;
-                border-radius: 8px;
-                background: #FFFFFF;
-                position: relative;
-              }
-              .allclear {
-                color: rgba(255, 255, 255, 1);
-                font-size: 14px;
-              }
-            }
-          }
-          .selecteds {
             display: flex;
             flex-wrap: wrap;
-            margin-left: 32px;
+            justify-content: space-between;
-            .chose {
+            .nameinp {
-              width: 64px;
-              height: 24px;
-              margin-top: 25px;
-              margin-right: 25px;
               display: flex;
               align-items: center;
+              margin-top: 10px;
+              .namee {
+                color: rgba(0, 0, 0, 0.85);
+                font-size: 14px;
+              }
+              .ant-select {
+                height: 40px;
+              }
+              .ant-select-selector {
+                height: 100%;
+                border-radius: 8px;
+              }
+              .ant-select-selection-search-input {
+                height: 40px;
+              }
+            }
+            .btns {
+              display: flex;
+              margin-top: 10px;
+              .btn1 {
+                width: 100px;
+                height: 40px;
+                margin-right: 16px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: #ffffff;
+                font-size: 14px;
+                background: #409eff;
+                border-radius: 8px;
+                border: 1px solid #409eff;
+                cursor: pointer;
+                .wz {
+                  margin-left: 10px;
+                }
+              }
+              .btn2 {
+                width: 100px;
+                height: 40px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: #409eff;
+                font-size: 14px;
+                background: #ffffff;
+                border-radius: 8px;
+                cursor: pointer;
+                border: 1px solid #409eff;
+                .wz {
+                  margin-left: 10px;
+                }
+              }
+            }
+          }
+          .line {
+            width: 100%;
+            height: 40px;
+            background-color: #e9f6fe;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-top: 20px;
+            border: 1px solid #c3e6fc;
+
+            .inline {
+              width: 95%;
+              height: 100%;
+              display: flex;
+              justify-content: space-between;
+
+              // background-color: #bfa;
+              .left1 {
+                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;
+                }
+              }
+
+              .right1 {
+                font-size: 14px;
+                font-weight: 400;
+                color: #387df7;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+              }
+            }
+          }
+          .tabb {
+            .ant-table-thead > tr > th {
+              background-color: rgba(240, 246, 252, 1);
+              color: rgba(0, 0, 0, 0.85);
+            }
+            .ant-table-tbody > tr > td {
+              border-bottom: 1px solid #f0f6fc;
+              color: rgba(0, 0, 0, 0.65);
+            }
+            th.h {
+              background-color: #eff4fc !important;
+            }
+
+            .ant-table-tbody
+              > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+              > td {
+              background: rgba(250, 250, 250, 1);
+            }
+            .ant-table-selection-column {
+              padding: 0 !important;
+            }
+            // table tr td.ant-table-selection-column {
+            //   text-align: right;
+            // }
+            // .ant-checkbox-wrapper {
+            //   align-items: center;
+            //   margin-top: -2px;
+            // }
+            .pa {
+              // left: 0;
+              margin-top: 5px;
+              width: 100%;
+              // height: 20px;
+              // background-color: red;
+              display: flex;
               justify-content: center;
-              border-radius: 2px;
+              // position: absolute;
-              border: 1px solid rgba(56, 139, 225, 1);
+              // bottom: 20px;
-              color: rgba(56, 139, 225, 1);
+              .ant-pagination-prev {
-              font-size: 12px;
+                margin-top: 10px;
+              }
+              .ant-pagination-next {
+                margin-top: 10px;
+              }
+              .ant-pagination-item {
+                margin-top: 10px;
+              }
+              .ant-pagination-options {
+                margin-top: 10px;
+              }
+            }
+          }
+          .tab2 {
+            display: flex;
+            align-items: center;
+            margin-top: 10px;
+            .organize {
+              color: rgba(0, 0, 0, 0.85);
+              font-size: 14px;
+            }
+            .ant-select {
+              border-radius: 8px !important;
+            }
+            .ant-cascader {
+              width: 264px;
+              height: 40px;
+              border-radius: 8px !important;
+              .ant-select-selector {
+                height: 100%;
+                border-radius: 8px;
+              }
+              .ant-select-selection-search-input {
+                height: 40px;
+              }
             }
           }
         }
+      }
+      .right {
+        width: 35%;
+        .onerow {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-right: 40px;
+          flex-wrap: wrap;
+          .already {
+            color: rgba(51, 51, 51, 1);
+            font-size: 16px;
+            font-weight: 500;
+            margin-left: 32px;
+            white-space: nowrap;
+            // margin-bottom: 20px;
+          }
+          .clbox {
+            margin-left: 30px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            width: 104px;
+            height: 32px;
+            border-radius: 4px;
+            background: #409eff;
+            .colose {
+              width: 18px;
+              height: 18px;
+              // border-radius: 8px;
+              // background: #ffffff;
+              // position: relative;
+              background-image: url(../../assets/images/basicinfo/ch.png);
+              background-size: 100%;
+              margin-right: 4px;
+            }
+            .allclear {
+              color: rgba(255, 255, 255, 1);
+              font-size: 14px;
+            }
+          }
+        }
+        .selecteds {
+          display: flex;
+          flex-wrap: wrap;
+          margin-left: 32px;
+          .chose {
+            width: 64px;
+            height: 24px;
+            margin-top: 25px;
+            margin-right: 25px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 2px;
+            border: 1px solid rgba(56, 139, 225, 1);
+            color: rgba(56, 139, 225, 1);
+            font-size: 12px;
+            position: relative;
+            .ch {
+              position: absolute;
+              width: 18px;
+              height: 18px;
+              background-image: url(../../assets/images/basicinfo/ch.png);
+              right: -8px;
+              top: -8px;
+              cursor: pointer;
+            }
+          }
+        }
+      }
     }
     .btnn {
       height: 72px;