优化

src/views/BigScreen.vue

@@ -10,7 +10,18 @@
           <div class="d-flex jc-center">
             <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
             <div class="title">
-              <div class="title-text">数据中台运行监控中心</div>
+              <div class="title-part">
+                <span class="title-text">数据中台运行监控中心</span>
+                <!-- 按钮放在标题文本右侧，在原有标题区域内 -->
+                <button
+                  class="big-screen-btn"
+                  @click="$router.go(-1)"
+                  title="进入智慧校园页面"
+                >
+                  <i class="el-icon-monitor"></i>
+                  <span class="btn-text">智慧校园</span>
+                </button>
+              </div>
               <dv-decoration-6
                 class="dv-dec-6"
                 :reverse="true"
@@ -100,7 +111,13 @@ export default {
 .title {
   position: relative;
   padding: 0 50px;
-  margin-bottom: 20px; // 标题与主体间距微调，适配新布局
+  margin-bottom: 10px;
+
+  .title-part {
+    display: flex;
+    align-items: center; // 确保标题内元素垂直居中
+    gap: 15px; // 标题内元素间距
+  }
 
   .title-text {
     font-size: 36px;
@@ -110,6 +127,7 @@ export default {
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-family: "Microsoft YaHei", sans-serif;
+    left: 40% !important;
   }
 }
 
@@ -157,4 +175,43 @@ export default {
     }
   }
 }
+
+// 大屏按钮样式：融入标题区域，不影响原有布局
+.big-screen-btn {
+  background: linear-gradient(135deg, #4a90e2, #36d1dc);
+  color: #ffffff;
+  border: none;
+  border-radius: 6px;
+  padding: 6px 12px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(74, 144, 226, 0.2);
+  transition: all 0.3s ease;
+  white-space: nowrap;
+  margin-left: 90%; // 与标题文字保持距离
+
+  i.el-icon-monitor {
+    font-size: 16px;
+  }
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
+    background: linear-gradient(135deg, #36d1dc, #4a90e2);
+  }
+
+  // 响应式调整：小屏幕自动适应
+  @media (max-width: 768px) {
+    padding: 4px 8px;
+    font-size: 12px;
+
+    i.el-icon-monitor {
+      font-size: 14px;
+    }
+  }
+}
 </style>

src/views/index.vue

@@ -16,10 +16,10 @@
                 <button
                   class="big-screen-btn"
                   @click="$router.push('/big-screen')"
-                  title="进入数据大屏页面"
+                  title="进入数据中台页面"
                 >
                   <i class="el-icon-monitor"></i>
-                  <span class="btn-text">数据大屏</span>
+                  <span class="btn-text">数据中台</span>
                 </button>
               </div>
               <dv-decoration-6