🌈 style: 样式调整

src/views/components/roleInfo/roleInfoPanel.vue

@@ -2,9 +2,18 @@
   <div class="details-user-info-role columnFlex">
     <div v-loading="loading" class="detailsContent">
       <div v-if="roleList.length > 0">
-        <p class="textInfo">
-          角色充值金额信息会有5-10分钟延迟，请以订单信息为准
-        </p>
+        <div class="flex items-cente mb-[10px] justify-between">
+          <p class="textInfo">
+            角色充值金额信息会有5-10分钟延迟，请以订单信息为准
+          </p>
+          <el-button
+            type="primary"
+            size="medium"
+            class="h-[38px]"
+            @click.stop="appealLayer()"
+            >申诉</el-button
+          >
+        </div>
         <el-collapse v-model="collapseActive" @change="handleChange">
           <div
             v-for="(items, indexs) in roleList"
@@ -23,14 +32,14 @@
                     @click.stop="appealLayer(items)">申诉</el-button>
                 </div> -->
                 <div class="flex w-[100%] justify-between">
-                  <div>
-                    <div>
+                  <div class="py-[10px]">
+                    <div class="leading-[25px]">
                       <span>角色名：</span><span>{{ items.role_name }}</span>
                     </div>
-                    <div>
+                    <div class="leading-[25px]">
                       <span>区服：</span><span>{{ items.server_name }}</span>
                     </div>
-                    <div>
+                    <div class="leading-[25px]">
                       <span>充值金额：</span
                       ><span>{{
                         items.recharge_total
@@ -42,13 +51,6 @@
                   <div
                     class="flex-1 h-0 flex justify-end items-start pt-[10px]"
                   >
-                    <el-button
-                      type="primary"
-                      size="mini"
-                      class="collapseTitleBtn"
-                      @click.stop="appealLayer(items)"
-                      >申诉</el-button
-                    >
                     <el-badge
                       :value="getNumRoleIdList(items.role_id)"
                       class="text-center leading-[0] ml-[8px]"
@@ -419,7 +421,17 @@ 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>

src/views/roleInfo.vue

@@ -10,7 +10,10 @@
   <div class="roleTab">
     <el-tabs v-model="roleActive">
       <el-tab-pane label="角色信息" name="roleInfo">
-        <roleInfoPanel v-if="roleActive === 'roleInfo'" :chatUserDetails="chatUserInfo" />
+        <roleInfoPanel
+          v-if="roleActive === 'roleInfo'"
+          :chatUserDetails="chatUserInfo"
+        />
       </el-tab-pane>
       <el-tab-pane label="申诉记录" name="approval">
         <approval v-if="roleActive === 'approval'" />
@@ -23,9 +26,9 @@
 </template>
 
 <script>
-import roleInfoPanel from './components/roleInfo/roleInfoPanel.vue'
-import approval from './components/roleInfo/approval.vue'
-import { mapState } from 'vuex'
+import roleInfoPanel from './components/roleInfo/roleInfoPanel.vue';
+import approval from './components/roleInfo/approval.vue';
+import { mapState } from 'vuex';
 import violationRecord from '@/views/ViolationRecord.vue';
 
 export default {
@@ -36,7 +39,7 @@ export default {
     violationRecord,
   },
   computed: {
-    ...mapState('game', ['chatUserInfo'])
+    ...mapState('game', ['chatUserInfo']),
   },
   props: {
     // report_is_send: {
@@ -46,16 +49,13 @@ export default {
   },
   data() {
     return {
-      roleActive: 'roleInfo'
-
-    }
+      roleActive: 'roleInfo',
+    };
   },
   methods: {
-    handleClick(value) {
-
-    }
-  }
-}
+    handleClick(value) {},
+  },
+};
 </script>
 <style lang="scss" scoped>
 .roleTab {
@@ -79,12 +79,12 @@ export default {
       color: #333333;
 
       &.is-active {
-        color: #3491FA;
+        color: #3491fa;
       }
     }
 
     .el-tabs__active-bar {
-      background-color: #3491FA;
+      background-color: #3491fa;
       height: 3px;
       border-radius: 1.5px;
     }
@@ -101,8 +101,8 @@ export default {
 
     .el-tabs__content {
       height: calc(100% - 40px);
-      padding: 15px;
+      padding: 0 5px 5px;
     }
   }
 }
-</style>
\ No newline at end of file
+</style>