From dcb72d6a90f71e6ee3d4b6f17756d8223acbe437 Mon Sep 17 00:00:00 2001
From: tom <820027697@qq.com>
Date: Tue, 24 Jul 2018 20:02:14 +0800
Subject: [PATCH 01/21] initial
---
package.json | 9 +-
src/1.html | 574 ++++++++++++++++++++++++++++++
src/2.html | 234 ++++++++++++
src/app.js | 38 +-
src/component/layout/index.js | 24 ++
src/component/layout/theme.css | 633 +++++++++++++++++++++++++++++++++
src/component/sidenav/index.js | 86 +++++
src/component/topnav/index.js | 249 +++++++++++++
src/index.css | 4 -
src/index.html | 5 +-
src/index.scss | 6 -
src/page/Home/index.css | 0
src/page/Home/index.js | 14 +
webpack.config.js | 13 +-
yarn.lock | 73 +++-
15 files changed, 1928 insertions(+), 34 deletions(-)
create mode 100644 src/1.html
create mode 100644 src/2.html
create mode 100644 src/component/layout/index.js
create mode 100644 src/component/layout/theme.css
create mode 100644 src/component/sidenav/index.js
create mode 100644 src/component/topnav/index.js
create mode 100644 src/page/Home/index.css
create mode 100644 src/page/Home/index.js
diff --git a/package.json b/package.json
index 54761ca..8894f01 100644
--- a/package.json
+++ b/package.json
@@ -5,10 +5,9 @@
"repository": "git@gitee.com:React_code/admin-react-ec.git",
"author": "tom <820027697@qq.com>",
"license": "MIT",
- // 命令行里的一些快捷键的设置
"scripts": {
- "dev" : "node_modules/.bin/webpack-dev-server", //运行服务启动项目
- "dist" : "node_modules/.bin/webpack -p" //线上环境的打包
+ "dev": "node_modules/.bin/webpack-dev-server",
+ "dist": "node_modules/.bin/webpack -p"
},
"devDependencies": {
"babel-core": "6.26.0",
@@ -26,9 +25,9 @@
"webpack-dev-server": "2.9.7"
},
"dependencies": {
- "font-awesome": "^4.7.0",
"node-sass": "^4.9.2",
"react": "16.2.0",
- "react-dom": "16.2.0"
+ "react-dom": "16.2.0",
+ "react-router-dom": "4.2.2"
}
}
diff --git a/src/1.html b/src/1.html
new file mode 100644
index 0000000..b378d84
--- /dev/null
+++ b/src/1.html
@@ -0,0 +1,574 @@
+
+
+
+
+
+ UI Elements
+ This is your UI elements section
+
+
+
+
+
+
+
+
+ Messages
+
+
+
+
+ Well done! You successfully read this important alert message.
+
+
+ Heads up! This alert needs your attention, but it's not super important.
+
+
+ Warning! Best check yo self, you're not looking too good.
+
+
+ Oh snap! Change a few things up and try submitting again.
+
+
+
+
+
+
+
+
+
+
+ Simple Progress Bars
+
+
+
+
+
+ 40% Complete (success)
+
+
+
+
+
+ 60% Complete (warning)
+
+
+
+
+
+
+
+
+
+ Progress Bars
+
+
+
+
+
+ 40% Complete (success)
+
+
+
+
+
+ 60% Complete (warning)
+
+
+
+
+
+
+
+
+
+
+
+
+ Animated Progress Bars
+
+
+
+
+
+ 40% Complete (success)
+
+
+
+
+
+
+
+
+ Stacked Progress Bars
+
+
+
+
+
+ 35% Complete (success)
+
+
+ 20% Complete (warning)
+
+
+ 10% Complete (danger)
+
+
+
+
+
+
+
+
+
+
+
+ Simple Buttons Examples
+
+
+
+
+
+
+
+
+ Button Dropdowns
+
+
+
+
Simple Button Dropdown Examples
+
+
+
Split Button Dropdown Examples
+
+
+
+
+
Buttons With Icons
+
+
+ Update
+
+ Edit
+
+ Delete
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Circle Icon Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Get more components at official bootstrap website i.e getbootstrap.com or
+ click here .
+
+
+
+
+
+
+
+
+ Icons Examples :
+
+
+
+
+
+
+
+
+
+
+
+
+ Get more Icons at official fortawesome website
+ Click here .
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Modals Example
+
+
+
+ Click Launch Demo Modal
+
+
+
+
+
+ ×
+
Modal title Here
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+ ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+ esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+ Close
+ Save changes
+
+
+
+
+
+
+
+
+
+
+
+
+ Sample Text
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et doloreullamco laboris
+ nisi ut aliquip ex ea commodo
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/2.html b/src/2.html
new file mode 100644
index 0000000..c38f2e5
--- /dev/null
+++ b/src/2.html
@@ -0,0 +1,234 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app.js b/src/app.js
index cbb0b16..cb02b65 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,15 +1,35 @@
import React from 'react';
import ReactDOM from 'react-dom';
+import { BrowserRouter as Router, Route, Redirect, Switch, Link }
+ from "react-router-dom";
-import 'font-awesome/css/font-awesome.min.css';
-import './index.css';
-import './index.scss';
+// 这是页面 做集成用的
+import Layout from 'component/layout/index.js';
+import Home from 'page/Home/index.js';
+
+
+
+class App extends React.Component{
+ render(){
+ return(
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
ReactDOM.render(
-
-
-
Hello world
- ,
-document.getElementById("app")
-);
\ No newline at end of file
+ ,
+ document.getElementById("app")
+);
\ No newline at end of file
diff --git a/src/component/layout/index.js b/src/component/layout/index.js
new file mode 100644
index 0000000..e893f24
--- /dev/null
+++ b/src/component/layout/index.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+
+import SideNav from 'component/sidenav/index.js';
+import TopNav from 'component/topnav/index.js';
+import 'component/layout/theme.css';
+
+
+class Layout extends React.Component{
+ constructor(props){
+ super(props);
+ }
+ render(){
+ return(
+
+
+
+ {this.props.children}
+
+ )
+ }
+}
+
+export default Layout;
\ No newline at end of file
diff --git a/src/component/layout/theme.css b/src/component/layout/theme.css
new file mode 100644
index 0000000..c3fdcd2
--- /dev/null
+++ b/src/component/layout/theme.css
@@ -0,0 +1,633 @@
+/*----------------------------------------------
+Author : www.webthemez.com
+License: Commons Attribution 3.0
+http://creativecommons.org/licenses/by/3.0/
+------------------------------------------------*/
+
+
+/*----------------------------------------------
+ COMMON STYLES
+------------------------------------------------*/
+body {
+ font-family: 'Open Sans', sans-serif;
+ background: #f3f3f3;
+}
+
+#wrapper {
+ width: 100%;
+ /* background: #2b2e33; */
+}
+
+#page-wrapper {
+ padding: 15px 15px;
+ /* min-height: 600px; */
+
+}
+
+#page-inner {
+ width: 100%;
+ margin: 10px 20px 10px 0px;
+ background-color: transparent;
+ padding: 10px;
+ min-height: 1200px;
+}
+
+.text-center {
+ text-align: center;
+}
+
+.no-boder {
+ border: 1px solid #f3f3f3;
+}
+
+h1, .h1, h2, .h2, h3, .h3 {
+ margin-top: 7px;
+ margin-bottom: -5px;
+}
+
+h2 {
+ color: #000;
+}
+
+h4 {
+ padding-top: 10px;
+}
+
+.square-btn-adjust {
+ border: 0px solid transparent;
+ -webkit-border-radius: 0px;
+ -moz-border-radius: 0px;
+ border-radius: 0px;
+}
+
+p {
+ font-size: 16px;
+ line-height: 25px;
+ padding-top: 20px;
+}
+
+.panel {
+ border-radius: 0px;
+}
+
+.navbar-side .nav > li > a > i {
+ color: #B5B5B5;
+ padding: 8px;
+ width: 30px;
+ text-align: center;
+}
+
+.top-navbar {
+ position: fixed;
+ width: 100%;
+ z-index: 300;
+ -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
+ -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
+ box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
+}
+
+.navbar-side {
+ z-index: 1;
+ position: fixed;
+ width: 260px;
+ top: 60px;
+ overflow-y: auto;
+ background: #2b2e33;
+}
+
+#page-wrapper {
+ position: relative;
+ top: 55px;
+}
+
+.top-navbar .nav > li > a:hover, .top-navbar .nav > li > a:focus {
+ text-decoration: none;
+ background-color: #2497BA;
+ color: #fff;
+}
+
+.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
+ background-color: #2497BA;
+ border-color: #428bca;
+}
+
+.breadcrumb {
+ padding: 0;
+ margin-bottom: 20px;
+ list-style: none;
+/* background-color: #FAFAFA; */
+ border-radius: 0;
+}
+/*----------------------------------------------
+ DASHBOARD STYLES
+------------------------------------------------*/
+.page-header {
+ padding-bottom: 9px;
+ margin: 10px 0 20px;
+ border-bottom: 1px solid transparent;
+}
+
+.panel-left {
+ width: 35%;
+ height: 158px;
+ background: #5CB85C;
+}
+
+.panel-left .fa-5x {
+ font-size: 11em;
+ color: rgba(255, 255, 255, 0.15);
+ padding: 40px 0;
+ margin-bottom: 30px;
+}
+
+.panel-right {
+ width: 65%;
+ height: 158px;
+ background: transparent;
+ margin-bottom: 0;
+ color: #fff;
+}
+
+.panel-right h3 {
+ font-size: 50px;
+ padding: 31px 10px 13px;
+ color: rgba(255, 255, 255, 0.96);
+}
+
+.panel-back {
+ background-color: #fff;
+}
+
+.panel-default {
+ border-color: #ECECEC;
+}
+
+.panel-default > .panel-heading {
+ color: #000;
+ border-color: #FFF;
+ font-weight: bold;
+ background: #FFFFFF;
+ font-size: 16px;
+}
+
+.panel-heading {
+ padding: 15px 15px 0px;
+ border-bottom: 1px solid transparent;
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+}
+
+.jumbotron, .well {
+ background: #fff;
+}
+
+.noti-box {
+ min-height: 100px;
+ padding: 20px;
+}
+
+.noti-box .icon-box {
+ display: block;
+ float: left;
+ margin: 0 15px 10px 0;
+ width: 70px;
+ height: 70px;
+ line-height: 75px;
+ vertical-align: middle;
+ text-align: center;
+ font-size: 40px;
+}
+
+.text-box p {
+ margin: 0 0 3px;
+}
+
+.main-text {
+ font-size: 25px;
+ font-weight: 600;
+}
+
+.set-icon {
+ -webkit-border-radius: 50px;
+ -moz-border-radius: 50px;
+ border-radius: 50px;
+}
+
+.panel-primary {
+ display: inline-block;
+ margin-bottom: 30px;
+ width: 100%;
+}
+
+.green {
+ background-color: #5cb85c;
+ color: #fff;
+}
+
+.blue {
+ background-color: #4CB1CF;
+ color: #fff
+}
+
+.red {
+ background-color: #F0433D;
+ color: #fff;
+}
+
+.brown {
+ background-color: #f0ad4e;
+ color: #fff;
+}
+
+.back-footer-red {
+ background-color: #F0433D;
+ color: #fff;
+ border-top: 0px solid #fff;
+}
+
+.icon-box-right {
+ display: block;
+ float: right;
+ margin: 0 15px 10px 0;
+ width: 70px;
+ height: 70px;
+ line-height: 75px;
+ vertical-align: middle;
+ text-align: center;
+ font-size: 40px;
+}
+
+.main-temp-back {
+ background: #8702A8;
+ color: #FFFFFF;
+ font-size: 16px;
+ font-weight: 300;
+ text-align: center;
+}
+
+.main-temp-back .text-temp {
+ font-size: 40px;
+}
+
+.back-dash {
+ padding: 20px;
+ font-size: 20px;
+ font-weight: 500;
+ -webkit-border-radius: 0px;
+ -moz-border-radius: 0px;
+ border-radius: 0px;
+ background-color: #2EA7EB;
+ color: #fff;
+}
+
+.back-dash p {
+ padding-top: 16px;
+ font-size: 13px;
+ color: #fff;
+ line-height: 25px;
+ text-align: justify;
+}
+
+.color-bottom-txt {
+ color: #000;
+ font-size: 16px;
+ line-height: 30px;
+}
+ /*CHAT PANEL*/
+/*Charts*/
+
+.main-chart {
+ background: #fff;
+}
+
+.easypiechart-panel {
+ text-align: center;
+ padding: 1px 0;
+ margin-bottom: 20px;
+}
+
+.placeholder h2 {
+ margin-bottom: 0px;
+}
+
+.donut {
+ width: 100%;
+}
+
+.easypiechart {
+ position: relative;
+ text-align: center;
+ width: 120px;
+ height: 120px;
+ margin: 20px auto 10px auto;
+}
+
+.easypiechart .percent {
+ display: block;
+ position: absolute;
+ font-size: 26px;
+ top: 38px;
+ width: 120px;
+}
+
+#easypiechart-blue .percent {
+ color: #30a5ff;
+}
+
+#easypiechart-teal .percent {
+ color: #1ebfae;
+}
+
+#easypiechart-orange .percent {
+ color: #ffb53e;
+}
+
+#easypiechart-red .percent {
+ color: #ef4040;
+}
+
+.chat-panel .panel-body {
+ height: 450px;
+ overflow-y: scroll;
+}
+
+.chat-box {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.chat-box li {
+ margin-bottom: 15px;
+ padding-bottom: 5px;
+ border-bottom: 1px dotted #808080;
+}
+
+.chat-box li.left .chat-body {
+ margin-left: 90px;
+}
+
+.chat-box li .chat-body p {
+ margin: 0;
+ color: #8d8888;
+}
+
+.chat-img>img {
+ margin-left: 20px;
+}
+
+footer p {
+ font-size: 14px;
+}
+/*----------------------------------------------
+ MENU STYLES
+------------------------------------------------*/
+
+
+.user-image {
+ margin: 25px auto;
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+ border-radius: 10px;
+ max-height: 170px;
+ max-width: 170px;
+}
+
+.top-navbar {
+ margin: 0px;
+}
+
+.top-navbar .navbar-brand {
+ color: #fff;
+ width: 260px;
+ text-align: left;
+ height: 60px;
+ font-size: 30px;
+ font-weight: 700;
+ text-transform: uppercase;
+ line-height: 30px;
+ background: #32323a;
+}
+
+.navbar-brand b {
+ color: #2DAFCB;
+}
+
+.top-navbar .nav > li {
+ position: relative;
+ display: inline-block;
+ margin: 0px;
+ padding: 0px;
+}
+
+.top-navbar .nav > li > a {
+ position: relative;
+ display: block;
+ padding: 20px;
+ color: #FFFFFF;
+ margin: 0px;
+}
+
+.top-navbar .nav > li > a:hover, .top-navbar .nav > li > a:focus {
+ text-decoration: none;
+ color: #319DB5 !important;
+ background: transparent;
+}
+
+.top-navbar .dropdown-menu {
+ min-width: 230px;
+ border-radius: 0 0 4px 4px;
+}
+
+.top-navbar .dropdown-menu > li > a:hover, .top-navbar .dropdown-menu > li > a:focus {
+ color: #225081;
+ background: none;
+}
+
+.dropdown-tasks {
+ width: 255px;
+}
+
+.dropdown-tasks .progress {
+ height: 8px;
+ margin-bottom: 8px;
+ overflow: hidden;
+ background-color: #f5f5f5;
+ border-radius: 0px;
+}
+
+.dropdown-tasks > li > a {
+ padding: 0px 15px;
+}
+
+.dropdown-tasks p {
+ font-size: 13px;
+ line-height: 21px;
+ padding-top: 4px;
+}
+
+.active-menu {
+ background-color: #2DAFCB !important;
+ color: #fff !important;
+}
+
+.active-menu i {
+ color: #fff !important;
+}
+
+.arrow {
+ float: right;
+ margin-top: 8px;
+}
+
+.fa.arrow:before {
+ content: "\f104";
+}
+
+.active > a > .fa.arrow:before {
+ content: "\f107";
+}
+
+.nav-second-level li,
+.nav-third-level li {
+ border-bottom: none !important;
+}
+
+.nav-second-level li a {
+ padding-left: 37px;
+}
+
+.nav-third-level li a {
+ padding-left: 55px;
+}
+
+.sidebar-collapse , .sidebar-collapse .nav {
+ background: none;
+}
+
+.sidebar-collapse .nav {
+ padding: 0;
+}
+
+.sidebar-collapse .nav > li > a {
+ color: #B5B5B5;
+ background: transparent;
+ text-shadow: none;
+}
+
+.sidebar-collapse > .nav > li > a {
+ padding: 12px 10px;
+}
+
+.sidebar-collapse > .nav > li {
+ border-bottom: 1px solid rgba(107, 108, 109, 0.19);
+}
+
+ul.nav.nav-second-level.collapse.in {
+ background: #17191B;
+}
+
+.sidebar-collapse .nav > li > a:hover,
+.sidebar-collapse .nav > li > a:focus {
+ outline: 0;
+}
+
+.navbar-side {
+ border: none;
+ /* background-color: transparent; */
+}
+
+.top-navbar {
+ background: #fff;
+ border-bottom: none;
+}
+
+.top-navbar .nav > li > a > i {
+ margin-right: 2px;
+}
+
+.top-navbar .navbar-brand:hover {
+ color: #2DAFCB;
+ background-color: rgb(43, 46, 51);
+}
+
+.dropdown-user li {
+ margin: 8px 0;
+}
+
+.navbar-default {
+ border: 0px solid black;
+ /* background:rgba(0, 0, 0, 0.774); */
+}
+
+.navbar-header {
+ background: transparent;
+}
+
+.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
+ background-color: #B40101;
+}
+
+.navbar-default .navbar-toggle {
+ border-color: #fff;
+}
+
+.navbar-default .navbar-toggle .icon-bar {
+ background-color: #FFF;
+}
+
+.nav > li > a > i {
+ margin-right: 10px;
+ color: #666;
+}
+/*----------------------------------------------
+ UI ELEMENTS STYLES
+------------------------------------------------*/
+.btn-circle {
+ width: 50px;
+ height: 50px;
+ padding: 6px 0;
+ -webkit-border-radius: 25px;
+ -moz-border-radius: 25px;
+ border-radius: 25px;
+ text-align: center;
+ font-size: 12px;
+ line-height: 1.428571429;
+}
+
+/*----------------------------------------------
+ MEDIA QUERIES
+------------------------------------------------*/
+
+
+
+@media(max-width:768px) {
+ #page-wrapper {
+ margin: 0 0 0 260px;
+ padding: 15px 30px;
+ /* min-height: 1200px; */
+ }
+ .navbar-header{
+ height:60px;
+ width:100%;
+ display: flex;
+ justify-content: space-between;
+ background: #32323a;
+ }
+ .navbar-header .navbar-brand{
+ width:100%;
+ }
+
+ .navbar-side {
+ z-index: 1;
+ width: 100%;
+ position: fixed;
+ top: 120px;
+ }
+
+ .navbar {
+ border-radius: 0px;
+ }
+}
+
+
diff --git a/src/component/sidenav/index.js b/src/component/sidenav/index.js
new file mode 100644
index 0000000..21ebc66
--- /dev/null
+++ b/src/component/sidenav/index.js
@@ -0,0 +1,86 @@
+import React from 'react';
+
+
+class SideNav extends React.Component{
+ constructor(props){
+ super(props);
+ }
+ render(){
+ return(
+
+ )
+ }
+}
+
+export default SideNav;
\ No newline at end of file
diff --git a/src/component/topnav/index.js b/src/component/topnav/index.js
new file mode 100644
index 0000000..a57a6c7
--- /dev/null
+++ b/src/component/topnav/index.js
@@ -0,0 +1,249 @@
+import React from 'react';
+
+
+class TopNav extends React.Component{
+ constructor(props){
+ super(props);
+ }
+ render(){
+ return(
+
+
+
+
+ In sight
+
+ Toggle navigation
+
+
+
+
+
+
+
+
+ )
+ }
+}
+
+export default TopNav;
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index c664250..e69de29 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +0,0 @@
-#app{
- color:red;
- background:url(./image/hc.jpg);
-}
diff --git a/src/index.html b/src/index.html
index 5330fc6..8ba8423 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,9 +5,12 @@
+
+
+
happy mall admin
- case
+