修改首页的样式

src/views/home/data.js

@@ -172,31 +172,77 @@ export const columns =  [
     }
   ];
 export const lineOption = (data, itemStyle = {}) => {
+    const colors = [
+        ['#2f9bff', 'rgba(47, 155, 255, 0.08)'],
+        ['#5ee0b0', 'rgba(94, 224, 176, 0.1)']
+    ];
     return {
         tooltip: {
             formatter: (item) => {
+                if (Array.isArray(item)) {
+                    const title = item[0] ? item[0].name : '';
+                    const rows = item
+                        .map((i) => i.marker + i.seriesName + "：" + i.value + '%')
+                        .join('<br/>');
+                    return title + '<br/>' + rows;
+                }
                 return item.name + "：" + item.seriesName + " " + item.value
             },
-            trigger: 'item'
+            trigger: 'axis',
+            axisPointer: {
+                type: 'line',
+                lineStyle: {
+                    color: 'rgba(82, 217, 230, 0.42)',
+                    width: 1,
+                    type: 'dashed'
+                }
+            },
+            backgroundColor: 'rgba(6, 17, 17, 0.92)',
+            borderColor: 'rgba(82, 217, 230, 0.35)',
+            textStyle: {
+                color: '#e8fbff'
+            }
         },
         legend: {
             // bottom: '2%',
             itemGap: window.innerHeight * 0.014,
+            icon: 'roundRect',
 
             textStyle: {
                 fontSize: window.innerHeight * 0.013,
+                color: '#c8e9ee'
             }
         },
         grid: {
-            left: 40,
-            bottom: "13%"//也可设置left和right设置距离来控制图表的大小
+            left: 38,
+            right: 24,
+            top: 40,
+            bottom: 24,
+            containLabel: true
         },
-        color: ['#1890ff'],
+        color: colors.map((item) => item[0]),
         xAxis: {
             type: 'category',
             data: ['10/2', '10/3', '10/4', '10/5', '10/6', '10/7', '10/8'],
+            boundaryGap: false,
+            axisLine: {
+                lineStyle: {
+                    color: 'rgba(82, 217, 230, 0.44)'
+                }
+            },
+            axisTick: {
+                show: false
+            },
             axisLabel: {
                 fontSize: window.innerHeight * 0.012,
+                color: '#b9dce2',
+                margin: 10
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(82, 217, 230, 0.06)'
+                }
             }
 
         },
@@ -207,9 +253,22 @@ export const lineOption = (data, itemStyle = {}) => {
                 min: 0,
                 axisLabel: {
                     show: true,
+                    color: '#b9dce2',
                     formatter: "{value}%", //右侧Y轴文字显示
 
                 },
+                axisLine: {
+                    show: false
+                },
+                axisTick: {
+                    show: false
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: 'rgba(82, 217, 230, 0.16)',
+                        type: 'dashed'
+                    }
+                },
                 nameTextStyle: {
                     align: 'center',
                     color: "#333",
@@ -222,34 +281,183 @@ export const lineOption = (data, itemStyle = {}) => {
         series: [
             {
                 name: '过程控',
-                symbolSize: 10,
+                symbol: 'circle',
+                symbolSize: 8,
                 data: data[0],
                 type: 'line',
-
+                smooth: true,
+                showSymbol: true,
+                lineStyle: {
+                    width: 3,
+                    color: colors[0][0],
+                    shadowBlur: 12,
+                    shadowColor: colors[0][0]
+                },
+                areaStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                            { offset: 0, color: 'rgba(47, 155, 255, 0.22)' },
+                            { offset: 0.62, color: colors[0][1] },
+                            { offset: 1, color: 'rgba(47, 155, 255, 0)' }
+                        ]
+                    }
+                },
                 itemStyle: {
-                    // color: '#ffab08'
+                    color: colors[0][0],
+                    borderColor: '#dff5ff',
+                    borderWidth: 2,
+                    shadowBlur: 10,
+                    shadowColor: colors[0][0]
                 },
-
+                emphasis: {
+                    focus: 'series',
+                    scale: true
+                },
+                z: 4
             }, {
                 name: '产品控',
-                symbolSize: 10,
+                symbol: 'circle',
+                symbolSize: 8,
                 data: data[1],
                 type: 'line', 
+                smooth: true,
+                showSymbol: true,
+                lineStyle: {
+                    width: 3,
+                    color: colors[1][0],
+                    shadowBlur: 12,
+                    shadowColor: colors[1][0]
+                },
+                areaStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                            { offset: 0, color: 'rgba(94, 224, 176, 0.2)' },
+                            { offset: 0.62, color: colors[1][1] },
+                            { offset: 1, color: 'rgba(94, 224, 176, 0)' }
+                        ]
+                    }
+                },
                 itemStyle: {
-                    // color: '#ffab08'
+                    color: colors[1][0],
+                    borderColor: '#e4fff5',
+                    borderWidth: 2,
+                    shadowBlur: 10,
+                    shadowColor: colors[1][0]
                 },
