update

src/components/list.vue

@@ -1,5 +1,9 @@
 <template>
   <div>
+    <!-- 头部区域 -->
+    <div class="title_examine">
+      <p style="font-size: 30px;font-weight: 400;float: left;margin-left: 30px;padding-top: 20px">账号列表</p>
+    </div>
     <!-- 学习名称组织名称表单区域 -->
     <div v-if="isOrgFormVisible" class="table">
       <!-- 头部区域 -->
@@ -89,87 +93,81 @@
         </el-form>
       </div>
     </div>
-  <!-- 按钮区域 -->
-  <div class="button_top">
-    <!-- "启用中"按钮 -->
-    <a @click="showopen" :style="{ color: open ? 'black' : 'rgb(179, 179, 179)' }">启用中({{ tableData.length }})</a>
-    <!-- "已停用"按钮 -->
-    <a @click="showstop" :style="{ color: stop ? 'black' : 'rgb(179, 179, 179)' }">已停用({{ tableData_stop.length }})</a>
-  </div>
-
-  <!-- 启用中区域 -->
-  <div class="content" v-if="open_content">
-    <el-table :data="paginatedData" border style="width: 70%; margin-top: 90px; margin-left: 80px;">
-      <el-table-column show-overflow-tooltip prop="company_name" label="组织名称" width="200" />
-      <el-table-column show-overflow-tooltip prop="company_number" label="组织编号" width="200" />
-      <el-table-column show-overflow-tooltip prop="name" label="姓名" width="200" />
-      <el-table-column show-overflow-tooltip prop="account" label="账户" width="250" />
-      <el-table-column fixed="right" label="操作" width="250">
-        <template slot-scope="{ row }">
-          <el-button link type="text" size="small" @click="ajax__open_stop(row.userid)">停用</el-button>
-          <el-button link type="text" size="small" @click="run()">移动</el-button>
-          <el-button
-            link
-            type="text"
-            size="small"
-            @click="ajax_admin(row.userid, row.role, row.type)"
-          >
-            {{ row.role === 1 ? '已设置管理员' : '设置管理员' }}
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-
-    <!-- 分页区域 -->
-    <div class="Pagetion" v-if="up_page">
-      <el-pagination
-        :current-page="currentPage"
-        :page-size="pageSize"
-        :page-sizes="pageSizeOptions"
-        :total="tableData.length"
-        layout="total, sizes, prev, pager, next, jumper"
-        @size-change="handlePageSizeChange"
-        @current-change="handlePageChange">
-      </el-pagination>
+    <!-- 内容区域 -->
+    <div class="content">
+      <!-- 按钮区域 -->
+      <div class="button_top">
+        <!-- "启用中"按钮 -->
+        <a @click="showopen" :style="{ color: open ? 'black' : 'rgb(179, 179, 179)' }">启用中({{ tableData.length }})</a>
+        <!-- "已停用"按钮 -->
+        <a @click="showstop" :style="{ color: stop ? 'black' : 'rgb(179, 179, 179)' }">已停用({{ tableData_stop.length }})</a>
+      </div>
+      <!-- 启用中区域 -->
+      <div v-if="open_content" style="margin-top: -80px;">
+        <el-table :data="paginatedData" border style="width: 94%; margin-top: 90px; margin-left: 80px;" stripe>
+        <el-table-column show-overflow-tooltip prop="company_name" label="组织名称" width="350" header-align="center" align="center" />
+        <el-table-column show-overflow-tooltip prop="company_number" label="组织编号" width="350" header-align="center" align="center" />
+        <el-table-column show-overflow-tooltip prop="name" label="姓名" width="350" header-align="center" align="center" />
+        <el-table-column show-overflow-tooltip prop="account" label="账户" width="350" header-align="center" align="center" />
+        <el-table-column fixed="right" label="操作" width="250" header-align="center">
+          <template slot-scope="{ row }">
+            <el-button link type="text" size="small" @click="ajax__open_stop(row.userid)">停用</el-button>
+            <el-button link type="text" size="small" @click="run()">移动</el-button>
+            <el-button
+              link
+              type="text"
+              size="small"
+              @click="ajax_admin(row.userid, row.role, row.type)"
+            >
+              {{ row.role === 1 ? '已设置管理员' : '设置管理员' }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+        <!-- 分页区域 -->
+        <div class="Pagetion" v-if="up_page">
+          <el-pagination
+            :current-page="currentPage"
+            :page-size="pageSize"
+            :total="tableData.length"
+            layout="total, prev, pager, next, jumper"
+            @size-change="handlePageSizeChange"
+            @current-change="handlePageChange">
+          </el-pagination>
+        </div>
+      </div>
+      <!-- 已停用区域 -->
+      <div v-if="stop_content" style="margin-top: -80px;">
+        <el-table :data="down_paginatedData" border style="width: 94%; margin-top: 90px; margin-left: 80px;" header-align="center" align="center">
+          <el-table-column show-overflow-tooltip prop="company_name" label="组织名称" width="350" header-align="center" align="center"/>
+          <el-table-column show-overflow-tooltip prop="company_number" label="组织编号" width="350" header-align="center" align="center"/>
+          <el-table-column show-overflow-tooltip prop="name" label="姓名" width="350" header-align="center" align="center"/>
+          <el-table-column show-overflow-tooltip prop="account" label="账户" width="350" header-align="center" align="center"/>
+          <el-table-column fixed="right" label="操作" width="250" header-align="center" align="center">
+            <template slot-scope="{ row }">
+              <el-button link type="text" size="small" @click="ajax__open_stop(row.userid)">启用</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页区域 -->
+        <div class="Pagetion" v-if="down_page">
+          <el-pagination
+            :current-page="down_currentPage"
+            :page-size="down_pageSize"
+            :total="tableData_stop.length"
+            layout="total, prev, pager, next, jumper"
+            @size-change="down_handlePageSizeChange"
+            @current-change="down_handlePageChange">
+          </el-pagination>
+        </div>
+      </div>
+      <!-- 新增按钮 -->
+      <button class="add-button" @click="nextStep()" v-if="add_button">
+        <span class="add-icon">+</span>
+        新增账户
+      </button>
     </div>
-    
-    <!-- 新增按钮 -->
-    <button class="add-button" @click="nextStep()" v-if="add_button">
-      <span class="add-icon">+</span>
-      新增账户
-    </button>
-  <!-- <button class="add-button" @click="ajaxT" v-if="add_button">
-    <span class="add-icon">+</span>
-    查询
-  </button> -->
-  <!-- 已停用区域 -->
-  <div class="content" v-if="stop_content">
-    <el-table :data="down_paginatedData" border style="width: 70%; margin-top: 90px; margin-left: 80px;">
-      <el-table-column show-overflow-tooltip prop="company_name" label="组织名称" width="200" />
-      <el-table-column show-overflow-tooltip prop="company_number" label="组织编号" width="200" />
-      <el-table-column show-overflow-tooltip prop="name" label="姓名" width="200" />
-      <el-table-column show-overflow-tooltip prop="account" label="账户" width="300" />
-      <el-table-column fixed="right" label="操作" min-width="120">
-        <template slot-scope="{ row }">
-          <el-button link type="text" size="small" @click="ajax__open_stop(row.userid)">启用</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
   </div>
-  <!-- 分页区域 -->
-  <div class="Pagetion" v-if="down_page">
-    <el-pagination
-      :current-page="down_currentPage"
-      :page-size="down_pageSize"
-      :page-sizes="down_pageSizeOptions"
-      :total="tableData_stop.length"
-      layout="total, sizes, prev, pager, next, jumper"
-      @size-change="down_handlePageSizeChange"
-      @current-change="down_handlePageChange">
-    </el-pagination>
-  </div>
-</div>
 </template>
 
 <script>
@@ -199,11 +197,9 @@ export default {
       // 启用区域分页
       currentPage: 1, // 当前第几页
       pageSize: 5, // 每页显示的条目数
-      pageSizeOptions: [5, 10, 25, 50], // 可选的页大小
       // 停止区域分页
       down_currentPage: 1, // 当前第几页
       down_pageSize: 5, // 每页显示的条目数
-      down_pageSizeOptions: [5, 10, 25, 50], // 可选的页大小
       // 两个分页初始化状态
       up_page: true,
       down_page: false,
@@ -496,25 +492,37 @@ export default {
 body{
   margin: 0px;
   padding: 0px;
+  
+}
+/* 账户列表标题样式 */
+.title_examine{
+ width: 100%;
+ height: 100px;
+ background-color: #fff;
+ border-radius: 10px 10px 10px 10px;
+ margin-top: 30px;
+ margin-left: 30px;
 }
 /* 内容区域 */
 .content{
-  width: 1600px;
+  width: 1760px;
   height: auto;
   /* border: 1px solid red; */
-  margin-top: -80px;
+  float: left;
+  margin-left: -50px;
 }
 /* 按钮区域 */
 .button_top{
   width: 450px;
   /* border: 1px solid red; */
-  height: 60px;
-  margin-left: 120px;
-  margin-top: 30px;
-  letter-spacing: 2px; /* 设置字母间距为 2 像素 */
+  height: 40px;
+  margin-left: 90px;
+  margin-top: 20px;
+  letter-spacing: 2px;
 }
 .button_top a{
   cursor: pointer;
+  /* border: 1px solid red; */
 }
 .button_top a:first-child{
   font-size: 15px;
@@ -547,16 +555,16 @@ body{
     margin-left: 25px;
 }
 .add-button {
-  display: flex; /* 使用 Flexbox 使内容水平排列 */
-  align-items: center; /* 垂直居中 */
-  background-color: transparent; /* 按钮背景透明 */
-  border: none; /* 去掉按钮边框 */
-  cursor: pointer; /* 鼠标悬停时显示为手型 */
-  font-size: 18px; /* 设置字体大小 */
+  display: flex;
+  align-items: center;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 18px;
   color: black;
   font-weight: bold;
-  margin-left: -790px;
-  margin-top: 33px;
+  margin-left: -1250px;
+  margin-top: 35px;
   float: left;
 }
 
@@ -583,6 +591,7 @@ body{
   height: 660px;
   border: 1px solid rgb(225, 225, 225);
   background-color: rgb(255, 255, 255);
+  border: 1px solid black;
 }
 /* 头部区域 */
 .table_top{
@@ -601,6 +610,10 @@ body{
   padding-right: 95px;
   color: #0076fe;
 }
+/* 自定义斑马线的背景色 */
+.el-table .success-row {
+  background-color: #f0f9eb;
+}
 /* X号推出弹窗按钮 */
 .table_close{
   color: #999;
@@ -809,8 +822,9 @@ input[type="checkbox"]:hover {
   width: auto;
   height: 60px;
   margin-top: 30px;
-  margin-left: 200px;
+  margin-left: 460px;
   float: left;
+  /* border: 1px solid red; */
 }
 /* 分页页数间隔 */
 /* 设置分页按钮的宽度 */
@@ -818,15 +832,15 @@ input[type="checkbox"]:hover {
 .el-pagination .el-pagination__next {
   width: 60px; /* 设置上一页和下一页按钮的宽度 */
 }
-
-/* 设置页码按钮的宽度 */
-.el-pagination .el-pager li {
-  width: 50px; /* 设置每个页码按钮的宽度 */
-}
-
-/* 设置分页大小选择框的宽度 */
-.el-pagination .el-select {
-  width: 100px; /* 设置分页大小选择框的宽度 */
+.el-pager li {
+  padding: 0px 35px;
+  background: #FFF;
+  font-size: 13px;
+  min-width: 35.5px;
+  height: 28px;
+  line-height: 30px;
+  box-sizing: border-box;
+  text-align: center;
 }
 /* 新增账号弹窗 */
 .add_account{

src/views/HomeView.vue

@@ -97,7 +97,7 @@ body {
 }
 .table-container {
   flex-grow: 1; /* 使表格容器填满剩余空间 */
-  overflow: auto; /* 如果内容超出，添加滚动条 */
+  overflow: hidden;
 }
 .left{
   width: 150px;