后台

src/views/backend/Dashboard.vue

@@ -38,13 +38,21 @@
       </div>
     </div>
     <div v-else class="dashboard-content non-admin-view">
-      <div class="button-group">
-        <button @click="handleLogout" class="logout-button">
-          退出登录
-        </button>
-        <button @click="goToHomePage" class="home-button">
-          返回主页面
-        </button>
+      <div class="non-admin-card">
+        <div class="welcome-message">欢迎回来！</div>
+        <div class="info-text">
+          您当前没有管理员权限。请选择以下操作：
+        </div>
+        <div class="button-group">
+          <button @click="goToHomePage" class="home-button">
+            <!-- Optional: Add an icon here -->
+            返回主页面
+          </button>
+          <button @click="handleLogout" class="logout-button">
+            <!-- Optional: Add an icon here -->
+            退出登录
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -236,37 +244,71 @@ html, body, .dashboard-wrapper, .admin-layout {
   transition: margin-left 0.3s ease;
 }
 
-/* Non-Admin View (Centered content, similar to before but within new wrapper) */
+/* Non-Admin View Enhancements */
 .dashboard-content.non-admin-view {
-  display: flex;         /* Use flex to center content */
+  display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 100%;          /* Take full height of the wrapper */
+  min-height: 100vh; /* Use min-height to ensure it covers viewport even if content is small */
   width: 100%;
-  padding: 20px;
-  /* background-color: #fff; Already white from admin-main-content, but can be explicit if needed */
+  padding: 30px;
+  background-color: #f0f2f5; /* Consistent light background */
+  text-align: center; /* Center text for any messages */
 }
-.non-admin-view .button-group {
-  background-color: #fff;
-  padding: 30px 40px;
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  text-align: center;
-  max-width: 400px;
+
+.non-admin-view .non-admin-card {
+  background-color: #ffffff;
+  padding: 40px 50px;
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  max-width: 450px;
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* Center buttons if they are directly in this card */
+}
+
+.non-admin-view .welcome-message {
+  font-size: 1.5rem; /* Slightly larger welcome/info text */
+  color: #333;
+  margin-bottom: 15px;
+  font-weight: 500;
+}
+
+.non-admin-view .info-text {
+  font-size: 0.95rem;
+  color: #666;
+  margin-bottom: 30px;
+  line-height: 1.6;
+}
+
+.non-admin-view .button-group {
+  /* Removed background, padding, shadow from here as it's now on non-admin-card */
+  width: 100%; /* Button group takes full width of the card */
+  display: flex;
+  flex-direction: column; /* Stack buttons vertically */
+  gap: 15px; /* Space between buttons */
 }
 
 .non-admin-view .button-group button {
-  padding: 10px 20px;
-  border-radius: 6px;
+  padding: 12px 25px; /* Slightly larger padding */
+  border-radius: 8px; /* Slightly more rounded */
   font-weight: 500;
-  transition: background-color 0.2s;
+  font-size: 1rem; /* Standardized font size */
+  transition: background-color 0.2s, transform 0.1s;
   border: none;
   color: #fff;
   cursor: pointer;
-  margin: 8px; /* Provides spacing around buttons, e.g., 8px top/bottom, 8px left/right */
-  min-width: 120px; /* Ensure buttons have a decent minimum width */
+  width: 100%; /* Make buttons take full width of their container */
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.non-admin-view .button-group button:hover {
+  transform: translateY(-2px); /* Subtle lift on hover */
 }
 
 .non-admin-view .button-group .home-button {