大屏页面布局

screen-vue/src/views/desktop/index.vue

@@ -2,7 +2,7 @@
   <div class="big-screen-container">
     <header class="screen-header">
       <div class="title-center">
-        <h1 class="main-title">企业数据可视化大屏</h1>
+        <h1 class="main-title">{{ screenTitle }}</h1>
       </div>
       <div class="tabs-container">
         <div class="tabs-left">
@@ -24,6 +24,7 @@
             start-placeholder="开始日期"
             end-placeholder="结束日期"
             popper-class="dark-date-popper"
+            value-format="YYYY-MM-DD"
           ></el-date-picker>
           <button class="query-btn" @click="handleQuery">查询</button>
         </div>
@@ -31,33 +32,39 @@
     </header>
 
     <main class="screen-content">
-      <div v-if="activeTab === 'sales'" class="screen-page">
-        <div class="demo-tip">核心销售大屏内容</div>
+      <div v-if="activeTab === 'home'" class="screen-page">
+        <HomeIndex />
       </div>
-      <div v-else-if="activeTab === 'operation'" class="screen-page">
-        <div class="demo-tip">运营分析大屏内容</div>
+      <div v-else-if="activeTab === 'work'" class="screen-page">
+        <WorkIndex />
       </div>
-      <div v-else-if="activeTab === 'inventory'" class="screen-page">
-        <div class="demo-tip">库存管理大屏内容</div>
-      </div>
-      <div v-else-if="activeTab === 'finance'" class="screen-page">
-        <div class="demo-tip">财务数据大屏内容</div>
+      <div v-else-if="activeTab === 'erp'" class="screen-page">
+        <ErpIndex />
       </div>
     </main>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref } from 'vue';
+import HomeIndex from './screen/Home/index.vue';
+import ErpIndex from './screen/Erp/index.vue';
+import WorkIndex from './screen/Work/index.vue';
+
+const screenTitle = ref('数字化可视化');
+
+const FormValues = ref({
+  startDate: "",
+  endDate: ""
+});
 
 const allTabs = [
-  { key: 'sales', name: '销售大屏' },
-  { key: 'operation', name: '运营大屏' },
-  { key: 'inventory', name: '库存大屏' },
-  { key: 'finance', name: '财务大屏' },
+  { key: 'home', name: '首页' },
+  { key: 'work', name: '工作' },
+  { key: 'erp', name: '财务' },
 ]
 
-const activeTab = ref('sales')
+const activeTab = ref('home')
 const queryDate = ref('')
 
 const switchTab = (key) => {
@@ -65,7 +72,9 @@ const switchTab = (key) => {
 }
 
 const handleQuery = () => {
-  console.log('查询日期：', queryDate.value)
+  const [startDate, endDate] = queryDate.value || [];
+  FormValues.value.startDate = startDate || "";
+  FormValues.value.endDate = endDate || "";
 }
 </script>
 
@@ -114,7 +123,6 @@ const handleQuery = () => {
 }
 </style>
 
-<!-- 组件专属样式（scoped隔离） -->
 <style scoped>
 * {
   margin: 0;
@@ -159,30 +167,36 @@ const handleQuery = () => {
 .title-center {
   position: absolute;
   left: 50%;
-  top: 35%;
+  top: 50%;
   transform: translate(-50%, -50%);
+  z-index: 9999 !important;
+  padding: 4px 20px;
+  border-radius: 8px;
 }
 
 .main-title {
   font-size: 32px;
   font-weight: 720;
-  background: #3c9cff;
+  background: linear-gradient(90deg, #3c9cff, #82b9ff);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   white-space: nowrap;
+   z-index: 9999 !important;
   letter-spacing: 2px;
+  text-shadow: 0 0 8px rgba(60, 156, 255, 0.8);
 }
 
 .tabs-container {
   position: absolute;
   left: 0;
-  bottom: 1px;
+  bottom: 0;
   width: 100%;
   padding: 0 2vw;
   display: flex;
   justify-content: space-between;
   align-items: center;
   z-index: 10;
+  height: 40px;
 }
 
 .tabs-left {
@@ -206,7 +220,7 @@ const handleQuery = () => {
 }
 
 .tab-item:hover {
-  background: url('@/assets/images/button2.png') no-repeat center center;
+  background: url('@/assets/images/button1.png') no-repeat center center;
   background-size: 100% 100%;
   color: #fff;
 }
@@ -228,7 +242,6 @@ const handleQuery = () => {
   height: 100%;
 }
 
-/* 日期输入框样式（scoped+deep穿透） */
 :deep(.el-input),
 :deep(.el-input__wrapper),
 :deep(.el-input__inner) {
@@ -274,30 +287,23 @@ const handleQuery = () => {
 .screen-content {
   flex: 1;
   padding: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  display: block;
   position: relative;
   z-index: 10;
+  overflow: hidden;
+  height: calc(100vh - 75px);
 }
 
 .screen-page {
   width: 100%;
   height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  display: block;
   background: rgba(15, 52, 96, 0.8);
   border: 1px solid #1a508b;
   border-radius: 12px;
   backdrop-filter: blur(8px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-}
-
-.demo-tip {
-  font-size: 24px;
-  color: #e0e6ff;
-  letter-spacing: 1px;
+  overflow: hidden;
 }
 
 @media (max-width: 1600px) {
@@ -310,10 +316,6 @@ const handleQuery = () => {
     height: 32px;
     line-height: 32px;
   }
-  .date-picker-wrapper {
-    width: 220px;
-    height: 32px;
-  }
   .query-btn {
     height: 32px;
     font-size: 14px;
@@ -326,20 +328,18 @@ const handleQuery = () => {
     height: 65px;
   }
   .tabs-container {
-    bottom: 1px;
+    height: 36px;
   }
   .tab-item {
     height: 32px;
     line-height: 32px;
   }
-  .date-picker-wrapper {
-    height: 32px;
-  }
   .query-btn {
     height: 32px;
   }
   .screen-content {
-    padding: 15px;
+    padding: 10px;
+    height: calc(100vh - 65px);
   }
 }
 </style>