概览布局
This commit is contained in:
red-deng-deng
parent
e21b37352b
commit
f4de81637b
Binary file not shown.
|
After Width: | Height: | Size: 295 B |
|
|
@ -31,6 +31,7 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,7 @@ export default class App extends Component {
|
||||||
</div>
|
</div>
|
||||||
{/* 用户头像信息 */}
|
{/* 用户头像信息 */}
|
||||||
<div className="userImg dflexa">
|
<div className="userImg dflexa">
|
||||||
<Link href="https://youzan.com" target="_blank" className="mr15 helpcenter">帮助中心</Link>
|
<Link to="https://youzan.com" target="_blank" className="mr15 helpcenter">帮助中心</Link>
|
||||||
<Avatar style={{ backgroundColor: '#296bef' }}>Red</Avatar>
|
<Avatar style={{ backgroundColor: '#296bef' }}>Red</Avatar>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -31,3 +31,31 @@
|
||||||
.mr15{
|
.mr15{
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
}
|
}
|
||||||
|
.mt15{
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
.pd24{
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
.pd15{
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
.pdtrl15{
|
||||||
|
padding: 15px 15px 9px;
|
||||||
|
}
|
||||||
|
.pdtrl20{
|
||||||
|
padding: 20px 20px 14px;
|
||||||
|
}
|
||||||
|
.mt5{
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dd,dt,ol,input{
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 颜色 */
|
||||||
|
.col31{
|
||||||
|
color: #313233l
|
||||||
|
}
|
||||||
|
|
@ -5,9 +5,10 @@ import App from './App';
|
||||||
import reportWebVitals from './reportWebVitals';
|
import reportWebVitals from './reportWebVitals';
|
||||||
import 'zent/css/index.css';
|
import 'zent/css/index.css';
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<React.StrictMode>
|
// <React.StrictMode>
|
||||||
<App />
|
<App />
|
||||||
</React.StrictMode>,
|
// </React.StrictMode>
|
||||||
|
,
|
||||||
document.getElementById('root')
|
document.getElementById('root')
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,164 @@
|
||||||
|
#advertisement {
|
||||||
|
width: 100%;
|
||||||
|
height: 440px;
|
||||||
|
margin: 15px 0;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#advertisement .ad-left {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-right: 15px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#advertisement .ad-left-item1 {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 130px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e6e8ed;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#advertisement .ad-left-item1 h4 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#advertisement .ad-left-item1 .ad7title {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(7, 1fr);
|
||||||
|
column-gap: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#advertisement .ad-left-item1 .adtitle {
|
||||||
|
margin-top: 15px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#advertisement .ad-left-item1 .adtitle:not(:last-of-type)::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 4px;
|
||||||
|
display: block;
|
||||||
|
width: 12px;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 4px 16px 0 rgb(205 205 205 / 40%);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
#advertisement .ad-left-item1 .adtitle:not(:last-of-type)::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: -15px;
|
||||||
|
bottom: -15px;
|
||||||
|
display: block;
|
||||||
|
width: 32px;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
#advertisement .adtitle>span {
|
||||||
|
color: #626366;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#advertisement .adtitle>b {
|
||||||
|
margin-top: 8px;
|
||||||
|
display: block;
|
||||||
|
color: #296bef;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#advertisement .ad-left-item2 {
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e6e8ed;
|
||||||
|
border-radius: 8px;
|
||||||
|
/* overflow: auto; */
|
||||||
|
}
|
||||||
|
#advertisement .ad-left-item2 .created{
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
#advertisement .ad-left-item2>span{
|
||||||
|
color: #939599;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
#advertisement .ad-left-item2 font{
|
||||||
|
color: #296bef;
|
||||||
|
margin-left: 3px;
|
||||||
|
}
|
||||||
|
#advertisement .tablecontainer{
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
/* 右边 */
|
||||||
|
#advertisement .ad-right {
|
||||||
|
width: 500px;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #e6e8ed;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #fff;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
#advertisement .ad-right .imgad{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#advertisement .ad-right .adlink{
|
||||||
|
border-bottom: 1px solid #dfe1e6;
|
||||||
|
}
|
||||||
|
#advertisement .ad-right .adlink-tip{
|
||||||
|
}
|
||||||
|
#advertisement .ad-right .adlink li{
|
||||||
|
list-style-type: none;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-bottom:10px;
|
||||||
|
}
|
||||||
|
#advertisement .ad-right .adlink li a{
|
||||||
|
color: #313233;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
#advertisement .ad-right .adlink li a:hover,#advertisement .ad-right .more:hover{
|
||||||
|
color:#296bef;
|
||||||
|
}
|
||||||
|
#advertisement .ad-right .adlink font{
|
||||||
|
color: #939599;
|
||||||
|
}
|
||||||
|
#advertisement .ad-right .more{
|
||||||
|
color: #939599;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#advertisement .zent-swiper[data-zv="9.11.0"]{
|
||||||
|
height: 280px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#advertisement .zent-grid-tr[data-zv="9.11.0"]{
|
||||||
|
height: auto!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#advertisement .zent-grid-th[data-zv="9.11.0"]{
|
||||||
|
background: #fff!important;
|
||||||
|
}
|
||||||
|
#advertisement .zent-grid-th[data-zv="9.11.0"], .zent-grid-td[data-zv="9.11.0"]{
|
||||||
|
border-bottom-color: #f1f1f1!important;
|
||||||
|
}
|
||||||
|
#advertisement .zent-swiper__dots-small[data-zv="9.11.0"] .zent-swiper__dots-item {
|
||||||
|
height: 8px;
|
||||||
|
width: 8px;
|
||||||
|
margin:12px 8px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,155 @@
|
||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
import "./advertisement.css"
|
||||||
|
import "../../../assets/comm.css"
|
||||||
|
import { Grid,Switch ,Swiper } from 'zent';
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: '广告名称',
|
||||||
|
name: 'name',
|
||||||
|
className: 'name'
|
||||||
|
}, {
|
||||||
|
title: '曝光率',
|
||||||
|
name: 'uv'
|
||||||
|
}, {
|
||||||
|
title: '点击率',
|
||||||
|
name: 'stock1',
|
||||||
|
defaultText: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '花费',
|
||||||
|
name: 'stock2',
|
||||||
|
defaultText: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
name: 'stock3',
|
||||||
|
defaultText: 0,
|
||||||
|
bodyRender(data, { row }) {
|
||||||
|
return (
|
||||||
|
<Switch
|
||||||
|
size="small"
|
||||||
|
checked={data.status}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const datasets = [];
|
||||||
|
|
||||||
|
for (let i = 0; i < 4; i++) {
|
||||||
|
datasets.push({
|
||||||
|
id: `id-${i}`,
|
||||||
|
name: `商品 ${i}`,
|
||||||
|
uv: 20,
|
||||||
|
status:i%2==0?true:false,
|
||||||
|
stock: i > 1 ? 5 : null
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 轮播
|
||||||
|
const pages = ['https://bbx-pic.gtimg.com/bbx/pictures/2021/211_20210927185149_588472.png', 'https://bbx-pic.gtimg.com/bbx/pictures/2021/211_20210916160650_273005.', 'https://bbx-pic.gtimg.com/bbx/pictures/2021/211_20210927185149_588472.png', 'https://bbx-pic.gtimg.com/bbx/pictures/2021/211_20210916160650_273005.'];
|
||||||
|
export default class advertisement extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div id="advertisement" className="dflexaj">
|
||||||
|
<div className="ad-left dflexajc">
|
||||||
|
<div className="ad-left-item1 pd24 boxs">
|
||||||
|
<h4 className="col31">广告统计</h4>
|
||||||
|
<div className="ad7title">
|
||||||
|
<div className="adtitle">
|
||||||
|
<span>投放中</span>
|
||||||
|
<b>0</b>
|
||||||
|
</div>
|
||||||
|
<div className="adtitle">
|
||||||
|
<span>审核中</span>
|
||||||
|
<b>0</b>
|
||||||
|
</div>
|
||||||
|
<div className="adtitle">
|
||||||
|
<span>未通过</span>
|
||||||
|
<b>0</b>
|
||||||
|
</div>
|
||||||
|
<div className="adtitle">
|
||||||
|
<span>建议优化</span>
|
||||||
|
<b>0</b>
|
||||||
|
</div>
|
||||||
|
<div className="adtitle">
|
||||||
|
<span>学习失败</span>
|
||||||
|
<b>0</b>
|
||||||
|
</div>
|
||||||
|
<div className="adtitle">
|
||||||
|
<span>保障已结束</span>
|
||||||
|
<b>0</b>
|
||||||
|
</div>
|
||||||
|
<div className="adtitle">
|
||||||
|
<span>潜力广告</span>
|
||||||
|
<b>0</b>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="ad-left-item2 pd24 boxs">
|
||||||
|
<strong className="col31 created">最近创建</strong><span>(今日新建<font>0</font>)</span>
|
||||||
|
<div className="tablecontainer">
|
||||||
|
|
||||||
|
<Grid
|
||||||
|
columns={columns}
|
||||||
|
datasets={datasets}
|
||||||
|
rowClassName={(data, index) => `${data.id}-${index}`}
|
||||||
|
onRowClick={(data, index, event) => { console.log(data, index, event.target, 'simple onRowClick') }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="ad-right">
|
||||||
|
<div className="swiper-demo-container">
|
||||||
|
<Swiper
|
||||||
|
className="swiper-demo-simple"
|
||||||
|
dotsColor="#fff"
|
||||||
|
autoplay
|
||||||
|
dotsSize="small"
|
||||||
|
>
|
||||||
|
{
|
||||||
|
pages.map((item, index) => {
|
||||||
|
return <div className="swiper-demo-simple-h" key={index}>
|
||||||
|
<img src={item} className="imgad"/></div>;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</Swiper>
|
||||||
|
</div>
|
||||||
|
<div className="adlink-tip pdtrl15 boxs">
|
||||||
|
|
||||||
|
<ul className="adlink">
|
||||||
|
<li>
|
||||||
|
<a href="#">批量新建支持在已有推广计划下新建广告</a>
|
||||||
|
<font>10-25</font>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#">Marketing API查询工具支持动态创意广告查询能力</a>
|
||||||
|
<font>10-26</font>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#">创意标签选择新增资质提示</a>
|
||||||
|
<font>10-27</font>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#" className="more">了解更多 <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" className="spaui-component" data-spaui="{}"><path fill="currentColor" d="M9.09 7.876l-5.061 5.572 1.48 1.345 6.284-6.919L5.507.971 4.03 2.318z" fillRule="evenodd"></path></svg></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
#overViewEcharts{
|
||||||
|
width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e6e8ed;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
#overViewEcharts .echartstop>h4 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
#overViewEcharts .filteritem{
|
||||||
|
padding: 32px 0;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
#overViewEcharts .filteritem>ul{
|
||||||
|
width:600px ;
|
||||||
|
height: 76px;
|
||||||
|
border: 1px solid #e6e8ed;
|
||||||
|
border-radius: 6px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
}
|
||||||
|
#overViewEcharts .filteritem li{
|
||||||
|
height: 100%;
|
||||||
|
flex: 1;
|
||||||
|
border-left: 1px solid #e6e8ed;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 8px 15px 15px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
#overViewEcharts .filteritem .filter1{
|
||||||
|
border-bottom: 3px solid #3E79F0;
|
||||||
|
}
|
||||||
|
#overViewEcharts .filteritem .filter2{
|
||||||
|
border-bottom: 3px solid #FFAE19;
|
||||||
|
}
|
||||||
|
#overViewEcharts .filteritem .filter3{
|
||||||
|
border-bottom: 3px solid #9AD6FF;
|
||||||
|
}
|
||||||
|
#overViewEcharts .filteritem .filter4{
|
||||||
|
border-bottom: 3px solid #76C84D;
|
||||||
|
}
|
||||||
|
#overViewEcharts .filteritem li:hover{
|
||||||
|
background: #f7f9fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
#overViewEcharts .filteritem li:first-child{
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
#overViewEcharts .filteritem li>span{
|
||||||
|
font-size: 20px;
|
||||||
|
color: #000;
|
||||||
|
margin-top: 5px;
|
||||||
|
padding-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#overViewEcharts .zent-datepicker-trigger[data-zv="9.11.0"]{
|
||||||
|
border: none!important;
|
||||||
|
border-bottom: 1px solid #e0e0e0!important;
|
||||||
|
}
|
||||||
|
#overViewEcharts .zent-select-v2[data-zv="9.11.0"] {
|
||||||
|
/* border-color: none!important;
|
||||||
|
background-color:none!important; */
|
||||||
|
border-width: 0px!important;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,127 @@
|
||||||
|
import React from "react"
|
||||||
|
import ReactDOM from "react-dom"
|
||||||
|
import "./echarts.css"
|
||||||
|
import "../../../assets/comm.css"
|
||||||
|
import {CombinedDateRangePicker,Select } from 'zent';
|
||||||
|
const options = [
|
||||||
|
{
|
||||||
|
key: '1',
|
||||||
|
text: '曝光率',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '2',
|
||||||
|
text: '点击率',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '3',
|
||||||
|
text: '点击率',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '4',
|
||||||
|
text: `花费`,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
export default class echarts extends React.Component{
|
||||||
|
constructor(props){
|
||||||
|
super(props);
|
||||||
|
this.state = {value1:{
|
||||||
|
key: '1',
|
||||||
|
text: '曝光率',
|
||||||
|
},
|
||||||
|
value2:{
|
||||||
|
key: '2',
|
||||||
|
text: '点击率',
|
||||||
|
},
|
||||||
|
value3:{
|
||||||
|
key: '2',
|
||||||
|
text: '点击率',
|
||||||
|
},
|
||||||
|
value4:{
|
||||||
|
key: '4',
|
||||||
|
text: `花费`,
|
||||||
|
},
|
||||||
|
filter1:false};
|
||||||
|
|
||||||
|
}
|
||||||
|
onChange1 = value => {
|
||||||
|
this.setState({
|
||||||
|
value1:value,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
onChange2 = value => {
|
||||||
|
this.setState({
|
||||||
|
value2:value,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
onChange3 = value => {
|
||||||
|
this.setState({
|
||||||
|
value3:value,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
onChange4= value => {
|
||||||
|
this.setState({
|
||||||
|
value4:value,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
activechange1=val=>{
|
||||||
|
this.setState({filter1:!this.state.filter1});
|
||||||
|
}
|
||||||
|
activechange2=val=>{
|
||||||
|
this.setState({filter2:!this.state.filter2});
|
||||||
|
}
|
||||||
|
activechange3=val=>{
|
||||||
|
this.setState({filter3:!this.state.filter3});
|
||||||
|
}
|
||||||
|
activechange4=val=>{
|
||||||
|
this.setState({filter4:!this.state.filter4});
|
||||||
|
}
|
||||||
|
onChangeCombinedDate = val => {
|
||||||
|
console.log('demo onChangeCombinedDate', val);
|
||||||
|
this.setState({
|
||||||
|
combinedValue: val,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
render(){
|
||||||
|
return (
|
||||||
|
<div id="overViewEcharts" className="mt15 pd24 boxs">
|
||||||
|
<div className="echartstop dflexaj">
|
||||||
|
<h4 className="col31">效果总览</h4>
|
||||||
|
<div>
|
||||||
|
<CombinedDateRangePicker
|
||||||
|
className="zent-datepicker-demo"
|
||||||
|
value={this.state.combinedValue}
|
||||||
|
showTime={{
|
||||||
|
format: 'HH:mm:ss',
|
||||||
|
defaultTime: ['12:00:00', '23:59:59'],
|
||||||
|
}}
|
||||||
|
format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
onChange={this.onChangeCombinedDate}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="filteritem">
|
||||||
|
<ul className="dflexaj">
|
||||||
|
<li className={this.state.filter1==true?"filter1":''} onClick={()=>this.activechange1(123)}>
|
||||||
|
<Select width="120px" value={this.state.value1} onChange={this.onChange1} options={options} clearable placeholder="选择一项" />
|
||||||
|
<span>0</span>
|
||||||
|
</li>
|
||||||
|
<li className={this.state.filter2==true?"filter2":''} onClick={()=>this.activechange2(123)}>
|
||||||
|
<Select width="120px" value={this.state.value2} onChange={this.onChange2} options={options} clearable placeholder="选择一项" />
|
||||||
|
<span>0</span>
|
||||||
|
</li>
|
||||||
|
<li className={this.state.filter3==true?"filter3":''} onClick={()=>this.activechange3(123)}>
|
||||||
|
<Select width="120px" value={this.state.value3} onChange={this.onChange3} options={options} clearable placeholder="选择一项" />
|
||||||
|
<span>0.00%</span>
|
||||||
|
</li>
|
||||||
|
<li className={this.state.filter4==true?"filter4":''} onClick={()=>this.activechange4(123)}>
|
||||||
|
<Select width="120px" value={this.state.value4} onChange={this.onChange4} options={options} clearable placeholder="选择一项" />
|
||||||
|
<span>0.00</span>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{/* 过滤条件 */}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import Statistics from "../statistics/statistics.js"
|
import Statistics from "../statistics/statistics.js"
|
||||||
|
import Advertisement from "../advertisement/advertisement.js"
|
||||||
|
import EchartsDom from "../echarts/echarts.js"
|
||||||
export default class App extends React.Component {
|
export default class App extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
@ -11,8 +12,10 @@ export default class App extends React.Component {
|
||||||
}
|
}
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div id="button">
|
<div>
|
||||||
<Statistics/>
|
<Statistics/>
|
||||||
|
<Advertisement/>
|
||||||
|
<EchartsDom/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,7 @@
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
border: 1px solid #e6e8ed;
|
border: 1px solid #e6e8ed;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
#statistics>h2{
|
#statistics>h2{
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue