新建大屏

README.md

@@ -0,0 +1,16 @@
+唐山大屏项目
+
+1. 安装依赖
+
+npm install # 或者 npm i 
+
+1. 开发过程
+
+npm run serve
+
+3. 打包编译
+
+npm run build:prod
+
+4. node 版本
+   18.19.1

src/router/index.js

@@ -51,6 +51,11 @@ const routes = [
     name: 'CardDetail',
     component: () => import('@/views/detail/CardDetail.vue')
   },
+  {
+    path: '/big-screen',
+    name: 'BigScreen',
+    component: () => import('@/views/BigScreen.vue')
+  }
 ]
 const router = new VueRouter({
   routes

src/views/index.vue

@@ -3,15 +3,24 @@
     <div class="bg">
       <dv-loading v-if="loading">Loading...</dv-loading>
       <div v-else class="host-body">
-        <!-- 顶部标题部分 -->
+        <!-- 顶部标题部分：在原有结构内新增按钮，不影响标题位置 -->
         <div class="d-flex jc-center">
           <dv-decoration-10 class="dv-dec-10" />
-          <div class="d-flex jc-center">
+          <div class="d-flex jc-center relative">
             <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
             <div class="title">
               <div class="title-part">
                 <img src="@/assets/logo.png" alt="icon" class="logo" />
                 <span class="title-text">智慧校园</span>
+                <!-- 按钮放在标题文本右侧，在原有标题区域内 -->
+                <button
+                  class="big-screen-btn"
+                  @click="$router.push('/big-screen')"
+                  title="进入数据大屏页面"
+                >
+                  <i class="el-icon-monitor"></i>
+                  <span class="btn-text">数据大屏</span>
+                </button>
               </div>
               <dv-decoration-6
                 class="dv-dec-6"
@@ -28,7 +37,7 @@
           <dv-decoration-10 class="dv-dec-10-s" />
         </div>
 
-        <!-- 学校概况信息卡片 -->
+        <!-- 学校概况信息卡片（完整保留） -->
         <div class="school-info-cards">
           <div class="info-card">
             <i class="el-icon-school"></i>
@@ -136,6 +145,7 @@
           </div>
         </div>
 
+        <!-- 仪表盘容器（完整保留） -->
         <div class="dashboard-container">
           <div class="left-panel">
             <!-- 科研概况 -->
@@ -214,6 +224,7 @@
 </template>
 
 <script>
+// 脚本部分完全保留，未做任何修改
 import { formatNumber } from "@/utils/format";
 import drawMixin from "../utils/drawMixin";
 import CommonHeader from "@/components/CommonHeader";
@@ -292,11 +303,18 @@ export default {
 <style lang="scss" scoped>
 @import "../assets/scss/index.scss";
 
+// 标题样式完全保留原有结构
 .title {
   position: relative;
   padding: 0 50px;
   margin-bottom: 10px;
 
+  .title-part {
+    display: flex;
+    align-items: center; // 确保标题内元素垂直居中
+    gap: 15px; // 标题内元素间距
+  }
+
   .title-text {
     font-size: 36px;
     font-weight: bold;
@@ -304,11 +322,50 @@ export default {
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-    // text-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
     font-family: "Microsoft YaHei", sans-serif;
   }
 }
 
+// 大屏按钮样式：融入标题区域，不影响原有布局
+.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: 85%; // 与标题文字保持距离
+
+  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;
+    }
+  }
+}
+
+// 学校概况卡片样式（完全保留）
 .school-info-cards {
   display: flex;
   justify-content: space-between;
@@ -445,7 +502,6 @@ export default {
           b {
             font-size: 16px;
             font-weight: normal;
-            // margin-left: 4px;
           }
         }
       }
@@ -491,6 +547,7 @@ export default {
   }
 }
 
+// 仪表盘容器样式（完全保留）
 .dashboard-container {
   display: flex;
   width: 100%;
@@ -568,4 +625,4 @@ export default {
     }
   }
 }
-</style>
+</style>