🐞 fix: 优化组件样式和布局

src/views/components/roleInfo/roleInfoPanel.vue

@@ -6,20 +6,10 @@
           <p class="textInfo">
             角色充值金额信息会有5-10分钟延迟，请以订单信息为准
           </p>
-          <el-button
-            type="primary"
-            size="medium"
-            class="h-[38px]"
-            @click.stop="appealLayer()"
-            >申诉</el-button
-          >
+          <el-button type="primary" size="medium" class="h-[32px]" @click.stop="appealLayer()">申诉</el-button>
         </div>
         <el-collapse v-model="collapseActive" @change="handleChange">
-          <div
-            v-for="(items, indexs) in roleList"
-            :key="indexs"
-            class="contentItem mb-[10px]"
-          >
+          <div v-for="(items, indexs) in roleList" :key="indexs" class="contentItem mb-[10px]">
             <div class="title"></div>
             <el-collapse-item :name="items.id">
               <template slot="title">
@@ -40,34 +30,23 @@
                       <span>区服：</span><span>{{ items.server_name }}</span>
                     </div>
                     <div class="leading-[25px]">
-                      <span>充值金额：</span
-                      ><span>{{
+                      <span>充值金额：</span><span>{{
                         items.recharge_total
                           ? items.recharge_total + '元'
                           : '0元'
                       }}</span>
                     </div>
                   </div>
-                  <div
-                    class="flex-1 h-0 flex justify-end items-start pt-[10px]"
-                  >
-                    <el-badge
-                      :value="getNumRoleIdList(items.role_id)"
-                      class="text-center leading-[0] ml-[8px]"
-                    >
-                      <el-button
-                        type="primary"
-                        size="mini"
-                        @click.stop="
+                  <div class="flex-1 h-0 flex justify-end items-start pt-[10px]">
+                    <el-badge :value="getNumRoleIdList(items.role_id)" class="text-center leading-[0] ml-[8px]">
+                      <el-button type="primary" size="mini" @click.stop="
                         () =>
                           recentActivitiesPopupInstance.instance.open(
                             items.role_id,
                             `${items.role_name}-${items.server_name}-${items.recharge_total}元`
                           )
-                        "
-                      >
-                        近期要开</el-button
-                      >
+                      ">
+                        近期要开</el-button>
                     </el-badge>
                   </div>
                 </div>
@@ -154,21 +133,11 @@
           </div>
         </el-collapse>
       </div>
-      <div
-        v-else-if="!loading && roleList.length == 0"
-        class="noContent rowFlex allCenter"
-      >
-        <noContent
-          title="暂无数据"
-          description="当前没有任何数据，请稍后再试或联系管理员"
-        />
+      <div v-else-if="!loading && roleList.length == 0" class="noContent rowFlex allCenter">
+        <noContent title="暂无数据" description="当前没有任何数据，请稍后再试或联系管理员" />
       </div>
     </div>
-    <appeal
-      v-if="showAppeal"
-      :show.sync="showAppeal"
-      :appeal-info="appealInfo"
-    />
+    <appeal v-if="showAppeal" :show.sync="showAppeal" :appeal-info="appealInfo" />
   </div>
 </template>
 
@@ -236,7 +205,7 @@ export default {
         this
       );
     },
-    handleChange() {},
+    handleChange() { },
     memberChange() {
       this.requestRoleList();
     },
@@ -402,12 +371,15 @@ export default {
       display: block;
     }
   }
+
   ::v-deep .el-collapse-item {
     margin-bottom: 20px;
   }
+
   ::v-deep .el-collapse-item__content {
     padding-bottom: 10px;
   }
+
   ::v-deep .el-collapse {
     border: none;
   }
@@ -421,17 +393,21 @@ export default {
     font-size: 14px;
     font-weight: 400;
   }
+
   ::v-deep .el-collapse .el-collapse-item__header .el-collapse-item__arrow {
     color: #4e5969;
   }
+
   ::v-deep .el-badge__content.is-fixed {
     top: 0;
   }
+
   ::v-deep .el-card__header,
   ::v-deep .el-collapse,
   ::v-deep .el-collapse-item__header {
     border: 0 !important;
   }
+
   /* 已移除局部 el-collapse 样式，使用全局样式 */
 }
 </style>