[修改]

个人中心退出登录样式修改，添加身份

src/views/MyProfile.vue

@@ -24,7 +24,10 @@
       <div class="user-actions">
         <template v-if="userStore.isAuthenticated">
           <span class="username">{{ userStore.user?.username || '用户' }}</span>
-          <button class="logout-btn" @click="handleLogout">退出登录</button>
+          <div class="user-role">
+            <el-tag type="primary">代理</el-tag>
+          </div>
+          <!--          <button class="logout-btn" @click="handleLogout">退出登录</button>-->
         </template>
         <template v-else>
           <div class="auth-buttons">
@@ -112,6 +115,10 @@
       </div>
     </div>
 
+    <div v-if="userStore.isAuthenticated" class="option-section" style="">
+      <el-button @click="handleLogout" type="danger" class="option-btn" plain>退出登录</el-button>
+    </div>
+
     <!-- 头像上传对话框 -->
     <el-dialog
         v-model="showAvatarUpload"
@@ -401,9 +408,9 @@ export default {
         await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
-          type: 'warning'
+          type: 'warning',
+          lockScroll: false
         });
-
         userStore.logout();
         router.push('/mylogin');
         ElMessage.success('已退出登录');
@@ -562,6 +569,7 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 60%;
+  margin-right: 10px;
 }
 
 .auth-buttons {
@@ -818,6 +826,26 @@ export default {
   font-size: 14px;
 }
 
+.option-section {
+  margin-top: 20px;
+
+  .option-btn {
+    width: 100%;
+    border-radius: 12px;
+    font-weight: 500;
+    font-size: 14px;
+    color: #ff4d4f;
+  }
+
+  .option-btn:hover {
+    color: white;
+  }
+
+  .option-btn:active {
+    color: white;
+  }
+}
+
 /* 头像上传对话框样式 */
 .avatar-uploader {
   text-align: center;