电脑壁纸和盒子背景同步换肤

import React,{useState} from 'react'
import './Login.scss'
import { Button, Popover } from 'antd';
import Draggable from 'react-draggable';
export default function Login() {
  const text = <span>菜单列表</span>;
  const content = (
    <div style={{width:'100px'}}>
      <div>
        <img src="img/1.png" alt="" style={{height:'10px',width:'10px'}}/>
        <span>运动健康</span>
      </div>
      <div>
        <img src="img/3.png" alt="" style={{height:'10px',width:'10px'}}/>
        <span>备忘录</span>
      </div>
      <div>
        <img src="img/4.png" alt="" style={{height:'10px',width:'10px'}}/>
        <span>个人中心</span>
      </div>
      <div>
        <img src="img/5.png" alt="" style={{height:'10px',width:'10px'}}/>
        <span>设置</span>
      </div>
      
    </div>
  );
  
  const [iconList,setIcon]=useState([
    {id:1,src:'img/skin.png',name:'换皮肤'},
    {id:2,src:'img/2.png',name:'浏览器'},
  ])
  const [iconIndex,setIconIndex]=useState('x')
  const [show,setShow]=useState(false)

  //桌面图标
  function chooseItem(idx){
    setIconIndex(idx)
    if(idx==0){
      setShow(true)
    }
  }

  const [backimgIdx,setBackImgIdx]=useState(0)

  const [backimg,setBackimg]=useState([
    {id:1,src:'img/wall-0.jpg'},
    {id:2,src:'img/wall-1.jpg'},
    {id:3,src:'img/wall-2.jpg'},
  ])

  function changeSkin(idx){
    setBackImgIdx(idx)

  }
 
  return (
    <div className='container' 
      style={{ 
          width:'100%',height:'100%',
          backgroundImage:`url(${backimg[backimgIdx].src})`,
          backgroundSize:'cover',display:'flex',flexDirection:'column'
        }}
    >
      <div className="content">
        <div className="icon">
          {
            iconList.map((item,index)=>(
              <div className={iconIndex==index?'icon-item-act':'icon-item'} key={item.id} onClick={()=>{chooseItem(index)}}>
                <img src={item.src} alt="" />
                <div>{item.name}</div>
              </div>
              
            ))
          }
        </div>
        {
          show?(
            <Draggable >
              <div className="modal"  bounds={{right: 800, left: 0,top:0,bottom:0} } >
                <div className="btnbox">
                  <div>换皮肤</div>
                  <div onClick={()=>setShow(false)}>x</div>
                </div>
                <div className="img"
                  style={{height:'270px',width:'100%',
                  backgroundImage:`url(${backimg[backimgIdx].src})`,
                  backgroundSize:'cover',
                  
                  
                  }}
                >
                  <div style={{position:'fixed',bottom:'50px',display:'flex',}}>
                  {
                    backimg.map((item,index)=>(
                      <div className='img-item' 
                        style={{width:'60px',height:'50px',
                        backgroundImage:`url(${item.src})`,
                        backgroundSize:'cover', 
                        }}

                        onClick={()=>{changeSkin(index)}}

                      >

                      </div>

                    ))
                  }
                  </div>
                  


                </div>
              </div>
            </Draggable>

          ):''
        }
        
      </div>
      <div className="footer">
       
        <Popover style={{width:'100px'}} placement="rightBottom" title={text} content={content} trigger="click">
       
          <img src="img/Windows.png" alt="" />
        </Popover>
      </div>

    </div>
  )
}



.container{
    
    .content{
        flex: 1;
        .icon{
            .icon-item{
                width: 60px;
                margin: 30px 5px;
                img{
                    height: 60px;
                    width: 60px;
                }
                div{
                    color: #fff;
                    text-align: center;
                }

            }

            .icon-item-act{
                width: 60px;
                margin: 30px 5px;
                box-shadow: 1px 2px 10px 10px rgba(200, 200, 200, 0.5);
                img{
                    height: 60px;
                    width: 60px;
                }
                div{
                    color: #fff;
                    text-align: center;
                }

            }
            
        }

        .modal{
            position: absolute;
            height: 300px;
            width: 400px;
            top: 25%;
            right: 40%;
            background-color: #fff;
            .btnbox{
                color: #fff;
                height: 30px;
                width: 400px;
                display: flex;
                justify-content: space-between;
                background-color: rgb(84, 161, 105);
                padding: 0 10px;
                box-sizing: border-box;
                div{
                    // width: 30px;
                    text-align: center;
                    font-size: 18px;
                }
            }
            
        }

    }

    .footer{
        height: 50px;
        background-color: rgb(50, 50, 50);
        img{
            height: 40px;
            width: 40px;
        }
    }
    
}