大屏项目初始化

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

@@ -24,12 +24,14 @@
       </div>
       <div class="right-section">
         <div class="right-top-section">
-          <el-card class="right-card right-top-card">
-            <div class="right-placeholder">上区域内容</div>
+          <el-card shadow="hover" class="card-item right-top-card">
+            <div class="right-placeholder">
+				<ChartNote />
+			</div>
           </el-card>
         </div>
         <div class="right-bottom-section">
-          <el-card class="right-card right-bottom-card">
+          <el-card shadow="hover" class="card-item right-bottom-card">
             <div class="right-placeholder">下区域内容</div>
           </el-card>
         </div>
@@ -44,6 +46,7 @@ import UserTop from './components/UserTop.vue';
 import NoteLeft from './components/Note.vue'
 import AlertMain from './components/Alert.vue'
 import QuickLogin from './components/Quick.vue'
+import ChartNote from './components/ChartNote.vue'
 </script>
 
 <style scoped>
@@ -91,7 +94,7 @@ import QuickLogin from './components/Quick.vue'
 }
 
 .left-section {
-  width: 35%;
+  width: 45%;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -101,6 +104,7 @@ import QuickLogin from './components/Quick.vue'
   overflow: hidden;
 }
 
+/* 核心样式：card-item 统一所有卡片样式 */
 .card-item {
   flex: 1;
   display: flex;
@@ -136,30 +140,24 @@ import QuickLogin from './components/Quick.vue'
   box-sizing: border-box;
 }
 
-.right-card {
+/* 移除右侧卡片独立样式，统一继承 card-item */
+.right-top-card, .right-bottom-card {
+  /* 仅保留占位，如需特殊样式可在此添加 */
+}
+
+/* 统一卡片内容占位符样式 */
+.right-placeholder {
+  padding: 4px;
+  text-align: center;
+  width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #999;
-  font-size: 16px;
   box-sizing: border-box;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
-  transition: all 0.3s ease;
-  background-color: #fff;
-}
-
-.right-card:hover {
-  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
-  transform: translateY(-2px);
-}
-
-.right-placeholder {
-  padding: 4px;
-  text-align: center;
 }
 
+/* 深度样式统一作用于所有 el-card */
 :deep(.el-card) {
   border-radius: 8px;
   height: 100%;
@@ -179,6 +177,7 @@ import QuickLogin from './components/Quick.vue'
   transform: translateY(-2px);
 }
 
+/* 响应式样式保持不变 */
 @media (max-width: 768px) {
   .main-section {
     flex-direction: column;