diff --git a/screen-vue/src/views/screen/Home/components/ChartTop.vue b/screen-vue/src/views/screen/Home/components/ChartTop.vue
new file mode 100644
index 0000000..a7dcdc7
--- /dev/null
+++ b/screen-vue/src/views/screen/Home/components/ChartTop.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="chart-top-container">
+    <div class="card-item" v-for="(item, index) in cardList" :key="index">
+      <div class="card-left">
+        <div class="icon-box">
+          <img 
+            :src="item.iconImg" 
+            class="icon-img"
+            :style="{ filter: item.iconFilter }"
+          >
+        </div>
+        <div class="card-text">
+          <div class="module-name">{{ item.module }}</div>
+          <div class="desc-text">{{ item.title }}</div>
+        </div>
+      </div>
+      <div class="card-right">
+        <div class="num-value">{{ item.value }}</div>
+        <div class="num-label">{{ item.label }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+import { getIndexInfoList } from '@/api/bizApi'
+const cardList = ref()
+
+async function getList() {
+  try {
+	  const reqParams = {
+		  indexCode: "workIndex"
+	  }
+    const res = await getIndexInfoList(reqParams)
+    cardList.value = res || []
+  } catch (error) {
+    console.error('获取数据失败:', error)
+    cardList.value = []
+  }
+}
+
+const resizeHandler = () => {
+  const container = document.querySelector('.chart-top-container')
+  if (container) {
+    const height = container.parentElement.clientHeight
+    container.style.height = `${height}px`
+  }
+}
+
+onMounted(() => {
+	getList()
+})
+
+watch(
+  () => {},
+  () => {
+    window.removeEventListener('resize', resizeHandler)
+  },
+  { once: true }
+)
+</script>
+
+<style scoped>
+.chart-top-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 4px;
+  box-sizing: border-box;
+  flex-wrap: wrap;
+  background: transparent;
+}
+
+.card-item {
+  flex: 1;
+  min-width: 160px;
+  height: 85%;
+  background: rgba(15, 52, 96, 0.1);
+  border: 1px solid rgba(26, 80, 139, 0.3);
+  border-radius: 8px;
+  padding: 0 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(2px);
+}
+
+.card-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(60, 156, 255, 0.2);
+  border-color: rgba(60, 156, 255, 0.6);
+}
+
+.card-left {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.icon-box {
+  width: 40px;
+  height: 40px;
+  background: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid rgba(224, 230, 255, 0.1);
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+
+.icon-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  opacity: 0.9;
+  transition: all 0.2s ease;
+}
+
+.icon-box:hover .icon-img {
+  opacity: 1;
+  transform: scale(1.05);
+  filter: brightness(1.1) contrast(1.2);
+}
+
+.card-text {
+  color: #e0e6ff;
+}
+
+.module-name {
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.desc-text {
+  font-size: 11px;
+  opacity: 0.7;
+  margin-top: 2px;
+}
+
+.card-right {
+  text-align: right;
+  color: #e0e6ff;
+}
+
+.num-value {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1;
+  background: linear-gradient(to right, #3c9cff, #7472fe);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.num-label {
+  font-size: 11px;
+  opacity: 0.7;
+  margin-top: 4px;
+}
+
+@media (max-width: 1600px) {
+  .card-item {
+    min-width: 140px;
+    padding: 0 6px;
+  }
+  .icon-box {
+    width: 36px;
+    height: 36px;
+  }
+  .module-name {
+    font-size: 14px;
+  }
+  .num-value {
+    font-size: 22px;
+  }
+}
+
+@media (max-width: 768px) {
+  .chart-top-container {
+    flex-direction: column;
+    height: auto !important;
+    gap: 4px;
+    padding: 2px;
+  }
+  .card-item {
+    width: 100%;
+    height: 80px;
+    min-width: unset;
+    padding: 0 8px;
+  }
+}
+
+@media (max-height: 900px) {
+  .card-item {
+    height: 80%;
+  }
+  .icon-box {
+    width: 32px;
+    height: 32px;
+  }
+  .num-value {
+    font-size: 20px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/screen/Home/components/ChartV01.vue b/screen-vue/src/views/screen/Home/components/ChartV01.vue
new file mode 100644
index 0000000..875dd10
--- /dev/null
+++ b/screen-vue/src/views/screen/Home/components/ChartV01.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">1</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/desck3.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/screen/Home/components/ChartV02.vue b/screen-vue/src/views/screen/Home/components/ChartV02.vue
new file mode 100644
index 0000000..d4345f4
--- /dev/null
+++ b/screen-vue/src/views/screen/Home/components/ChartV02.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">2</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/desck3.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/screen/Home/components/ChartV03.vue b/screen-vue/src/views/screen/Home/components/ChartV03.vue
new file mode 100644
index 0000000..28b8d5a
--- /dev/null
+++ b/screen-vue/src/views/screen/Home/components/ChartV03.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">3</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/desck3.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/screen/Home/components/ChartV04.vue b/screen-vue/src/views/screen/Home/components/ChartV04.vue
new file mode 100644
index 0000000..bc8e3b2
--- /dev/null
+++ b/screen-vue/src/views/screen/Home/components/ChartV04.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">4</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/k2style.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/screen/Home/components/ChartV05.vue b/screen-vue/src/views/screen/Home/components/ChartV05.vue
new file mode 100644
index 0000000..cd176b8
--- /dev/null
+++ b/screen-vue/src/views/screen/Home/components/ChartV05.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">5</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/k2style.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/screen/Home/components/ChartV06.vue b/screen-vue/src/views/screen/Home/components/ChartV06.vue
new file mode 100644
index 0000000..02ac4f4
--- /dev/null
+++ b/screen-vue/src/views/screen/Home/components/ChartV06.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">6</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/k2style.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/screen/Home/components/ChartV07.vue b/screen-vue/src/views/screen/Home/components/ChartV07.vue
new file mode 100644
index 0000000..66202e7
--- /dev/null
+++ b/screen-vue/src/views/screen/Home/components/ChartV07.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">7</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/k2style.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/screen/Home/components/ChartV08.vue b/screen-vue/src/views/screen/Home/components/ChartV08.vue
new file mode 100644
index 0000000..6226b51
--- /dev/null
+++ b/screen-vue/src/views/screen/Home/components/ChartV08.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">8</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/k2style.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/screen/Home/components/ChartV09.vue b/screen-vue/src/views/screen/Home/components/ChartV09.vue
new file mode 100644
index 0000000..1a388c4
--- /dev/null
+++ b/screen-vue/src/views/screen/Home/components/ChartV09.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">9</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/k2style.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/screen/Home/components/ChartV10.vue b/screen-vue/src/views/screen/Home/components/ChartV10.vue
new file mode 100644
index 0000000..efd539d
--- /dev/null
+++ b/screen-vue/src/views/screen/Home/components/ChartV10.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">10</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/k2style.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/screen/Home/index.vue b/screen-vue/src/views/screen/Home/index.vue
index 02409e3..212467b 100644
--- a/screen-vue/src/views/screen/Home/index.vue
+++ b/screen-vue/src/views/screen/Home/index.vue
@@ -1,8 +1,281 @@
 <template>
+  <div class="work-layout-container">
+    <div class="work-section work-top-header">
+      <div class="work-card full-card">
+        <ChartTop />
+      </div>
+    </div>
+
+    <div class="work-section work-main-section">
+      <div class="work-row work-row-1-3">
+        <div
+          v-for="item in getComponentsBySortRange(1, 3)"
+          :key="item.sort"
+          class="work-card work-card-1-3"
+        >
+          <component
+            :is="componentMap[item.vueName]"
+            :formParams="FormValues"
+            v-if="componentMap[item.vueName]"
+          />
+        </div>
+      </div>
+
+      <div class="work-row work-row-1-3">
+        <div
+          v-for="item in getComponentsBySortRange(4, 5)"
+          :key="item.sort"
+          class="work-card work-card-1-2"
+        >
+          <component
+            :is="componentMap[item.vueName]"
+            :formParams="FormValues"
+            v-if="componentMap[item.vueName]"
+          />
+        </div>
+      </div>
+
+      <div class="work-row work-row-1-3">
+        <div
+          v-for="item in getComponentsBySortRange(6, 7)"
+          :key="item.sort"
+          class="work-card work-card-1-2"
+        >
+          <component
+            :is="componentMap[item.vueName]"
+            :formParams="FormValues"
+            v-if="componentMap[item.vueName]"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script>
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import ChartTop from './components/ChartTop.vue';
+import { getChartListAll } from '@/api/bizChart'
+
+const route = useRoute();
+
+const FormValues = ref({
+  reqParam: route.query.year
+});
+
+watch(
+  () => route.query.year,
+  (newVal) => {
+    FormValues.value.reqParam = newVal;
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+);
+
+const componentMap = ref({});
+const chartData = ref([]);
+
+const getComponentsBySortRange = (start, end) => {
+  return chartData.value.filter(item => item.sort >= start && item.sort <= end);
+};
+
+const loadComponent = async (vueName) => {
+  try {
+    const module = await import(`./components/${vueName}.vue`);
+    return module.default;
+  } catch (error) {
+    console.error('加载组件失败', error);
+    return null;
+  }
+};
+
+async function getChartList(){
+  try {
+    const reqParams = {
+      chartCode: 'home'
+    }
+    const res = await getChartListAll(reqParams)
+    chartData.value = res || []
+  } catch (error) {
+    console.error('获取数据失败:', error);
+    chartData.value = []
+  }
+}
+
+onMounted(async () => {
+  try {
+    await getChartList();
+    chartData.value = chartData.value.sort((a, b) => a.sort - b.sort);
+    const newComponentMap = {};
+    const uniqueComponents = [...new Set(chartData.value.map(item => item.vueName))];
+    for (const vueName of uniqueComponents) {
+      const component = await loadComponent(vueName);
+      if (component) {
+        newComponentMap[vueName] = component;
+      }
+    }
+    componentMap.value = newComponentMap;
+  } catch (error) {
+    console.error('加载图表数据失败：', error);
+  }
+});
 </script>
 
-<style>
+<style scoped>
+.work-layout-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 2px;
+  margin: 0 !important;
+  box-sizing: border-box;
+  background-color: transparent;
+  overflow: hidden;
+}
+
+.work-section {
+  width: 100%;
+  display: flex;
+  gap: 2px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.work-top-header {
+  height: 10%;
+}
+
+.work-main-section {
+  height: 90%;
+  flex-direction: column;
+}
+
+/* 行样式 */
+.work-row {
+  width: 100%;
+  display: flex;
+  gap: 2px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.work-row-1-3 {
+  height: calc((100% - 4px) / 3);
+}
+
+/* 一行 3 个时的卡片宽度 */
+.work-card-1-3 {
+  width: calc((100% - 4px) / 3);
+  height: 100%;
+}
+
+/* 一行 2 个时的卡片宽度 */
+.work-card-1-2 {
+  width: calc((100% - 2px) / 2);
+  height: 100%;
+}
+
+.work-card {
+  width: 100%;
+  background-color: rgba(15, 52, 96, 0.1);
+  border: 1px solid rgba(26, 80, 139, 0.3);
+  border-radius: 8px;
+  padding: 2px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #e0e6ff;
+  backdrop-filter: blur(2px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  min-height: 0;
+  margin: 0;
+}
+
+.full-card {
+  width: 100%;
+  height: 100%;
+}
+
+.work-card:hover {
+  box-shadow: 0 4px 12px rgba(60, 156, 255, 0.2);
+  border-color: rgba(60, 156, 255, 0.6);
+  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;
+}
+
+.empty-card {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  color: #88a0c2;
+  font-size: 14px;
+}
+
+@media (max-width: 1600px) {
+  .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%;
+    overflow-y: auto;
+  }
+  .work-section {
+    flex-direction: column;
+    height: auto !important;
+    min-height: 120px;
+  }
+  .work-row-1-3 {
+    height: auto;
+    flex-direction: column;
+  }
+  .work-card-1-3,
+  .work-card-1-2 {
+    width: 100%;
+    height: 120px;
+    margin-bottom: 2px;
+  }
+}
+
+@media (max-height: 900px) {
+  .work-card h3 {
+    font-size: 14px;
+    margin-bottom: 6px;
+  }
+  .work-card p {
+    font-size: 12px;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/screen-vue/src/views/screen/Setting/components/Home.vue b/screen-vue/src/views/screen/Setting/components/Home.vue
index 02409e3..595b31e 100644
--- a/screen-vue/src/views/screen/Setting/components/Home.vue
+++ b/screen-vue/src/views/screen/Setting/components/Home.vue
@@ -1,8 +1,608 @@
 <template>
+  <div class="work-layout-container">
+    <div class="main-wrapper">
+      <div class="left-area">
+        <div class="work-section work-top-header">
+          <div class="work-card full-card">
+            <div class="chart-top-inner">
+              <h2>首页可视化大屏指标配置</h2>
+              <div class="btn-group">
+                <el-button type="primary" size="default" @click="handleSave"
+                :loading="saveLoading" :disabled="saveLoading">保存</el-button>
+                <el-button type="warning" size="default" @click="handleReset">重置</el-button>
+                <el-button type="danger" size="default" @click="handleClearAll">清空</el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="work-section work-main-section">
+          <div class="layout-row top-row">
+            <div class="work-col work-col-1-3">
+              <div class="work-card full-height-card">
+                <span v-if="metric1.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(1)">×</span>
+                <div class="grid-content" @drop="(e) => handleDrop(e, 1)" @dragover="(e) => e.preventDefault()">
+                  <div v-if="metric1.length > 0" class="metric-tag">
+                    <span class="sort-num">指标{{1}}</span>
+                    {{ metric1[0].chartName }}
+                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric1[0].chartId }}</small>
+                  </div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{1}}）</div>
+                </div>
+              </div>
+            </div>
+            <div class="work-col work-col-1-3">
+              <div class="work-card full-height-card">
+                <span v-if="metric2.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(2)">×</span>
+                <div class="grid-content" @drop="(e) => handleDrop(e, 2)" @dragover="(e) => e.preventDefault()">
+                  <div v-if="metric2.length > 0" class="metric-tag">
+                    <span class="sort-num">指标{{2}}</span>
+                    {{ metric2[0].chartName }}
+                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric2[0].chartId }}</small>
+                  </div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{2}}）</div>
+                </div>
+              </div>
+            </div>
+            <div class="work-col work-col-1-3">
+              <div class="work-card full-height-card">
+                <span v-if="metric3.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(3)">×</span>
+                <div class="grid-content" @drop="(e) => handleDrop(e, 3)" @dragover="(e) => e.preventDefault()">
+                  <div v-if="metric3.length > 0" class="metric-tag">
+                    <span class="sort-num">指标{{3}}</span>
+                    {{ metric3[0].chartName }}
+                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric3[0].chartId }}</small>
+                  </div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{3}}）</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="layout-row middle-row">
+            <div class="work-col work-col-1-2">
+              <div class="work-card full-height-card">
+                <span v-if="metric4.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(4)">×</span>
+                <div class="grid-content" @drop="(e) => handleDrop(e, 4)" @dragover="(e) => e.preventDefault()">
+                  <div v-if="metric4.length > 0" class="metric-tag">
+                    <span class="sort-num">指标{{4}}</span>
+                    {{ metric4[0].chartName }}
+                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric4[0].chartId }}</small>
+                  </div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{4}}）</div>
+                </div>
+              </div>
+            </div>
+            <div class="work-col work-col-1-2">
+              <div class="work-card full-height-card">
+                <span v-if="metric5.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(5)">×</span>
+                <div class="grid-content" @drop="(e) => handleDrop(e, 5)" @dragover="(e) => e.preventDefault()">
+                  <div v-if="metric5.length > 0" class="metric-tag">
+                    <span class="sort-num">指标{{5}}</span>
+                    {{ metric5[0].chartName }}
+                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric5[0].chartId }}</small>
+                  </div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{5}}）</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="layout-row bottom-row">
+            <div class="work-col work-col-1-2">
+              <div class="work-card full-height-card">
+                <span v-if="metric6.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(6)">×</span>
+                <div class="grid-content" @drop="(e) => handleDrop(e, 6)" @dragover="(e) => e.preventDefault()">
+                  <div v-if="metric6.length > 0" class="metric-tag">
+                    <span class="sort-num">指标{{6}}</span>
+                    {{ metric6[0].chartName }}
+                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric6[0].chartId }}</small>
+                  </div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{6}}）</div>
+                </div>
+              </div>
+            </div>
+            <div class="work-col work-col-1-2">
+              <div class="work-card full-height-card">
+                <span v-if="metric7.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(7)">×</span>
+                <div class="grid-content" @drop="(e) => handleDrop(e, 7)" @dragover="(e) => e.preventDefault()">
+                  <div v-if="metric7.length > 0" class="metric-tag">
+                    <span class="sort-num">指标{{7}}</span>
+                    {{ metric7[0].chartName }}
+                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric7[0].chartId }}</small>
+                  </div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{7}}）</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="right-area">
+        <div class="search-box">
+          <el-input v-model="searchKey" placeholder="搜索指标项..." size="default"></el-input>
+        </div>
+        <div class="metric-list">
+          <div v-for="item in allMetricList" :key="item.chartId" class="metric-item" :class="{ active: isMetricUsed(item.chartId) }" draggable="true" @dragstart="(e) => handleDragStart(e, item)" @dragend="handleDragEnd">
+            <span>{{ item.chartName }}</span>
+            <span class="color-dot" :style="{ backgroundColor: item.color || getRandomColor() }"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { ElMessage, ElButton, ElInput } from 'element-plus';
+import { getChartListAll, getChartSetting } from '@/api/bizChart'
+
+const metric1 = ref([]);
+const metric2 = ref([]);
+const metric3 = ref([]);
+const metric4 = ref([]);
+const metric5 = ref([]);
+const metric6 = ref([]);
+const metric7 = ref([]);
+
+const gridOriginalChartId = ref({
+  1: null, 2: null, 3: null,
+  4: null, 5: null, 6: null, 7: null
+});
+const metricHistory = ref({});
+
+const saveLoading = ref(false);
+const rawChartData = ref([]);
+const searchKey = ref('');
+const dragItem = ref(null);
+
+const allMetricList = computed({
+  get() {
+    if (!rawChartData.value || !Array.isArray(rawChartData.value)) return [];
+    return rawChartData.value.filter(item => {
+      if (!item || !item.chartName) return false;
+      const searchVal = searchKey.value ? searchKey.value.toLowerCase() : '';
+      const nameVal = item.chartName ? item.chartName.toLowerCase() : '';
+      return nameVal.includes(searchVal);
+    });
+  },
+  set(val) {
+    rawChartData.value = val;
+  }
+});
+
+const getAllMetricArrays = () => ([
+  metric1, metric2, metric3,
+  metric4, metric5, metric6, metric7
+]);
+
+const getMetricArrByGridNum = (gridNum) => {
+  return getAllMetricArrays()[gridNum - 1];
+};
+
+const isMetricUsed = (metricId) => {
+  if (!metricId) return false;
+  return getAllMetricArrays().some(
+    metricArr => metricArr.value.some(m => m && m.chartId === metricId)
+  );
+};
+
+const findGridNumByChartId = (chartId) => {
+  const arr = getAllMetricArrays();
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i].value.length && arr[i].value[0].chartId === chartId) {
+      return i + 1;
+    }
+  }
+  return null;
+};
+
+const handleDragStart = (e, item) => {
+  dragItem.value = item;
+  e.dataTransfer.setData('text/plain', JSON.stringify(item));
+  e.target.style.opacity = '0.6';
+};
+
+const handleDragEnd = (e) => {
+  e.target.style.opacity = '1';
+};
+
+const handleDrop = (e, targetGrid) => {
+  e.preventDefault();
+  if (!dragItem.value) return;
+  
+  const dragChartId = dragItem.value.chartId;
+  const sourceGrid = findGridNumByChartId(dragChartId);
+  const targetArr = getMetricArrByGridNum(targetGrid);
+  const targetOldItem = targetArr.value[0] || null;
+  const oldSort = sourceGrid || metricHistory.value[dragChartId] || 0;
+
+  getAllMetricArrays().forEach((arr, index) => {
+    const gridNum = index + 1;
+    if (gridNum !== targetGrid) {
+      arr.value = arr.value.filter(i => i.chartId !== dragChartId);
+    }
+  });
+  
+  const newItem = {
+    ...dragItem.value,
+    sort: targetGrid,
+    oldSort: oldSort,
+    chartId: dragChartId,
+    oldChartId: gridOriginalChartId.value[targetGrid] || targetOldItem?.chartId || null,
+  };
+  targetArr.value = [newItem];
+  metricHistory.value[dragChartId] = targetGrid;
+  if (sourceGrid && sourceGrid !== targetGrid) {
+    const sourceArr = getMetricArrByGridNum(sourceGrid);
+    sourceArr.value = [];
+  }
+  dragItem.value = null;
+};
+
+const handleDeleteMetric = (gridNum) => {
+  const targetArr = getMetricArrByGridNum(gridNum);
+  if (targetArr) {
+    targetArr.value = [];
+  }
+};
+
+const handleReset = () => {
+  getAllMetricArrays().forEach(arr => arr.value = []);
+  searchKey.value = '';
+  getChartList();
+  ElMessage.info('已重置所有指标');
+};
+
+const handleClearAll = () => {
+  getAllMetricArrays().forEach(arr => arr.value = []);
+  ElMessage.info('已清空所有格子');
+};
+
+const handleSave = async () => {
+  saveLoading.value = true;
+  const saveData = getAllMetricArrays().map((arr, index) => {
+    const gridNum = index + 1;
+    const currentItem = arr.value[0];
+    return {
+      sort: gridNum,
+      chartId: currentItem?.chartId || null,
+      oldChartId: currentItem?.oldChartId || null,
+      chartName: currentItem?.chartName || '',
+      chartCode: 'home',
+      oldSort: currentItem?.oldSort || gridNum,
+      color: currentItem?.color || ''
+    };
+  }).filter(item => item.chartId);
+
+  try {
+    const res = await getChartSetting(saveData);
+    ElMessage.success(res?.msg);
+    return saveData;
+  } catch (error) {
+    console.error('保存失败：', error);
+  } finally {
+    getChartList();
+    saveLoading.value = false;
+  }
+};
+
+const getRandomColor = () => {
+  const colors = ['#3c9cff', '#5ac8fa', '#9254de', '#f7ba2a', '#ff7d00', '#23c8c8', '#ff6b6b'];
+  return colors[Math.floor(Math.random() * colors.length)];
+};
+
+async function getChartList() {
+  try {
+    const reqParams = { chartCode: 'home' };
+    const res = await getChartListAll(reqParams);
+    rawChartData.value = res || [];
+    metricHistory.value = {};
+    Object.keys(gridOriginalChartId.value).forEach(key => {
+      gridOriginalChartId.value[key] = null;
+    });
+    rawChartData.value.forEach(item => {
+      const sortNum = item.sort || 0;
+      if (sortNum >= 1 && sortNum <= 7) {
+        const targetArr = getMetricArrByGridNum(sortNum);
+        if (targetArr) {
+          gridOriginalChartId.value[sortNum] = item.chartId;
+          targetArr.value = [{
+            ...item,
+            sort: sortNum,
+            oldSort: 0,
+            chartId: item.chartId,
+            oldChartId: item.chartId
+          }];
+          metricHistory.value[item.chartId] = sortNum;
+        }
+      }
+    });
+  } catch (error) {
+    console.error('获取数据失败:', error);
+    rawChartData.value = [];
+  }
+}
+
+onMounted(async () => {
+  await getChartList();
+});
 </script>
 