-
+                emphasis: {
+                    focus: 'series',
+                    scale: true
+                },
+                z: 5
             }
         ]
     }
 }
 export const barOption = ( xData,series) => {
+    const barColors = [
+        ['rgba(255, 209, 102, 0.96)', 'rgba(236, 178, 87, 0.36)'],
+        ['rgba(47, 155, 255, 0.98)', 'rgba(35, 150, 255, 0.32)'],
+        ['rgba(91, 210, 167, 0.96)', 'rgba(91, 210, 167, 0.3)']
+    ];
+    const chartSeries = series.map((item, index) => {
+        if (item.type === 'bar') {
+            const color = barColors[index % barColors.length];
+            return {
+                ...item,
+                barWidth: item.barWidth || 14,
+                barMaxWidth: 18,
+                barGap: '38%',
+                showBackground: true,
+                backgroundStyle: {
+                    color: 'rgba(82, 217, 230, 0.055)',
+                    borderColor: 'rgba(82, 217, 230, 0.14)',
+                    borderWidth: 1
+                },
+                itemStyle: {
+                    ...(item.itemStyle || {}),
+                    borderRadius: [3, 3, 0, 0],
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                            { offset: 0, color: color[0] },
+                            { offset: 0.52, color: color[0] },
+                            { offset: 1, color: color[1] }
+                        ]
+                    },
+                    shadowBlur: 12,
+                    shadowColor: color[0]
+                },
+                emphasis: {
+                    focus: 'series',
+                    itemStyle: {
+                        shadowBlur: 18,
+                        shadowColor: color[0]
+                    }
+                },
+                z: 3
+            };
+        }
+        if (item.type === 'line') {
+            return {
+                ...item,
+                symbol: 'circle',
+                symbolSize: item.symbolSize || 10,
+                lineStyle: {
+                    width: 3,
+                    color: item.itemStyle && item.itemStyle.color ? item.itemStyle.color : '#ff8a4c',
+                    shadowBlur: 12,
+                    shadowColor: item.itemStyle && item.itemStyle.color ? item.itemStyle.color : '#ff8a4c'
+                },
+                itemStyle: {
+                    ...(item.itemStyle || {}),
+                    borderColor: '#fff7ef',
+                    borderWidth: 2,
+                    shadowBlur: 10,
+                    shadowColor: item.itemStyle && item.itemStyle.color ? item.itemStyle.color : '#ff8a4c'
+                },
+                z: 5
+            };
+        }
+        return item;
+    });
     return {
         tooltip: {
             formatter: (item) => {
+                if (Array.isArray(item)) {
+                    const title = item[0] ? item[0].name : '';
+                    const rows = item
+                        .map((i) => i.seriesName + "：" + i.value)
+                        .join('<br/>');
+                    return title + '<br/>' + rows;
+                }
                 return item.name + "：" + item.seriesName + " " + item.value
             },
-            trigger: 'item'
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+                shadowStyle: {
+                    color: 'rgba(82, 217, 230, 0.08)'
+                }
+            },
+            backgroundColor: 'rgba(6, 17, 17, 0.92)',
+            borderColor: 'rgba(82, 217, 230, 0.35)',
+            textStyle: {
+                color: '#e8fbff'
+            }
         },
         legend: {
             // bottom: '2%',
@@ -257,19 +465,33 @@ export const barOption = ( xData,series) => {
 
             textStyle: {
                 fontSize: window.innerHeight * 0.013,
+                color: '#9fc7cf'
             }
         },
         grid: {
             left: 40,
             right: 55,
-            bottom: "13%"//也可设置left和right设置距离来控制图表的大小
+            top: 36,
+            bottom: 26,
+            containLabel: true
         },
-        color: ['#1890ff'],
+        color: ['#2396ff', '#5bd2a7', '#ff844a', '#ffd166'],
         xAxis: {
             type: 'category',
             data:xData ,
+            axisLine: {
+                lineStyle: {
+                    color: 'rgba(185, 220, 226, 0.45)'
+                }
+            },
+            axisTick: {
+                show: false
+            },
             axisLabel: {
                 fontSize: window.innerHeight * 0.012,
+                color: '#b9dce2',
+                interval: 0,
+                margin: 10,
 
             }
 
@@ -278,6 +500,21 @@ export const barOption = ( xData,series) => {
             {
                 type: 'value',
                 // name: '(个)',
+                axisLabel: {
+                    color: '#b9dce2'
+                },
+                axisLine: {
+                    show: false
+                },
+                axisTick: {
+                    show: false
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: 'rgba(82, 217, 230, 0.16)',
+                        type: 'dashed'
+                    }
+                },
                 nameTextStyle: {
                     align: 'center',
                     color: "#333",
@@ -291,21 +528,68 @@ export const barOption = ( xData,series) => {
                 min: 0,
                 axisLabel: {
                     show: true,
+                    color: '#b9dce2',
                     formatter: "{value}%", //右侧Y轴文字显示
 
+                },
+                axisLine: {
+                    show: false
+                },
+                axisTick: {
+                    show: false
+                },
+                splitLine: {
+                    show: false
                 }
             }
         ],
-        series 
+        series: chartSeries
     }
 }
 
 export const pieOption = (data) => {
+    const colors = [
+        ['#4ee6a3', '#1d8b68'],
+        ['#36adff', '#1762c7'],
+        ['#ffd66b', '#b88421'],
+        ['#ff7070', '#b83243'],
+        ['#9b79ff', '#5c40bd'],
+        ['#48dfea', '#1c8590']
+    ];
+    const pieData = data.map((item, index) => {
+        const color = colors[index % colors.length];
+        return {
+            ...item,
+            itemStyle: {
+                borderRadius: 6,
+                borderWidth: 2,
+                borderColor: '#071719',
+                color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 1,
+                    y2: 1,
+                    colorStops: [
+                        { offset: 0, color: color[0] },
+                        { offset: 1, color: color[1] }
+                    ]
+                },
+                shadowBlur: 10,
+                shadowColor: color[0]
+            }
+        };
+    });
     return {
-        color: ['#398f4e', '#458ef7', '#fdc537', '#fe6869', '#975fe6'],
+        color: colors.map((item) => item[0]),
         tooltip: {
             // formatter: '{b}：{c}' + '%',
-            trigger: 'item'
+            trigger: 'item',
+            backgroundColor: 'rgba(6, 17, 17, 0.92)',
+            borderColor: 'rgba(82, 217, 230, 0.35)',
+            textStyle: {
+                color: '#e8fbff'
+            }
         },
         // legend: {
         //     orient: 'horizontal',
@@ -319,28 +603,76 @@ export const pieOption = (data) => {
         // },
         series: [
             {
+                type: 'pie',
                 center: ['50%', '50%'],
+                radius: ['0%', '29%'],
+                silent: true,
+                label: {
+                    show: false
+                },
+                labelLine: {
+                    show: false
+                },
+                itemStyle: {
+                    color: {
+                        type: 'radial',
+                        x: 0.5,
+                        y: 0.5,
+                        r: 0.7,
+                        colorStops: [
+                            { offset: 0, color: 'rgba(82, 217, 230, 0.18)' },
+                            { offset: 0.56, color: 'rgba(8, 24, 27, 0.92)' },
+                            { offset: 1, color: 'rgba(6, 17, 17, 0.98)' }
+                        ]
+                    },
+                    shadowBlur: 18,
+                    shadowColor: 'rgba(82, 217, 230, 0.16)'
+                },
+                z: 1,
+                data: [{ value: 1 }]
+            },
+            {
+                center: ['50%', '50%'],
+                avoidLabelOverlap: true,
                 label: {
                     position: 'outside',
                     show: true,
+                    bleedMargin: 12,
                     formatter: (item) => {
-                        return item.name + "：" + item.value+'/'+item.percent +'%'
+                        return item.name + '\n' + item.value + '/' + item.percent + '%'
                     },
-                    fontSize: window.innerHeight * 0.014,
-                    // color:"#fff"
+                    lineHeight: 18,
+                    fontSize: Math.max(12, window.innerHeight * 0.011),
+                    color:"#d9edf2",
+                    overflow: 'break'
                 },
                 labelLine: {
                     show: true,
+                    length: 10,
+                    length2: 18,
+                    lineStyle: {
+                        width: 1.2,
+                        opacity: 0.86
+                    }
 
                 },
                 type: 'pie',
-                radius: '70%',
-                itemStyle: {
-                    borderWidth: 0,
-                    shadowBlur: 10,
-                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                radius: ['36%', '58%'],
+                clockwise: true,
+                minAngle: 6,
+                emphasis: {
+                    focus: 'self',
+                    scaleSize: 5,
+                    label: {
+                        color: '#f2fbfb',
+                        fontWeight: 700
+                    },
+                    itemStyle: {
+                        shadowBlur: 18
+                    }
                 },
-                data
+                z: 2,
+                data: pieData
             }
         ]
     }

src/views/home/index.vue

@@ -1,105 +1,127 @@
 <template>
-  <div class="ele-body">
-    <el-row :gutter="5">
-      <el-col :span="24" style="height: 46px; margin-bottom: 5px">
-        <el-card class="box-card">
-          <el-radio-group v-model="form.timeType">
-            <el-radio-button label="1">企业</el-radio-button>
-            <el-radio-button label="2">工厂</el-radio-button>
-            <el-radio-button label="3">班组</el-radio-button>
-            <el-radio-button label="4">产线</el-radio-button>
-          </el-radio-group>
-        </el-card>
-      </el-col>
-      <el-col :span="10" style="height: 33%">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>年度计划达成情况</span>
-          </div>
-          <v-chart ref="barRef1" style="height: 100%" :option="barOption" />
-        </el-card>
-      </el-col>
-      <el-col :span="3" style="height: 33%">
-        <div class="item">
-          <div class="header"> 7日内需要交付订单 </div>
-          <div class="content">
-            <p
-              ><span>订单数</span
-              ><span>{{
-                orderCount7.formedOrders + '/' + orderCount7.orders
-              }}</span></p
-            >
-            <p
-              ><span>产品量</span
-              ><span>{{
-                orderCount7.formedNum + '/' + orderCount7.productNum
-              }}</span></p
-            >
-          </div>
-        </div>
-      </el-col>
-      <el-col :span="3" style="height: 33%">
-        <div class="item">
-          <div class="header"> 本月需要完成订单 </div>
-          <div class="content">
-            <p
-              ><span>订单数</span
-              ><span>{{
-                orderCount30.formedOrders + '/' + orderCount30.orders
-              }}</span></p
-            >
-            <p
-              ><span>产品量</span
-              ><span>{{
-                orderCount30.formedNum + '/' + orderCount30.productNum
-              }}</span></p
-            >
+  <div class="ele-body home-screen">
+    <div class="screen-shell">
+      <div class="screen-header">
+        <div class="screen-title">
+          <i></i>
+          <div>
+            <strong>首页</strong>
           </div>
         </div>
-      </el-col>
-      <el-col :span="8" style="height: 33%">
-        <el-card class="box-card" style="height: 100%">
-          <div slot="header" class="clearfix">
-            <span>本月异常类型分布</span>
-          </div>
-          <v-chart ref="pieRef" style="height: 100%" :option="pieOption" />
-        </el-card>
-      </el-col>
-      <el-col :span="8" style="height: 33%; margin-top: 5px">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>近7天良率趋势</span>
-          </div>
-          <v-chart ref="lineRef" style="height: 100%" :option="lineOption" />
-        </el-card>
-      </el-col>
-      <el-col :span="16" style="height: 33%; margin-top: 5px">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>准时交付率</span>
+        <el-radio-group class="screen-tabs" v-model="form.timeType">
+          <el-radio-button label="1">企业</el-radio-button>
+          <el-radio-button label="2">工厂</el-radio-button>
+          <el-radio-button label="3">班组</el-radio-button>
+          <el-radio-button label="4">产线</el-radio-button>
+        </el-radio-group>
+      </div>
+
+      <div class="screen-grid">
+        <section class="screen-cell screen-cell--annual">
+          <el-card class="box-card screen-panel screen-panel--annual">
+            <div slot="header" class="screen-panel__header">
+              <span>年度计划达成情况</span>
+            </div>
+            <div class="chart-box">
+              <v-chart ref="barRef1" style="height: 100%" :option="barOption" />
+            </div>
+          </el-card>
+        </section>
+
+        <section class="screen-cell screen-cell--metrics">
+          <div class="item screen-metric screen-metric--green">
+            <div class="header">7日内需要交付订单</div>
+            <div class="content">
+              <p>
+                <span>订单数</span>
+                <span>{{
+                  orderCount7.formedOrders + '/' + orderCount7.orders
+                }}</span>
+              </p>
+              <p>
+                <span>产品量</span>
+                <span>{{
+                  orderCount7.formedNum + '/' + orderCount7.productNum
+                }}</span>
+              </p>
+            </div>
           </div>
-          <v-chart ref="barRef3" style="height: 100%" :option="barOption1" />
-        </el-card>
-      </el-col>
-      <el-col :span="24" style="height: calc(34% - 15px); margin-top: 5px">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>计划进度看板</span>
+
+          <div class="item screen-metric screen-metric--blue">
+            <div class="header">本月需要完成订单</div>
+            <div class="content">
+              <p>
+                <span>订单数</span>
+                <span>{{
+                  orderCount30.formedOrders + '/' + orderCount30.orders
+                }}</span>
+              </p>
+              <p>
+                <span>产品量</span>
+                <span>{{
+                  orderCount30.formedNum + '/' + orderCount30.productNum
+                }}</span>
+              </p>
+            </div>
           </div>
+        </section>
+
+        <section class="screen-cell screen-cell--pie">
+          <el-card class="box-card screen-panel screen-panel--pie">
+            <div slot="header" class="screen-panel__header">
+              <span>本月异常类型分布</span>
+            </div>
+            <div class="chart-box">
+              <v-chart ref="pieRef" style="height: 100%" :option="pieOption" />
+            </div>
+          </el-card>
+        </section>
+
+        <section class="screen-cell screen-cell--quality">
+          <el-card class="box-card screen-panel screen-panel--quality">
+            <div slot="header" class="screen-panel__header">
+              <span>近7天良率趋势</span>
+            </div>
+            <div class="chart-box">
+              <v-chart ref="lineRef" style="height: 100%" :option="lineOption" />
+            </div>
+          </el-card>
+        </section>
 
-          <ele-pro-table
-            ref="table"
-            height="calc(100% - 100px)"
-            @columns-change="handleColumnChange"
-            :cache-key="cacheKeyUrl"
-            :columns="columns"
-            :datasource="datasource"
-          >
-            <template v-slot=""> </template>
-          </ele-pro-table>
-        </el-card>
-      </el-col>
-    </el-row>
+        <section class="screen-cell screen-cell--delivery">
+          <el-card class="box-card screen-panel screen-panel--delivery">
+            <div slot="header" class="screen-panel__header">
+              <span>准时交付率</span>
+            </div>
+            <div class="chart-box">
+              <v-chart ref="barRef3" style="height: 100%" :option="barOption1" />
+            </div>
+          </el-card>
+        </section>
+
+        <!--
+        <el-col class="screen-col screen-col--table" :span="24">
+          <el-card class="box-card screen-panel screen-panel--table">
+            <div slot="header" class="screen-panel__header">
+              <span>计划进度看板</span>
+            </div>
+
+            <ele-pro-table
+              ref="table"
+              class="screen-table"
+              height="100%"
+              @columns-change="handleColumnChange"
+              :cache-key="cacheKeyUrl"
+              :columns="columns"
+              :datasource="datasource"
+            >
+              <template v-slot=""> </template>
+            </ele-pro-table>
+          </el-card>
+        </el-col>
+        -->
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -355,85 +377,894 @@
   };
 </script>
 <style lang="scss" scoped>
-  .clearfix {
-    font-size: 0.7vw;
+  .home-screen {
+    position: relative;
+    box-sizing: border-box;
+    height: calc(100vh - 92px);
+    min-height: 0;
+    padding: 14px 18px 18px;
+    overflow: hidden;
+    color: #d9edf2;
+    background-color: #08100f;
+    background: linear-gradient(135deg, #061111 0%, #101b1e 48%, #071014 100%);
 
-    > span {
-      font-weight: bold;
+    &::before {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      content: '';
+      opacity: 0.5;
+      background-image: linear-gradient(
+          rgba(73, 216, 232, 0.075) 1px,
+          transparent 1px
+        ),
+        linear-gradient(90deg, rgba(73, 216, 232, 0.075) 1px, transparent 1px),
+        repeating-linear-gradient(
+          135deg,
+          rgba(255, 255, 255, 0.035) 0 1px,
+          transparent 1px 12px
+        );
+      background-size: 32px 32px, 32px 32px, auto;
     }
 
+    &::after {
+      position: absolute;
+      top: 68px;
+      left: 18px;
+      right: 18px;
+      height: 1px;
+      pointer-events: none;
+      content: '';
+      background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(75, 226, 238, 0.8),
+        rgba(236, 178, 87, 0.72),
+        transparent
+      );
+      box-shadow: 0 0 18px rgba(75, 226, 238, 0.35);
+    }
+  }
+
+  .screen-shell {
+    position: relative;
+    z-index: 1;
+    height: 100%;
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .screen-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex: 0 0 64px;
+    min-height: 64px;
+    padding: 0 24px;
+    margin-bottom: 14px;
+    border: 1px solid rgba(82, 217, 230, 0.26);
+    border-radius: 8px;
+    background: linear-gradient(
+      90deg,
+      rgba(13, 36, 38, 0.95),
+      rgba(22, 36, 42, 0.92)
+    );
+    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28),
+      inset 0 0 22px rgba(77, 214, 232, 0.07);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+
+    &:hover {
+      border-color: rgba(82, 217, 230, 0.44);
+      box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32),
+        inset 0 0 24px rgba(77, 214, 232, 0.11);
+    }
+  }
+
+  .screen-title {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+
+    i {
+      flex: 0 0 auto;
+      width: 40px;
+      height: 40px;
+      margin-right: 14px;
+      border: 1px solid rgba(82, 217, 230, 0.72);
+      border-radius: 50%;
+      background: linear-gradient(
+          90deg,
+          transparent 46%,
+          rgba(82, 217, 230, 0.9) 47%,
+          rgba(82, 217, 230, 0.9) 53%,
+          transparent 54%
+        ),
+        linear-gradient(
+          transparent 46%,
+          rgba(236, 178, 87, 0.9) 47%,
+          rgba(236, 178, 87, 0.9) 53%,
+          transparent 54%
+        ),
+        #102224;
+      box-shadow: 0 0 16px rgba(82, 217, 230, 0.38),
+        inset 0 0 14px rgba(82, 217, 230, 0.18);
+    }
+
+    strong {
+      display: block;
+      overflow: hidden;
+      color: #f2fbfb;
+      font-size: clamp(22px, 1.55vw, 30px);
+      font-weight: 700;
+      line-height: 1.2;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      letter-spacing: 0;
+      text-shadow: 0 0 14px rgba(82, 217, 230, 0.45);
+    }
+  }
+
+  .screen-tabs {
+    flex: 0 0 auto;
+
     :deep(.el-radio-button__inner) {
-      font-size: 0.7vw;
+      min-width: 78px;
+      padding: 12px 24px;
+      color: #b9dce2;
+      font-size: 14px;
+      font-weight: 600;
+      border-color: rgba(82, 217, 230, 0.22);
+      background: rgba(12, 22, 24, 0.78);
+      box-shadow: none;
+      transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease,
+        box-shadow 0.2s ease;
+    }
+
+    :deep(.el-radio-button__inner:hover) {
+      color: #f2fbfb;
+      border-color: rgba(82, 217, 230, 0.56);
+      background: rgba(26, 51, 54, 0.82);
+    }
+
+    :deep(.el-radio-button:first-child .el-radio-button__inner) {
+      border-radius: 6px 0 0 6px;
+    }
+
+    :deep(.el-radio-button:last-child .el-radio-button__inner) {
+      border-radius: 0 6px 6px 0;
+    }
+
+    :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
+      color: #07100f;
+      border-color: #52d9e6;
+      background: linear-gradient(135deg, #52d9e6, #ecb257);
+      box-shadow: 0 0 16px rgba(82, 217, 230, 0.34);
     }
   }
 
-  .ele-body {
-    height: calc(100vh - 136px);
+  .screen-grid {
+    display: grid;
+    flex: 1 1 auto;
+    height: auto;
+    min-height: 0;
+    grid-template-columns: minmax(0, 1.16fr) minmax(230px, 0.44fr) minmax(0, 1.4fr);
+    grid-template-rows: minmax(0, 0.95fr) minmax(0, 1fr);
+    grid-template-areas:
+      'annual metrics pie'
+      'quality delivery delivery';
+    gap: 16px;
+  }
 
-    > .el-row {
-      height: 100%;
+  .screen-cell {
+    position: relative;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .screen-cell--annual {
+    grid-area: annual;
+  }
+
+  .screen-cell--metrics {
+    display: grid;
+    grid-area: metrics;
+    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 14px;
+    min-height: 0;
+  }
+
+  .screen-cell--pie {
+    grid-area: pie;
+  }
+
+  .screen-cell--quality {
+    grid-area: quality;
+  }
+
+  .screen-cell--delivery {
+    grid-area: delivery;
+  }
+
+  .screen-panel {
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+    color: #d9edf2;
+    border: 1px solid rgba(82, 217, 230, 0.28);
+    border-radius: 8px;
+    background: linear-gradient(145deg, rgba(19, 34, 35, 0.98), rgba(7, 17, 20, 0.98)),
+      repeating-linear-gradient(
+        135deg,
+        rgba(255, 255, 255, 0.04) 0 1px,
+        transparent 1px 13px
+      );
+    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28),
+      inset 0 0 0 1px rgba(255, 255, 255, 0.035),
+      inset 0 0 24px rgba(82, 217, 230, 0.08);
+    transition: transform 0.22s ease, border-color 0.22s ease,
+      box-shadow 0.22s ease;
+
+    &:hover {
+      transform: translateY(-2px);
+      border-color: rgba(82, 217, 230, 0.44);
+      box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34),
+        0 0 18px rgba(82, 217, 230, 0.1),
+        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
+        inset 0 0 28px rgba(82, 217, 230, 0.1);
     }
 
-    .el-card {
-      height: 100%;
+    &::before,
+    &::after {
+      position: absolute;
+      width: 22px;
+      height: 22px;
+      pointer-events: none;
+      content: '';
+      transition: width 0.22s ease, height 0.22s ease;
+    }
 
-      :deep(.el-card__body) {
-        padding: 0.3vw;
-      }
+    &::before {
+      top: 0;
+      left: 0;
+      border-top: 2px solid #52d9e6;
+      border-left: 2px solid #52d9e6;
+    }
 
-      :deep(.el-card__header) {
-        padding: 0.6vw;
-      }
+    &::after {
+      right: 0;
+      bottom: 0;
+      border-right: 2px solid rgba(236, 178, 87, 0.8);
+      border-bottom: 2px solid rgba(236, 178, 87, 0.8);
+    }
 
-      :deep(.el-card__body) {
-        height: calc(100% - 2.3vw);
+    &:hover::before,
+    &:hover::after {
+      width: 30px;
+      height: 30px;
+    }
+
+    :deep(.el-card__header) {
+      position: relative;
+      padding: 13px 18px 12px;
+      border-bottom: 1px solid rgba(82, 217, 230, 0.16);
+      background: linear-gradient(
+        90deg,
+        rgba(82, 217, 230, 0.16),
+        rgba(236, 178, 87, 0.08),
+        transparent
+      );
+
+      &::after {
+        position: absolute;
+        left: 18px;
+        right: 18px;
+        bottom: -1px;
+        height: 1px;
+        content: '';
+        background: linear-gradient(
+          90deg,
+          rgba(82, 217, 230, 0.7),
+          rgba(236, 178, 87, 0.44),
+          transparent
+        );
       }
+    }
 
-      :deep(.ele-pro-table) {
-        height: 99%;
+    :deep(.el-card__body) {
+      height: calc(100% - 43px);
+      padding: 14px 16px 16px;
+      min-height: 0;
+    }
+  }
+
+  .screen-panel__header {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    color: #f2fbfb;
+    font-size: 16px;
+    font-weight: 700;
+    letter-spacing: 0;
+
+    &::before {
+      flex: 0 0 auto;
+      width: 4px;
+      height: 17px;
+      margin-right: 9px;
+      border-radius: 4px;
+      background: linear-gradient(180deg, #52d9e6, #ecb257);
+      box-shadow: 0 0 12px rgba(82, 217, 230, 0.54);
+      content: '';
+    }
+
+    span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .screen-panel--quality {
+    border-color: rgba(82, 217, 230, 0.4);
+    background:
+      linear-gradient(90deg, rgba(82, 217, 230, 0.16), transparent 34%, rgba(236, 178, 87, 0.08)) top / 100% 2px no-repeat,
+      linear-gradient(145deg, rgba(18, 34, 35, 0.99), rgba(5, 15, 18, 0.99)),
+      repeating-linear-gradient(
+        135deg,
+        rgba(82, 217, 230, 0.05) 0 1px,
+        transparent 1px 14px
+      );
+    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32),
+      0 0 20px rgba(82, 217, 230, 0.1),
+      inset 0 0 0 1px rgba(255, 255, 255, 0.04),
+      inset 0 0 30px rgba(82, 217, 230, 0.09);
+
+    :deep(.el-card__header) {
+      border-bottom-color: rgba(82, 217, 230, 0.22);
+      background: linear-gradient(
+        90deg,
+        rgba(82, 217, 230, 0.2),
+        rgba(94, 224, 176, 0.1),
+        transparent
+      );
+    }
+
+    .chart-box {
+      border-color: rgba(82, 217, 230, 0.16);
+      border-radius: 4px;
+      background:
+        radial-gradient(circle at 50% 10%, rgba(82, 217, 230, 0.12), transparent 44%),
+        linear-gradient(180deg, rgba(82, 217, 230, 0.045), rgba(5, 13, 15, 0.06)),
+        repeating-linear-gradient(
+          90deg,
+          rgba(82, 217, 230, 0.05) 0 1px,
+          transparent 1px 48px
+        );
+
+      &::before {
+        opacity: 0.5;
+        background:
+          linear-gradient(90deg, transparent, rgba(94, 224, 176, 0.1), transparent),
+          repeating-linear-gradient(
+            0deg,
+            transparent 0 30px,
+            rgba(82, 217, 230, 0.055) 31px
+          );
       }
 
-      :deep(.el-table) {
-        font-size: 0.65vw;
+      &::after {
+        inset: 10px;
+        border-top-color: rgba(82, 217, 230, 0.22);
+        border-bottom-color: rgba(236, 178, 87, 0.18);
+        box-shadow: inset 0 0 22px rgba(82, 217, 230, 0.06);
       }
     }
   }
 
-  .item {
+  .chart-box {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    padding: 8px 10px;
+    border: 1px solid rgba(82, 217, 230, 0.08);
+    background: linear-gradient(
+      180deg,
+      rgba(82, 217, 230, 0.035),
+      rgba(5, 13, 15, 0.04) 42%,
+      rgba(236, 178, 87, 0.025)
+    );
+
+    &::before {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      content: '';
+      opacity: 0.36;
+      background: linear-gradient(
+          90deg,
+          transparent,
+          rgba(82, 217, 230, 0.08),
+          transparent
+        ),
+        repeating-linear-gradient(
+          0deg,
+          transparent 0 31px,
+          rgba(82, 217, 230, 0.045) 32px
+        );
+      mask-image: linear-gradient(180deg, transparent, #000 15%, #000 86%, transparent);
+    }
+
+    &::after {
+      position: absolute;
+      inset: 7px;
+      pointer-events: none;
+      content: '';
+      border-top: 1px solid rgba(82, 217, 230, 0.13);
+      border-bottom: 1px solid rgba(236, 178, 87, 0.12);
+      box-shadow: inset 0 0 18px rgba(82, 217, 230, 0.035);
+    }
+
+    :deep(.echarts) {
+      position: relative;
+      z-index: 1;
+      width: 100% !important;
+      height: 100% !important;
+      min-height: 0;
+    }
+  }
+
+  .screen-metric {
+    position: relative;
+    display: flex;
+    flex-direction: column;
     width: 100%;
     height: 100%;
-    background: url(../../assets/main_item.png);
-    background-size: cover;
-    border-radius: 6px;
-    padding: 1vw;
-    color: #333;
+    padding: 16px 16px 18px;
+    overflow: hidden;
+    color: #d9edf2;
+    border: 1px solid rgba(82, 217, 230, 0.4);
+    border-radius: 8px;
+    background:
+      linear-gradient(90deg, rgba(82, 217, 230, 0.16), transparent 58%, rgba(236, 178, 87, 0.08)) top / 100% 2px no-repeat,
+      radial-gradient(circle at 88% 18%, rgba(82, 217, 230, 0.11), transparent 34%),
+      linear-gradient(145deg, rgba(15, 39, 38, 0.99), rgba(6, 17, 20, 0.99)),
+      repeating-linear-gradient(
+        135deg,
+        rgba(82, 217, 230, 0.045) 0 1px,
+        transparent 1px 10px
+      );
+    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28),
+      inset 0 0 0 1px rgba(255, 255, 255, 0.035),
+      inset 0 0 28px rgba(82, 217, 230, 0.09);
+    transition: transform 0.22s ease, border-color 0.22s ease,
+      box-shadow 0.22s ease;
+
+    &:hover {
+      transform: translateY(-2px);
+      border-color: rgba(118, 232, 191, 0.5);
+      box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34),
+        0 0 18px rgba(118, 232, 191, 0.12),
+        inset 0 0 28px rgba(82, 217, 230, 0.1);
+    }
+
+    &::before {
+      position: absolute;
+      top: 12px;
+      right: 14px;
+      width: 68px;
+      height: 68px;
+      border-top: 1px solid rgba(82, 217, 230, 0.62);
+      border-right: 1px solid rgba(82, 217, 230, 0.62);
+      content: '';
+      background: linear-gradient(
+        135deg,
+        transparent 0 46%,
+        rgba(82, 217, 230, 0.2) 47% 49%,
+        transparent 50%
+      );
+    }
+
+    &::after {
+      position: absolute;
+      left: 18px;
+      right: 18px;
+      bottom: 12px;
+      z-index: 0;
+      height: 2px;
+      content: '';
+      background:
+        linear-gradient(
+          90deg,
+          transparent,
+          rgba(82, 217, 230, 0.52),
+          rgba(236, 178, 87, 0.28),
+          transparent
+        );
+      opacity: 0.55;
+    }
+
+    &:hover::after {
+      opacity: 1;
+    }
 
     > .header {
-      font-size: 0.9vw;
-      font-weight: 600;
-      width: 100%;
-      padding-bottom: 0.7vw;
-      border-bottom: 1px solid #f3f3f3;
-      text-align: center;
-      color: #3a92edd1;
+      position: relative;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      min-height: 44px;
+      padding: 0 44px 12px 0;
+      color: #f2fbfb;
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 1.35;
+      text-shadow: 0 0 12px rgba(82, 217, 230, 0.44);
+      border-bottom: 1px solid rgba(82, 217, 230, 0.18);
+
+      &::before {
+        width: 28px;
+        height: 3px;
+        margin-right: 8px;
+        content: '';
+        background: linear-gradient(90deg, #52d9e6, rgba(82, 217, 230, 0));
+        box-shadow: 0 0 10px rgba(82, 217, 230, 0.52);
+      }
+
+      &::after {
+        position: absolute;
+        right: 0;
+        bottom: -1px;
+        width: 58px;
+        height: 1px;
+        content: '';
+        background: linear-gradient(90deg, transparent, rgba(236, 178, 87, 0.75));
+      }
     }
 
     > .content {
+      position: relative;
+      z-index: 2;
       display: flex;
-      align-items: center;
-      justify-content: center;
+      flex: 1;
       flex-direction: column;
-      font-size: 0.9vw;
-      font-weight: 500;
-      height: calc(100% - 1.5vw);
+      justify-content: center;
+      min-height: 0;
+      padding-top: 10px;
 
       p {
+        position: relative;
         display: flex;
         align-items: center;
         justify-content: space-between;
+        min-height: 52px;
+        margin: 0;
+        padding: 0 12px 0 16px;
+        gap: 12px;
+        border-left: 3px solid rgba(82, 217, 230, 0.38);
+        border-radius: 2px;
+        background:
+          linear-gradient(
+            90deg,
+            rgba(82, 217, 230, 0.12),
+            rgba(82, 217, 230, 0.035),
+            transparent
+          ),
+          linear-gradient(
+            180deg,
+            transparent,
+            rgba(82, 217, 230, 0.055)
+          );
+
+        &::before {
+          position: absolute;
+          left: -3px;
+          top: 0;
+          width: 3px;
+          height: 100%;
+          content: '';
+          box-shadow: 0 0 12px rgba(82, 217, 230, 0.48);
+        }
+
+        &::after {
+          position: absolute;
+          left: 18px;
+          right: 12px;
+          bottom: 0;
+          height: 1px;
+          content: '';
+          background: linear-gradient(
+            90deg,
+            rgba(82, 217, 230, 0.42),
+            rgba(82, 217, 230, 0.16),
+            transparent
+          );
+        }
+      }
+
+      p + p {
+        margin-top: 10px;
+        border-top: 0;
+      }
+
+      span:first-child {
+        flex: 0 0 auto;
+        color: rgba(202, 225, 229, 0.78);
+        font-size: 13px;
+        line-height: 1.2;
+        white-space: nowrap;
+      }
+
+      span:last-child {
+        position: relative;
+        flex: 0 1 132px;
+        min-width: 0;
+        max-width: 150px;
+        padding: 4px 8px;
+        overflow: hidden;
+        color: #76e8bf;
+        font-size: clamp(14px, 0.82vw, 18px);
+        font-weight: 800;
+        letter-spacing: 0;
+        line-height: 1.2;
+        text-align: right;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        border: 1px solid rgba(118, 232, 191, 0.18);
+        border-radius: 3px;
+        background: linear-gradient(
+          90deg,
+          rgba(118, 232, 191, 0.04),
+          rgba(118, 232, 191, 0.1)
+        );
+        box-shadow: inset 0 0 12px rgba(118, 232, 191, 0.06);
+        text-shadow: 0 0 12px rgba(118, 232, 191, 0.48);
+        word-break: normal;
+      }
+
+      p:nth-child(2) {
+        border-left-color: rgba(236, 178, 87, 0.45);
+        background:
+          linear-gradient(
+            90deg,
+            rgba(82, 217, 230, 0.1),
+            rgba(236, 178, 87, 0.045),
+            transparent
+          ),
+          linear-gradient(
+            180deg,
+            transparent,
+            rgba(82, 217, 230, 0.04)
+          );
+
+        &::before {
+          box-shadow: 0 0 12px rgba(236, 178, 87, 0.42);
+        }
+
+        span:last-child {
+          border-color: rgba(236, 178, 87, 0.2);
+          background: linear-gradient(
+            90deg,
+            rgba(236, 178, 87, 0.045),
+            rgba(118, 232, 191, 0.085)
+          );
+        }
+      }
+    }
+  }
+
+  .screen-metric--blue {
+    border-color: rgba(98, 215, 240, 0.42);
+    background:
+      linear-gradient(90deg, rgba(98, 215, 240, 0.16), transparent 58%, rgba(236, 178, 87, 0.08)) top / 100% 2px no-repeat,
+      radial-gradient(circle at 88% 18%, rgba(98, 215, 240, 0.12), transparent 34%),
+      linear-gradient(145deg, rgba(13, 34, 42, 0.99), rgba(6, 17, 20, 0.99)),
+      repeating-linear-gradient(
+        135deg,
+        rgba(98, 215, 240, 0.045) 0 1px,
+        transparent 1px 10px
+      );
+  }
+
+  .screen-metric--blue > .content span:last-child {
+    color: #62d7f0;
+    text-shadow: 0 0 12px rgba(98, 215, 240, 0.5);
+  }
+
+  /* 计划进度看板样式暂时注释
+  .screen-panel--table {
+    :deep(.el-card__body) {
+      display: flex;
+      flex-direction: column;
+      height: calc(100% - 43px);
+      padding: 6px 10px 8px;
+      overflow: hidden;
+    }
+
+    :deep(.ele-pro-table) {
+      height: 100%;
+      color: #d9edf2;
+      background: transparent;
+    }
+
+    :deep(.ele-pro-table > .el-card),
+    :deep(.ele-pro-table .el-card) {
+      height: 100%;
+      border-color: rgba(82, 217, 230, 0.14);
+      background: transparent;
+      box-shadow: none;
+    }
+
+    :deep(.ele-pro-table .el-card__body) {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      padding: 0;
+      overflow: hidden;
+    }
+
+    :deep(.ele-table-tool) {
+      flex: 0 0 auto;
+      min-height: 44px;
+      padding: 6px 10px;
+      border-color: rgba(82, 217, 230, 0.14);
+      background: transparent;
+    }
+
+    :deep(.ele-pro-table .el-table) {
+      flex: 1 1 auto;
+      min-height: 0;
+    }
+
+    :deep(.el-table),
+    :deep(.el-table__expanded-cell) {
+      color: #cce6eb;
+      font-size: 13px;
+      background: transparent;
+    }
+
+    :deep(.el-table th),
+    :deep(.el-table tr),
+    :deep(.el-table td) {
+      border-color: rgba(82, 217, 230, 0.12);
+      background: transparent;
+    }
+
+    :deep(.el-table th) {
+      color: #f2fbfb;
+      font-weight: 700;
+      background: rgba(82, 217, 230, 0.12);
+    }
+
+    :deep(.el-table th > .cell),
+    :deep(.el-table td > .cell) {
+      line-height: 20px;
+    }
+
+    :deep(.el-table th),
+    :deep(.el-table td) {
+      padding: 5px 0;
+    }
+
+    :deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
+      background: rgba(82, 217, 230, 0.11);
+    }
+
+    :deep(.el-table::before),
+    :deep(.el-table__fixed-right::before),
+    :deep(.el-table__fixed::before) {
+      background: rgba(82, 217, 230, 0.12);
+    }
+
+    :deep(.el-pagination),
+    :deep(.el-pagination__total),
+    :deep(.el-pagination__jump) {
+      color: #b9dce2;
+    }
+
+    :deep(.ele-pagination),
+    :deep(.el-pagination) {
+      flex: 0 0 auto;
+      padding-top: 8px;
+      padding-bottom: 0;
+    }
+
+    :deep(.el-pager li),
+    :deep(.el-pagination button),
+    :deep(.el-pagination .el-input__inner),
+    :deep(.el-pagination .el-select .el-input .el-input__inner) {
+      color: #d9edf2;
+      border-color: rgba(82, 217, 230, 0.22);
+      background: rgba(12, 22, 24, 0.78);
+    }
+
+    :deep(.el-pager li.active) {
+      color: #07100f;
+      background: linear-gradient(135deg, #52d9e6, #ecb257);
+    }
+
+    :deep(.ele-table-tool .el-button) {
+      color: #d9edf2;
+      border-color: rgba(82, 217, 230, 0.22);
+      background: rgba(12, 22, 24, 0.72);
+    }
+  }
+  */
+
+  @media (max-width: 1366px) {
+    .home-screen {
+      height: auto;
+      min-height: calc(100vh - 92px);
+      overflow: visible;
+    }
+
+    .screen-grid {
+      display: grid;
+      height: auto;
+      min-height: 0;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      grid-template-rows: 320px 320px 340px;
+      grid-template-areas:
+        'annual annual'
+        'metrics pie'
+        'quality delivery';
+      gap: 12px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .home-screen {
+      min-height: calc(100vh - 92px);
+      padding: 8px;
+    }
+
+    .screen-header {
+      align-items: flex-start;
+      flex-direction: column;
+      padding: 12px;
+    }
+
+    .screen-title {
+      width: 100%;
+      margin-bottom: 12px;
+    }
+
+    .screen-tabs {
+      display: flex;
+      width: 100%;
+
+      :deep(.el-radio-button) {
+        flex: 1;
+      }
+
+      :deep(.el-radio-button__inner) {
         width: 100%;
-        height: 33%;
+        min-width: 0;
+        padding: 10px 8px;
       }
     }
+
+    .screen-grid {
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-rows: 320px 450px 340px 320px 360px;
+      grid-template-areas:
+        'annual'
+        'metrics'
+        'pie'
+        'quality'
+        'delivery';
+      gap: 10px;
+    }
+
+    .screen-cell--metrics {
+      grid-template-rows: 220px 220px;
+      gap: 10px;
+    }
+
+    .screen-metric {
+      height: 100%;
+    }
   }
 </style>