diff --git a/public/boxshow.png b/public/boxshow.png new file mode 100644 index 00000000..aef3cd1a Binary files /dev/null and b/public/boxshow.png differ diff --git a/public/index.html b/public/index.html index db4bfb3a..961859aa 100644 --- a/public/index.html +++ b/public/index.html @@ -31,6 +31,7 @@ height: 100%; padding: 0; margin: 0; + font-size: 14px; } diff --git a/src/App.js b/src/App.js index ab2009b5..9e315377 100644 --- a/src/App.js +++ b/src/App.js @@ -34,7 +34,7 @@ export default class App extends Component { {/* 用户头像信息 */}
- 帮助中心 + 帮助中心 Red
diff --git a/src/assets/comm.css b/src/assets/comm.css index ef0268e7..2445908b 100644 --- a/src/assets/comm.css +++ b/src/assets/comm.css @@ -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 +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 649ac906..a055b061 100644 --- a/src/index.js +++ b/src/index.js @@ -5,9 +5,10 @@ import App from './App'; import reportWebVitals from './reportWebVitals'; import 'zent/css/index.css'; ReactDOM.render( - + // - , + // + , document.getElementById('root') ); diff --git a/src/pages/overview/advertisement/advertisement.css b/src/pages/overview/advertisement/advertisement.css new file mode 100644 index 00000000..cba0280e --- /dev/null +++ b/src/pages/overview/advertisement/advertisement.css @@ -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; +} \ No newline at end of file diff --git a/src/pages/overview/advertisement/advertisement.js b/src/pages/overview/advertisement/advertisement.js new file mode 100644 index 00000000..77a8c27c --- /dev/null +++ b/src/pages/overview/advertisement/advertisement.js @@ -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 ( + + ); + }, + } +]; + +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 ( + + ); + } +} + + + + + diff --git a/src/pages/overview/echarts/echarts.css b/src/pages/overview/echarts/echarts.css new file mode 100644 index 00000000..85608b2c --- /dev/null +++ b/src/pages/overview/echarts/echarts.css @@ -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; +} \ No newline at end of file diff --git a/src/pages/overview/echarts/echarts.js b/src/pages/overview/echarts/echarts.js new file mode 100644 index 00000000..f3b0a441 --- /dev/null +++ b/src/pages/overview/echarts/echarts.js @@ -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 ( +
+
+

效果总览

+
+ +
+
+
+
    +
  • this.activechange1(123)}> + + 0 +
    • +
  • this.activechange3(123)}> + + 0.00 +
    • + +
+
+ {/* 过滤条件 */} +
+ ) + } +} \ No newline at end of file diff --git a/src/pages/overview/main/main.js b/src/pages/overview/main/main.js index f775d47d..5d882a74 100644 --- a/src/pages/overview/main/main.js +++ b/src/pages/overview/main/main.js @@ -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 ( -
+
+ +
); } diff --git a/src/pages/overview/statistics/statistics.css b/src/pages/overview/statistics/statistics.css index df97f605..266bd29e 100644 --- a/src/pages/overview/statistics/statistics.css +++ b/src/pages/overview/statistics/statistics.css @@ -8,6 +8,7 @@ background-repeat: no-repeat; border: 1px solid #e6e8ed; border-radius: 8px; + box-sizing: border-box; } #statistics>h2{ font-size: 22px;