<template>
  <div class="bg">
    <div class="top-bg" @click="backMainPage">
      <div class="device-name">豫中云 - YZ1F-0000001</div>
    </div>
    <div class="left">
      <div class="left_top">
        <img src="../../assets/img/img.jpg" style="width: 100%;height: 100%;">  
      </div>
      <div class="left_bottom">
        <span style="margin-left: 45px;color: #C8DEFE;font-size: 18px;font-weight: normal;font-family: Alibaba-PuHuiTi-R;">
          大车机构
        </span>
        <div style="display: flex;padding:30px 30px;margin-top: 30px;align-items: center;border-bottom: 1px solid #306AF7;">
          <div style="display: flex;flex-direction: column;">
            <span style="font-family: Alibaba-PuHuiTi-R;font-weight: normal;font-size: 16px;color: #ABC0E0;">
              大车行程
            </span>
            <div style="margin-top: 5px;">
              <span style="font-family: Alibaba-PuHuiTi-R;font-size: 36px;color: #4F80F8;">
                00.00
              </span>
              <span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
                m
              </span>
            </div>
            <div style="display: flex;margin-top: 50px;">
              <div style="width: 70px;height: 28px;background-color: #294587;display: flex;align-items: center;">
                <div style="width: 5px;height: 5px;background-color: #4F80F8;margin: 0px 5px;"></div>
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #ABC0E0;">
                  方向
                </span>
              </div>
              <div style="width: 57px;height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;">        
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
                  左行
                </span>
              </div>
            </div>
            <div style="display: flex;margin-top: 10px;">
              <div style="width: 70px;height: 28px;background-color: #294587;display: flex;align-items: center;">
                <div style="width: 5px;height: 5px;background-color: #4F80F8;margin: 0px 5px;"></div>
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #ABC0E0;">
                  挡位
                </span>
              </div>
              <div style="width: 57px;height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;">        
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
                  一档
                </span>
              </div>
            </div>
            <div style="display: flex;margin-top: 10px;">
              <div style="width: 70px;height: 28px;background-color: #294587;display: flex;align-items: center;">
                <div style="width: 5px;height: 5px;background-color: #4F80F8;margin: 0px 5px;"></div>
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #ABC0E0;">
                  制动器
                </span>
              </div>
              <div style="width: 57px;height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;">        
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
                  闭合
                </span>
              </div>
            </div>
          </div>
          <div style="width: 1px;height: 100%;background-color: #306AF7;margin: 0px 42px;" />
          <div style="height: 100%;display: flex;flex-direction: column;justify-content: flex-end;">
            <span style="font-family: Alibaba-PuHuiTi-R;font-weight: normal;font-size: 16px;color: #ABC0E0;">
              频率
            </span>
            <div style="margin-top: 5px;">
              <span style="font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
                00.00
              </span>
              <span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 14px;color: #4F80F8;">
                Hz
              </span>
            </div>
            <span style="font-family: Alibaba-PuHuiTi-R;font-weight: normal;font-size: 16px;color: #ABC0E0;margin-top: 15px;">
              电流
            </span>
            <div style="margin-top: 5px;">
              <span style="font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
                00.00
              </span>
              <span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 14px;color: #4F80F8;">
                A
              </span>
            </div>
          </div>
        </div>
        <div class="left_bottom_grid">
          <div v-for="item in left_bottom_list" :key="item.id" class="left_bottom_grid_item">
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="middle">
      <div class="middle_top"></div>
      <div class="middle_bottom">
        <div style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
          <div style="padding-left: 100px;padding-top: 4px;color: white;font-size: 18px;font-family: Alibaba-PuHuiTi-B;font-style: normal;text-transform: none;">
            起升机构
          </div>
          <div style="display: flex;margin-right: 35px;margin-top: -10px;">
            <div class="middle_bottom_right_top">
              <span>总接触器</span>
            </div>
            <div class="middle_bottom_right_top" style="margin-left: 15px">
              <span>安全间距</span>
            </div>
          </div>
        </div>
        <div style="display: flex;align-items: center;justify-content: space-between;padding: 50px 30px 30px 30px;">
          <div style="display: flex;align-items: center">
            <img style="width: 41px;height: 234px;" src="../../assets/img/screen_middle_bottom_left.png">
            <div style="display: flex;flex-direction: column;margin-left: 10px;">
            <span style="font-family: Alibaba-PuHuiTi-R;font-weight: normal;font-size: 16px;color: #ABC0E0;">
              起升高度
            </span>
            <div style="margin-top: 5px;">
              <span style="font-family: Alibaba-PuHuiTi-R;font-size: 36px;color: #4F80F8;">
                00.00
              </span>
              <span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
                m
              </span>
            </div>
            <div style="display: flex;margin-top: 20px;">
              <div style="width: 70px;height: 28px;background-color: #294587;display: flex;align-items: center;">
                <div style="width: 5px;height: 5px;background-color: #4F80F8;margin: 0px 5px;"></div>
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #ABC0E0;">
                  方向
                </span>
              </div>
              <div style="width: 57px;height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;">        
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
                  左行
                </span>
              </div>
            </div>
            <div style="display: flex;margin-top: 10px;">
              <div style="width: 70px;height: 28px;background-color: #294587;display: flex;align-items: center;">
                <div style="width: 5px;height: 5px;background-color: #4F80F8;margin: 0px 5px;"></div>
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #ABC0E0;">
                  挡位
                </span>
              </div>
              <div style="width: 57px;height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;">        
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
                  一档
                </span>
              </div>
            </div>
            <div style="display: flex;margin-top: 10px;">
              <div style="width: 70px;height: 28px;background-color: #294587;display: flex;align-items: center;">
                <div style="width: 5px;height: 5px;background-color: #4F80F8;margin: 0px 5px;"></div>
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #ABC0E0;">
                  制动器
                </span>
              </div>
              <div style="width: 57px;height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;">        
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
                  闭合
                </span>
              </div>
            </div>
          </div>
          </div>
          <div class="screen_middle_bottom_middle">
            <div style="color: #ABC0E0;font-family: Alibaba-PuHuiTi-R;font-size: 16px;">
              载荷
            </div>
            <div style="margin-top: 5px;">
              <span style="font-family: Alibaba-PuHuiTi-R;font-size: 36px;color: #4F80F8;">
                00.00
              </span>
              <span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
                t
              </span>
            </div>
          </div>
          <div style="margin-right: 20px;">
            <div style="display: flex">
              <div style="display: flex;">
                <div style="width: 47px;height: 28px;background-color: #294587;display: flex;align-items: center;justify-content: center;">
                  <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #ABC0E0;">
                    频率
                  </span>
                </div>
                <div style="width: 126px;height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;">        
                  <div>
                    <span style="font-family: Alibaba-PuHuiTi-B;font-size: 24px;color: #4F80F8;margin-left: 9px;">
                      00.00
                    </span>
                    <span style="font-family: Alibaba-PuHuiTi-B;font-size: 14px;color: #4F80F8;">
                      Hz
                    </span>
                  </div>
                </div>
              </div>
              <div style="display: flex;margin-left: 23px;">
                <div style="width: 47px;height: 28px;background-color: #294587;display: flex;align-items: center;justify-content: center;">
                  <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #ABC0E0;">
                    电流
                  </span>
                </div>
                <div style="width: 126px;height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;">        
                  <div>
                    <span style="font-family: Alibaba-PuHuiTi-B;font-size: 24px;color: #4F80F8;margin-left: 9px;">
                      00.00
                    </span>
                    <span style="font-family: Alibaba-PuHuiTi-B;font-size: 14px;color: #4F80F8;">
                      A
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="middle_bottom_right_grid">
              <div v-for="item in middle_bottom_right_grid_list" :key="item.id" class="middle_bottom_right_grid_item">
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right_top">
        <div style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;width: 65%;padding: 10px 0px;border-right:1px solid #306AF7;">
          <div>
              <div style="color: white;font-size: 16px;font-family: Alibaba-PuHuiTi-R;">
                本次工作
              </div>
              <span style="margin-top: 5px;color: #608BF3;font-size: 18px;font-family: Alibaba-PuHuiTi-R;">
                0天 0时 0分 0秒
              </span>
          </div>
          <div>
              <div style="color: white;font-size: 16px;font-family: Alibaba-PuHuiTi-R;">
                累计工作
              </div>
              <span style="margin-top: 5px;color: #608BF3;font-size: 18px;font-family: Alibaba-PuHuiTi-R;">
                0天 0时 0分 0秒
              </span>
          </div>
        </div>
        <div style="height: 100%;width: 35%;display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end;padding: 10px 0px;">
          <div>
            <div style="color: white;font-size: 16px;font-family: Alibaba-PuHuiTi-R;">
              工作循环
            </div>
            <span style="margin-top: 5px;color: #608BF3;font-size: 18px;font-family: Alibaba-PuHuiTi-R;float: right">
              0次
            </span>
          </div>
          <div>
            <div style="color: white;font-size: 16px;font-family: Alibaba-PuHuiTi-R;">
              扫描周期
            </div>
            <span style="margin-top: 5px;color: #608BF3;font-size: 18px;font-family: Alibaba-PuHuiTi-R;float: right">
              100ms
            </span>
          </div>
        </div>
        </div>
      <div class="right_alert">
        <el-carousel height="110px">
          <el-carousel-item v-for="item in right_alert" :key="item.id">
            <div class="right_alert_item">
              <div style="height: 65%;display: flex;flex-direction: column;justify-content: space-between;">
                <div style="font-size: 24px;color: white;font-family: YouSheBiaoTiHei;">
                  {{ item.type }}
                </div>
                <div>
                  <div style="font-size: 15px;color: white;font-family: Alibaba-PuHuiTi-R;font-style: normal;text-transform: none;">
                    {{ item.time }}
                  </div>
                  <div style="font-size: 16px;color: white;font-family: Alibaba-PuHuiTi-R;">
                    {{ item.name }}
                  </div>  
                </div>
              </div>
              <div>
                <img style="height: 66px;width: 66px;" src="../../assets/img/screen_alert.png">
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="right_small">
        <span style="margin-right: 45px;color: #C8DEFE;font-size: 18px;font-weight: normal;font-family: Alibaba-PuHuiTi-R;">
          小车机构
        </span>
        <div style="display: flex;padding:30px 30px;margin-top: 30px;align-items: center;border-bottom: 1px solid #306AF7;">
          <div style="height: 100%;display: flex;flex-direction: column;justify-content: flex-end;">
            <span style="font-family: Alibaba-PuHuiTi-R;font-weight: normal;font-size: 16px;color: #ABC0E0;">
              频率
            </span>
            <div style="margin-top: 5px;">
              <span style="font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
                00.00
              </span>
              <span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 14px;color: #4F80F8;">
                Hz
              </span>
            </div>
            <span style="font-family: Alibaba-PuHuiTi-R;font-weight: normal;font-size: 16px;color: #ABC0E0;margin-top: 15px;">
              电流
            </span>
            <div style="margin-top: 5px;">
              <span style="font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
                00.00
              </span>
              <span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 14px;color: #4F80F8;">
                A
              </span>
            </div>
          </div>
          <div style="width: 1px;height: 100%;background-color: #306AF7;margin: 0px 42px;" />
          <div style="display: flex;flex-direction: column;">
            <span style="font-family: Alibaba-PuHuiTi-R;font-weight: normal;font-size: 16px;color: #ABC0E0;">
              大车行程
            </span>
            <div style="margin-top: 5px;">
              <span style="font-family: Alibaba-PuHuiTi-R;font-size: 36px;color: #4F80F8;">
                00.00
              </span>
              <span style="margin-left: -5px;font-family: Alibaba-PuHuiTi-R;font-size: 24px;color: #4F80F8;">
                m
              </span>
            </div>
            <div style="display: flex;margin-top: 50px;">
              <div style="width: 70px;height: 28px;background-color: #294587;display: flex;align-items: center;">
                <div style="width: 5px;height: 5px;background-color: #4F80F8;margin: 0px 5px;"></div>
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #ABC0E0;">
                  方向
                </span>
              </div>
              <div style="width: 57px;height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;">        
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
                  左行
                </span>
              </div>
            </div>
            <div style="display: flex;margin-top: 10px;">
              <div style="width: 70px;height: 28px;background-color: #294587;display: flex;align-items: center;">
                <div style="width: 5px;height: 5px;background-color: #4F80F8;margin: 0px 5px;"></div>
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #ABC0E0;">
                  挡位
                </span>
              </div>
              <div style="width: 57px;height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;">        
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
                  一档
                </span>
              </div>
            </div>
            <div style="display: flex;margin-top: 10px;">
              <div style="width: 70px;height: 28px;background-color: #294587;display: flex;align-items: center;">
                <div style="width: 5px;height: 5px;background-color: #4F80F8;margin: 0px 5px;"></div>
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #ABC0E0;">
                  制动器
                </span>
              </div>
              <div style="width: 57px;height: 28px;background-color: rgba(41, 69, 135, 0.3);display: flex;align-items: center;justify-content: center;">        
                <span style="font-family: Alibaba-PuHuiTi-R;font-size: 16px;color: #FFFFFF;">
                  闭合
                </span>
              </div>
            </div>
          </div>

        </div>
        <div style="width: 100%;display: flex;justify-content: center;">
          <div class="right_small_grid">
            <div v-for="item in right_samll_list" :key="item.id" class="right_small_grid_item">
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="right_bottom">
        <div class="right_bottom_grid">
          <div v-for="item in right_bottom_list" :key="item.id" class="right_bottom_grid_item">
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import router from '@/router';
  const left_bottom_list = [
    {
      'id':0,
      'name':'左行限位'
    },
    {
      'id':1,
      'name':'左防撞减速限位'
    },
    {
      'id':2,
      'name':'右行限位'
    },
    {
      'id':3,
      'name':'右防撞减速限位'
    },
    {
      'id':4,
      'name':'有梯侧翻板夹轨器限位'
    },
    {
      'id':5,
      'name':'有梯侧定位器'
    },
    {
      'id':6,
      'name':'无梯侧翻板夹轨器限位'
    },
    {
      'id':7,
      'name':'无梯侧定位器'
    },
    {
      'id':8,
      'name':'有梯侧油泵夹轮限位'
    },
    {
      'id':9,
      'name':'无梯侧油泵夹轮限位'
    },
  ]
  const right_samll_list = [
    {
      'id':0,
      'name':'前行限位'
    },
    {
      'id':1,
      'name':'前极限限位'
    },
    {
      'id':2,
      'name':'热继保护'
    },
    {
      'id':3,
      'name':'后行限位'
    },
    {
      'id':4,
      'name':'后极限限位'
    },
    {
      'id':5,
      'name':'小车锚定'
    }
  ]
  const right_bottom_list = [
    {
      'id':0,
      'name':'前行限位'
    },
    {
      'id':1,
      'name':'前极限限位'
    },
    {
      'id':2,
      'name':'热继保护'
    },
    {
      'id':3,
      'name':'后行限位'
    },
    {
      'id':4,
      'name':'后极限限位'
    },
    {
      'id':5,
      'name':'小车锚定'
    }
  ]
  const right_alert = [
  {
      'id':0,
      'name':'设备超载',
      'type':'报警',
      'time':'2024-01-01 14:33'
    },
    {
      'id':1,
      'name':'设备超速',
      'type':'报警',
      'time':'2024-01-01 14:33'
    },
    {
      'id':2,
      'name':'设备故障',
      'type':'报警',
      'time':'2024-01-01 14:33'
    },
    {
      'id':3,
      'name':'设备损坏',
      'type':'报警',
      'time':'2024-01-01 14:33'
    }
  ]
  const middle_bottom_right_grid_list = [
  {
      'id':0,
      'name':'上升限位'
    },
    {
      'id':1,
      'name':'上升预限位'
    },
    {
      'id':2,
      'name':'右行限位'
    },
    {
      'id':3,
      'name':'右防撞减速'
    },
    {
      'id':4,
      'name':'有梯侧翻板'
    },
    {
      'id':5,
      'name':'有梯侧定位器'
    },
    {
      'id':6,
      'name':'无梯侧翻板夹'
    },
    {
      'id':7,
      'name':'无梯侧定位器'
    },
    {
      'id':8,
      'name':'有梯侧油泵夹'
    },
    {
      'id':9,
      'name':'无梯侧油泵'
    },
    {
      'id':10,
      'name':'无梯侧油泵'
    },
    {
      'id':11,
      'name':'无梯侧油泵'
    },
  ]
  onMounted(async () => {
  })


  onUnmounted(() => {
  })

  const backMainPage = () => {
    router.go(-1)
  }
