import React, { useEffect, useReducer, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import './index.less'
import shengjie from './img/shengjie.png'
import xianjie from './img/xianjie.png'
import shengjigonglu from './img/shengjigonglu.png'
import yinshuigongcheng from './img/yinshuigongcheng.png'
import xian from './img/xian.png'


export default function TuLi() {

  return (
    <div className='homePage_tuli'>
      <div className='homePage_tuli_title'>雨量图例(mm)</div>
      {/* <div className='homePage_tuli_row'>
        <div className='homePage_tuli_row_text1'><div style={{background:'#ffffff'}}></div></div>
        <div className='homePage_tuli_row_text2'>0</div>
        <div className='homePage_tuli_row_text3'>无降雨</div>
      </div> */}
      <div className='homePage_tuli_row'>
        <div className='homePage_tuli_row_text1'><div style={{background:'#BDEF9A'}}></div></div>
        <div className='homePage_tuli_row_text2'>0.1~10</div>
        <div className='homePage_tuli_row_text3'>小雨</div>
      </div>
      <div className='homePage_tuli_row'>
        <div className='homePage_tuli_row_text1'><div style={{background:'#59B665'}}></div></div>
        <div className='homePage_tuli_row_text2'>10~25</div>
        <div className='homePage_tuli_row_text3'>中雨</div>
      </div>
      <div className='homePage_tuli_row'>
        <div className='homePage_tuli_row_text1'><div style={{background:'#6EC1FB'}}></div></div>
        <div className='homePage_tuli_row_text2'>25~50</div>
        <div className='homePage_tuli_row_text3'>大雨</div>
      </div>
      <div className='homePage_tuli_row'>
        <div className='homePage_tuli_row_text1'><div style={{background:'#1D1BC7'}}></div></div>
        <div className='homePage_tuli_row_text2'>50~100</div>
        <div className='homePage_tuli_row_text3'>暴雨</div>
      </div>
      <div className='homePage_tuli_row'>
        <div className='homePage_tuli_row_text1'><div style={{background:'#EB20F5'}}></div></div>
        <div className='homePage_tuli_row_text2'>100~250</div>
        <div className='homePage_tuli_row_text3'>大暴雨</div>
      </div>
      <div className='homePage_tuli_row'>
        <div className='homePage_tuli_row_text1'><div style={{background:'#761E50'}}></div></div>
        <div className='homePage_tuli_row_text2'>≥250</div>
        <div className='homePage_tuli_row_text3'>特大暴雨</div>
      </div>
    </div>
  );
}