新增抽屉组件并在举报弹窗中替换原有实现，优化了样式和结构

src/components/common/Drawer.vue

+<template>
+  <el-drawer
+    :visible="visible"
+    :title="title"
+    :size="size"
+    :append-to-body="true"
+    @close="$emit('close')"
+    :show-close="false"
+  >
+    <template #title>
+      <div class="flex items-center">
+        <svg-icon
+          @click="$emit('close')"
+          svgName="icon-fanhui"
+          class="mr-[8px] w-[20px] text-[20px] cursor-pointer"
+        ></svg-icon>
+        <span class="text-[13px] text-[#131920] leading-[13px]">{{
+          title
+        }}</span>
+      </div>
+    </template>
+    <slot></slot>
+
+    <span class="dialog-footer rowFlex">
+      <slot name="footer">
+        <el-button class="btn" size="small" @click="$emit('close')">
+          取 消
+        </el-button>
+        <el-button
+          class="btn"
+          type="primary"
+          size="small"
+          :disabled="okDisabled"
+          @click="$emit('ok')"
+        >
+          确 定
+        </el-button>
+      </slot>
+    </span>
+  </el-drawer>
+</template>
+<script>
+export default {
+  name: "Ui-Drawer",
+  props: ["visible", "size", "title", "okDisabled"],
+};
+</script>
+<style scoped>
+::v-deep .el-drawer__header {
+  padding: 12px 0px;
+  margin: 0 12px;
+}
+.dialog-footer {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  border-top: 0;
+  justify-content: flex-end;
+  background: #fff;
+  z-index: 10;
+
+  .btn {
+    width: 60px;
+    height: 32px;
+    border-radius: 6px;
+  }
+}
+</style>

src/views/popup/reportPopup/index.vue

 <template>
-    <el-drawer
-      :lock-scroll="true"
+    <Drawer
+      class="report-popup-drawer"
       title="举报申请"
       :visible="show"
-      size="400px"
-      :append-to-body="true"
+      size="362px"
       @close="close"
     >
       <div class="drawer-content-main">
@@ -27,7 +26,9 @@
                 @result="mainGameResult"
               />
             </el-form-item>
-            <el-form-item label="">
+
+            <div class="role-card">
+              <el-form-item label="" class="role-type-item">
                 <el-radio-group v-model="reportForm.report_role_id_type">
                   <el-radio label="cp_role_id">CP角色ID</el-radio>
                   <el-radio label="role_id">掌游角色ID</el-radio>
@@ -67,8 +68,10 @@
                   />
                 </el-form-item>
               </template>
+            </div>
 
-            <el-form-item label="">
+            <div class="role-card">
+              <el-form-item label="" class="role-type-item">
                 <el-radio-group v-model="reportForm.role_id_type">
                   <el-radio label="cp_role_id">CP角色ID</el-radio>
                   <el-radio label="role_id">掌游角色ID</el-radio>
@@ -99,6 +102,7 @@
                   disabled
                 ></el-input>
               </el-form-item>
+            </div>
 
             <template v-if="hasEcoUserData">
               <el-form-item label="是否有生态运营" prop="is_negotiation">
@@ -125,28 +129,28 @@
                 </el-option>
               </el-select>
             </el-form-item>
-            <el-form-item label="详情" prop="remark">
+            <el-form-item label="详情" prop="remark" class="detail-form-item">
               <textEditor
                 :remark.sync="reportForm.remark"
                 domid="report_content"
-                style="width: 100%; margin-bottom: 60px"
+                class="report-editor"
                 :contenteditable="true"
                 @resultReamrk="resultReamrk"
               />
             </el-form-item>
           </el-form>
         </div>
-        <span class="dialog-footer rowFlex">
+      </div>
+      <template #footer>
+        <el-button class="btn" @click="close">取消</el-button>
         <el-button
           class="btn"
           type="primary"
           :loading="loading"
           @click="submit"
-          >确 定</el-button>
-          <el-button class="btn" @click="close">取 消</el-button>
-        </span>
-      </div>
-    </el-drawer>
+        >确定</el-button>
+      </template>
+    </Drawer>
   </template>
   <script type="text/javascript">
   import mainGameSelect from '@/components/mainGame.vue'
@@ -154,11 +158,13 @@
   import { searchcondition, reportAdd,currUserList } from '@/api/game'
   import { mapState } from 'vuex'
   import inputTags from '@/components/inputTags/index.vue'
