样式调整前保存

ybf_admin/src/pages/in/contact/mail.vue

 <template>
-  <div>
+  <div style="width:100%;">
     <div class="left">
-      <div class="title">组织架构</div>
-      <div class="bottom">
-        <div class="ty">
-          <div>
-            <span>全部</span>
-            <span class="number">(103)</span>
-          </div>
-          <!-- <div>
+      <div class="left-c">
+        <div class="title">组织架构</div>
+        <div class="bottom">
+          <div class="ty">
+            <div>
+              <span>全部</span>
+              <span class="number">(103)</span>
+            </div>
+            <!-- <div>
             <span><d2-icon-svg name="edit" class="icon"/></span>
             <span style="margin-left:8px;"
               ><d2-icon-svg name="delete" class="icon"
             /></span>
           </div> -->
-        </div>
-        <div class="ty" style="margin:15px 0;">
-          <div>
-            <span>未分组</span>
-            <span class="number">(8)</span>
           </div>
-          <!-- <div>
+          <div class="ty" style="margin:15px 0;">
+            <div>
+              <span>未分组</span>
+              <span class="number">(8)</span>
+            </div>
+            <!-- <div>
             <span><d2-icon-svg name="edit" class="icon"/></span>
             <span style="margin-left:8px;"
               ><d2-icon-svg name="delete" class="icon"
             /></span>
           </div> -->
+          </div>
+          <div class="tree">
+            <el-tree
+              :data="data1"
+              show-checkbox
+              node-key="id"
+              :expand-on-click-node="false"
+            >
+              <span class="custom-tree-node" slot-scope="{ node, data }">
+                <span>{{ node.label }}</span>
+                <span style="margin-left:20px;">
+                  <d2-icon-svg
+                    name="edit"
+                    class="icon"
+                    @click="() => edit(data)"
+                  />
+                  <d2-icon-svg
+                    name="delete"
+                    class="icon"
+                    @click="() => remove(node, data)"
+                  />
+                </span>
+              </span>
+            </el-tree>
+          </div>
+        </div>
+        <div class="run">
+          <div class="end">
+            <span class="add-l" @click="addCounter">添加柜组</span>
+            <span class="add-r" @click="addStore">添加门店/专柜</span>
+          </div>
         </div>
-        <el-tree
-          :data="data1"
-          show-checkbox
-          node-key="id"
-          default-expand-all
-          :expand-on-click-node="false"
-          class="tree"
-          
-        >
-          <span class="custom-tree-node" slot-scope="{ node, data }">
-            <span>{{ node.label }}</span>
-            <span style="margin-left:20px;">
-              <d2-icon-svg name="edit" class="icon" @click="() => edit(data)" />
-              <d2-icon-svg
-                name="delete"
-                class="icon"
-                @click="() => remove(node, data)"
-              />
-            </span>
-          </span>
-        </el-tree>
-      </div>
-      <div class="end">
-        <span class="add-l" @click="addCounter">添加柜组</span>
-        <span class="add-r" @click="addStore">添加门店/专柜</span>
       </div>
     </div>
     <div class="right">
-      <div class="top">三号柜组（共18人）</div>
-      <div class="searchs">
-        <div class="buttons">
-          <el-button class="button buttonlight" size="small" @click="synchronismMember"
-            >同步成员</el-button
+      <div class="right-c">
+        <div class="top">三号柜组（共18人）</div>
+        <div class="searchs">
+          <div class="buttons">
+            <el-button
+              class="button buttonlight"
+              size="small"
+              @click="synchronismMember"
+              >同步成员</el-button
+            >
+            <el-button
+              class="button buttondark"
+              size="small"
+              @click="handleMove"
+              >移动</el-button
+            >
+          </div>
+          <!-- 搜索区 -->
+          <el-form
+            class="searchzone"
+            :inline="true"
+            :model="formData"
+            label-width="auto"
           >
-          <el-button class="button buttondark" size="small" @click="handleMove">移动</el-button>
+            <el-form-item label="关键词">
+              <el-input
+                size="small"
+                v-model="formData.keys"
+                style="width:160px"
+                placeholder="请输入关键词"
+              />
+            </el-form-item>
+            <el-button class="button buttondark" size="small">搜索</el-button>
+          </el-form>
         </div>
-        <!-- 搜索区 -->
-        <el-form
-          class="searchzone"
-          :inline="true"
-          :model="formData"
-          label-width="auto"
+        <el-table
+          stripe
+          class="list"
+          ref="multipleTable"
+          :data="list.main"
+          tooltip-effect="dark"
+          style="width: 100%"
+          height="calc(100% - 130px)"
         >
