busroute/src/pages/views/home/components/CehicleOperation.vue

<template>
  <Layout>
    <template #left>
      <div class="left">
        <Box
          :width="560"
          :height="1224"
          :name="'线路基本情况'"
          class="left-left"
        >
          <div class="linebase">
            <div class="car">
              <div class="top">
                <Icon
                  name="1-1"
                  :size="80"
                  style="margin-right: 20px;"
                />
                <div class="name bold">
                  1
                </div>
                <div class="road">
                  路
                </div>
              </div>
              <div class="current">
                当前线路
              </div>
            </div>
            <div class="info">
              <div
                v-for="item in lineInfo"
                :key="item.label"
              >
                <div class="label">
                  {{ item.label }}
                </div>
                <div class="val">
                  {{ item.value }}
                </div>
              </div>
            </div>
          </div>
          <div class="header">
            <div>
              <Icon
                name="1-2"
                :size="30"
              />
              起讫点
            </div>
            <div>
              <Icon
                name="1-3"
                :size="30"
              />
              运营时间
            </div>
          </div>
          <div class="detail">
            <div>
              <div class="row">
                <div class="type orange">
                  上行
                </div>
                <div class="name">
                  始发点名称 → 终点站名称
                </div>
                <div class="value">
                  06:00~22:00
                </div>
              </div>
              <div class="row">
                <div class="type">
                  下行
                </div>
                <div class="name">
                  始发点名称 → 终点站名称
                </div>
                <div class="value">
                  06:00~22:00
                </div>
              </div>
            </div>
            <div>
              <div class="row">
                <div class="type orange">
                  上
                </div>
                <div class="name">
                  线路上行里程
                </div>
                <div class="value">
                  20km
                </div>
              </div>
              <div class="row">
                <div class="type">
                  下
                </div>
                <div class="name">
                  线路下行里程
                </div>
                <div class="value">
                  20km
                </div>
              </div>
              <div class="row">
                <Icon
                  name="1-4"
                  :size="38"
                />
                <div class="name">
                  票价
                </div>
                <div class="value">
                  2元
                </div>
              </div>
            </div>
            <div>
              <div class="title">
                <div class="flex">
                  <Icon
                    name="1-5"
                    :size="30"
                  />
                  <div class="name">
                    驾驶员数量
                  </div>
                </div>
                <div class="value">
                  <div
                    class="bold"
                    style="font-size: 40px"
                  >
                    10
                  </div>
                  <div class="">
                    人
                  </div>
                </div>
              </div>
              <div class="starlist">
                <div
                  v-for="item in starlist"
                  :key="item.label"
                  class="star"
                >
                  <div>{{ item.label }}</div>
                  <div class="flex">
                    <span class="num bold">{{ item.value }}</span>人
                  </div>
                </div>
              </div>
            </div>
            <div style="border: 0;">
              <div class="title">
                <div class="flex">
                  <Icon
                    name="1-1"
                    :size="30"
                  />
                  <div class="name">
                    车辆数占比
                  </div>
                </div>
                <div class="value">
                  共
                  <div
                    class="bold"
                    style="font-size: 40px"
                  >
                    10
                  </div>
                  辆
                </div>
              </div>
              <Echart
                style="width: 560px;height:318px"
                :option="leftContent.leftOp"
              />
            </div>
          </div>
        </Box>
        <Box
          :width="560"
          :height="1224"
          :name="'线路发班情况'"
          class="left-right"
        >
          <div class="filter">
            <div class="name bold">
              筛选
            </div>
            <div class="odds">
              <div
                v-for="item in odds"
                :key="item.label"
                class="odd"
              >
                {{ item.label }} {{ item.value }}
              </div>
            </div>
          </div>
          <div class="frequency">
            <div class="title bold">
              上行
            </div>
            <div class="content">
              <div
                v-for="item in status"
                :key="item"
                class="bus"
              >
                <img
                  src="../../../../assets/img/1-1.png"
                  alt="bus"
                >
                <div
                  :class="item"
                  class="status"
                >
                  执行中
                </div>
                <div class="info">
                  <div>
                    <div class="bold">
                      1路
                    </div>
                    <div class="busNum">
                      川T 12345
                    </div>
                  </div>
                  <div>司机：小A </div>
                  <div>电量： </div>
                </div>
                <div class="table">
                  <div>
                    <div class="label">
                      调度时间
                    </div>
                    <div class="value">
                      06:30:00
                    </div>
                  </div>
                  <div>
                    <div class="label">
                      实际发车时间
                    </div>
                    <div class="value">
                      06:30:00
                    </div>
                  </div>
                  <div>
                    <div class="label">
                      发车间隔
                    </div>
                    <div class="value">
                      1 分钟
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="page">
              <n-pagination :item-count="30">
                <template #prefix="{ itemCount }">
                  总共 {{ itemCount }} 个项目
                </template>
              </n-pagination>
            </div>
          </div>
          <div class="frequency">
            <div class="title bold">
              下行
            </div>
            <div class="content">
              <div
                v-for="item in 3"
                :key="item"
                class="bus"
              >
                <img
                  src="../../../../assets/img/1-1.png"
                  alt="bus"
                >
                <div
                  :class="item"
                  class="status"
                >
                  执行中
                </div>
                <div class="info">
                  <div>
                    <div class="bold">
                      1路
                    </div>
                    <div class="busNum">
                      川T 12345
                    </div>
                  </div>
                  <div>司机：小A </div>
                  <div>电量： </div>
                </div>
                <div class="table">
                  <div>
                    <div class="label">
                      调度时间
                    </div>
                    <div class="value">
                      06:30:00
                    </div>
                  </div>
                  <div>
                    <div class="label">
                      实际发车时间
                    </div>
                    <div class="value">
                      06:30:00
                    </div>
                  </div>
                  <div>
                    <div class="label">
                      发车间隔
                    </div>
                    <div class="value">
                      1 分钟
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="page">
              <n-pagination :item-count="30">
                <template #prefix="{ itemCount }">
                  总共 {{ itemCount }} 个项目
                </template>
              </n-pagination>
            </div>
          </div>
        </Box>
      </div>
    </template>
    <template #center>
      <div>2222</div>
    </template>
    <template #right>
      <div class="right">
        <div class="right-top">
          <Box
            v-for="(item, index) in rightContent?.top"
            :key="index"
            :width="438"
            :height="570"
            :name="item.name"
          >
            <Echart :option="item.option" />
          </Box>
        </div>
        <div class="right-bottom">
          <Box
            :width="663"
            :height="570"
            :name="'车辆监控'"
          >
            <div class="carmonitor">
              <div class="control">
                <div
                  v-for="item in controlList"
                  :key="item.label"
                  class="item"
                >
                  <div class="label">
                    {{ item.label }}
                  </div>
                  <n-select
                    :value="1"
                    :options="item.options"
                  />
                </div>
              </div>
              <n-table
                striped
                size="large"
                :bordered="false"
                single-column
                :bottom-bordered="false"
                class="table"
              >
                <thead>
                  <tr>
                    <th> 状态 </th>
                    <th> 车牌号 </th>
                    <th> 驾驶员 </th>
                    <th> 拥挤度 </th>
                    <th> 情景 </th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="item in 10"
                    :key="item"
                    :class="{ no: item === 1 }"
                  >
                    <td>
                      <div class="index" /> 运营中
                    </td>
                    <td> 川T 12345 </td>
                    <td> 小A </td>
                    <td> 舒适 </td>
                    <td>{{ item === 1 ? '维保' : '行驶中' }} </td>
                  </tr>
                </tbody>
              </n-table>
            </div>
          </Box>
          <Box
            :width="663"
            :height="570"
            :name="'车辆状态'"
          >
            <div class="carstatus">
              <div class="up">
                <div class="title">
                  上行
                </div>
                <div class="content">
                  <div
                    v-for="item in carstatusList"
                    :key="item.label"
                  >
                    <div class="label">
                      {{ item.label }}
                    </div>
                    <div class="value">
                      {{ item.value }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="down">
                <div class="title">
                  下行
                </div>
                <div class="content">
                  <div
                    v-for="item in carstatusList"
                    :key="item.label"
                  >
                    <div class="label">
                      {{ item.label }}
                    </div>
                    <div class="value">
                      {{ item.value }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="line" />
            </div>
          </Box>
        </div>
      </div>
    </template>
  </Layout>
</template>

<script setup lang='ts'>
import Layout from '@/components/layout.vue'
import Box from '@/components/box.vue'
import Echart from '@/components/chart.vue'
import { ref } from 'vue'
import { graphic } from 'echarts'
/* 线路类型：干线公交 车辆总数： 运 营 中：9 辆 非 运 营：1 辆 */
const lineInfo = ref([
  { label: '线路类型：', value: '干线公交' },
  { label: '车辆总数：', value: '10 辆' },
  { label: '运 营 中：', value: '9 辆' },
  { label: '非 运 营：', value: '1 辆' }
])
const starlist = ref([
  { label: '五星', value: '1' },
  { label: '四星', value: '2' },
  { label: '三星', value: '3' },
  { label: '二星', value: '4' },
  { label: '一星', value: '5' }
])
const odds = ref([
  { label: '全部', value: '10' },
  { label: '已完成', value: '4' },
  { label: '执行中', value: '1' },
  { label: '已处理', value: '1' },
  { label: '已下发', value: '1' },
  { label: '待发', value: '1' },
  { label: '调停', value: '1' },
  { label: '非运营', value: '1' }
])

const status = [ 'success', 'warning', 'error' ]

const controlList = [
  {
    label: '状态：',
    options: [
      { label: '全部', value: 1 },
      { label: '运营中', value: 2 },
      { label: '非运营', value: 3 }
    ]
  },
  {
    label: '电量：',
    options: [
      { label: '0%-30%', value: 1 },
      { label: '31%-60%', value: 2 },
      { label: '61%-100%', value: 3 }
    ]
  },
  {
    label: '情景：',
    options: [
      { label: '全部', value: 1 },
      { label: '维保', value: 2 },
      { label: '充电', value: 3 },
      { label: '停驶', value: 4 },
      { label: '行驶中', value: 5 }
    ]
  }

]

const carstatusList = [
  { label: '平均速度', value: '15.16' },
  { label: '最大车速', value: '17.82' },
  { label: '最小车速', value: '10.93' },
  { label: '平均间距', value: '14.03' },
  { label: '最大间距', value: '15' },
  { label: '最小间距', value: '12' },
  { label: '高峰平均时间', value: '69分钟' },
  { label: '平峰平均时间', value: '72分钟' },
  { label: '单程平均时间', value: '71分钟' }
]

const leftContent = ref({
  leftOp: {
    grid: {
      containLabel: true
    },
    // 图表图例
    legend: {
      show: true,
      type: 'scroll',
      orient: 'horizontal', // 图例排列方向
      icon: 'circle', // 图例样式为圆形
      itemWidth: 10, // 图例图形的宽度
      itemHeight: 16, // 图例图形的高度
      itemGap: 10, // 图例项之间的间隔
      left: 'center', // 图例距离容器右侧的距离
      bottom: 0, // 图例垂直居中
      textStyle: {
        color: 'white', // 图例文字颜色
        fontSize: 16
      }
    },

    // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
    series: [
      {
        type: 'pie', // 图表类型为饼图
        radius: '60%', // 控制内外圆环的半径，30%代表内圆，60%代表外圆
        avoidLabelOverlap: true, // 是否启用防止标签重叠策略
        showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
        label: {
          show: true,
          fontSize: 16,
          formatter: '{b}： {c}条',
          color: 'white'
        },
        data: [
          { key: 2, name: '2023', value: 130 },
          { key: 2, name: '2022', value: 50 },
          { key: 2, name: '2021', value: 50 },
          { key: 2, name: '2020', value: 50 },
          { key: 2, name: '2019', value: 50 }
        ]
      }
    ]
  }
})

const rightContent = ref({
  top: [
    {
      name: '乘客类型',
      option: {
        title: {
          text: '总', // 图标内容文本
          subtext: '196000',
          left: 'center', // 图标内容水平居中
          top: 'center', // 图标内容垂直居中
          // 文本样式
          textStyle: {
            color: '#fff', // 图标内容文字颜色
            fontSize: '16px', // 图标内容文字大小
            fontWeight: 'normal'
          },
          subtextStyle: {
            color: '#fff', // 图标内容文字颜色
            fontSize: '20px', // 图标内容文字大小
            fontWeight: 'normal'
          }
        },
        grid: {
          containLabel: true
        },
        // 图表图例
        legend: {
          show: true,
          type: 'scroll',
          orient: 'horizontal', // 图例排列方向
          icon: 'circle', // 图例样式为圆形
          itemWidth: 10, // 图例图形的宽度
          itemHeight: 16, // 图例图形的高度
          itemGap: 40, // 图例项之间的间隔
          left: 'center', // 图例距离容器右侧的距离
          bottom: 0, // 图例垂直居中
          textStyle: {
            color: 'white', // 图例文字颜色
            fontSize: 20
          }
        },

        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
        series: [
          {
            type: 'pie', // 图表类型为饼图
            radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
            label: {
              show: true,
              formatter: '{d}%',
              color: 'white'
            },
            data: [
              { key: 2, name: '老年卡', value: 180 },
              { key: 2, name: '电子钱包', value: 50 },
              { key: 2, name: '现金', value: 30 },
              { key: 2, name: '学生卡', value: 20 },
              { key: 2, name: '成人次卡', value: 10 },
              { key: 2, name: '其他', value: 10 },
              { key: 2, name: '免费人次', value: 10 }
            ]
          }
        ]
      }
    },
    {
      name: '客流情况',
      option: {
        grid: {
          containLabel: true,
          right: 30,
          left: 50
        },
        legend: {
          show: true,
          left: 'center',
          top: '10',
          icon: 'stack',
          itemWidth: 15,
          itemHeight: 10,
          textStyle: {
            color: '#646464',
            fontSize: 18
          }
        },
        xAxis: [ {
          type: 'category',
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#fff',
            fontSize: 18
            // formatter: (value: number) => format( 1'时')
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          data: [ '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时' ]
        } ],
        yAxis: [ {
          name: '客流量/人次',
          nameLocation: 'center',
          nameGap: 50,
          nameTextStyle: {
            color: '#fff',
            fontSize: 18
          },
          padding: 5,
          // max: 1000,
          splitLine: {
            show: true,
            lineStyle: {
              color: '#A1A7B3'
              // type: 'dashed'
            }
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            margin: 10,
            textStyle: {
              color: '#fff'

            }
          },
          axisTick: {
            show: false
          }
        }
        ],
        series: [ {
          name: '客流量',
          type: 'line',
          smooth: true,
          symbolSize: 0,
          itemStyle: {
            normal: {
              // color: '#FFD35D',
              lineStyle: {
                color: new graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#FFD35D66'
                  },
                  {
                    offset: 0.5,
                    color: '#7ec2f366'
                  },
                  {
                    offset: 1,
                    color: '#1890ff'
                  }
                ], false),
                width: 1
              }
            }
          },
          areaStyle: {
            normal: {
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#FFD35D66'
                },
                {
                  offset: 0.5,
                  color: '#7ec2f366'
                },
                {
                  offset: 1,
                  color: '#1890ff'
                }
              ], false)
            }
          },
          data: [ 120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330 ]
        } ],
        dataZoom: {}
      }
    },
    {
      name: '里程情况',
      option: {
        grid: {
          containLabel: true,
          right: 30,
          left: 50
        },
        legend: {
          show: true,
          left: 'center',
          top: '10',
          icon: 'stack',
          itemWidth: 15,
          itemHeight: 10,
          textStyle: {
            color: '#646464',
            fontSize: 18
          }
        },
        xAxis: [ {
          type: 'category',
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#fff',
            fontSize: 18
            // formatter: (value: number) => format( 1'时')
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          data: [ '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时' ]
        } ],
        yAxis: [ {
          name: '里程/km',
          nameLocation: 'center',
          nameGap: 50,
          nameTextStyle: {
            color: '#fff',
            fontSize: 18
          },
          padding: 5,
          // max: 1000,
          splitLine: {
            show: true,
            lineStyle: {
              color: '#A1A7B3'
              // type: 'dashed'
            }
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            margin: 10,
            textStyle: {
              color: '#fff'

            }
          },
          axisTick: {
            show: false
          }
        }
        ],
        series: [ {
          name: '里程',
          type: 'line',
          smooth: true,
          symbolSize: 0,
          itemStyle: {
            normal: {
              // color: '#4293FD',
              lineStyle: {
                // color: '#FFD35D',
                width: 1,
                color: new graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#6A5BF066'
                  },
                  {
                    offset: 0.5,
                    color: '#7ec2f366'
                  },
                  {
                    offset: 1,
                    color: '#1890ff'
                  }
                ], false)
              }
            }
          },
          areaStyle: {
            normal: {
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#6A5BF066'
                },
                {
                  offset: 0.5,
                  color: '#7ec2f366'
                },
                {
                  offset: 1,
                  color: '#1890ff'
                }
              ], false)
            }
          },
          data: [ 120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330 ]
        } ],
        dataZoom: {}
      }
    }
  ],
  bottom: {

  }
})
</script>

<style lang="scss" scoped>
.left {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #fff;
  font-size: 18px;

  &-left {
    .linebase {
      height: 216px;
      padding: 20px 60px 35px 60px;
      display: flex;
      align-items: center;
      gap: 70px;

      .car {
        .top {
          display: flex;
          position: relative;
          font-size: 18px;

          .name {
            width: 63px;
            height: 74px;
            line-height: 74px;
            text-align: center;
            border: 2px solid #2185E8;
            font-size: 50px;
            border-radius: 10px;
            background: rgba(33, 133, 232, 0.298);
          }

          .road {
            position: absolute;
            bottom: 0;
            right: -25px;
          }
        }

        .current {
          text-align: center;
          text-shadow: 1px 1px 10px rgba(0, 255, 255, 0.698);
          margin-top: 10px;
        }
      }

      .info {
        width: 100%;

        >div {
          display: flex;
          gap: 10px;
          margin: 15.2px 0;

          .label {
            color: #80FFFF
          }
        }
      }
    }

    .header {
      height: 50px;
      background: rgba(33, 133, 232, 0.298);
      display: flex;

      >div {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
      }
    }

    .detail {
      padding: 0 20px 0 30px;

      >div {
        border-bottom: 1px solid rgba(128, 255, 255, 0.298);
        padding-bottom: 30px;
        padding-top: 16px;

        .value {
          color: #80FFFF;
          width: 200px;
          text-align: center;
        }

        .row {
          height: 50px;
          display: flex;
          align-items: center;

          .type {
            border: 1px solid #80FFFF;
            background: rgba(128, 255, 255, 0.098);
            border-radius: 5px;
            color: #80FFFF;
            padding: 5px 9px;

            &.orange {
              border: 1px solid #FAAD0E;
              background: rgba(250, 173, 14, 0.098);
              color: #FAAD0E;
            }
          }

          .name {
            flex: 1;
            margin-left: 10px;

          }

        }

        .title {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .name {
            font-size: 24px;
            margin-left: 10px;
          }

          .value {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            gap: 10px;
          }
        }

        .starlist {
          display: flex;
          justify-content: space-around;
          margin-top: 17px;

          .star {
            color: #80FFFF;

            .num {
              font-size: 24px;
            }
          }
        }
      }

    }
  }

  &-right {
    flex: 1;
    font-size: 18px;

    .filter {
      display: flex;
      align-items: center;
      padding: 20px 40px;

      .name {
        width: 120px;
      }

      .odds {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;

        .odd {
          border-radius: 5px;
          border: 1px solid #2185E8;
          background: rgba(0, 191, 191, 0);
          padding: 2px 8px;
          min-width: 90px;
          text-align: center;

          &.checkd {
            background: #2185E8;
          }
        }
      }
    }

    .frequency {
      margin-top: 15px;

      .title {
        background: rgba(24, 145, 255, 0.498);
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        text-align: center;
        text-shadow: 1px 1px 10px rgba(0, 255, 255, 0.698);
      }

      .content {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 13px;

        .bus {
          width: 236px;
          height: 401px;
          flex: 1;
          border: 1px solid #1891FF;
          background: rgba(27, 175, 255, 0.098);
          overflow: hidden;
          position: relative;

          .status {
            position: absolute;
            height: 31px;
            line-height: 31px;
            text-align: right;
            width: 100%;
            top: 119px;
            padding-right: 10px;
            background: linear-gradient(90deg, rgba(0, 0, 0, 0) 1%, #333333 100%);

            &.success {
              background: linear-gradient(90deg, rgba(0, 238, 200, 0) 4%, #00EEC8 100%);
            }

            &.warning {
              background: linear-gradient(90deg, rgba(250, 173, 14, 0) 1%, #FAAD0E 100%);
            }

            &.error {
              background: linear-gradient(90deg, rgba(231, 61, 65, 0) 1%, #E73D41 100%);
            }
          }

          img {
            height: 150px;
            width: 100%;
          }

          .info {
            padding: 10px;

            >div {
              display: flex;
              height: 35px;
              align-items: center;

              .bold {
                font-size: 24px;
              }

              .busNum {
                border: 2px solid #FFFFFF;
                border-radius: 3px;
                background: #1891FF;
                padding: 2px 5px;
                margin-left: 10px;
              }
            }
          }

          .table {
            >div {
              display: flex;
              height: 40px;
              align-items: center;

              .label {
                width: 135px;
                height: 40px;
                line-height: 40px;
                background: rgba(33, 133, 232, 0.298);
                color: #80FFFF;
                text-align: right;
                padding-right: 10px;
              }

              .value {
                text-align: center;
                flex: 1;
              }
            }
          }
        }
      }

      .page {
        display: flex;
        justify-content: flex-end;
        margin-top: 25px;
      }
    }

  }

  .flex {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  .bold {
    color: #fff;
    font-weight: bold;
    font-family: Impact Normal;
  }
}

.right {
  &-top {
    color: #fff;
    display: flex;
    gap: 10px;
    justify-content: space-between;
  }

  &-bottom {
    color: #fff;
    gap: 10px;
    display: flex;
    justify-content: space-between;

    .carmonitor {
      padding: 10px;

      .control {
        display: flex;
        font-size: 20px;
        gap: 20px;

        .item {
          display: flex;
          flex: 1;
          align-items: center;
          gap: 20px;

          .label {
            min-width: 60px;

          }
        }
      }

      .table {
        margin-top: 20px;
        text-align: center;

        th {
          border: 0;
          background: rgba(33, 133, 232, 0.6);
          text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6471);
          font-weight: bold;
        }

        tr {
          td {
            color: #fff;
          }

          .index {
            width: 14px;
            height: 14px;
            line-height: 14px;
            background: #8DFF53;
            border-radius: 50%;
            display: inline-block;
            color: #333333;
          }

          &.no {
            td {
              background: linear-gradient(180deg, #00A8F0 0%, #02B3B3 100%);

            }

            .index {
              background: #D7D7D7;
            }
          }
        }

      }
    }

    .carstatus {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      .line{
        position: absolute;
        width: 1px;
        height: 397px;
        background-color: rgba(128, 255, 255, 0.298);
        left: 50%;
        top: 120px;
      }
      >div {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        >div{
          width: 100%;
        }
        .title {
          width: 136px;
          height: 59px;
          line-height: 59px;
          border-radius: 5px;
          text-align: center;
          font-size: 24px;
          text-shadow: 1px 1px 5px rgba(0, 255, 255, 0.6471);
          margin: 30px 0 ;
        }
      }

      .up .title {
        background: rgba(27, 175, 255, 0.298);
        border: 1px solid #81D3F8;
        box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.349), inset 0px 0px 30px 1px rgba(24, 145, 255, 0.9961);
      }

      .down .title {
        background: rgba(231, 61, 65, 0.298);
        border: 1px solid #F9A15A;
        box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.349), inset 0px 0px 30px 1px rgba(231, 61, 65, 0.9882);
      }
      .content{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        >div{
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 20px;
          >div{
            flex: 1;
          }
          .label{
            font-size: 18px;
            color: #81D3F8;
            text-align: right;
            text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6471);
          }
          .value{
            font-size: 24px;
            text-shadow: 1px 1px 5px rgba(0, 255, 255, 0.6471);
          }
        }
      }
    }
  }

}
</style>