diff --git a/src/assets/images/erjititle.png b/src/assets/images/erjititle.png
new file mode 100644
index 0000000..1e0d4f5
Binary files /dev/null and b/src/assets/images/erjititle.png differ
diff --git a/src/assets/images/oneTitleBgIng.png b/src/assets/images/oneTitleBgIng.png
new file mode 100644
index 0000000..ece5d4e
Binary files /dev/null and b/src/assets/images/oneTitleBgIng.png differ
diff --git a/src/components/TimelineView/TimelinePag.vue b/src/components/TimelineView/TimelinePag.vue
new file mode 100644
index 0000000..e9eaa89
--- /dev/null
+++ b/src/components/TimelineView/TimelinePag.vue
@@ -0,0 +1,107 @@
+<template>
+    <!-- 支持高度传参（重要） -->
+    <!-- 把 height 用到容器里： -->
+    <!-- <div class="timeline-container" :style="{ height }"> -->
+  <div class="timeline-container" :style="{ height }">
+    <div class="timeline">
+      <div
+        v-for="(item, index) in list"
+        :key="index"
+        class="timeline-item"
+      >
+        <!-- 时间 -->
+        <div class="time">{{ item.time }}</div>
+
+        <!-- 线 -->
+        <div class="line">
+          <div class="dot" :class="{ active: index === 0 }"></div>
+          <div
+            v-if="index !== list.length - 1"
+            class="vertical-line"
+          ></div>
+        </div>
+
+        <!-- 内容 -->
+        <div class="content">
+          {{ item.text }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  list: {
+    type: Array,
+    default: () => []
+  },
+  height: {
+    type: String,
+    default: '200px'
+  }
+})
+</script>
+
+<style scoped>
+.timeline-container {
+  overflow-y: auto;
+  padding: 10px;
+  background-color: rgba(255, 255, 255, 0.8);
+}
+
+.timeline-item {
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+  margin-bottom: 5px;
+}
+
+.time {
+  width: 40px;
+  color: rgba(45, 103, 237, 0.50);
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.line {
+  position: relative;
+  width: 30px;
+  display: flex;
+  justify-content: center;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  background: rgba(45, 103, 237, 0.50);
+  border-radius: 50%;
+  padding: 8px;
+  margin-top: 5px;
+  z-index: 8;
+}
+
+.dot.active {
+  background: rgba(45, 103, 237, 0.50);
+  width: 10px;
+  height: 10px;
+}
+
+.vertical-line {
+  position: absolute;
+  top: 20px;
+  width: 2px;
+  height: 70%;
+  background: rgba(45, 103, 237, 0.50);
+}
+
+.content {
+  flex: 1;
+  font-size: 14px;
+  color: #333;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 18em; /* 约等于18个英文字符/接近中文18字宽度 */
+}
+</style>
\ No newline at end of file
diff --git a/src/views/pages/AccidentCheck.vue b/src/views/pages/AccidentCheck.vue
index 45d8f58..a82836a 100644
--- a/src/views/pages/AccidentCheck.vue
+++ b/src/views/pages/AccidentCheck.vue
@@ -1,15 +1,1754 @@
 <script setup>
+import { ref, computed,onMounted } from 'vue'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { PieChart, BarChart } from 'echarts/charts'
+import { TooltipComponent, TitleComponent, GridComponent } from 'echarts/components'
+import VChart from 'vue-echarts'
+import imgAccuracy from '@/assets/images/home/recognitionAcc.png'
+import imgDelay from '@/assets/images/home/detectionAvg.png'
+import MapPage from '@/views/map/index.vue'
+import Timeline from '@/components/TimelineView/TimelinePag.vue'
+import * as echarts from "echarts";
+const chartRef = ref(null);
+
+use([CanvasRenderer, PieChart, BarChart, TooltipComponent, TitleComponent, GridComponent])
+
+// 交通事故快速检测 - 动态数据
+const accidentQuickDetect = ref({
+  totalToday: 15,
+  accidentTypes: [
+    { type: 'rear-end', label: '追尾事故', count: 7 },
+    { type: 'scrape', label: '擦挂剐蹭', count: 5 },
+    { type: 'other', label: '其他碰撞', count: 3 },
+  ],
+  accuracyRate: 96.5,
+  accuracyChange: 1.2,
+  avgDetectDelay: '1.5秒',
+  detectDelaySub: '实时上报',
+})
+
+const tableData = [
+  {
+    date: '2016-05-03',
+    eventId: 'EVT-20231027-001',
+    name: 'Tom',
+    dizhi:'建设路与人民路口',
+    cltype:'待处理',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    eventId: 'EVT-20231027-001',
+    dizhi:'建设路与人民路口',
+    cltype:'处理中',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-04',
+    eventId: 'EVT-20231027-001',
+    name: 'Tom',
+    dizhi:'建设路与人民路口',
+    cltype:'待处理',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-01',
+    eventId: 'EVT-20231027-001',
+    name: 'Tom',
+    dizhi:'建设路与人民路口',
+    cltype:'已处理',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+]
+
+
+const listjindu = ref([
+  { time: '10:45', text: '建设路发生两车追尾，交警已到场处置。' },
+  { time: '11:02', text: '人民路口信号灯故障，请注意通行。' },
+  { time: '11:15', text: '解放路有车辆抛锚，造成短时拥堵。' }
+])
+
+const carList = ref([
+  { name: '人民路口', time: '10:15', img: 'xxx.jpg' },
+  { name: '解放路', time: '11:05', img: 'xxx.jpg' },
+  { name: '建设路', time: '11:12', img: 'xxx.jpg' },
+  { name: '建设路', time: '11:12', img: 'xxx.jpg' },
+])
+
+onMounted(() => {
+  const chart = echarts.init(chartRef.value);
+  const option = {
+    title: {
+      text: '45',
+      subtext: '本月累计事故数(起)',
+      left: 'center',
+      top: 'center',
+      textStyle: {
+        fontSize: 32,
+        fontWeight: 'bold'
+      },
+      subtextStyle: {
+        fontSize: 12,
+        color: '#666'
+      }
+    },
+
+    tooltip: {
+      trigger: 'item'
+    },
+
+    legend: {
+      bottom: 0
+    },
+
+    series: [
+      {
+        name: '事故类型',
+        type: 'pie',
+        radius: ['60%', '80%'], // 环形
+        avoidLabelOverlap: false,
+
+        itemStyle: {
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+
+        label: {
+          show: true,
+          formatter: '{b}',
+          position: 'outside',
+        },
+
+        labelLine: {
+          show: true,
+          length: 15,
+          length2: 10
+        },
+
+        data: [
+          { value: 3, name: '追尾', itemStyle: { color: '#f4d03f' } },
+          { value: 3, name: '侧刮', itemStyle: { color: '#e67e22' } },
+          { value: 5, name: '碰撞', itemStyle: { color: '#e74c3c' } },
+          { value: 5, name: '其他', itemStyle: { color: '#a569bd' } }
+        ]
+      }
+    ]
+  };
+
+chart.setOption(option);
+
+  window.addEventListener("resize", () => {
+    chart.resize();
+  });
+
+})
+
+// 根据总数计算事故类型占比
+const accidentTypesWithPercent = computed(() => {
+  const total = accidentQuickDetect.value.totalToday
+  return accidentQuickDetect.value.accidentTypes.map(t => ({
+    ...t,
+    percent: total > 0 ? Math.round((t.count / total) * 100) : 0,
+  }))
+})
+// ECharts 环形图配置
+const accidentPieOption = computed(() => {
+  const types = accidentQuickDetect.value.accidentTypes
+  const total = accidentQuickDetect.value.totalToday
+  return {
+    backgroundColor: 'transparent',
+    tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
+    title: {
+      text: `{a|${total}}\n{b|今日总数(起)}`,
+      textStyle: {
+        rich: {
+          a: {
+            fontSize: 30,
+            color: '#000',
+            fontWeight: 800,
+            align: 'center',
+            verticalAlign: 'middle',
+            fontFamily: 'Microsoft YaHei',
+            lineHeight: 15
+          },
+          b: {
+            fontSize: 14,
+            color: '#999',
+            align: 'center',
+            verticalAlign: 'middle',
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: 500,
+            padding: [10, 0, 0, 0]
+          }
+        }
+      },
+      left: 'center',
+      top: 'center',
+      padding: [0, 0, 0, 0],
+      itemGap: 0
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['80%', '95%'],
+        center: ['50%', '50%'],
+        avoidLabelOverlap: false,
+        label: { show: false },
+        emphasis: { label: { show: false } },
+        data: types.map(t => ({ name: t.label, value: t.count })),
+        itemStyle: {
+          color: params => {
+            const colors = { '追尾事故': '#ef4444', '擦挂剐蹭': '#f97316', '其他碰撞': '#eab308' }
+            return colors[params.name] || '#94a3b8'
+          },
+          borderColor: '#fff',
+          borderWidth: 9,
+        },
+      },
+    ],
+  }
+})
+
+// 出行结构优化与路径诱导 - 水平堆叠条形图（私家车/公交/慢行）
+const travelStackData = ref({
+  normal: { car: 65, bus: 25, slow: 10 }, // 常态
+  current: { car: 55, bus: 35, slow: 10 }, // 当前
+  targetLine: 65, // 橙色虚线位置（私家车目标占比）
+})
+const travelBarOption = computed(() => ({
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: { type: 'shadow' },
+    formatter: (params) => {
+      if (!params || !params.length) return ''
+      const name = params[0].axisValue
+      const parts = params.map(p => `${p.seriesName}: ${p.value}%`).join('<br/>')
+      return `${name}<br/>${parts}`
+    },
+  },
+  grid: {
+    left: 40,
+    right: 0,
+    top: 16,
+    bottom: 10,
+    containLabel: false,
+  },
+  xAxis: {
+    type: 'value',
+    min: 0,
+    max: 100,
+    axisLine: { show: false },
+    axisTick: { show: false },
+    axisLabel: { show: false },
+    splitLine: {
+      show: true,
+      lineStyle: { color: 'rgba(0,0,0,0.08)', type: 'dashed', width: 1 },
+      interval: (val) => Number.isInteger(val / 10),
+    },
+  },
+  yAxis: {
+    type: 'category',
+    data: ['常态', '当前'],
+    axisLine: { show: false },
+    axisTick: { show: false },
+    axisLabel: {
+      color: '#334155',
+      fontSize: 12,
+      margin: 10,
+    },
+    inverse: true,
+    triggerEvent: false,
+  },
+  series: [
+    {
+      name: '私家车',
+      type: 'bar',
+      stack: 'travel',
+      barWidth: 14,
+      // 各柱子之间不留间距
+      barGap: '-100%',
+      barCategoryGap: '-100%',
+      data: [travelStackData.value.normal.car, travelStackData.value.current.car],
+      itemStyle: {
+        color: '#5b8fd4',
+        borderColor: 'transparent',
+        barBorderRadius: [0, 0, 30, 0],
+      },
+      emphasis: { itemStyle: { color: '#6ba0e8' } },
+      // label: { show: true, position: 'inside', formatter: '{c}%', fontSize: 11, color: '#fff', fontWeight: 600 },
+      label: {
+        show: true,
+        position: 'top',   // 显示在柱子顶部外侧
+        formatter: '{c}%',
+        fontSize: 11,
+        color: '#636674',
+        fontWeight: 600,
+      },
+    },
+
+    {
+      name: '公交',
+      type: 'bar',
+      stack: 'travel',
+      barWidth: 14,
+      barGap: '-100%',
+      barCategoryGap: '-100%',
+      data: [travelStackData.value.normal.bus, travelStackData.value.current.bus],
+      itemStyle: {
+        color: '#2dd4bf',
+        borderColor: 'transparent',
+        barBorderRadius: [30, 0, 30, 0],
+      },
+      emphasis: { itemStyle: { color: '#5eead4' } },
+      // label: { show: true, position: 'inside', formatter: '{c}%', fontSize: 11, color: '#fff', fontWeight: 600 },
+      label: {
+        show: true,
+        position: 'top',   // 显示在柱子顶部外侧
+        distance: 4,       // 和柱子顶端的距离
+        formatter: '{c}%',
+        color: '#636674',
+        fontWeight: 600,
+      },
+    },
+    {
+      name: '慢行',
+      type: 'bar',
+      stack: 'travel',
+      barWidth: 14,
+      barGap: '0%',
+      barCategoryGap: '0%',
+      data: [travelStackData.value.normal.slow, travelStackData.value.current.slow],
+      itemStyle: {
+        color: '#a78bfa',
+        borderColor: 'transparent',
+        barBorderRadius: [30, 0, 30, 0],
+      },
+      emphasis: { itemStyle: { color: '#c4b5fd' } },
+      // label: { show: true, position: 'inside', formatter: '{c}%', fontSize: 11, color: '#fff', fontWeight: 600 },
+      label: {
+        show: true,
+        position: 'top',   // 显示在柱子顶部外侧
+        formatter: '{c}%',
+        fontSize: 11,
+        color: '#636674',
+        fontWeight: 600,
+      },
+      markLine: {
+        symbol: 'none',
+        silent: true,
+        lineStyle: { color: '#f97316', type: 'dashed', width: 1.5 },
+        data: [{ xAxis: travelStackData.value.targetLine }],
+        label: { show: false },
+      },
+    },
+  ],
+}))
+
+// 方案库管理 - 使用动态数组管理方案，支持启用 / 暂停切换，且方案互斥
+const planList = ref([
+  {
+    key: 'A',
+    name: '方案A：快速清障与区域分流',
+    enabled: true,
+  },
+  {
+    key: 'B',
+    name: '方案B：广域总量控制',
+    enabled: false,
+  },
+  {
+    key: 'C',
+    name: '方案C：公交优先与慢行引导',
+    enabled: false,
+  },
+])
+
+const togglePlan = (planKey) => {
+  const current = planList.value.find(p => p.key === planKey)
+  if (!current) return
+
+  // 若当前为已启用，点击后切到“待启用”状态（所有方案都为待启用）
+  if (current.enabled) {
+    planList.value = planList.value.map(p => ({ ...p, enabled: false }))
+    return
+  }
+
+  // 若当前为待启用，点击后本方案“已启用”，其他方案自动变为“待启用”（互斥）
+  planList.value = planList.value.map(p => ({
+    ...p,
+    enabled: p.key === planKey,
+  }))
+}
+
+// 生成方案：自动新增一个新方案，并将其设为“已启用”，其他全部置为“待启用”
+const generatePlan = () => {
+  // 先全部置为待启用
+  planList.value = planList.value.map(p => ({ ...p, enabled: false }))
+
+  // 计算下一个方案编号（A/B/C...）
+  const existingKeys = planList.value.map(p => p.key)
+  let code = 'A'.charCodeAt(0)
+  let nextKey = ''
+  while (true) {
+    const candidate = String.fromCharCode(code)
+    if (!existingKeys.includes(candidate)) {
+      nextKey = candidate
+      break
+    }
+    code++
+  }
+
+  const newPlan = {
+    key: nextKey,
+    name: `方案${nextKey}：自动生成联动方案`,
+    enabled: true,
+  }
+
+  planList.value.push(newPlan)
+}
+
+// el-tag 状态类型映射
+const statusTagType = (statusType) => {
+  const map = { new: 'danger', processing: 'primary', arrived: 'warning', done: 'success' }
+  return map[statusType] || 'info'
+}
+
+// 左侧 - 事故列表数据
+const accidentList = ref([
+  { id: '#A-1024', time: '10:15:32', location: '明瓦廊西向东内测', status: '新发现', statusType: 'new' },
+  { id: '#A-1023', time: '10:12:10', location: '石鼓路与罗廊路交叉口', status: '处理中', statusType: 'processing' },
+  { id: '#A-1022', time: '09:58:45', location: '淮海路高架桥下', status: '交警已到', statusType: 'arrived' },
+  { id: '#A-1021', time: '09:45:20', location: '省中医院南门', status: '已清理', statusType: 'done' },
+  { id: '#A-1025', time: '09:45:20', location: '省中医院北门', status: '已清理', statusType: 'done' },
+  { id: '#A-1021', time: '09:45:20', location: '省中医院南门', status: '已清理', statusType: 'done' },
+])
 </script>
 
 <template>
-  <div class="page-content">
-    <h2>事故快检</h2>
-    <p>交通事故快速检测模块</p>
+  <div class="dashboard-page">
+    <!-- 左右两列布局 -->
+    <div class="dashboard-layout">
+      <!-- 左侧面板 -->
+      <aside class="panel left-panel">
+        <!-- 卡片1: 交通事故快速检测 -->
+        <div class="card accident-quick-detect-card">
+          <div class="card-body">
+            <div class="metrics-row">
+              <!-- 左侧 实时事件监测div。metric-ssjc-->
+              <div class="metric-ssjc">
+                <div class="card-header accident-card-header">
+                  <h3 style="margin-left: 20px;">实时事件监测</h3>
+                </div>
+                <!-- 地图 -->
+                <div class="dashboard-map">
+                  <MapPage />
+                  <div class="map-overlay">
+                    <div class="left-car-tip">
+                      <div class="title-top">
+                        <img class="img-jt" src="@/assets/images/erjititle.png" alt="区域交通概况" srcset="">
+                        区域交通概况
+                      </div>
+                      <!-- 一列 -->
+                      <div class="list-mesage">
+                         <div class="titlnew">当前拥堵指数：
+                          <div class="datali">{{ 7.2 }}</div>
+                          <div class="type-cs">(中度拥堵)</div>
+                         </div>
+                      </div>
+                      <div class="list-mesage">
+                         <div class="titlnew">平均车速：
+                          <div class="datali">{{ 3.5 }} km/h</div>
+                         </div>
+                      </div>
+                      <div class="list-mesage">
+                         <div class="titlnew">活跃事件数：
+                          <div class="datali">{{ 15 }}起</div>
+                          <div class="types-zk">(严重:3、中度:5、轻微:7)</div>
+                         </div>
+                      </div>
+                      <div class="list-mesage">
+                         <div class="titlnew">重点监控路段：
+                          <div class="datali">建设路、人民路</div>
+                         </div>
+                      </div>
+                      <div class="title-top">
+                        <img class="img-jt" src="@/assets/images/erjititle.png" alt="区域交通概况" srcset="">
+                        最新重要事件通报
+                      </div>
+                       <Timeline :list="listjindu" style="height: auto;" />
+                       <div class="title-bot">
+                        <!-- 底部监控 -->
+                        <img class="img-jt" src="@/assets/images/erjititle.png" alt="区域交通概况" srcset="">
+                        关键事件现场快照
+                      </div>
+                    </div>
+                    <div class="left-car-bottom">
+                        <div class="car-item" v-for="item in carList" :key="item.name">
+                          <img :src="item.img" />
+                          <div class="car-overlay">
+                            {{ item.name }}（{{ item.time }}）
+                          </div>
+                        </div>
+                      </div>
+                  </div>
+                </div>
+              </div>
+              <div class="metric-today">
+                <div class="card-header accident-card-header">
+                  <h3 style="margin-left: 20px;">今日交通事故监测</h3>
+                </div>
+                <div class="metric-icon">
+                 <el-table :data="tableData" stripe style="width: 100%">
+                    <el-table-column prop="eventId" label="事件ID" width="180" />
+                    <el-table-column prop="name" label="严重程度" width="80" />
+                    <el-table-column prop="name" label="事故类型" width="100" />
+                    <el-table-column prop="date" label="详细时间" width="180" />
+                    <el-table-column prop="dizhi" label="位置" width="180" />
+                    <el-table-column prop="address" label="处理状态"  align="center">
+                      <template #default="scope">
+                        <el-tag type="danger">{{ scope.row.cltype }}</el-tag>
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 卡片2: 底部四个卡片 -->
+        <div class="cardOne">
+          <div class="card-header accident-card-header">
+            <h3 style="margin-left: 20px;">历史事件统计分析</h3>
+          </div>
+          <div class="card-body">
+            <div class="impact-metrics">
+
+              <div class="impact-item1">
+                <div class="title-Bottoms">
+                  <img class="img-jt" src="@/assets/images/erjititle.png" alt="区域交通概况" srcset="">
+                    事故类型占比
+                </div>
+                <div class="earchartconter">
+                  <div ref="chartRef" class="earcssl"></div>
+                </div>
+              </div>
+              <div class="impact-item2">
+                <div class="title-Bottoms">
+                  <img class="img-jt" src="@/assets/images/erjititle.png" alt="区域交通概况" srcset="">
+                    事故高发时段
+                </div>
+              </div>
+              <div class="impact-item3">
+                 <div class="title-Bottoms">
+                  <img class="img-jt" src="@/assets/images/erjititle.png" alt="区域交通概况" srcset="">
+                    事故高发路段TOP5
+                </div>
+              </div>
+              <div class="impact-item4">
+                 <div class="title-Bottoms">
+                  <img class="img-jt" src="@/assets/images/erjititle.png" alt="区域交通概况" srcset="">
+                    处理时间与严重程度分析
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </aside>
+
+    
+    </div>
   </div>
 </template>
 
 <style scoped>
-.page-content {
-  padding: 24px;
+.dashboard-page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 100%;
+  background: #ffffff;
+  color: #e8eef5;
+}
+
+.dashboard-layout {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  gap: 0;
+  overflow: hidden;
+  min-height: 0;
+  height: 100%;
+  padding: 16px 16px;
+  background-color: rgb(255, 255, 255);
+}
+
+
+
+.panel {
+  /* flex: 0 0 420px; */
+  width: 100vw;
+  min-height: 0;
+  /* overflow-y: auto; */
+  /* padding: 16px 16px; */
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  z-index: 9999;
+}
+
+.left-panel {
+  border-right: none;
+}
+
+.right-panel {
+  border-left: none;
+}
+
+/* 卡片通用 */
+.cardOne {
+  overflow: hidden;
+  background-color: rgb(255, 255, 255);
+  box-shadow: 0px 0px 8px 0px rgba(97, 112, 146, 0.6);
+  border-radius: 8px 8px 8px 8px;
+  border: 1px solid rgba(214, 226, 255, 0.3);
+}
+
+/* 左侧三个卡片固定高度 */
+.left-panel .card:nth-of-type(1) {
+  height: 620px;
+}
+
+.left-panel .cardOne:nth-of-type(2) {
+  height: 400px;
+}
+
+
+
+/* 右侧三个卡片固定高度 */
+.right-panel .cardOne:nth-of-type(1) {
+  height: 240px;
+}
+
+.right-panel .card:nth-of-type(2) {
+  height: 388px;
+}
+
+
+.card-header {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  /* padding: 12px 16px; */
+  background: rgba(0, 136, 255, 0.08);
+}
+
+.card-header h3 {
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff;
+}
+
+.card-body {
+  padding: 0px 10px 20px 10px;
+  font-size: 13px;
+  color: #b8d4f5;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: calc(100% - 42px);
+}
+
+/* 出行结构卡片 - 浅色虚线边框与圆角内容区 */
+.card-travel .card-body {
+  /* margin: 8px; */
+  padding: 12px 14px 16px;
+  background: rgba(248, 250, 252, 0.6);
+  color: #334155;
+  height: calc(100% - 42px);
+  display: flex;
+  justify-content: flex-start;
+}
+
+/* 环形图 */
+.accident-overview {
+  display: flex;
+  gap: 24px;
+  /* margin-bottom: 20px; */
+  align-items: center;
+  /* height: 160px; */
+  flex-shrink: 0;
+}
+
+.ring-chart-wrap {
+  width: 165px;
+  height: 110px;
+  flex-shrink: 0;
+}
+
+.ring-chart {
+  width: 100%;
+  height: 100%;
+}
+
+.accident-types {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+}
+
+.type-item {
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 0;
+  flex-shrink: 0;
+}
+
+.dot.rear-end {
+  background: #ef4444;
+}
+
+.dot.scrape {
+  background: #f97316;
+}
+
+.dot.other {
+  background: #eab308;
+}
+
+.type-label {
+  font-size: 14px;
+  color: #252525;
+  margin-right: 4px;
+}
+
+.type-count {
+  font-weight: 700;
+  color: #252525;
+  margin-right: 2px;
+  font-size: 14px;
+}
+
+.type-percent {
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+/* 事故表格 - 斑马纹、字体色、内容可滚动（el-table max-height 使表体可滚动） */
+.accident-table-wrap {
+  overflow-x: auto;
+  margin-bottom: 10px;
+  max-height: 260px;
+  flex-shrink: 0;
+}
+
+.accident-table-wrap :deep(.el-table) {
+  --el-table-bg-color: transparent;
+  --el-table-tr-bg-color: transparent;
+  --el-table-header-bg-color: transparent;
+  --el-table-border-color: rgba(0, 136, 255, 0.15);
+  --el-table-row-hover-bg-color: rgba(0, 136, 255, 0.08);
+  font-size: 12px;
+}
+
+.accident-table-wrap :deep(.el-table th.el-table__cell) {
+  color: #252525 !important;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.accident-table-wrap :deep(.el-table td.el-table__cell),
+.accident-table-wrap :deep(.el-table th.el-table__cell) {
+  padding: 8px 10px;
+}
+
+.accident-table-wrap :deep(.el-table td.el-table__cell) {
+  color: #252525 !important;
+  font-size: 12px;
+}
+
+.accident-table-wrap :deep(.el-tag) {
+  border: none;
+  font-size: 11px;
+  padding: 3px 8px;
+  width: 56px;
+  min-width: 56px;
+  text-align: center;
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+.accident-table-wrap :deep(.el-tag--danger) {
+  background: #dc2626;
+  color: #fff;
+}
+
+.accident-table-wrap :deep(.el-tag--primary) {
+  background: #dbeafe;
+  color: #2563eb;
+}
+
+.accident-table-wrap :deep(.el-tag--warning) {
+  background: #ffedd5;
+  color: #ea580c;
+}
+
+.accident-table-wrap :deep(.el-tag--success) {
+  background: #dcfce7;
+  color: #16a34a;
+}
+
+.accident-table-wrap :deep(.el-table td.el-table__cell, .accident-table-wrap .el-table th.el-table__cell) {
+  padding: 3px 0px !important;
+}
+
+.accident-table-wrap :deep(.el-table__body) {
+  width: 100%;
+}
+
+/* 斑马纹：一行白色，一行 rgba(234, 238, 243, 0.45) */
+.accident-table-wrap :deep(.el-table__body tr td.el-table__cell) {
+  background: #fff !important;
+}
+
+.accident-table-wrap :deep(.el-table__body tr.el-table__row--striped td.el-table__cell) {
+  background: rgba(234, 238, 243, 0.45) !important;
+}
+
+.accident-table-wrap :deep(.el-table__header-wrapper) {
+  background: #EEF1F5 !important;
+}
+
+/* 交通事故快速检测 - 卡片标题 */
+.accident-card-header {
+  padding: 10px 16px;
+  /* border-bottom: 1px solid rgba(148, 163, 184, 0.2); */
+  padding-bottom: 12px;
+  background: url('@/assets/images/oneTitleBgIng.png') no-repeat center center;
+  /* 背景图不贴边：距离上下 12px、左右 16px */
+  background-size: calc(100% - 32px) calc(100% - 24px);
+}
+
+.dashboard-map{
+  margin-left: 10px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  height: 100%;
+  border-radius: 8px 8px 8px 8px;
+  border: 1px solid rgba(125, 132, 148, 0.30);
+  position: relative;
+  overflow: hidden;
+}
+
+.map-overlay{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  pointer-events: none; /* /* 不影响地图操作 */
+  z-index: 10;
+  color: rgb(0, 0, 255);
+  font-size: 20px;
+}
+
+/* 左侧小方块 */
+.left-car-tip{
+  display: flex;
+  flex-direction: column;
+  pointer-events: none;
+  background-color: rgba(255, 255, 255, 0.8);
+  width: 340px;
+  height: 350px;
+  font-weight: 600;
+  color: #ef4444;
+  pointer-events: auto; /* 阻挡地图交互 */
+
+}
+
+.img-jt{
+  width: 20px;
+  height: 10px;
+  margin-left: 10px;
+}
+
+.list-mesage{
+    display: flex;
+    margin-top: 10px;
+    font-weight: 500;
+    font-size: 14px;
+    color: #252525;
+    width: 100%;
+    height: 20px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+}
+
+.earchartconter{
+  width: 100%;
+  /* background-color: yellow; */
+  display: flex;
+  justify-content: center;
+  align-content: center;
+}
+.earcssl{
+  width: 300px;
+  height: 300px;
+}
+.titlnew{
+  display: flex;
+ margin-left: 10px;
+ font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+  font-weight: 400;
+  font-size: 14px;
+  color: #252525;
+  line-height: 20px;
+}
+
+.datali{
+  font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+  font-weight: 600;
+  font-size: 14px;
+  color: #2D67ED;
+  line-height: 20px;
+  text-align: right;
+  font-style: normal;
+  text-transform: none;
+}
+
+.type-cs{
+  font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+  font-weight: 400;
+  margin-left: 10px;
+  font-size: 12px;
+  color: #FF973B;
+  line-height: 17px;
+  text-align: right;
+  font-style: normal;
+  text-transform: none;
+}
+
+.types-zk{
+  font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
+  font-weight: 400;
+  font-size: 12px;
+  margin-left: 10px;
+  color: #BA0002;
+  line-height: 17px;
+  text-align: right;
+  font-style: normal;
+  text-transform: none;
+}
+
+.title-bot{
+    display: flex;
+    background-color: rgba(255, 255, 255, 0.8);
+    font-weight: 500;
+    font-size: 14px;
+    color: #252525;
+    width: 100%;
+    height: 25px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+}
+.title-top{
+    display: flex;
+    background-color: rgba(255, 255, 255, 0.8);
+    margin-top: 10px;
+    font-weight: 500;
+    font-size: 14px;
+    color: #252525;
+    width: 100%;
+    height: 25px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+
+  .title-Bottoms{
+    display: flex;
+    background-color: rgba(255, 255, 255, 0.8);
+    font-weight: 500;
+    font-size: 14px;
+    color: #252525;
+    width: 100%;
+    height: 25px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+
+.left-car-bottom{
+  background-color: rgba(255, 255, 255, 0.8);
+  width: 100%;
+  height: 250px;
+  font-weight: 600;
+  color: #ef4444;
+  pointer-events: auto; /* 阻挡地图交互 */
+  display: flex;
+  gap: 10px;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+/* 每个卡片 */
+.car-item {
+  flex: 1; /* 关键：4等分 */
+  position: relative;
+  overflow: hidden;
+  border: 2px solid #3b82f6;
+  border-radius: 4px;
+}
+
+/* 图片 */
+.car-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* 底部蓝色遮罩 */
+.car-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 4px 6px;
+  font-size: 12px;
+  color: #fff;
+  background: linear-gradient(
+  270deg,
+  rgba(45,103,237,0) 0%,
+  rgba(45,103,237,0.85) 100%
+);
+  border-radius: 0px 0px 0px 0px;
+}
+
+
+.accident-card-header h3 {
+  color: #252525;
+  font-size: 18px;
+  font-weight: 600;
+  margin-left: 2px;
+  font-family: 'Alimama';
+}
+
+
+/* 指标行 - 双卡片式 */
+.metrics-row {
+  display: flex;
+  gap: 16px;
+  /* margin-top: 16px; */
+  height: 110%;
+  flex-shrink: 0;
+  margin-top: 10px;
+  /* background-color: yellow; */
+}
+
+.metric-ssjc{
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: rgb(255, 255, 255);
+  /* background: linear-gradient(180deg, rgba(185, 220, 255, 0.5) 0%, rgba(222, 234, 246, 0) 100%), #FAFDFF; */
+  box-shadow: 0px 0px 8px 0px rgba(97, 112, 146, 0.6);
+  border-radius: 8px 8px 8px 8px;
+  border: 1px solid rgba(45, 103, 237, 0.3);
+}
+
+.metric-today {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: rgb(255, 255, 255);
+  /* background: linear-gradient(180deg, rgba(185, 220, 255, 0.5) 0%, rgba(222, 234, 246, 0) 100%), #FAFDFF; */
+  box-shadow: 0px 0px 8px 0px rgba(97, 112, 146, 0.6);
+  border-radius: 8px 8px 8px 8px;
+  border: 1px solid rgba(45, 103, 237, 0.3);
+}
+
+.metric-card {
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  background: rgba(0, 136, 255, 0.06);
+  border-radius: 8px;
+  border: 1px solid rgba(0, 136, 255, 0.12);
+  align-items: center;
+  padding: 3px 5px 3px 5px
+}
+
+.metric-icon {
+  width: 100%;
+  /* height: 90%; */
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 指标卡片中的图标图片：保持等比缩放，避免被拉伸 */
+.metric-icon img {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  display: block;
+  object-fit: contain;
+}
+
+/* 此页面内的图片默认按比例缩放，不随容器变形 */
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+.metric-content {
+  flex: 1;
+  min-width: 0;
+  padding-left: 8px;
+  font-family: 'AlibabaPuHuiTi-2-55-Regula';
+}
+
+.metric-title {
+  font-size: 12px;
+  color: #94a3b8;
+}
+
+.metric-value {
+  font-size: 14px;
+  font-weight: 700;
+  color: #60a5fa;
+  margin-bottom: 2px;
+}
+
+.metric-desc {
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+.metric-desc.up {
+  color: #4ade80;
+}
+
+/* 影响范围 */
+.analysis-target {
+  font-size: 14px;
+  color: #2D67ED;
+  margin-bottom: 12px;
+  background: url('@/assets/images/home/position.png') no-repeat center center;
+  background-size: 100% 100%;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  padding-left: 55px;
+  font-family: 'AlibabaPuHuiTi-2-65-Medium';
+}
+
+.impact-metrics {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px; /* div间隔10px */
+  width: 100%;
+  height: 100%;
+}
+
+.impact-item1 {
+  font-size: 12px;
+  /* background-color: red; */
+  /* background: url('@/assets/images/home/ldcd.png') no-repeat center center; */
+  /* background-size: 100% 100%; */
+  height: 100%;
+  width: 100%;
+  display: flex;
+  /* align-items: center; */
+  /* padding-left: 34px; */
+  flex-direction: column;
+  font-family: 'AlibabaPuHuiTi-2-65-Medium';
+  color: #252525;
+  font-family: 'AlibabaPuHuiTi-2-85-Bold';
+}
+
+.impact-item2 {
+  font-size: 12px;
+  /* background: url('@/assets/images/home/cdsz.png') no-repeat center center; */
+  /* background-color: red; */
+  /* background-size: 100% 100%; */
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  /* align-items: center; */
+  /* padding-left: 34px; */
+  font-family: 'AlibabaPuHuiTi-2-65-Medium';
+  color: #252525;
+}
+
+.impact-item3 {
+  font-size: 12px;
+  /* background-color: red; */
+  /* background: url('@/assets/images/home/pjxc.png') no-repeat center center; */
+  /* background-size: 100% 100%; */
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  /* align-items: center; */
+  /* padding-left: 34px; */
+  font-family: 'AlibabaPuHuiTi-2-65-Medium';
+  color: #252525;
+}
+
+.impact-item4 {
+  font-size: 12px;
+  /* background: url('@/assets/images/home/clgs.png') no-repeat center center; */
+  /* background-size: 100% 100%; */
+  /* background-color: red; */
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  /* align-items: center; */
+  /* padding-left: 34px; */
+  font-family: 'AlibabaPuHuiTi-2-65-Medium';
+  color: #252525;
+}
+
+.impact-item4 strong {
+  margin-left: 10px;
+  color: #FF3F41;
+  font-family: 'AlibabaPuHuiTi-2-85-Bold';
+}
+
+.impact-item1 strong {
+  margin-left: 10px;
+  color: #FF3F41;
+  font-family: 'AlibabaPuHuiTi-2-85-Bold';
+
+}
+
+.impact-item2 strong {
+  margin-left: 10px;
+  color: #FF3F41;
+  font-family: 'AlibabaPuHuiTi-2-85-Bold';
+}
+
+.impact-item3 strong {
+  margin-left: 10px;
+  color: #FF3F41;
+  font-family: 'AlibabaPuHuiTi-2-85-Bold';
+}
+
+.impact-item strong.delay {
+  color: #f97316;
+}
+
+/* 事故影响范围辨识 - 单位统一样式，除“受阻”外 */
+.impact-metrics .impact-unit {
+  margin-left: 2px;
+  color: #7D8494;
+  font-family: 'AlibabaPuHuiTi-2-55-Regular';
+}
+
+.impact-metrics .impact-unit-blocked {
+  color: inherit;
+}
+
+/* 状态监测 */
+.status-list {
+  margin-bottom: 0;
+}
+
+.status-item {
+  margin-bottom: 5px;
+  font-size: 12px;
+  background: url('@/assets/images/home/jtyxBg.png') no-repeat center center;
+  background-size: 100% 100%;
+  height: 28px;
+  width: 388px;
+  display: flex;
+  align-items: center;
+  padding-left: 12px;
+  font-family: 'AlibabaPuHuiTi-2-65-Medium';
+  color: #252525;
+}
+
+.status-label {
+  color: #4b5563;
+  font-family: 'AlibabaPuHuiTi-2-55-Regular';
+}
+
+.status-number {
+  margin-left: 6px;
+  font-family: 'AlibabaPuHuiTi-2-85-Bold';
+}
+
+.status-number-primary {
+  color: #2D67ED;
+}
+
+.status-desc {
+  margin-left: 4px;
+  font-size: 11px;
+}
+
+.status-desc-muted {
+  color: #6b7280;
+}
+
+.status-desc-success {
+  color: #16a34a;
+}
+
+.text-severe {
+  color: #ef4444;
+}
+
+.text-delay {
+  color: #f97316;
+}
+
+.recovery-progress .recovery-header {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 11px;
+  background: url('@/assets/images/home/jtyxBg.png') no-repeat center center;
+  background-size: 100% 100%;
+  height: 28px;
+  width: 388px;
+  padding-left: 12px;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #0088ff, #22c55e);
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+/* 右侧 - 应急处置 */
+.gauge-row {
+  display: flex;
+  /* gap: 24px; */
+  /* margin-bottom: 16px; */
+  justify-content: space-between
+}
+
+.gauge-item {
+  text-align: center;
+  /* width: 186px; */
+}
+
+.gauge-circle {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: url('@/assets/images/home/djsBg.png') no-repeat center center;
+  background-size: 100% 100%;
+  width: 186px;
+  height: 60px;
+  align-items: flex-start;
+  padding-left: 69px;
+}
+
+.gauge-circle2 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: url('@/assets/images/home/yjclAvgBg.png') no-repeat center center;
+  background-size: 100% 100%;
+  width: 186px;
+  height: 60px;
+  align-items: flex-start;
+  padding-left: 69px;
+}
+
+.gauge-value {
+  font-size: 22px;
+  color: #2D67ED;
+  font-family: 'AlibabaPuHuiTi-2-65-Medium';
+}
+
+.gauge-unit {
+  font-size: 12px;
+  color: #2D67ED;
+}
+
+.gauge-label {
+  font-size: 12px;
+  color: #252525;
+  font-family: 'AlibabaPuHuiTi-2-55-Regular';
+
+}
+
+.disposal-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.disposal-item {
+  font-size: 14px;
+  background: rgba(234, 238, 243, 0.45);
+  color: #252525;
+  font-family: 'AlibabaPuHuiTi-2-55-Regular';
+  padding: 0 12px;
+  display: flex;
+  justify-content: space-between;
+  height: 28px;
+  align-items: center;
+}
+
+.check {
+  color: #22c55e;
+  margin-right: 6px;
+}
+
+.status-done {
+  color: #2D67ED;
+  font-family: 'AlibabaPuHuiTi-2-65-Medium';
+}
+
+/* 出行结构优化与路径诱导 - 区块标题 */
+.section-title {
+  margin: 0;
+  font-size: 14px;
+  color: #252525;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: 'AlibabaPuHuiTi-2-65-Medium';
+}
+
+.title-icon {
+  color: #2563eb;
+  font-size: 12px;
+  letter-spacing: -1px;
+}
+
+.travel-structure-section {
+  /* margin-bottom: 14px; */
+}
+
+.section-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  /* margin-bottom: 10px; */
+}
+
+.section-title-row .section-title {
+  margin: 0;
+}
+
+.travel-legend {
+  display: flex;
+  gap: 14px;
+  font-size: 11px;
+  color: #64748b;
+}
+
+.legend-bar {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+
+.legend-bar.car {
+  background: #5b8fd4;
+}
+
+.legend-bar.bus {
+  background: #2dd4bf;
+}
+
+.legend-bar.slow {
+  background: #a78bfa;
+}
+
+.travel-bar-chart-wrap {
+  width: 100%;
+  height: 125px;
+  margin-bottom: 0;
+}
+
+.travel-bar-chart {
+  width: 100%;
+  height: 100%;
+}
+
+/* 需求转移流向 - 流程图 */
+.flow-section {
+  /* margin-top: 14px; */
+  /* padding-top: 12px; */
+}
+
+.flow-section .section-title {
+  /* margin-bottom: 10px; */
+}
+
+.flow-diagram {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  background: url('@/assets/images/home/flow.png') no-repeat center center;
+  background-size: 100% 100%;
+  height: 100%;
+  width: 100%;
+  padding-right: 8px;
+  height: 150px;
+}
+
+.flow-source {
+  flex-shrink: 0;
+  padding: 8px 14px;
+  font-size: 14px;
+  color: #2D67ED;
+  margin-top: 56px;
+  font-family: 'AlibabaPuHuiTi-2-65-Medium';
+}
+
+.flow-paths {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.flow-path {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: flex-end
+}
+
+.flow-pct-1 {
+  position: relative;
+  top: -10px;
+  right: 25px;
+  color: #1FEC90;
+  font-family: 'AlibabaPuHuiTi-2-65-Medium';
+  font-size: 12px;
+}
+
+.flow-pct-2 {
+  position: relative;
+  top: 6px;
+  right: 25px;
+  color: #FF973B;
+  font-family: 'AlibabaPuHuiTi-2-65-Medium';
+  font-size: 12px;
+}
+
+.flow-pct-3 {
+  position: relative;
+  top: 21px;
+  right: 25px;
+  color: #FF3F41;
+  font-family: 'AlibabaPuHuiTi-2-65-Medium';
+  font-size: 12px;
+}
+
+.flow-connector {
+  width: 40px;
+  height: 24px;
+  color: currentColor;
+}
+
+.flow-path.path-1 .flow-connector {
+  color: #14b8a6;
+}
+
+.flow-path.path-2 .flow-connector {
+  color: #f97316;
+}
+
+.flow-path.path-3 .flow-connector {
+  color: #ef4444;
+}
+
+.flow-svg {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.flow-dest-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.flow-dest {
+  padding: 6px 12px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.flow-dest.dest-1 {
+  margin-right: -5px;
+}
+
+.flow-dest.dest-2 {
+  margin-right: -5px;
+}
+
+.flow-dest.dest-3 {
+  margin-right: 15px;
+}
+
+.flow-tag {
+  padding: 3px 10px;
+  /* border-radius: 6px; */
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.flow-tag.ok {
+  background: #15803d;
+  color: #fff;
+}
+
+.flow-tag.slow {
+  background: #c2410c;
+  color: #fff;
+}
+
+.flow-tag.jam {
+  background: #b91c1c;
+  color: #fff;
+}
+
+/* 方案库 */
+.plan-list {
+  /* margin-bottom: 16px; */
+  height: 250px;
+  overflow: auto;
+}
+
+.plan-list::-webkit-scrollbar {
+  display: none;
+}
+
+.plan-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  margin-bottom: 10px;
+  padding: 10px 14px;
+  border-radius: 6px;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+.plan-item-enabled {
+  background-image: url('@/assets/images/home/enabledBg.png');
+  background-size: 100% 100%;
+  height: 60px;
+}
+
+.plan-item-pending {
+  background-image: url('@/assets/images/home/activatedBg.png');
+  background-size: 100% 100%;
+  height: 60px;
+}
+
+.plan-info {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #252525;
+  font-family: 'AlibabaPuHuiTi-2-65-Medium';
+}
+
+.plan-name {
+  font-size: 13px;
+}
+
+.plan-status {
+  font-size: 12px;
+}
+
+.plan-status-enabled {
+  color: #16a34a;
+}
+
+.plan-status-pending {
+  color: #fb923c;
+}
+
+.plan-progress {
+  margin-top: 6px;
+  margin-left: 24px;
+}
+
+.plan-control {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.75);
+  padding: 0;
+}
+
+.plan-control-enabled {
+  color: #16a34a;
+}
+
+.plan-control-pending {
+  color: #f97316;
+}
+
+.plan-control-img {
+  width: 18px;
+  height: 18px;
+  display: block;
+}
+
+.plan-generate {
+  margin-top: 12px;
+}
+
+.btn-generate {
+  width: 100%;
+  border: none;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.btn-generate img {
+  width: 100%;
+  display: block;
 }
 </style>