</script>

<style lang="less" scoped>
  .bg {
    min-height: 1080px;
    width: 100vw;
    height: 100vh;
    background-image: url(../../assets/img/screen_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .top-bg {
  width: 100%;
  height: 77px;
  background-image: url(../../assets/img/big_screen_top_bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  cursor: pointer;
    .device-name {
      color: white;
      font-size: 30px;
      position: absolute;
      left: 50%;
      top: 35%;
      font-weight: bold;
      transform: translateX(-50%) translateY(-35%);
      font-family: Alibaba-PuHuiTi-R;
      font-style: normal;
      text-transform: none;
    }
  }
  .left {
    top: 77px;
    left: 35px;
    width: 450px;
    min-height: 988px;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .left_top {
    width: 422px;
    height: 256px;
    background-image: url(../../assets/img/screen_top_bottom_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 10px;
  }
  .left_bottom {
    width: 450px;
    height: 653px;
    background-image: url(../../assets/img/screen_left_bottom_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    padding: 10px 39px;
  }
  .left_bottom_grid {
    margin-top: 43px;
    display: grid;
    grid-template-rows: 32px 32px 32px 32px 32px;
    grid-template-columns: 180px 180px;
    gap: 11px;
  }
  .left_bottom_grid_item {
    background-color: #334A6C;
    border: 1px solid #455A7A;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ABC0E0;
    font-size: 16px;
    font-family: Alibaba-PuHuiTi-R;
  }
  .middle {
    top: 77px;
    left: 50%;
    transform: translateX(-50%);
    width: 950px;
    min-height: 988px;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .middle_bottom {
    width: 100%;
    height: 356px;
    background-image: url(../../assets/img/single_middle_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .screen_middle_bottom_middle {
    width: 204px;
    height: 204px;
    background-image: url('../../assets/img/screen_middle_bottom_middle.png');    
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
  }
  .middle_bottom_right_grid {
    margin-top: 20px;
    display: grid;
    grid-template-rows: 32px 32px 32px 32px;
    grid-template-columns: 120px 120px 120px;
    gap: 11px;
  }
  .middle_bottom_right_grid_item {
    background-color: #334A6C;
    border: 1px solid #455A7A;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ABC0E0;
    font-size: 16px;
    font-family: Alibaba-PuHuiTi-R;
  }
  .middle_top {

  }
  .right {
    top: 77px;
    right: 35px;
    width: 450px;
    min-height: 988px;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .right_top {
    width: 100%;
    height: 194px;
    background-image: url(../../assets/img/screen_right_top_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 30px 45px;
    display: flex;
  }
  .right_alert {
    width: 100%;
    height: 130px;
    padding: 10px 0px;
  }
  .right_alert_item {
    width: 100%;
    height: 100%;
    padding: 0px 30px 0px 35px;
    background-image: url(../../assets/img/screen_right_alert_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .right_small {
    width: 100%;
    height: 502px;
    background-image: url(../../assets/img/screen_right_small_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 10px 39px;
  }
  .right_small_grid {
    margin-top: 36px;
    display: grid;
    grid-template-rows: 32px 32px;
    grid-template-columns: 110px 110px 110px;
    gap: 11px;
  }
  .right_small_grid_item {
    background-color: #334A6C;
    border: 1px solid #455A7A;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ABC0E0;
    font-size: 16px;
    font-family: Alibaba-PuHuiTi-R;
  }
  .right_bottom {
    width: 100%;
    height: 151px;
    background-image: url(../../assets/img/screen_right_bottom_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .right_bottom_grid {
    display: grid;
    grid-template-rows: 32px 32px;
    grid-template-columns: 110px 110px 110px;
    gap: 11px;
  }
  .right_bottom_grid_item {
    background-color: #334A6C;
    border: 1px solid #455A7A;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ABC0E0;
    font-size: 16px;
    font-family: Alibaba-PuHuiTi-R;
  }
  .middle_bottom_right_top {
    width: 100px;
    height: 32px;
    background-color: #334A6C;
    border: 1px solid #455A7A;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ABC0E0;
    font-size: 16px;
    font-family: Alibaba-PuHuiTi-R;
  }
  .middle_bottom_right_top.is-active {
    background-color: #158E4B;
  }
</style>
<style lang="less">
  .right_alert {
    .el-carousel__button {
      width: 5px;
      height: 5px;
      border-radius: 2.5px;
    }
    .el-carousel__indicator.is-active button {
      width: 14px;
      height: 5px;
    }
    .el-carousel__indicators--horizontal {
      left: 130px;
      top: 20px;
    }
  }
</style>
