概览布局
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%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ export default class App extends Component {
|
|||
</div>
|
||||
{/* 用户头像信息 */}
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -31,3 +31,31 @@
|
|||
.mr15{
|
||||
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 'zent/css/index.css';
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
// <React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
// </React.StrictMode>
|
||||
,
|
||||
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 ReactDOM from 'react-dom';
|
||||
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 {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
@ -11,8 +12,10 @@ export default class App extends React.Component {
|
|||
}
|
||||
render() {
|
||||
return (
|
||||
<div id="button">
|
||||
<div>
|
||||
<Statistics/>
|
||||
<Advertisement/>
|
||||
<EchartsDom/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
background-repeat: no-repeat;
|
||||
border: 1px solid #e6e8ed;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#statistics>h2{
|
||||
font-size: 22px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue