<meta charset="UTF-8" /><meta name=viewport content='width=device-width, initial-scale=1, maximum-scale=1'><title>define the frontend again</title><style>*{ margin:0; padding:0;} li , span , img{ list-style-type:none; cursor:pointer;} #app{ -webkit-overflow-scrolling: touch; overflow-x:hidden;}#text{ width: 0px; height: 0px; border-top:100px solid gray; border-left:50px solid gray; border-top-left-radius: 100%; transform: rotate(110deg);}.chart{ width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(red 33.3%,blue 33.3% 66.6%, green 66.6%);}.chart~ul{ margin-left: 70px;}.chart~ul li{ width: 70px; height: 25px; margin-bottom: 8px;}.chart~ul li:nth-child(1){ background:red;} .chart~ul li:nth-child(2){ background:blue;}.chart~ul li:nth-child(3){ background:green;}.chart~ul li::after{ margin-left: 100px;} .chart~ul li:nth-child(1)::after{ content: 'react';} .chart~ul li:nth-child(2)::after{ content: 'css3';} .chart~ul li:nth-child(3)::after{ content: 'canvas';} #experience span:nth-of-type(1)::after{ content: '汕头邦盛科技有限公司'; margin-left:20px;}#experience span:nth-of-type(2)::after{ content: '汕头亿迪科技有限公司'; margin-left:20px;}</style><div id="app"></div><link href='index.css' rel='stylesheet' type='text/css' /><script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script><script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script><script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script><script src="index.js"></script><script src="jq.js"></script><script type="text/babel">const[l,w,h,]=[console.log,window.innerWidth,window.innerHeight]const Flex=(flex,props)=><div className={flex} style={props.style} onClick={props.click} id={props.id} onTouchStart={props.touchstart} onTouchMove={props.touchmove} onTouchEnd={props.touchend}> {props.data ? props.data.map(d=><span>{d}</span>) : props.children}</div>class Index extends React.Component{ state={ } componentDidMount(){ } render() { return ( <C> <AS style={{width:'50%',height:'100vh'}}> <AS style={{height:'20%'}} id='experience'> <h3>工作经历</h3> <span>2017-2018</span> <span>2018-2019</span> </AS> <AS style={{height:'25%'}}> <h3>技能</h3> <Row style={{marginLeft:'-10px'}} > <li className='chart' ></li> <ul> <li></li> <li></li> <li></li> </ul> </Row> </AS> <Row style={{height:'25%'}}> <AS style={{width:'100px'}}> <h3>博客</h3> <img src="blog.png" style={{width:'100px',height:'100px'}} /> </AS> <AS style={{marginLeft:'70px'}}> <h3>作品</h3> <img src="blog.png" style={{width:'100px',height:'100px'}} /> </AS> </Row> </AS> </C> ) }}ReactDOM.render( <Index />, document.getElementById('app'))</script>