大屏页面布局

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>

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

@@ -0,0 +1,262 @@
+<template>
+  <div class="erp-layout-container">
+    <div class="erp-section erp-top-header">
+      <div class="erp-card full-card">
+        <h3>ERP页面顶部区域 (10%)</h3>
+        <p>可放置筛选、标题、概览数据等</p>
+      </div>
+    </div>
+
+    <div class="erp-section erp-upper-section">
+      <div class="erp-col erp-col-1-3">
+        <div class="erp-card">
+          <h3>上部列1</h3>
+          <p>ERP数据面板1</p>
+        </div>
+      </div>
+      <div class="erp-col erp-col-1-3">
+        <div class="erp-card">
+          <h3>上部列2</h3>
+          <p>ERP数据面板2</p>
+        </div>
+      </div>
+      <div class="erp-col erp-col-1-3">
+        <div class="erp-card">
+          <h3>上部列3</h3>
+          <p>ERP数据面板3</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="erp-section erp-middle-section">
+      <div class="erp-col erp-col-1-2">
+        <div class="erp-inner-layout">
+          <div class="erp-col erp-col-1-2">
+            <div class="erp-card">
+              <h3>中部左1列</h3>
+              <p>ERP明细1</p>
+            </div>
+          </div>
+          <div class="erp-col erp-col-1-2">
+            <div class="erp-card">
+              <h3>中部左2列</h3>
+              <p>ERP明细2</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="erp-col erp-col-1-2">
+        <div class="erp-card">
+          <h3>中部右侧列</h3>
+          <p>ERP核心数据展示</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="erp-section erp-lower-section">
+      <div class="erp-col erp-col-1-2">
+        <div class="erp-inner-layout">
+          <div class="erp-col erp-col-1-2">
+            <div class="erp-card">
+              <h3>下部左1列</h3>
+              <p>ERP统计1</p>
+            </div>
+          </div>
+          <div class="erp-col erp-col-1-2">
+            <div class="erp-card">
+              <h3>下部左2列</h3>
+              <p>ERP统计2</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="erp-col erp-col-1-2">
+        <div class="erp-card">
+          <h3>下部右侧列</h3>
+          <p>ERP报表/图表展示</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.erp-layout-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px;
+  margin: 0 !important;
+  box-sizing: border-box;
+  background-color: transparent;
+  overflow: hidden;
+}
+
+.erp-section {
+  width: 100%;
+  display: flex;
+  gap: 6px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.erp-top-header {
+  height: 10%;
+}
+
+.erp-upper-section,
+.erp-middle-section,
+.erp-lower-section {
+  height: 30%;
+}
+
+.erp-col {
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.erp-col-1-3 {
+  width: calc((100% - 12px) / 3);
+}
+
+.erp-col-1-2 {
+  width: calc((100% - 6px) / 2);
+}
+
+.erp-inner-layout {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  gap: 6px;
+  box-sizing: border-box;
+}
+
+.erp-card {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(15, 52, 96, 0.9);
+  border: 1px solid #1a508b;
+  border-radius: 8px;
+  padding: 12px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #e0e6ff;
+  backdrop-filter: blur(4px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  min-height: 0;
+}
+
+.full-card {
+  width: 100%;
+}
+
+.erp-card:hover {
+  box-shadow: 0 4px 12px rgba(60, 156, 255, 0.3);
+  border-color: #3c9cff;
+  transition: all 0.3s ease;
+}
+
+.erp-card h3 {
+  font-size: 16px;
+  margin-bottom: 8px;
+  letter-spacing: 1px;
+  background: #3c9cff;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 600;
+}
+
+.erp-card p {
+  font-size: 13px;
+  opacity: 0.75;
+  color: #b4c7e7;
+  text-align: center;
+  line-height: 1.5;
+}
+
+@media (max-width: 1600px) {
+  .erp-layout-container {
+    padding: 6px;
+    gap: 4px;
+  }
+  .erp-section {
+    gap: 4px;
+  }
+  .erp-col-1-3 {
+    width: calc((100% - 8px) / 3);
+  }
+  .erp-col-1-2 {
+    width: calc((100% - 4px) / 2);
+  }
+  .erp-inner-layout {
+    gap: 4px;
+  }
+  .erp-card {
+    padding: 10px;
+  }
+  .erp-card h3 {
+    font-size: 14px;
+  }
+  .erp-card p {
+    font-size: 12px;
+  }
+}
+
+@media (max-width: 768px) {
+  .erp-layout-container {
+    flex-direction: column;
+    height: auto;
+    min-height: 100%;
+    padding: 6px;
+    gap: 6px;
+    overflow-y: auto;
+  }
+  .erp-section {
+    flex-direction: column;
+    height: auto !important;
+    min-height: 120px;
+    gap: 6px;
+  }
+  .erp-col-1-3,
+  .erp-col-1-2 {
+    width: 100%;
+    height: calc((100% - 12px) / 3);
+  }
+  .erp-inner-layout {
+    flex-direction: column;
+    height: 100%;
+  }
+  .erp-card {
+    padding: 8px;
+  }
+}
+
+@media (max-height: 900px) {
+  .erp-layout-container {
+    padding: 6px;
+    gap: 4px;
+  }
+  .erp-section {
+    gap: 4px;
+  }
+  .erp-card {
+    padding: 8px;
+  }
+  .erp-card h3 {
+    font-size: 14px;
+    margin-bottom: 6px;
+  }
+  .erp-card p {
+    font-size: 12px;
+  }
+}
+</style>

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

@@ -0,0 +1,179 @@
+<template>
+  <div class="layout-container">
+    <div class="left-panel">
+      <div class="panel-content">
+        <h2>左侧区域 (20%)</h2>
+        <p>可放置侧边栏、筛选条件、导航等内容</p>
+      </div>
+    </div>
+
+    <div class="right-panel">
+      <div class="panel-content">
+        <h2>右侧区域 (80%)</h2>
+        <p>可放置主要内容、图表、大屏展示等内容</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.layout-container {
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  box-sizing: border-box;
+  flex-wrap: nowrap;
+}
+
+.left-panel {
+  width: 20%;
+  height: 100%;
+  background-color: rgba(15, 52, 96, 0.9);
+  border-right: 1px solid #1a508b;
+  border-radius: 11px 0 0 11px;
+  padding: 16px;
+  box-sizing: border-box;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #3c9cff rgba(15, 52, 96, 0.5);
+}
+
+.left-panel::-webkit-scrollbar {
+  width: 6px;
+}
+.left-panel::-webkit-scrollbar-track {
+  background: rgba(15, 52, 96, 0.5);
+  border-radius: 3px;
+}
+.left-panel::-webkit-scrollbar-thumb {
+  background-color: #3c9cff;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.right-panel {
+  width: 80%;
+  height: 100%;
+  background-color: rgba(15, 52, 96, 0.9);
+  border-left: 1px solid #1a508b;
+  border-radius: 0 11px 11px 0;
+  padding: 16px;
+  box-sizing: border-box;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #3c9cff rgba(15, 52, 96, 0.5);
+}
+
+.right-panel::-webkit-scrollbar {
+  width: 6px;
+}
+.right-panel::-webkit-scrollbar-track {
+  background: rgba(15, 52, 96, 0.5);
+  border-radius: 3px;
+}
+.right-panel::-webkit-scrollbar-thumb {
+  background-color: #3c9cff;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.panel-content {
+  color: #e0e6ff;
+  text-align: center;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+}
+
+.panel-content h2 {
+  font-size: 22px;
+  opacity: 0.95;
+  letter-spacing: 1px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.panel-content p {
+  font-size: 16px;
+  opacity: 0.75;
+  color: #b4c7e7;
+  max-width: 80%;
+  line-height: 1.6;
+}
+
+@media (max-width: 1600px) {
+  .left-panel, .right-panel {
+    padding: 12px;
+  }
+  .panel-content h2 {
+    font-size: 20px;
+  }
+  .panel-content p {
+    font-size: 14px;
+  }
+}
+
+@media (max-width: 768px) {
+  .layout-container {
+    flex-direction: column;
+  }
+  .left-panel {
+    width: 100%;
+    height: 20%;
+    border-right: none;
+    border-bottom: 1px solid #1a508b;
+    border-radius: 11px 11px 0 0;
+  }
+  .right-panel {
+    width: 100%;
+    height: 80%;
+    border-left: none;
+    border-top: 1px solid #1a508b;
+    border-radius: 0 0 11px 11px;
+  }
+  .panel-content h2 {
+    font-size: 18px;
+  }
+  .panel-content p {
+    font-size: 13px;
+    max-width: 90%;
+  }
+}
+
+@media (max-height: 900px) {
+  .left-panel, .right-panel {
+    padding: 10px;
+  }
+  .panel-content {
+    gap: 12px;
+  }
+  .panel-content h2 {
+    font-size: 18px;
+  }
+  .panel-content p {
+    font-size: 14px;
+  }
+}
+
+@media (max-height: 600px) {
+  .panel-content {
+    justify-content: flex-start;
+    padding-top: 20px;
+  }
+  .panel-content h2 {
+    font-size: 16px;
+  }
+  .panel-content p {
+    font-size: 12px;
+  }
+}
+</style>

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

@@ -0,0 +1,246 @@
+<template>
+  <div class="work-layout-container">
+    <div class="work-section work-top-header">
+      <div class="work-card full-card">
+        <h3>Work页面顶部区域 (10%)</h3>
+        <p>可放置工作概览、筛选条件、操作按钮等</p>
+      </div>
+    </div>
+
+    <div class="work-main-container">
+      <div class="work-col">
+        <div class="work-inner-section work-inner-one-third">
+          <div class="work-card">
+            <h3>左侧上部</h3>
+            <p>工作列表1</p>
+          </div>
+        </div>
+        <div class="work-inner-section work-inner-one-third">
+          <div class="work-card">
+            <h3>左侧中部</h3>
+            <p>工作列表2</p>
+          </div>
+        </div>
+        <div class="work-inner-section work-inner-one-third">
+          <div class="work-card">
+            <h3>左侧下部</h3>
+            <p>工作列表3</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="work-col">
+        <div class="work-inner-section work-inner-two-third">
+          <div class="work-card">
+            <h3>中间上部 (60%)</h3>
+            <p>核心工作内容/进度展示</p>
+          </div>
+        </div>
+        <div class="work-inner-section work-inner-one-third">
+          <div class="work-card">
+            <h3>中间下部 (30%)</h3>
+            <p>工作统计/快捷操作</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="work-col">
+        <div class="work-inner-section work-inner-one-third">
+          <div class="work-card">
+            <h3>右侧上部</h3>
+            <p>工作图表/数据可视化1</p>
+          </div>
+        </div>
+        <div class="work-inner-section work-inner-one-third">
+          <div class="work-card">
+            <h3>右侧中部</h3>
+            <p>工作图表/数据可视化2</p>
+          </div>
+        </div>
+        <div class="work-inner-section work-inner-one-third">
+          <div class="work-card">
+            <h3>右侧下部</h3>
+            <p>待办/提醒/通知</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.work-layout-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px;
+  margin: 0 !important;
+  box-sizing: border-box;
+  background-color: transparent;
+  overflow: hidden;
+}
+
+.work-top-header {
+  width: 100%;
+  height: 10%;
+  display: flex;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.work-main-container {
+  width: 100%;
+  height: 90%;
+  display: flex;
+  gap: 6px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.work-col {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.work-inner-one-third {
+  flex: 1;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.work-inner-two-third {
+  flex: 2;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.work-card {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(15, 52, 96, 0.9);
+  border: 1px solid #1a508b;
+  border-radius: 8px;
+  padding: 12px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #e0e6ff;
+  backdrop-filter: blur(4px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  min-height: 0;
+}
+
+.full-card {
+  width: 100%;
+}
+
+.work-card:hover {
+  box-shadow: 0 4px 12px rgba(60, 156, 255, 0.3);
+  border-color: #3c9cff;
+  transition: all 0.3s ease;
+}
+
+.work-card h3 {
+  font-size: 16px;
+  margin-bottom: 8px;
+  letter-spacing: 1px;
+  background: #3c9cff;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 600;
+}
+
+.work-card p {
+  font-size: 13px;
+  opacity: 0.75;
+  color: #b4c7e7;
+  text-align: center;
+  line-height: 1.5;
+}
+
+@media (max-width: 1600px) {
+  .work-layout-container {
+    padding: 6px;
+    gap: 4px;
+  }
+  .work-main-container {
+    gap: 4px;
+  }
+  .work-col {
+    gap: 4px;
+  }
+  .work-card {
+    padding: 10px;
+  }
+  .work-card h3 {
+    font-size: 14px;
+  }
+  .work-card p {
+    font-size: 12px;
+  }
+}
+
+@media (max-width: 768px) {
+  .work-layout-container {
+    flex-direction: column;
+    height: auto;
+    min-height: 100%;
+    padding: 6px;
+    gap: 6px;
+    overflow-y: auto;
+  }
+  .work-top-header {
+    height: auto;
+    min-height: 80px;
+  }
+  .work-main-container {
+    flex-direction: column;
+    height: auto;
+    min-height: calc(100% - 80px);
+    gap: 6px;
+  }
+  .work-col {
+    width: 100%;
+    height: 33%;
+    gap: 6px;
+  }
+  .work-card {
+    padding: 8px;
+  }
+}
+
+@media (max-height: 900px) {
+  .work-layout-container {
+    padding: 6px;
+    gap: 4px;
+  }
+  .work-main-container {
+    gap: 4px;
+  }
+  .work-col {
+    gap: 4px;
+  }
+  .work-card {
+    padding: 8px;
+  }
+  .work-card h3 {
+    font-size: 14px;
+    margin-bottom: 6px;
+  }
+  .work-card p {
+    font-size: 12px;
+  }
+}
+</style>