-          <el-form-item label="关键词">
-            <el-input
-              size="small"
-              v-model="formData.keys"
-              style="width:160px"
-              placeholder="请输入关键词"
-            />
-          </el-form-item>
-          <el-button class="button buttondark" size="small">搜索</el-button>
-        </el-form>
+          <el-table-column type="selection" width="60"></el-table-column>
+          <el-table-column
+            prop="taskName"
+            label="姓名"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            prop="id"
+            label="企业微信ID"
+            align="center"
+            width="120"
+          ></el-table-column>
+          <el-table-column
+            prop="taskType"
+            label="部门"
+            align="center"
+            width="150"
+          ></el-table-column>
+          <el-table-column
+            prop="taskType"
+            label="角色"
+            align="center"
+            width="120"
+          ></el-table-column>
+          <el-table-column
+            prop="bar"
+            label="手机号"
+            align="center"
+            width="150"
+          ></el-table-column>
+          <el-table-column label="同步时间" width="180" align="center">
+            <template slot-scope="scope">{{ scope.row.sendDate }}</template>
+          </el-table-column>
+          <el-table-column
+            prop="bar"
+            label="备注"
+            align="center"
+            width="120"
+          ></el-table-column>
+        </el-table>
+        <el-pagination
+          @current-change="handleCurrentChange"
+          :current-page="page.currentPage"
+          :page-size="page.size"
+          layout="total, prev, pager, next, jumper"
+          :total="page.total"
+        >
+        </el-pagination>
       </div>
-      <el-table
-        stripe
-        class="list"
-        ref="multipleTable"
-        :data="list.main"
-        tooltip-effect="dark"
-        style="width: 100%"
-        height="calc(100% - 130px)"
-      >
-        <el-table-column type="selection" width="60"></el-table-column>
-        <el-table-column
-          prop="taskName"
-          label="姓名"
-          align="center"
-        ></el-table-column>
-        <el-table-column
-          prop="id"
-          label="企业微信ID"
-          align="center"
-          width = "120"
-        ></el-table-column>
-        <el-table-column
-          prop="taskType"
-          label="部门"
-          align="center"
-          width="150"
-        ></el-table-column>
-        <el-table-column
-          prop="taskType"
-          label="角色"
-          align="center"
-          width="120"
-        ></el-table-column>
-        <el-table-column
-          prop="bar"
-          label="手机号"
-          align="center"
-          width="150"
-        ></el-table-column>
-        <el-table-column label="同步时间" width="180" align="center">
-          <template slot-scope="scope">{{ scope.row.sendDate }}</template>
-        </el-table-column>
-        <el-table-column
-          prop="bar"
-          label="备注"
-          align="center"
-          width="120"
-        ></el-table-column>
-      </el-table>
-      <el-pagination
-        @current-change="handleCurrentChange"
-        :current-page="page.currentPage"
-        :page-size="page.size"
-        layout="total, prev, pager, next, jumper"
-        :total="page.total"
-      >
-      </el-pagination>
     </div>
     <move-dialog
       v-if="moveDialogShow"
@@ -153,7 +170,7 @@
 <script>
 import MoveDialog from "./components/move";
 import AddCounter from "./components/addCounter";
-import AddStore from './components/addStore'
+import AddStore from "./components/addStore";
 export default {
   data() {
     const data1 = [
@@ -365,18 +382,20 @@ export default {
     },
     currentPage() {},
     addCounter() {
-      this.$refs.addCounter.counterDialog= true
+      this.$refs.addCounter.counterDialog = true;
     },
     addStore() {
-      this.$refs.addStore.addStoreDialog = true
+      this.$refs.addStore.addStoreDialog = true;
     }
   }
 };
 </script>
 
 <style scoped>
-.tree {
-  
+.run {
+  height: 34px;
+  width: 100%;
+  position: relative;
 }
 .top {
   padding-bottom: 10px;
@@ -393,7 +412,7 @@ export default {
   border: 1px solid rgba(78, 89, 199, 1);
   width: 100%;
   box-sizing: border-box;
-  
+  bottom: 0;
 }
 .add-l,
 .add-r {
@@ -425,7 +444,7 @@ export default {
 }
 .bottom {
   padding: 12px;
-  margin-bottom: 50px;
+  margin-bottom: 194px;
 }
 .title {
   height: 48px;
@@ -446,7 +465,6 @@ export default {
 .right {
   display: inline-block;
   background-color: #fff;
-  /* height: 518px; */
   height: 100%;
   overflow: auto;
   box-sizing: border-box;
@@ -457,6 +475,9 @@ export default {
   margin-left: 10px;
   width: 79%;
 }
+.right-c, .left-c {
+  width: 100%;
+}
 .number {
   font-size: 14px;
   margin-top: 2px;
@@ -488,9 +509,7 @@ export default {
   width: 100%;
   margin-top: 20px;
 }
-.list {
-  /* // border: 1px solid red; */
-}
+
 .listButtonRed {
   /* // border: 2px solid green; */
   color: red;

ybf_admin/src/pages/in/contact/store.vue

@@ -272,8 +272,6 @@ export default {
   border: 1px solid #4e59c7;
   box-sizing: border-box;
 }
-.buttonlight:hover {
-}
 .buttondark {
   width: 88px;
   height: 32px;
@@ -282,8 +280,6 @@ export default {
   border: 1px solid #4e59c7;
   box-sizing: border-box;
 }
-.buttondark:hover {
-}
 .searchzone {
   height: 40px;
   width: auto;