import img2 from "~/assets/images/public/bigScreen/bg13.png";
import img3 from "~/assets/images/public/bigScreen/bg14.png";
import img4 from "~/assets/images/public/bigScreen/more1.png";
import img1 from "~/assets/images/public/bigScreen/smalltitle.png";
import "./index.less";

function BottomScreen() {
  return (
    <div className="bottom-container_con">
      <div className="top_container">
        <div className="title">
          管理九项
          <img src={img4} alt="" />
        </div>
        <div className="con">
          <div className="item">安全管理台账</div>
          <div className="item active">双重预防管理</div>
          <div className="item">相关方管理</div>
          <div className="item">现场重点监管</div>
          <div className="item">消防应急管理</div>
          <div className="item">安全教育培训</div>
          <div className="item">综合查询（同比、环比 )</div>
          <div className="item">综合考评管理</div>
          <div className="item">科技兴安</div>
        </div>
      </div>
      <div className="bottom-container">
        <div className="left">
          <div className="title" style={{ backgroundImage: `url(${img1})` }}>分子公司考核情况</div>
          <div className="main" style={{ backgroundImage: `url(${img2})` }}>
            <div className="table">
              <div className="head">
                <div>公司名称</div>
                <div>检查任务完成情况</div>
                <div>安全会议召开情况</div>
                <div>重要事项传达情况</div>
                <div>专项任务完成情况</div>
              </div>
              <div className="table-container">
                <div className="table-item">新益公司</div>
                <div className="table-item">23/26</div>
                <div className="table-item">23/26</div>
                <div className="table-item">23/26</div>
                <div className="table-item">23/26</div>
              </div>

              <div className="table-container">
                <div className="table-item">新益公司</div>
                <div className="table-item">23/26</div>
                <div className="table-item">23/26</div>
                <div className="table-item">23/26</div>
                <div className="table-item">23/26</div>
              </div>
              <div className="table-container">
                <div className="table-item">新益公司</div>
                <div className="table-item">23/26</div>
                <div className="table-item">23/26</div>
                <div className="table-item">23/26</div>
                <div className="table-item">23/26</div>
              </div>
              <div className="table-container">
                <div className="table-item">新益公司</div>
                <div className="table-item">23/26</div>
                <div className="table-item">23/26</div>
                <div className="table-item">23/26</div>
                <div className="table-item">23/26</div>
              </div>
            </div>
          </div>
        </div>
        <div className="right">
          <div className="title" style={{ backgroundImage: `url(${img1})` }}>视频巡屏</div>
          <div className="main">
            <div className="menu">
              <div className="list active">新益公司</div>
              <div className="list">二公司</div>
              <div className="list">六公司</div>
              <div className="list">七公司</div>
              <div className="list">九公司</div>
            </div>
            <div className="video-container" style={{ backgroundImage: `url(${img3})` }}>
              这里是视频
            </div>
          </div>
        </div>
      </div>
    </div>

  );
}

export default BottomScreen;
