更改

src/components/list.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- 背景层，覆盖整个页面 -->
   <div>
     <!-- 头部区域 -->
     <div class="title_examine">
@@ -8,52 +9,134 @@
     <div v-if="isOrgFormVisible" class="table">
       <!-- 头部区域 -->
        <div class="table_top">
-        <div class="organzition_top">CN组织</div>
-        <div class="organzition_top">HK组织</div>
-        <div class="organzition_top">COM组织</div>
+        <div class="organzition_top" @click="cn_orgization"  :style="{ color: cn_org ? '#0076fe' : 'black' }">CN组织</div>
+        <div class="organzition_top" @click="hk_orgization" :style="{ color: hk_org ? '#0076fe' : 'black' }">HK组织</div>
+        <div class="organzition_top" @click="com_orgization" :style="{ color: com_org ? '#0076fe' : 'black' }">COM组织</div>
        </div>
       <div class="input-container">
         <input type="text" placeholder="搜索组织" class="table_find" />
         <i class="el-icon-search"></i>
       </div>
       <a @click="close_table" class="table_close">X</a>
-      <div class="checkbox-container">
-        <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
-        <input type="checkbox" class="checkbox_input">
-        <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
-        <input type="checkbox" class="checkbox_input">
-        <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
-        <input type="checkbox" class="checkbox_input">
-        <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
-        <input type="checkbox" class="checkbox_input">
-        <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
-        <input type="checkbox" class="checkbox_input">
-        <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
-        <input type="checkbox" class="checkbox_input">
-        <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
-        <input type="checkbox" class="checkbox_input">
-        <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
-        <input type="checkbox" class="checkbox_input">
+      <div v-if="cn_org">
+        <div class="checkbox-container">
+          <div class="checkbox-left"><a>学校名称学校名称学校名称1</a></div>
+          <input type="checkbox" class="checkbox_input">
+          <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
+          <input type="checkbox" class="checkbox_input">
+          <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
+          <input type="checkbox" class="checkbox_input">
+          <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
+          <input type="checkbox" class="checkbox_input">
+          <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
+          <input type="checkbox" class="checkbox_input">
+          <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
+          <input type="checkbox" class="checkbox_input">
+          <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
+          <input type="checkbox" class="checkbox_input">
+          <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
+          <input type="checkbox" class="checkbox_input">
+        </div>
+        <div class="checkbox-company">
+          <div class="checkbox-right">
+            <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+            <input type="checkbox" class="checkbox_input">
+            <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+            <input type="checkbox" class="checkbox_input">
+            <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+            <input type="checkbox" class="checkbox_input">
+            <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+            <input type="checkbox" class="checkbox_input">
+            <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+            <input type="checkbox" class="checkbox_input">
+            <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+            <input type="checkbox" class="checkbox_input">
+            <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+            <input type="checkbox" class="checkbox_input">
+            <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+            <input type="checkbox" class="checkbox_input">
+          </div>
+        </div>
+      </div>
+      <div v-if="hk_org">
+        <div class="checkbox-container">
+          <div class="checkbox-left"><a>学校名称学校名称学校名称2</a></div>
+          <input type="checkbox" class="checkbox_input">
+          <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
+          <input type="checkbox" class="checkbox_input">
+          <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
+          <input type="checkbox" class="checkbox_input">
+          <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
+          <input type="checkbox" class="checkbox_input">
+          <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
+          <input type="checkbox" class="checkbox_input">
+          <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
+          <input type="checkbox" class="checkbox_input">
+          <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
+          <input type="checkbox" class="checkbox_input">
+          <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
+          <input type="checkbox" class="checkbox_input">
+        </div>
+        <div class="checkbox-company">
+          <div class="checkbox-right">
+            <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+            <input type="checkbox" class="checkbox_input">
+            <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+            <input type="checkbox" class="checkbox_input">
+            <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+            <input type="checkbox" class="checkbox_input">
+            <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+            <input type="checkbox" class="checkbox_input">
+            <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+            <input type="checkbox" class="checkbox_input">
+            <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+            <input type="checkbox" class="checkbox_input">
+            <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+            <input type="checkbox" class="checkbox_input">
+            <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+            <input type="checkbox" class="checkbox_input">
+          </div>
+        </div>
       </div>
-      <div class="checkbox-company">
-        <div class="checkbox-right">
-          <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+      <div v-if="com_org">
+        <div class="checkbox-container">
+          <div class="checkbox-left"><a>学校名称学校名称学校名称3</a></div>
           <input type="checkbox" class="checkbox_input">
-          <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+          <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
           <input type="checkbox" class="checkbox_input">
-          <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+          <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
           <input type="checkbox" class="checkbox_input">
-          <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+          <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
           <input type="checkbox" class="checkbox_input">
-          <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+          <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
           <input type="checkbox" class="checkbox_input">
-          <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+          <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
           <input type="checkbox" class="checkbox_input">
-          <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+          <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
           <input type="checkbox" class="checkbox_input">
-          <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+          <div class="checkbox-left"><a>学校名称学校名称学校名称</a></div>
           <input type="checkbox" class="checkbox_input">
         </div>
+        <div class="checkbox-company">
+          <div class="checkbox-right">
+            <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+            <input type="checkbox" class="checkbox_input">
+            <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+            <input type="checkbox" class="checkbox_input">
+            <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+            <input type="checkbox" class="checkbox_input">
+            <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+            <input type="checkbox" class="checkbox_input">
+            <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+            <input type="checkbox" class="checkbox_input">
+            <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+            <input type="checkbox" class="checkbox_input">
+            <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+            <input type="checkbox" class="checkbox_input">
+            <div class="checkbox-left"><a>组织名称组织名称组织名称</a></div>
+            <input type="checkbox" class="checkbox_input">
+          </div>
+        </div>
       </div>
       <!-- <el-button type="primary" style="margin-top: 580px; position: absolute; float: right; margin-left: 80px; height: 40px">下一步</el-button> -->
     </div>
@@ -208,12 +291,19 @@ export default {
       tableData: [],
       // 停用数组
       tableData_stop: [],
+      // 添加账户初始化
       form: {
           name: '',
           account: '',
           organization: '',
           school: ''
         },
+      //移动组织初始化
+      cn_org:true,
+      hk_org:false,
+      com_org:false,
+      //字体颜色
+     
     };
   },
   computed: {
@@ -230,10 +320,13 @@ export default {
     }
   },
   methods: {
-   // 移动按钮，将isOrgFormVisible区域显示
-   run() {
+    // 移动按钮，将isOrgFormVisible区域显示
+    run() {
       this.isOrgFormVisible = true;
-      this.isTableUseVisible = false;
+    },
+    // 移动关闭按钮
+    close_table() {
+      this.isOrgFormVisible = false;
     },
     // 新增账户
     nextStep() {
@@ -243,11 +336,7 @@ export default {
     form_clost(){
       this.isTableUseVisible = false;
     },
-    // 关闭按钮
-    close_table() {
-      this.isOrgFormVisible = false;
-      this.isTableUseVisible = false;
-    },
+
     // 启用中
     showopen() {
       this.open_content = true;
@@ -284,6 +373,24 @@ export default {
     down_handlePageChange(page) {
       this.down_currentPage = page;
     },
+    //移动按钮中中国大陆区域
+    cn_orgization(){
+      this.cn_org = true;
+      this.hk_org = false;
+      this.com_org = false;
+    },
+    //移动按钮中香港区域
+    hk_orgization(){
+      this.cn_org = false;
+      this.hk_org = true;
+      this.com_org = false;
+    },
+    //移动按钮中外国区域
+    com_orgization(){
+      this.cn_org = false;
+      this.hk_org = false;
+      this.com_org = true;
+    },
     // 已启用
     ajax_user_open() {
       let params = [
@@ -563,7 +670,7 @@ body{
   font-size: 18px;
   color: black;
   font-weight: bold;
-  margin-left: -1250px;
+  margin-left: -900px;
   margin-top: 35px;
   float: left;
 }
@@ -591,7 +698,7 @@ body{
   height: 660px;
   border: 1px solid rgb(225, 225, 225);
   background-color: rgb(255, 255, 255);
-  border: 1px solid black;
+  /* border: 1px solid black; */
 }
 /* 头部区域 */
 .table_top{
@@ -609,6 +716,7 @@ body{
   float: left;
   padding-right: 95px;
   color: #0076fe;
+  cursor: pointer;
 }
 /* 自定义斑马线的背景色 */
 .el-table .success-row {
@@ -907,4 +1015,5 @@ input[type="checkbox"]:hover {
 .form_tool .el-button{
   width: 100px;
 }
+
 </style>

src/views/HomeView.vue

@@ -134,4 +134,5 @@ body {
   background-color: #3d67bc;
   color: rgb(255, 255, 255);
 }
+
 </style>