第一个react

baidu.js

import React,{Component} from 'react';
import './baidu.less';
import {Layout,Input,Icon,Menu,Dropdown} from 'antd';

const {
    Header,Content,Footer
} = Layout;
const Search=Input.Search;
const menu=(
    <Menu>
        <Menu.Item>
            <a target="_blank" rel="noopener noreferrer" href=" " className="fs-12">搜索设置</a>
        </Menu.Item>
        <Menu.Item>
            <a target="_blank" rel="noopener noreferrer" href=" " className="fs-12">高级搜索</a>
        </Menu.Item>
        <Menu.Item>
            <a target="_blank" rel="noopener noreferrer" href=" " className="fs-12">关闭预测</a>
        </Menu.Item>
        <Menu.Item>
            <a target="_blank" rel="noopener noreferrer" href=" " className="fs-12">隐私设置</a>
        </Menu.Item>
    </Menu>
)

export default class BaiDu extends Component{
    state={
        zlist:false
    }
    hd1=()=>{
        this.setState({zlist:true})
    }
    hd2=()=>{
        this.setState({zlist:false})
    }
    render(){
        
        return (
            <div>
               <Layout>
                   <Header style={{backgroundColor: "white",paddingRight: 12}}>
                        <ul >
                            <li><a href="http://news.baidu.com" className="linkblue">新闻</a></li>
                            <li><a href="http://www.hao123.com" className="linkblue">hao123</a></li>
                            <li><a href="http://map.baidu.com" className="linkblue">地图</a></li>
                            <li><a href="http://v.baidu.com" className="linkblue">视频</a></li>
                            <li><a href="http://tieba.baidu.com" className="linkblue">贴吧</a></li>
                            <li><a href="http://xueshu.baidu.com" className="linkblue">学术</a></li>
                            <li><a href=" " className="linkblue font-weight-normal">登录</a></li>
                            <li>
                                <Dropdown overlay={menu} placement="bottomCenter">
                                    <a href=" " className="linkblue font-weight-normal">设置 </a>
                                </Dropdown> 
                            </li>
                            <span className="moreproduct" onMouseEnter={this.hd1}>更多产品</span>
                        </ul>
                        {this.state.zlist?[<div style={{position:"fixed",height: 935,right:0,top:0}} id="productlist">
                            <div className="text-center morelist2" onMouseLeave={this.hd2}>
                                <div className="moreproduct2">
                                    <div>更多产品</div>
                                </div>
                                <div>
                                    <div className="fs-12 morelist">
                                        <a href=" " className="d-block color666">
                                            <img src={require("../imgs/nuomi.png")} alt="" className="listimg" />
                                            <div>糯米</div>
                                        </a>
                                        <a href=" " className="d-block color666">
                                        <img src={require("../imgs/yinyue.png")} alt="" className="listimg" />
                                            <div>音乐</div>
                                        </a>
                                        <a href=" " className="d-block color666">
                                            <img src={require("../imgs/tu.png")} alt="" className="listimg" />
                                            <div>图片</div>
                                        </a>
                                        <a href=" " className="d-block color666">
                                            <img src={require("../imgs/zhidao.png")} alt="" className="listimg" />
                                            <div>知道</div>
                                        </a>
                                        <a href=" " className="d-block color666">
                                            <img src={require("../imgs/wenku.png")} alt="" className="listimg" />
                                            <div>文库</div>
                                        </a>
                                        <a href=" " className="d-block color666">
                                            <img src={require("../imgs/tongji.png")} alt="" className="listimg" />
                                            <div>风云榜</div>
                                        </a>
                                        <a href=" " className="d-block color666">全部产品>></a>
                                    </div>
                                </div>
                            </div>
                        </div>]:null}
                   </Header>
                   <Content style={{backgroundColor: "white",paddingTop:105}}>
                        <div className="logodiv">
                            <img src={require("../imgs/logo.png")} alt="" className="logo"/>
                        </div>      
                        <div className="inputdiv">
                            <Search 
                            enterButton="百度一下"
                            size="large"
                            onSearch={value=>console.log(value)}
                            suffix = {
                                <Icon type="camera" className="iconcamera"/>
                            }
                            style={{height: 30}}
                            />
                        </div>
                   </Content>
                   <Footer style={{backgroundColor: "white"}}>
                       <div className="erweimadiv">
                           <img src={require("../imgs/logo1.png")} alt="" /><br/>
                           <span className="font-weight-bold fs-12" style={{marginLeft:18}}>百度</span>
                       </div>
                       <div className="fs-12 footdiv" id="foot">
                           <a href=" " style={{marginRight: 25}}>把百度设为主页</a>
                           <a href=" " style={{marginRight: 25}}>关于百度</a>
                           <a href=" " style={{marginRight: 25,fontWeight:500}}>About Baidu</a>
                           <a href=" ">百度推广</a><br/>
                           <div style={{marginTop:6}}>
                            <span style={{marginRight:25}}><span className="font-weight-500">©2019 Baidu </span><a href=" ">使用百度前必读&nbsp;</a><a href=" ">意见反馈&nbsp;</a>京ICP证030173号 <Icon type="safety-certificate" /></span>
                            <a href=" ">京公网安备1100000200001</a> <Icon type="safety-certificate" />
                           </div>
                       </div>
                   </Footer>
               </Layout>
            </div>
        );
    }
} 

baidu.less

@import '~antd/dist/antd.css';
li{
    float: left;
    list-style: none;
    margin-right: 18px;
}
ul{
    float:right;
}
.linkblue{
    color: #333;
    font-weight: 600;
    text-decoration: underline;
    &:hover{
      color: #1890ff;  
      text-decoration: underline;
    }
}
.font-weight-normal{
    font-weight: 400;
}
.font-weight-bold{
    font-weight: 700;
}
.font-weight-500{
    font-weight: 500;
}
.fs-12{
    font-size: 12px!important;
}
.logo{
    width: 270px;
    height:129px;
}
.logodiv{
    width: 270px;
    margin: 0 auto;
    padding-bottom: 25px;
}
.inputdiv{
    width: 640px;
    margin: 0 auto;
}
.erweimadiv{
    width: 60px;
    margin: 0 auto;
    padding-top: 360px;
}
.footdiv{
    width: 600px;
    margin: 0 auto;
    padding-top: 20px;
    text-align: center;
}
.text-center{
    text-align: center;
}
#foot{
    color: #999;
    a{
        color:#999;
        text-decoration: underline;
    } 
}
.moreproduct{
    padding: 3px;
    background-color: #3388ff;
    color: white;
    cursor: pointer;
}
.d-none{
    display: none;
}
.d-block{
    display: block;
}
.color666{
    color: #666;
}
.morelist{
    padding: 0 8px;
     a{
        line-height: 4;
        border-bottom: 1px solid #f0f0f0;
        &:hover{
            text-decoration: underline;
            color: #666;
        }
        div{
            line-height: 2
        }
    }
}
.morelist2{
    position: absolute;
    height: 935px;
    width: 85px;
    background-color: #f9f9f9;
    right: 0;
}
.moreproduct2{
    padding: 0 8px;
    cursor: pointer;
    div{
        border-bottom: 1px solid #f0f0f0;
    }
}
.listimg{
    width: 35px;
    height: 35px;
}
.iconcamera{
    color: #999;
    font-size: 22px;
    font-weight: 200;
    cursor: pointer;
    &:hover{
        color: #1890ff;
    }
}