17号，list页面样式更改第一次

src/components/list.vue

@@ -33,28 +33,40 @@
     </div>
     <!-- 姓名与账户名称 -->
     <div v-if="isTableUseVisible"  class="add_account">
-      <el-form ref="form" :model="form" label-width="80px">
-      <el-form-item label="活动名称">
-        <el-input v-model="form.name"  placeholder="请输入姓名"></el-input>
-      </el-form-item>
-      <el-form-item label="教师账号">
-        <el-radio-group v-model="form.resource">
-          <el-radio label="管理员"></el-radio>
-          <el-radio label="普通教师"></el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="所属学校">
-        <el-select v-model="form.region" placeholder="请选择学校">
-          <el-option label="学校1" value="shanghai"></el-option>
-          <el-option label="学校2" value="beijing"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">确认</el-button>
-        <el-button>取消</el-button>
-      </el-form-item>
-    </el-form>
-  </div>
+      <div class="el-dialog__header">
+        <span class="el-dialog__title">添加账户</span>
+        <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="form_clost" >
+          <i class="el-dialog__close el-icon el-icon-close"></i>
+        </button>
+      </div>
+      <!-- 内容区域 -->
+      <div class="el-dialog__body">
+        <el-form ref="form" :model="form" label-width="80px">
+          <el-form-item label="活动名称">
+            <el-input v-model="form.name"  placeholder="请输入姓名" class="form_input"></el-input>
+          </el-form-item>
+          <el-form-item label="账户名称">
+            <el-input v-model="form.account" type="text"  placeholder="请输入账户名称" class="form_input"></el-input>
+          </el-form-item>
+          <el-form-item label="所属组织">
+            <el-select v-model="form.organization" placeholder="请选择组织">
+              <el-option label="组织1"></el-option>
+              <el-option label="组织2"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="所属学校">
+            <el-select v-model="form.school" placeholder="请选择学校">
+              <el-option label="学校1"></el-option>
+              <el-option label="学校2"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item class="form_tool">
+            <el-button type="primary">确认</el-button>
+            <el-button>取消</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
   <!-- 按钮区域 -->
   <div class="button_top">
     <!-- "启用中"按钮 -->
@@ -180,13 +192,9 @@ export default {
       tableData_stop: [],
       form: {
           name: '',
-          region: '',
-          date1: '',
-          date2: '',
-          delivery: false,
-          type: [],
-          resource: '',
-          desc: ''
+          account: '',
+          organization: '',
+          school: ''
         },
     };
   },
@@ -209,11 +217,14 @@ export default {
       this.isOrgFormVisible = true;
       this.isTableUseVisible = false;
     },
-    // 下一步，切换到表格区域
+    // 新增账户
     nextStep() {
-      this.isOrgFormVisible = false;
       this.isTableUseVisible = true;
     },
+    //新增账户关闭
+    form_clost(){
+      this.isTableUseVisible = false;
+    },
     // 关闭按钮
     close_table() {
       this.isOrgFormVisible = false;
@@ -239,7 +250,6 @@ export default {
       this.up_page = false;
       this.down_page = true;
     },
-    
     // 页码扩展按钮
     handlePageChange(page) {
       this.currentPage = page;
@@ -519,8 +529,8 @@ body{
   font-size: 18px; /* 设置字体大小 */
   color: black;
   font-weight: bold;
-  margin-left: -890px;
-  margin-top: 80px;
+  margin-left: -790px;
+  margin-top: 33px;
   float: left;
 }
 
@@ -595,7 +605,7 @@ body{
   background-color: black; /* 下划线颜色 */
   position: absolute; /* 绝对定位 */
   bottom: 0; /* 距离底部 */
-  left: 5%; /* 调整下划线的水平位置，设置为10% */
+  left: 25%; /* 调整下划线的水平位置，设置为10% */
 }
 .el-checkbox span{
   margin-left: 40px;
@@ -609,36 +619,22 @@ body{
   height: 400px;
   width: 350px;
 }
-.checkbox-right {
-  align-items: center; /* 垂直居中 */
-}
-/* 调整复选框中的勾号大小 */
-.el-checkbox__inner:after {
-    border: 1px solid transparent;
-    border-left: 0;
-    border-top: 0;
-    box-sizing: content-box;
-    content: "";
-    height: 10px;
-    left: 6px;
-    position: absolute;
-    top: 1px;
-    transform: rotate(45deg) scaleY(0);
-    transform-origin: center;
-    transition: transform .15s ease-in .05s;
-    width: 3px;
-}
-/* 控制复选框勾选状态的大小 */
-.checkbox-left .el-checkbox__inner {
-  border: 1px solid black;
-  width: 18px;
-  height: 18px;
-}
-/* 控制复选框勾选状态的大小 */
-.com_check .el-checkbox__inner {
-  border: 1px solid black;
-  width: 18px;
-  height: 18px;
+/* 使用 ::v-deep 选择el-checkbox__inner */
+::v-deep.el-checkbox__inner {
+  display: inline-block !important;
+  position: relative !important;
+  border: 1px solid #DCDFE6 !important;
+  border-radius: 2px !important;
+  box-sizing: border-box !important;
+  width: 20px !important;
+  height: 20px !important;
+  background-color: #FFF !important;
+  z-index: 1 !important;
+  transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46), background-color .25s cubic-bezier(.71,-.46,.29,1.46) !important;
+}
+.el-checkbox__input{
+  width: 20px;
+  height: 20px;
 }
 /* 批量创建按钮 */
 .Add_use{
@@ -738,7 +734,6 @@ body{
 /* 新增账号弹窗 */
 .add_account{
   position: absolute; /* 设置为绝对定位 */
-  top: 55%; /* 垂直居中 */
   left: 50%; /* 水平居中 */
   transform: translate(-50%, -50%); /* 使其真正居中 */
   z-index: 10; /* 设置层次更高 */
@@ -746,5 +741,59 @@ body{
   height: auto;
   border: 1px solid rgb(225, 225, 225);
   background-color: rgb(255, 255, 255);
+  margin-top: 35vh;
+}
+/* 操作字体 */
+.el-button--text {
+  border-color: transparent;
+  color: #0076fe;
+  background: 0 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+/* 添加账户头顶 */
+.el-dialog__header{
+  padding: 20px 20px 10px;
+  text-align: center;
+  background: #454545;
+}
+.el-dialog__title{
+  font-size: 14px !important;
+  color: #fff !important;
+}
+/* 取消按钮样式 */
+.el-dialog__headerbtn{
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  padding: 0;
+  background: 0 0;
+  border: none;
+  outline: 0;
+  cursor: pointer;
+  font-size: 16px;
+}
+/* 输入框 */
+.form_input{
+  width: 400px;
+}
+.el-form {
+  /* 清除浮动 */
+  overflow: auto;
+  float: left;
+  margin-left: 66px;
+}
+.el-form-item{
+  float: left;
+}
+/* 确认跟取消区域 */
+.form_tool{
+  margin-top: 20px;
+  float: left;
+  margin-left: 90px;
+}
+/* 按钮样式 */
+.form_tool .el-button{
+  width: 100px;
 }
 </style>