滚动未解决

ybf_admin/src/assets/svg-icons/icons/close.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1578472025005" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4503" xmlns:xlink="http://www.w3.org/1999/xlink" width="290" height="290"><defs><style type="text/css"></style></defs><path d="M960 512c0-249.6-198.4-448-448-448S64 262.4 64 512s198.4 448 448 448 448-198.4 448-448zM691.2 736L512 556.8 332.8 736c-12.8 12.8-32 12.8-44.8 0-12.8-12.8-12.8-32 0-44.8L467.2 512 288 332.8c-12.8-12.8-12.8-32 0-44.8 12.8-12.8 32-12.8 44.8 0L512 467.2 691.2 288c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8L556.8 512 736 691.2c12.8 12.8 12.8 32 0 44.8-12.8 12.8-32 12.8-44.8 0z" p-id="4504" fill="#D0021B"></path></svg>
\ No newline at end of file

ybf_admin/src/pages/in/contact/components/move.vue

 <template>
-  <div>
-    <el-dialog title="提示" :visible.sync="moveDialog" width="60%">
-      <span>这是一段信息</span>
+  <div class="ct">
+    <el-dialog
+      :visible.sync="moveDialog"
+      width="55%"
+      :show-close="false"
+      :close-on-click-modal="false"
+    >
+      <div class="choose">
+        <div class="br">
+          <div class="cg">选择分组</div>
+          <div class="circle" @click="handleClose">
+            <d2-icon-svg name="close" class="icon" />
+          </div>
+        </div>
+      </div>
+      <div style="text-align: center">
+        <el-transfer
+          style="text-align: left; display: inline-block"
+          v-model="value4"
+          :left-default-checked="[]"
+          :right-default-checked="[]"
+          :titles="['选择', '已选']"
+          :button-texts="['删除', '添加']"
+          @change="handleChange"
+          :data="data"
+        >
+          <span slot-scope="{ option }"
+            >{{ option.key }} - {{ option.label }}</span
+          >
+        </el-transfer>
+      </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="handleCancel">取 消</el-button>
-        <el-button type="primary" @click="handleFinish">确 定</el-button>
+        <el-button @click="handleCancel" size="small">取 消</el-button>
+        <el-button type="primary" @click="handleFinish" size="small"
+          >确 定</el-button
+        >
       </span>
     </el-dialog>
   </div>
@@ -18,22 +48,90 @@ export default {
       default: false
     }
   },
-  data () {
+  data() {
+    const generateData = _ => {
+      const data = [];
+      for (let i = 1; i <= 15; i++) {
+        data.push({
+          key: i,
+          label: `备选项 ${i}`
+        });
+      }
+      return data;
+    };
     return {
-    }
+      data: generateData(),
+      value: [1],
+      value4: [1],
+      renderFunc(h, option) {
+        return (
+          <span>
+            {option.key} - {option.label}
+          </span>
+        );
+      }
+    };
   },
-  
   methods: {
-    handleCancel () {
-    //   this.moveDialog = false
-      this.$emit('handleCancel')
+    handleCancel() {
+      this.$emit("handleCancel");
     },
-    handleFinish () {
-    //   this.moveDialog = false
-      this.$emit('handleFinish', false)
+    handleFinish() {
+      this.$emit("handleFinish", false);
+    },
+    handleChange() {},
+    handleClose() {
+      this.$emit("handleCancel");   
     }
   }
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.choose {
+  height: 52px;
+  padding: 16px;
+  font-size: 16px;
+  font-weight: bold;
+  color: rgba(56, 56, 56, 1);
+  box-sizing: border-box;
+  margin-bottom: 20px;
+  
+}
+.br {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #f8f8f8;
+  padding-bottom: 10px;  
+}
+.transfer-footer {
+  margin-left: 20px;
+  padding: 6px 5px;
+}
+.ct >>> .el-dialog__header {
+  padding: 0 !important;
+}
+.ct >>> .el-dialog__body {
+  padding: 0;
+}
+.ct >>> .el-transfer-panel {
+  width: 250px;
+}
+.circle {
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  border-radius: 50%;
+  border: 1px solid rgba(208, 2, 27, 1);
+  position: relative;
+}
+.circle >>> .icon {
+  width: 28px;
+  height: 28px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>

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

 <template>
   <d2-container class="ct">
-    <template slot="header">header</template>
     <div class="test">
       <div class="tac">
         <el-menu
@@ -68,6 +67,9 @@ export default {
 </script>
 <style></style>
 <style scoped>
+.d2-theme-container-main {
+  background-color: #f8f8f8;
+}
 .test {
   /* border: 2px solid red; */
   min-height: 100%;
@@ -104,4 +106,7 @@ export default {
 .theme-d2 .el-menu-item svg, .theme-d2 .el-submenu__title svg {
   margin-right: 0;
 }
+.ct >>> .d2-layout-header-aside-group .d2-layout-header-aside-content .d2-theme-container .d2-theme-container-main .d2-theme-container-main-layer {
+  left: 0 !important;
+}
 </style>

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

@@ -381,7 +381,6 @@ export default {
 }
 .ct {
   display: flex;
-  justify-content: space-between;
   flex-direction: row;
   background-color: #f8f8f8;
   padding: 16px;