-<style>
+<style scoped>
+.work-layout-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 2px;
+  margin: 0 !important;
+  box-sizing: border-box;
+  background-color: #0a1a33;
+  overflow: hidden;
+}
+
+.main-wrapper {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  gap: 2px;
+  box-sizing: border-box;
+}
+
+.left-area {
+  width: calc(85% - 1px);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  box-sizing: border-box;
+}
+
+.right-area {
+  width: calc(15% - 1px);
+  height: 100%;
+  background-color: rgba(15, 52, 96, 0.5);
+  border: 1px solid #1a508b;
+  border-radius: 8px;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.work-top-header {
+  height: calc(6% - 1px);
+  box-sizing: border-box;
+}
+
+.work-main-section {
+  height: calc(94% - 1px);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  box-sizing: border-box;
+}
+
+.layout-row {
+  width: 100%;
+  display: flex;
+  gap: 2px;
+  box-sizing: border-box;
+  height: calc(100% / 3);
+}
+
+.work-col-1-3 {
+  width: calc((100% - 4px) / 3);
+  box-sizing: border-box;
+}
+
+.work-col-1-2 {
+  width: calc((100% - 2px) / 2);
+  box-sizing: border-box;
+}
+
+.full-height-card {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(15, 52, 96, 0.3);
+  border: 1px solid #1a508b;
+  border-radius: 8px;
+  padding: 8px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #e0e6ff;
+  overflow: hidden;
+  position: relative;
+}
+
+.work-section {
+  width: 100%;
+  display: flex;
+  gap: 2px;
+  box-sizing: border-box;
+}
+
+.chart-top-inner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 16px;
+  color: #e0e6ff;
+  box-sizing: border-box;
+}
+
+.chart-top-inner h2 {
+  font-size: 16px;
+  margin: 0;
+  font-weight: 600;
+}
+
+.btn-group {
+  display: flex;
+  gap: 8px;
+}
+
+.work-col {
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.work-card {
+  width: 100%;
+  background-color: rgba(15, 52, 96, 0.3);
+  border: 1px solid #1a508b;
+  border-radius: 8px;
+  padding: 8px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #e0e6ff;
+  overflow: hidden;
+  position: relative;
+}
+
+.full-card {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.delete-icon {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  color: #ff6b6b;
+  font-size: 18px;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  background-color: rgba(255, 107, 107, 0.1);
+  z-index: 10;
+  transition: all 0.2s ease;
+}
+
+.delete-icon:hover {
+  background-color: rgba(255, 107, 107, 0.3);
+  transform: scale(1.1);
+}
+
+.grid-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px;
+  box-sizing: border-box;
+  cursor: drop;
+}
+
+.metric-tag {
+  padding: 0;
+  background: none;
+  color: #e0e6ff;
+  font-size: 18px;
+  white-space: nowrap;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.sort-num {
+  font-size: 14px;
+  color: #88a0c2;
+  margin-bottom: 4px;
+  display: block;
+}
+
+.empty-tip {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #88a0c2;
+  font-size: 14px;
+  pointer-events: none;
+}
+
+.search-box {
+  padding: 4px 0;
+  margin-bottom: 8px;
+  box-sizing: border-box;
+}
+
+.metric-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px;
+  box-sizing: border-box;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(60, 156, 255, 0.2) transparent;
+}
+
+.metric-list::-webkit-scrollbar {
+  width: 1px;
+}
+
+.metric-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.metric-list::-webkit-scrollbar-thumb {
+  background: rgba(60, 156, 255, 0.2);
+  border-radius: 0.5px;
+}
+
+.metric-list::-webkit-scrollbar-thumb:hover {
+  background: rgba(60, 156, 255, 0.4);
+}
+
+.metric-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 6px;
+  margin-bottom: 6px;
+  border-radius: 6px;
+  color: #e0e6ff;
+  cursor: grab;
+  font-size: 14px;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+}
+
+.metric-item.active {
+  background-color: rgba(60, 156, 255, 0.3);
+  border: 1px solid #3c9cff;
+}
+
+.metric-item:hover {
+  background-color: rgba(60, 156, 255, 0.15);
+}
+
+.color-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-left: 6px;
+}
 </style>