+  import Drawer from '@/components/common/Drawer.vue'
   export default {
     components: {
       mainGameSelect,
       textEditor,
-      inputTags
+      inputTags,
+      Drawer
     },
     computed: {
       ...mapState('game', ['accountSelect']),
@@ -679,20 +685,222 @@
   </script>
   
   <style lang="scss" scoped>
-  // ::v-deep .el-drawer {
-  //   height: 100%;
-  // }
+  ::v-deep .report-popup-drawer {
+    max-width: 100vw;
+
+    .el-drawer__header {
+      height: 46px;
+      padding: 12px 0;
+      margin: 0 12px;
+      border-bottom: 1px solid #ebedf0;
+      box-sizing: border-box;
+
+      .flex {
+        width: 100%;
+      }
+
+      span {
+        color: #131920;
+        font-family: PingFang SC, PingFangSC-Medium, sans-serif;
+        font-size: 13px;
+        font-weight: 500;
+        line-height: 22px;
+      }
+    }
+
+    .el-drawer__body {
+      position: relative;
+      height: calc(100% - 46px);
+      overflow: hidden;
+      background: #fff;
+      box-sizing: border-box;
+    }
+
+    .dialog-footer {
+      height: 56px;
+      padding: 12px;
+      border-top: 1px solid #ebedf0;
+      box-sizing: border-box;
+      gap: 12px;
+
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: auto;
+        min-width: 60px;
+        padding: 0 16px;
+        border-radius: 6px;
+        font-size: 14px;
+        line-height: 22px;
+
+        span {
+          line-height: 22px;
+        }
+      }
+    }
+  }
+
   .drawer-content-main {
     width: 100%;
-    height: 100%;
-    overflow: auto;
+    height: calc(100% - 56px);
+    overflow-y: auto;
+    overflow-x: hidden;
   }
 
   .drawer-content {
     width: 100%;
     height: auto;
-    padding: 20px;
-    padding-top: 0;
+    padding: 12px 12px 24px;
+    box-sizing: border-box;
+  }
+
+  .reportForm {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .role-card {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: 100%;
+    padding: 12px;
+    border-radius: 4px;
+    background: #f6f8f9;
+    box-sizing: border-box;
+  }
+
+  .report-editor {
+    display: block;
+    width: 100%;
+  }
+
+  ::v-deep .reportForm {
+    .el-form-item {
+      margin-bottom: 0;
+    }
+
+    .el-form-item__label {
+      display: flex;
+      align-items: center;
+      padding: 0 0 8px;
+      color: #6d7176;
+      font-family: PingFang SC, PingFangSC-Regular, sans-serif;
+      font-size: 13px;
+      font-weight: 400;
+      line-height: 22px;
+    }
+
+    .el-form-item.is-required:not(.is-no-asterisk)
+      > .el-form-item__label::before {
+      color: #f53f3f;
+      margin-right: 4px;
+    }
+
+    .el-input__inner,
+    .el-select .el-input__inner {
+      height: 34px;
+      padding: 5px 12px;
+      border-color: #d6d9e0;
+      border-radius: 6px;
+      color: #323335;
+      font-size: 14px;
+      line-height: 22px;
+    }
+
+    .el-input.is-disabled .el-input__inner {
+      border-color: #d6d9e0;
+      background-color: #f7f8fa;
+      color: #c9cdd4;
+      cursor: not-allowed;
+    }
+
+    .el-input__inner::placeholder,
+    .el-textarea__inner::placeholder {
+      color: #c9cdd4;
+    }
+
+    .role-type-item .el-form-item__content {
+      line-height: 22px;
+    }
+
+    .el-radio-group {
+      display: flex;
+      align-items: center;
+      gap: 40px;
+      line-height: 22px;
+    }
+
+    .el-radio {
+      margin-right: 0;
+      color: #323335;
+      font-size: 14px;
+      line-height: 22px;
+    }
+
+    .el-radio__label {
+      padding-left: 8px;
+      color: #323335;
+      font-size: 14px;
+      line-height: 22px;
+    }
+
+    .el-radio__input.is-checked .el-radio__inner {
+      border-color: #00bf8a;
+      background: #00bf8a;
+    }
+
+    .el-radio__input.is-checked + .el-radio__label {
+      color: #323335;
+    }
+
+    .el-select .el-input .el-select__caret {
+      color: #86909c;
+      font-size: 14px;
+    }
+  }
+
+  ::v-deep .role-card {
+    .inputItem {
+      margin-bottom: 0;
+    }
+
+    .alias_list {
+      min-height: 34px;
+      padding: 0 6px;
+      border-color: #d6d9e0;
+      border-radius: 6px;
+      background: #fff;
+      box-sizing: border-box;
+    }
+
+    .alias_list_disabled {
+      background: #f7f8fa;
+    }
+
+    .alias_input {
+      height: 32px;
+      padding-left: 6px;
+      color: #323335;
+      font-size: 14px;
+      line-height: 22px;
+    }
+
+    .alias_input::placeholder {
+      color: #c9cdd4;
+    }
+
+    .alias_item {
+      margin: 3px 4px 3px 0;
+    }
+  }
+
+  ::v-deep .detail-form-item {
+    .el-form-item__label {
+      padding-bottom: 8px;
+    }
   }
   
   .selectItem {
@@ -724,23 +932,5 @@
     margin-right: 10px;
   }
   
-  .dialog-footer {
-    width: 100%;
-    height: auto;
-    position: absolute;
-    right: 0px;
-    bottom: 0px;
-    padding-right: 10px;
-    padding-top: 20px;
-    padding-bottom: 20px;
-    border-top: 1px solid rgba(0, 0, 0, 0.06);
-    justify-content: flex-end;
-    background: #fff;
-  
-    .btn {
-      width: 84px;
-      height: 32px;
-    }
-  }
   </style>
   
\ No newline at end of file