style(prd_tag): 商品标签页面_样式修复_新增

src/assets/styles/element-ui.scss

@@ -47,11 +47,31 @@
 }
 
 // to fixed https://github.com/ElemeFE/element/issues/2461
-.el-dialog {
+// 重写 dialog 样式，默认居中显示
+.el-overlay-dialog {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .el-dialog {
     transform: none;
-  left: 0;
     position: relative;
     margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    height: 50vh;
+    .el-dialog__header{
+      height: 40px;
+    }
+
+    .el-dialog__body {
+      height: calc(50vh - 40px - 32px);
+    }
+  }
+
+  .el-dialog:not(.is-fullscreen) {
+    margin-top: 0 !important;
+  }
 }
 
 // refine element ui upload
@@ -106,9 +126,10 @@
   // background-color: red !important;
 }
 
-.el-pagination{
+.el-pagination {
   font-size: var(--xl-fontsize) !important;
-  .number{
+
+  .number {
     font-size: var(--xl-fontsize) !important;
   }
 }
\ No newline at end of file

src/components/CommonMenu/index.vue

@@ -128,14 +128,9 @@ const rightChange = (val) => {
     display: flex;
     justify-content: center;
 
-    /* 隐藏头部列表数量统计 */
-    .el-transfer-panel__header {
-      display: none;
-    }
-
     .el-transfer {
       display: flex;
-      align-items: center;
+      height: 100%;
       gap: 50px;
       width: 100%;
 
@@ -146,17 +141,20 @@ const rightChange = (val) => {
 
       .el-transfer-panel {
         flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        /* 隐藏头部列表数量统计 */
+        .el-transfer-panel__header {
+          display: none;
+        }
 
         .el-transfer-panel__body {
-          height: 500px;
           display: flex;
           flex-direction: column;
-
-          .el-transfer-panel__list {
           flex: 1;
         }
       }
-      }
 
       .el-transfer-panel:nth-last-of-type(1) {
         .el-checkbox__inner {

src/views/bi/prd_tag/index.vue

 <template>
   <div class="app-container">
-    <el-row :gutter="20" class="client-fix-height">
+    <el-row :gutter="20"
+      class="client-fix-height">
       <!--商品分类-->
       <category-tree :options="tagsOptions"
         :defaultProps="defaultProps"
@@ -41,10 +42,11 @@
           <el-table-column label="系列名称"
             prop="series" />
         </el-table>
+      </el-col>
+    </el-row>
     <!-- 添加或修改商品-标签详情对话框 -->
     <el-dialog :title="title"
-          v-model="open"
-          append-to-body>
+      v-model="open">
       <el-form ref="formRef"
         :model="form"
         :rules="rules"
@@ -73,13 +75,10 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
-      </el-col>
-    </el-row>
   </div>
 </template>
 
 <script setup>
-// import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/gen/info";
 import { getSeriesListAPI, getProductListAPI, createSeriesGoodsTagAPI, getSeriesGoodsTagListAPI, getPrdTagDetailAPI, deleteSeriesGoodsTagAPI } from '@/api';
 
 const { proxy } = getCurrentInstance();
@@ -301,7 +300,6 @@ getSeriesGoodsTagList()
   .app-container {
     .el-row {
       background-color: var(--el-bg-color-overlay);
-    }
 
       .right_col {
         flex: 1 !important;
@@ -326,11 +324,28 @@ getSeriesGoodsTagList()
 
       }
     }
-</style>
-<style lang="scss">
-.my_popper {
-  .el-scrollbar__wrap {
-    height: 400px !important;
+
+    ::v-deep(.el-dialog) {
+      display: flex;
+      flex-direction: column;
+
+      .el-dialog__body {
+        display: flex;
+        flex-direction: column;
+
+        .el-form {
+          flex: 1;
+
+          .el-cascader {
+            width: 100%;
+          }
+        }
+      }
+
+      .dialog-footer {
+        align-self: flex-end;
+      }
+    }
+
   }
-}
 </style>