\ No newline at end of file
diff --git a/screen-vue/src/views/screen/Sys/components/ChartTop.vue b/screen-vue/src/views/screen/Sys/components/ChartTop.vue
new file mode 100644
index 0000000..a7dcdc7
--- /dev/null
+++ b/screen-vue/src/views/screen/Sys/components/ChartTop.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="chart-top-container">
+    <div class="card-item" v-for="(item, index) in cardList" :key="index">
+      <div class="card-left">
+        <div class="icon-box">
+          <img 
+            :src="item.iconImg" 
+            class="icon-img"
+            :style="{ filter: item.iconFilter }"
+          >
+        </div>
+        <div class="card-text">
+          <div class="module-name">{{ item.module }}</div>
+          <div class="desc-text">{{ item.title }}</div>
+        </div>
+      </div>
+      <div class="card-right">
+        <div class="num-value">{{ item.value }}</div>
+        <div class="num-label">{{ item.label }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+import { getIndexInfoList } from '@/api/bizApi'
+const cardList = ref()
+
+async function getList() {
+  try {
+	  const reqParams = {
+		  indexCode: "workIndex"
+	  }
+    const res = await getIndexInfoList(reqParams)
+    cardList.value = res || []
+  } catch (error) {
+    console.error('获取数据失败:', error)
+    cardList.value = []
+  }
+}
+
+const resizeHandler = () => {
+  const container = document.querySelector('.chart-top-container')
+  if (container) {
+    const height = container.parentElement.clientHeight
+    container.style.height = `${height}px`
+  }
+}
+
+onMounted(() => {
+	getList()
+})
+
+watch(
+  () => {},
+  () => {
+    window.removeEventListener('resize', resizeHandler)
+  },
+  { once: true }
+)
+</script>
+
+<style scoped>
+.chart-top-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 4px;
+  box-sizing: border-box;
+  flex-wrap: wrap;
+  background: transparent;
+}
+
+.card-item {
+  flex: 1;
+  min-width: 160px;
+  height: 85%;
+  background: rgba(15, 52, 96, 0.1);
+  border: 1px solid rgba(26, 80, 139, 0.3);
+  border-radius: 8px;
+  padding: 0 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(2px);
+}
+
+.card-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(60, 156, 255, 0.2);
+  border-color: rgba(60, 156, 255, 0.6);
+}
+
+.card-left {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.icon-box {
+  width: 40px;
+  height: 40px;
+  background: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid rgba(224, 230, 255, 0.1);
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+
+.icon-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  opacity: 0.9;
+  transition: all 0.2s ease;
+}
+
+.icon-box:hover .icon-img {
+  opacity: 1;
+  transform: scale(1.05);
+  filter: brightness(1.1) contrast(1.2);
+}
+
+.card-text {
+  color: #e0e6ff;
+}
+
+.module-name {
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.desc-text {
+  font-size: 11px;
+  opacity: 0.7;
+  margin-top: 2px;
+}
+
+.card-right {
+  text-align: right;
+  color: #e0e6ff;
+}
+
+.num-value {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1;
+  background: linear-gradient(to right, #3c9cff, #7472fe);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.num-label {
+  font-size: 11px;
+  opacity: 0.7;
+  margin-top: 4px;
+}
+
+@media (max-width: 1600px) {
+  .card-item {
+    min-width: 140px;
+    padding: 0 6px;
+  }
+  .icon-box {
+    width: 36px;
+    height: 36px;
+  }
+  .module-name {
+    font-size: 14px;
+  }
+  .num-value {
+    font-size: 22px;
+  }
+}
+
+@media (max-width: 768px) {
+  .chart-top-container {
+    flex-direction: column;
+    height: auto !important;
+    gap: 4px;
+    padding: 2px;
+  }
+  .card-item {
+    width: 100%;
+    height: 80px;
+    min-width: unset;
+    padding: 0 8px;
+  }
+}
+
+@media (max-height: 900px) {
+  .card-item {
+    height: 80%;
+  }
+  .icon-box {
+    width: 32px;
+    height: 32px;
+  }
+  .num-value {
+    font-size: 20px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/screen/Sys/components/ChartV01.vue b/screen-vue/src/views/screen/Sys/components/ChartV01.vue
new file mode 100644
index 0000000..875dd10
--- /dev/null
+++ b/screen-vue/src/views/screen/Sys/components/ChartV01.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">1</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/desck3.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/screen/Sys/components/ChartV02.vue b/screen-vue/src/views/screen/Sys/components/ChartV02.vue
new file mode 100644
index 0000000..d4345f4
--- /dev/null
+++ b/screen-vue/src/views/screen/Sys/components/ChartV02.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">2</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/desck3.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/screen/Sys/components/ChartV03.vue b/screen-vue/src/views/screen/Sys/components/ChartV03.vue
new file mode 100644
index 0000000..28b8d5a
--- /dev/null
+++ b/screen-vue/src/views/screen/Sys/components/ChartV03.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">3</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/desck3.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/screen/Sys/components/ChartV04.vue b/screen-vue/src/views/screen/Sys/components/ChartV04.vue
new file mode 100644
index 0000000..7d97d3c
--- /dev/null
+++ b/screen-vue/src/views/screen/Sys/components/ChartV04.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">4</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/deptk2.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/screen/Sys/components/ChartV05.vue b/screen-vue/src/views/screen/Sys/components/ChartV05.vue
new file mode 100644
index 0000000..59de0d2
--- /dev/null
+++ b/screen-vue/src/views/screen/Sys/components/ChartV05.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">5</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/desck3.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/screen/Sys/components/ChartV06.vue b/screen-vue/src/views/screen/Sys/components/ChartV06.vue
new file mode 100644
index 0000000..f695a10
--- /dev/null
+++ b/screen-vue/src/views/screen/Sys/components/ChartV06.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">6</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/desck3.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/screen/Sys/components/ChartV07.vue b/screen-vue/src/views/screen/Sys/components/ChartV07.vue
new file mode 100644
index 0000000..ae566bf
--- /dev/null
+++ b/screen-vue/src/views/screen/Sys/components/ChartV07.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">7</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/desck3.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/screen/Sys/components/ChartV08.vue b/screen-vue/src/views/screen/Sys/components/ChartV08.vue
new file mode 100644
index 0000000..a2e24a8
--- /dev/null
+++ b/screen-vue/src/views/screen/Sys/components/ChartV08.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">8</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/desck3.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/screen/Sys/components/ChartV09.vue b/screen-vue/src/views/screen/Sys/components/ChartV09.vue
new file mode 100644
index 0000000..1497837
--- /dev/null
+++ b/screen-vue/src/views/screen/Sys/components/ChartV09.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">9</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/desck3.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/screen/Sys/components/ChartV10.vue b/screen-vue/src/views/screen/Sys/components/ChartV10.vue
new file mode 100644
index 0000000..7babe43
--- /dev/null
+++ b/screen-vue/src/views/screen/Sys/components/ChartV10.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">10</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.1) url("@/assets/images/desck3.png") no-repeat;
+  background-size: 100% 100%;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
+</style>
\ No newline at end of file
diff --git a/screen-vue/src/views/screen/Sys/index.vue b/screen-vue/src/views/screen/Sys/index.vue
index 02409e3..f46df76 100644
--- a/screen-vue/src/views/screen/Sys/index.vue
+++ b/screen-vue/src/views/screen/Sys/index.vue
@@ -1,8 +1,272 @@
 <template>
+  <div class="work-layout-container">
+    <div class="work-section work-top-header">
+      <div class="work-card full-card">
+        <ChartTop />
+      </div>
+    </div>
+
+    <div class="work-section work-main-section">
+      <div class="work-row work-row-1-3">
+        <div
+          v-for="item in getComponentsBySortRange(1, 3)"
+          :key="item.sort"
+          class="work-card work-card-1-3"
+        >
+          <component
+            :is="componentMap[item.vueName]"
+            :formParams="FormValues"
+            v-if="componentMap[item.vueName]"
+          />
+        </div>
+      </div>
+
+      <div class="work-row work-row-1-3">
+        <div
+          v-for="item in getComponentsBySortRange(4, 6)"
+          :key="item.sort"
+          class="work-card work-card-1-3"
+        >
+          <component
+            :is="componentMap[item.vueName]"
+            :formParams="FormValues"
+            v-if="componentMap[item.vueName]"
+          />
+        </div>
+      </div>
+
+      <div class="work-row work-row-1-3">
+        <div
+          v-for="item in getComponentsBySortRange(7, 9)"
+          :key="item.sort"
+          class="work-card work-card-1-3"
+        >
+          <component
+            :is="componentMap[item.vueName]"
+            :formParams="FormValues"
+            v-if="componentMap[item.vueName]"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script>
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import ChartTop from './components/ChartTop.vue';
+import { getChartListAll } from '@/api/bizChart'
+
+const route = useRoute();
+
+const FormValues = ref({
+  reqParam: route.query.year
+});
+
+watch(
+  () => route.query.year,
+  (newVal) => {
+    FormValues.value.reqParam = newVal;
+  },
+  { 
+    deep: true,
+    immediate: true
+  }
+);
+
+const componentMap = ref({});
+const chartData = ref([]);
+
+const getComponentsBySortRange = (start, end) => {
+  return chartData.value.filter(item => item.sort >= start && item.sort <= end);
+};
+
+const loadComponent = async (vueName) => {
+  try {
+    const module = await import(`./components/${vueName}.vue`);
+    return module.default;
+  } catch (error) {
+    console.error('加载组件失败', error);
+    return null;
+  }
+};
+
+async function getChartList(){
+	try {
+	  const reqParams = {
+	  		chartCode: 'sys'
+	  	}
+	  const res = await getChartListAll(reqParams)
+	  chartData.value = res || []
+	} catch (error) {
+	  console.error('获取数据失败:', error);
+	  chartData.value = []
+	}
+}
+
+onMounted(async () => {
+  try {
+    await getChartList();
+    chartData.value = chartData.value.sort((a, b) => a.sort - b.sort);
+    const newComponentMap = {};
+    const uniqueComponents = [...new Set(chartData.value.map(item => item.vueName))];
+    for (const vueName of uniqueComponents) {
+      const component = await loadComponent(vueName);
+      if (component) {
+        newComponentMap[vueName] = component;
+      }
+    }
+    componentMap.value = newComponentMap;
+  } catch (error) {
+    console.error('加载图表数据失败：', error);
+  }
+});
 </script>
 
-<style>
+<style scoped>
+.work-layout-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 2px;
+  margin: 0 !important;
+  box-sizing: border-box;
+  background-color: transparent;
+  overflow: hidden;
+}
+
+.work-section {
+  width: 100%;
+  display: flex;
+  gap: 2px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.work-top-header {
+  height: 10%;
+}
+
+.work-main-section {
+  height: 90%;
+  flex-direction: column;
+}
+
+.work-row {
+  width: 100%;
+  display: flex;
+  gap: 2px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.work-row-1-3 {
+  height: calc((100% - 4px) / 3);
+}
+
+.work-card-1-3 {
+  width: calc((100% - 4px) / 3);
+  height: 100%;
+}
+
+.work-card {
+  width: 100%;
+  background-color: rgba(15, 52, 96, 0.1);
+  border: 1px solid rgba(26, 80, 139, 0.3);
+  border-radius: 8px;
+  padding: 2px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #e0e6ff;
+  backdrop-filter: blur(2px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  min-height: 0;
+  margin: 0;
+}
+
+.full-card {
+  width: 100%;
+  height: 100%;
+}
+
+.work-card:hover {
+  box-shadow: 0 4px 12px rgba(60, 156, 255, 0.2);
+  border-color: rgba(60, 156, 255, 0.6);
+  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;
+}
+
+.empty-card {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  color: #88a0c2;
+  font-size: 14px;
+}
+
+@media (max-width: 1600px) {
+  .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%;
+    overflow-y: auto;
+  }
+  .work-section {
+    flex-direction: column;
+    height: auto !important;
+    min-height: 120px;
+  }
+  .work-row-1-3 {
+    height: auto;
+    flex-direction: column;
+  }
+  .work-card-1-3 {
+    width: 100%;
+    height: 120px;
+    margin-bottom: 2px;
+  }
+}
+
+@media (max-height: 900px) {
+  .work-card h3 {
+    font-size: 14px;
+    margin-bottom: 6px;
+  }
+  .work-card p {
+    font-size: 12px;
+  }
+}
 </style>
\ No newline at end of file