产品-软件锁页面构建

src/product/content/lock_statistics.js

@@ -1,41 +1,42 @@
 import React, { Component } from 'react';
 import { Provider } from 'react-redux';
-import store from './store';
-import Submenu from './submenu';
 // import Content from './content';
 
 //import './product.css';
 
-class Hr extends Component {
+class Lockstatistics extends Component {
   render() {
     //console.log(this.props.store);
     return (
-      <Provider store={store}>
-        <Submenu />
-        <div className="page-content-wrapper">
-        	<header class="page-header" role="banner">
-        		<div class="hidden-md-down dropdown-icon-menu position-relative">
-        			<a href="#" class="header-btn btn js-waves-off" data-action="toggle" data-class="nav-function-hidden" title="隐藏侧栏">
-     						<i class="ni ni-menu"></i>
-     					</a>
-     					<ul>
-	              <li>
-	                <a href="#" class="btn js-waves-off" data-action="toggle" data-class="nav-function-minify" title="迷你侧栏">
-	     								<i class="ni ni-minify-nav"></i>
-	     							</a>
-	              </li>
-	            </ul>
-        		</div>
-        	</header>
-        </div>
-        {/* <Content /> */}
-      </Provider>
-        
+      <div className="page-content-wrapper">
+        <header class="page-header" role="banner">
+          <div class="hidden-md-down dropdown-icon-menu position-relative">
+            <a href="#" class="header-btn btn js-waves-off" data-action="toggle" data-class="nav-function-hidden" title="隐藏侧栏">
+              <i class="ni ni-menu"></i>
+            </a>
+            <ul>
+              <li>
+                <a href="#" class="btn js-waves-off" data-action="toggle" data-class="nav-function-minify" title="迷你侧栏">
+                  <i class="ni ni-minify-nav"></i>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div class="hidden-lg-up">
+            <a href="#" class="header-btn btn press-scale-down waves-effect waves-themed" data-action="toggle" data-class="mobile-nav-on">
+              <i class="ni ni-menu"></i>
+            </a>
+          </div>
+          <h1 class="subheader-title">
+            使用统计
+          </h1>
+        </header>
+      </div>
      
     );
   }
 }
 
-export default Hr;
+export default Lockstatistics;
 
 

src/product/content/lock_store.js

@@ -9,9 +9,48 @@ class Lockstore extends Component {
   render() {
     //console.log(this.props.store);
     return (
-      
-        <div>lockStore</div>
-     
+    	<div className="page-content-wrapper">
+        <header className="page-header" role="banner">
+          <div className="hidden-md-down dropdown-icon-menu position-relative">
+            <a href="#" class="header-btn btn js-waves-off" data-action="toggle" data-class="nav-function-hidden" title="隐藏侧栏">
+              <i className="ni ni-menu"></i>
+            </a>
+            <ul>
+              <li>
+                <a href="#" className="btn js-waves-off" data-action="toggle" data-class="nav-function-minify" title="迷你侧栏">
+                  <i className="ni ni-minify-nav"></i>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div class="hidden-lg-up">
+            <a href="#" class="header-btn btn press-scale-down waves-effect waves-themed" data-action="toggle" data-class="mobile-nav-on">
+     						<i class="ni ni-menu"></i>
+     					</a>
+          </div>
+          <h1 class="subheader-title">
+            公共锁库
+          </h1>
+        </header>
+        <main id="js-page-content" role="main" className="page-content">
+          <div class="row">
+            <div class="col-xl-12">
+              <div id="panel-1" class="panel">
+                <div class="panel-hdr">
+                  <div class="col-auto pr-0">
+                    <div class="input-group input-group-sm bg-white shadow-inset-2">
+                      <input type="text" class="form-control bg-transparent" placeholder="锁号"/>
+                      <div class="input-group-append">
+                        <button class="btn btn-default waves-effect waves-themed" type="button" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="搜索"><i class="fal fa-search"></i></button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
     );
   }
 }

src/product/submenu/index.js

@@ -4,98 +4,75 @@ import { actionCreators } from './store';
 import { BrowserRouter, Route,Link } from 'react-router-dom';
 
 import  Lockstore  from '../content/lock_store.js';
-
+import  Lockstatistics  from '../content/lock_statistics.js';
 
 class Submenu extends PureComponent {
 
     render() {
        // const { inputValue, handleInputFocus,handleInputChange, menu, list } = this.props;
         return (
+
+          
           <BrowserRouter>
+
           <aside className="page-sidebar">
             <div className="page-logo">
-              <a href="#modal-shortcut" className="page-logo-link press-scale-down d-flex align-items-center position-relative" data-toggle="modal">
+              <a href="#modal-shortcut" class="page-logo-link press-scale-down d-flex align-items-center position-relative" data-toggle="modal">
                 <div className="icon-stack fa-2x">
-                  <i class="base base-7 icon-stack-3x opacity-100 color-danger-900 "></i>
-                  <i class="base base-4 icon-stack-2x opacity-100 color-danger-600 "></i>
-                  <i class="fal fa-box icon-stack-1x opacity-100 color-white"></i>
+                  <i className="base base-7 icon-stack-3x opacity-100 color-danger-900 "></i>
+                  <i className="base base-4 icon-stack-2x opacity-100 color-danger-600 "></i>
+                  <i className="fal fa-box icon-stack-1x opacity-100 color-white"></i>
                 </div>
-                <span class="page-logo-text mr-1">产品</span>
-                <span class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
-                <i class="ni ni-my-apps d-inline-block ml-1 fs-lg color-primary-300"></i>
+                <span className="page-logo-text mr-1">产品</span>
+                <span className="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
+                <i className="ni ni-my-apps d-inline-block ml-1 fs-lg color-primary-300"></i>
               </a>
             </div>
-            <nav id="js-primary-nav" class="primary-nav" role="navigation">
-            
-              <ul id="js-nav-menu" class="nav-menu">
-                <li class="active open">
+            <nav id="js-primary-nav" className="primary-nav" role="navigation">
+              <ul id="js-nav-menu" className="nav-menu">
+                <li className="active open">
                   <a href="#" title="软件锁" data-filter-tags="软件锁" class="waves-effect waves-themed">
-                    <i class="fal fa-magic "></i>
-                    <span class="nav-link-text">软件锁</span>
+                    <i className="fal fa-magic "></i>
+                    <span className="nav-link-text">软件锁</span>
                   </a>
                   <ul>
-                    <li class="active">
-                      <Link to='/product'>公共锁库</Link>
+                    <li className="active">
+                      {<Link to='/product/Lockstore'>公共锁库</Link>}
                     </li>
                     <li>
-                      <Link to='/product/lockStatistics'>使用统计</Link>
+                      {<Link to='/product/lockStatistics'>使用统计</Link>}
                     </li>
                   </ul>
-                
                 </li>
-                {/* <li class="">
+                <li className="">
                   <a href="#" title="Application Intel" data-filter-tags="application intel">
-                    <i class="fal fa-cloud "></i>
-                    <span class="nav-link-text">云版管理</span>
+                    <i className="fal fa-cloud "></i>
+                    <span className="nav-link-text">云版管理</span>
                   </a>
                   <ul>
                     <li>
                       <a href="intel_analytics_dashboard.html" title="Analytics Dashboard" data-filter-tags="application intel analytics dashboard">
-                        <span class="nav-link-text">养护云版</span>
+                        <span className="nav-link-text">养护云版</span>
                       </a>
                     </li>
                     <li>
                       <a href="intel_marketing_dashboard.html" title="Marketing Dashboard" data-filter-tags="application intel marketing dashboard">
-                        <span class="nav-link-text">建筑云版</span>
+                        <span className="nav-link-text">建筑云版</span>
                       </a>
                     </li>
                   </ul>
-                </li> */}
+                </li>
               </ul>
               
             </nav>
             
           </aside>
           <div className="page-content-wrapper">
-               
-                <Route path='/product' exact component={Lockstore} ></Route>
-                <Route path='/product/lockStatistics' exact render={()=><div>使用统计</div>} ></Route>
-               
+              <Route path='/product/Lockstore' exact component={Lockstore} ></Route>
+              <Route path='/product/lockStatistics' exact component={Lockstatistics} ></Route>
+            {/*<Route path='/product/lockStatistics' exact render={()=><div>16515</div>} ></Route>*/}
           </div>
-            </BrowserRouter>
-
-            // <div>
-            //     <BrowserRouter>
-            //     <div>
-                    
-            //         <ul>
-            //             <li><Link to='/'>首页</Link></li>
-            //             <li><Link to='/company'>关于</Link></li>
-            //         </ul>
-
-	      	// 		{/* <Route path='/' exact component={Home}></Route>
-	      	// 		<Route path='/detail' exact component={Detail}></Route> */}
-            //         <Route path='/' exact render={()=><div>联系人</div>} ></Route>
-            //         <Route path='/company' exact render={()=><div>公司</div>} ></Route>
-                    
-	      	// 	</div>
-            //     </BrowserRouter>
-            //     {/* innerRef */}
-            //     <div >{inputValue}</div>
-            //     <input onFocus={() => handleInputFocus(list)} ref={(input)=>{this.ivalue=input}} onChange={()=>handleInputChange(this.ivalue)}  />
-            //     {menu}
-            //     <div>{this.getListArea()}</div>
-            // </div>
+          </BrowserRouter>
         );
     }