import styles from './index.less';
const SignStatus = () => {
  const list = [
    {
      name: '理想态',
      pre: '（95分以上）',
      desc: '表示问题数量少、处置效率高，城市管理整体运行良好。',
      color: 'rgb(87, 239, 88)',
    },
    {
      name: '标准态',
      pre: '（85分-95分）',
      desc: '表示管理达标，但仍有优化空间。',
      color: 'rgb(68, 127, 240)',
    },
    {
      name: '预警态',
      pre: '（85分以下）',
      desc: '提示问题积压或处置效率下降，需要加大治理力度。',
      color: 'rgb(255, 162, 80)',
    },
    {
      name: '应急态',
      pre: '（发生重大应急事件）',
      desc: '发生重大应急事件时，提醒管理资源需快速响应。',
      color: 'rgb(255, 95, 95)',
    },
  ];
  return (
    <div className={styles.container}>
      {list?.map((item) => {
        return (
          <div className={styles.itemWarp}>
            <div className={styles.titleWarp}>
                <div className={styles.dot} style={{background:item.color}}>

                </div>
                <div className={styles.title}>
                 <span> {item.name}</span>   {item.pre}
                </div>
            </div>
            <div className={styles.desc}>{item.desc}</div>
          </div>
        );
      })}
    </div>
  );
};

export default SignStatus;
