From e700e1a41730e9b10f5147f0377d9a1a0288b5a4 Mon Sep 17 00:00:00 2001 From: red-deng-deng <1924913374@qq.com> Date: Fri, 29 Oct 2021 14:47:23 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=99=BB=E9=99=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.css | 65 --------- src/App.js | 42 ++---- src/components/input/main.js | 2 +- src/components/input/main.less | 6 +- src/pages/home/home.js | 55 ++++++++ src/pages/home/home.less | 65 +++++++++ src/pages/login/login.css | 5 + src/pages/login/login.js | 28 ++++ src/pages/newplan/main.less | 1 + src/pages/newplan/planform/planform.js | 166 +++++++++++++++++------ src/pages/newplan/planform/planform.less | 10 +- 11 files changed, 300 insertions(+), 145 deletions(-) create mode 100644 src/pages/home/home.js create mode 100644 src/pages/home/home.less create mode 100644 src/pages/login/login.css create mode 100644 src/pages/login/login.js diff --git a/src/App.css b/src/App.css index 35d7c2c4..e69de29b 100644 --- a/src/App.css +++ b/src/App.css @@ -1,65 +0,0 @@ -.start{ - width: 100%; - height: 100%; - background: #F5F6F7; - overflow-y: scroll; -} -.start .header{ - width: 100%; - height: 60px; - color: inherit; - margin-bottom: 0; - background: #fff; - border-bottom: 1px solid #e6e8ed; - position: fixed; - left: 0; - top: 0; - width: 100%; - z-index: 999; - padding: 0 20px; -} -.start .log{ - margin-right: 80px; - font-size: 20px; - font-weight: 500; - color: #313233; - min-width: 200px; -} -.start .log img{ - margin-right: 15px; -} -.start .log span{ - padding-left: 15px; - border-left: 1px solid #ccc; -} -.nav{ - height: 100%; - min-width: 300px; - flex: 1; - -} -.nav a{ - color: #333; - text-decoration: none; - margin-right: 30px; - height: 100%; - font-size: 16px; - line-height: 60px; - box-sizing: border-box; -} -.nav a.active{ - font-weight: 500; - color: #296bef; - border-bottom: 3px solid #296bef; -} -.start .helpcenter{ - color: #666; - font-weight: bold; -} -.start .mainbody{ - width: 100%; - flex: 1; - margin-top: 75px; -/* padding: 0 10%; */ - box-sizing: border-box; -} \ No newline at end of file diff --git a/src/App.js b/src/App.js index b01bcf9e..667fe72f 100644 --- a/src/App.js +++ b/src/App.js @@ -3,11 +3,10 @@ import React, { Component } from 'react'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; import "./App.css" import "./assets/comm.css" - +import {Redirect} from "react-router-dom"; import { Avatar, Badge } from 'zent'; -import extension from './pages/extension/main/main'; -import overview from './pages/overview/main/main'; -import newplan from './pages/newplan/main'; +import login from './pages/login/login'; +import home from './pages/home/home'; export default class App extends Component { state = { pathname:'', @@ -20,34 +19,13 @@ export default class App extends Component { render() { return ( - -
-
- {/* logo */} -
- - 营销系统管理平台 -
- {/* 顶部导航 */} -
- this.setState({pathname:'/overview'})}>概览 - this.setState({pathname:'/extension'})}>推广 -
- {/* 用户头像信息 */} -
- 帮助中心 - Red -
-
- -
+ + + + ( + )}> + ); } diff --git a/src/components/input/main.js b/src/components/input/main.js index f3ae4fbc..b4f0165a 100644 --- a/src/components/input/main.js +++ b/src/components/input/main.js @@ -31,7 +31,7 @@ import classNames from 'classnames' alignment:'left', countShow:true, required:false, - labelWidth:'140px', + labelWidth:'120px', icon:'' } diff --git a/src/components/input/main.less b/src/components/input/main.less index f99472e3..96697519 100644 --- a/src/components/input/main.less +++ b/src/components/input/main.less @@ -5,10 +5,10 @@ align-items: center; margin-bottom: 30px; .label{ - margin-right: 30px; + margin-right: 58px; .warning{ font-size: 16px; - color: #f00; + color: #d42f15; font-weight: bold; margin-right: 6px; } @@ -21,7 +21,7 @@ .keep-ipt{ border: 0; outline: none; - padding-left: 10px; + padding-left: 12px; padding-right: 44px; box-sizing: border-box; transition: all .3s; diff --git a/src/pages/home/home.js b/src/pages/home/home.js new file mode 100644 index 00000000..79268b7b --- /dev/null +++ b/src/pages/home/home.js @@ -0,0 +1,55 @@ +import ReactDOM from 'react-dom'; +import React, { Component } from 'react'; +import { BrowserRouter as Router, Route, Link } from "react-router-dom"; +import "./home.less" +import "../../assets/comm.css" + +import { Avatar, Badge } from 'zent'; +import extension from '../extension/main/main'; +import overview from '../overview/main/main'; +import newplan from '../newplan/main'; +export default class App extends Component { + state = { + pathname:'', + }; + componentWillMount(){ + const pathname=window.location.href.lastIndexOf('\/'); + const pathnamestr=window.location.href.substr(pathname); + this.setState({pathname:`${pathnamestr}`}); + } + + render() { + return ( + +
+
+ {/* logo */} +
+ + 营销系统管理平台 +
+ {/* 顶部导航 */} +
+ this.setState({pathname:'/overview'})}>概览 + this.setState({pathname:'/extension'})}>推广 +
+ {/* 用户头像信息 */} +
+ 帮助中心 + Red +
+
+ +
+ + ); + } +} + diff --git a/src/pages/home/home.less b/src/pages/home/home.less new file mode 100644 index 00000000..35d7c2c4 --- /dev/null +++ b/src/pages/home/home.less @@ -0,0 +1,65 @@ +.start{ + width: 100%; + height: 100%; + background: #F5F6F7; + overflow-y: scroll; +} +.start .header{ + width: 100%; + height: 60px; + color: inherit; + margin-bottom: 0; + background: #fff; + border-bottom: 1px solid #e6e8ed; + position: fixed; + left: 0; + top: 0; + width: 100%; + z-index: 999; + padding: 0 20px; +} +.start .log{ + margin-right: 80px; + font-size: 20px; + font-weight: 500; + color: #313233; + min-width: 200px; +} +.start .log img{ + margin-right: 15px; +} +.start .log span{ + padding-left: 15px; + border-left: 1px solid #ccc; +} +.nav{ + height: 100%; + min-width: 300px; + flex: 1; + +} +.nav a{ + color: #333; + text-decoration: none; + margin-right: 30px; + height: 100%; + font-size: 16px; + line-height: 60px; + box-sizing: border-box; +} +.nav a.active{ + font-weight: 500; + color: #296bef; + border-bottom: 3px solid #296bef; +} +.start .helpcenter{ + color: #666; + font-weight: bold; +} +.start .mainbody{ + width: 100%; + flex: 1; + margin-top: 75px; +/* padding: 0 10%; */ + box-sizing: border-box; +} \ No newline at end of file diff --git a/src/pages/login/login.css b/src/pages/login/login.css new file mode 100644 index 00000000..069b81ca --- /dev/null +++ b/src/pages/login/login.css @@ -0,0 +1,5 @@ +.loginPage{ + width: 100%; + height: 100%; + background: #f9f9f9; +} \ No newline at end of file diff --git a/src/pages/login/login.js b/src/pages/login/login.js new file mode 100644 index 00000000..3c0b47c4 --- /dev/null +++ b/src/pages/login/login.js @@ -0,0 +1,28 @@ +import ReactDOM from 'react-dom'; +import React, { Component } from 'react'; +import "./login.css" +import "../../assets/comm.css" +import Button from "../../components/button/main" +import { BrowserRouter as Router, Route, Link } from "react-router-dom"; +export default class App extends Component { + state = { + pathname:'', + }; + componentWillMount(){ + const pathname=window.location.href.lastIndexOf('\/'); + const pathnamestr=window.location.href.substr(pathname); + this.setState({pathname:`${pathnamestr}`}); + } + tohome(){ + this.props.history.push('/home'); + } + render() { + return ( +
+ 登陆页面 + +
+ ); + } +} + diff --git a/src/pages/newplan/main.less b/src/pages/newplan/main.less index e502e9eb..dfe5ed9e 100644 --- a/src/pages/newplan/main.less +++ b/src/pages/newplan/main.less @@ -15,5 +15,6 @@ border: 1px solid #e6e8ed; border-radius: 8px; padding: 24px; + margin-bottom: 30px; } } \ No newline at end of file diff --git a/src/pages/newplan/planform/planform.js b/src/pages/newplan/planform/planform.js index 6eb9a131..e516fc72 100644 --- a/src/pages/newplan/planform/planform.js +++ b/src/pages/newplan/planform/planform.js @@ -1,53 +1,137 @@ import React from "react" import "./planform.less" import Ipt from "../../../components/input/main" -import { Radio } from 'zent'; - import { - FormInputField, Form, FormStrategy, + Radio, + Checkbox, + Notify, Validators, - Pop, - Input, - Icon, - ButtonDirective, + FormNumberInputField, + FormUploadField, + FormImageUploadField, + Button, + FormRadioGroupField, + FormInputField, + RadioGroup, + FormSingleUploadField, + RadioButton } from 'zent'; -const RadioGroup = Radio.Group; -const RadioButton = Radio.Button; -export default class Test extends React.Component{ - constructor(){ - super() - this.state={ - goods:'', - value: 'apple', - rules: { - input123Rule: { - required: true, - message: '请输入名称', - }, - goods:{ - required: true, - message: '请输入商品名称', - } - } - } +function equalsPassword(value, ctx) { + if (value !== ctx.getSectionValue('password').password) { + return { + name: 'passwordEqual', + message: '两次填写的密码不一致', + }; } - onChange = e => { - this.setState({ value: e.target.value }); - }; - render(){ - console.log(this.state); - return ( -
- - - - + return null; +} + +function idLength(value) { + if (value.length !== 10 && value.length !== 15) { + return { + name: 'idLength', + message: '证件号码是10位或者15位数字', + }; + } +} +function Test(){ + const form = Form.useForm(FormStrategy.View); + const onSubmit = React.useCallback(form => { + const value = form.getValue(); + console.log(value) + }, []); + return ( +
+ {/* */} + + + + 标准投放 + 加速投放 加速投放 - + + + 不限 + 指定日预算 + + + + +
+
- ); - } -} \ No newline at end of file + + ); +} +export default Test; \ No newline at end of file diff --git a/src/pages/newplan/planform/planform.less b/src/pages/newplan/planform/planform.less index 0a2c068e..b235a504 100644 --- a/src/pages/newplan/planform/planform.less +++ b/src/pages/newplan/planform/planform.less @@ -8,15 +8,19 @@ margin-right: 50px!important; } .zent-radio-button[data-zv="9.11.0"]:first-child { - border-radius: 8px 0 0 8px !important; + border-radius: 6px 0 0 6px !important; } .zent-radio-button[data-zv="9.11.0"]:last-child { - border-radius: 0 8px 8px 0!important; + border-radius: 0 6px 6px 0!important; } .zent-radio-button[data-zv="9.11.0"] { - width: 150px!important; + width: 120px!important; line-height: 25px!important; } .zent-radio-button--checked[data-zv="9.11.0"]{ font-weight: bold!important; + } + +.zent-radio-button--checked[data-zv="9.11.0"]{ + background: #FAFCFF!important; } \ No newline at end of file