init

src/views/admin/user/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="user">
-    <div class="chose">
+    <div style="background:#ffff;padding: 10px;">
+    <div class="tabcenbox">
       <div :class="choseFlag?'ch1':'ch2'" style="border-right:1px solid #ccc" @click="choseFlag=true">注册用户</div>
       <div :class="!choseFlag?'ch1':'ch2'" @click="choseFlag=false">组织用户</div>
     </div>
@@ -84,11 +85,14 @@
        <!-- <el-button type="primary" :disabled='checkRole.length==0' @click="delIds">批量删除</el-button> -->
         <el-button type="primary" @click="addRole">添加</el-button>
     </div>
+  </div>
+
+
     <!-- 表格 -->
     <div class="con" style="margin-left:10px;">
       <el-table
       :data="tableData"
-      v-if="choseFlag"
+       v-if="choseFlag"
        border
       @selection-change="handleSelectionChange"
       style="width: 100%;"
@@ -202,7 +206,7 @@
       </el-table-column>
     </el-table>
       <el-pagination
-        style="text-align:center;"
+        style="text-align:center; margin-top: 18px;"
         background
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
@@ -398,12 +402,12 @@
       </div>
 
     </div>
-    <div v-else class="con">
+    <div v-else class="cons">
       <!--区域楼盘绑定  -->
       <!-- 2 -->
       <div>
         <div class="area">
-          <div>选择大区</div>
+          <div style="line-height: 30px;">选择大区：</div>
           <el-select v-model="managerStr" clearable  collapse-tags  multiple placeholder="请选择" @change="managerChange">
             <!-- 选择大区 -->
                          <el-option
@@ -416,11 +420,11 @@
                         </el-option>
           </el-select>
         </div>
-        <div class="province">
-          <div class="left">
-            选择城市
+        <div class="province" style="margin-top: 10px;">
+          <div class="left" style="line-height: 30px;">
+            选择城市：
           </div>
-          <div class="right">
+          <div class="right" >
             <div v-for="(item,index) in firstList" :key="item.id">
               <div style="display:flex;">
                 <div>{{item.name}}</div>
@@ -433,7 +437,7 @@
                               >
                         </el-option>
               </el-select>
-              <div @click="delArea(index,0)">X</div>
+              <div style="line-height: 30px;margin-left: 10px;" @click="delArea(index,0)">取消</div>
               </div>
             </div>
            <div v-for="(item,index) in thirdList" :key="item.id">
@@ -459,7 +463,7 @@
                               >
                         </el-option>
               </el-select>
-              <div @click="delArea(index,1)">X</div>
+              <div style="line-height: 30px;margin-left: 10px;" @click="delArea(index,1)">取消</div>
               </div>
             </div>
             <!-- 当没有选择区域的时候 -->
@@ -487,11 +491,11 @@
                               >
                         </el-option>
               </el-select>
-              <div @click="delArea(index,1)">X</div>
+              <div style="line-height: 30px;margin-left: 10px;" @click="delArea(index,1)">取消</div>
               </div>
             </div>
             </div>
-          <div @click="addArea">+</div>
+          <div style="line-height: 30px;" @click="addArea">添加条件</div>
           </div>
         </div>
       </div>
@@ -1568,9 +1572,11 @@
   }
 </script>
 <style lang="scss" scoped>
+.cons{
+  margin-top: 10px;
+}
   .user {
     height: 100%;
-
     &__tree {
       padding-top: 3px;
       padding-right: 20px;
@@ -1586,29 +1592,28 @@
   color: #4D74D6;
   font-weight: 600;
 }
-.chose{
+.tabcenbox{
   display: flex;
-  height: 40px;
-  border: 1px solid #ccc;
+  width: 100%;
+  height: 38px;
   text-align: center;
-  width: 140px;
   margin: 10px;
-  div{
-    text-align: center;
-    line-height: 40px;
-    // width: 100px;
-    width: 70px;
-  }
+
   .ch1{
     background: cornflowerblue;
     color:#fff;
   }
   .ch2{
-
     color:#ccc;
   }
 
 }
+ .tabcenbox div{
+    width: 120px;
+    border: 1px solid #ccc;
+    text-align: center;
+    line-height: 38px;
+  }
 // .top{
 //   /deep/ .el-form-item__content{
 //     display: inline-flex ;
@@ -1623,6 +1628,9 @@
 }
   .con{
     margin-top: 20px;
+    padding: 20px;
+    border-radius:4px;
+    background: #ffff;
   }
     .area{
       display: flex;