page

package.json

@@ -9,20 +9,22 @@
   "author": "LevanDu",
   "license": "ISC",
   "devDependencies": {
-    "babel-core": "^6.24.1",
+    "babel-core": "^6.25.0",
     "babel-loader": "^7.0.0",
     "babel-preset-es2015": "^6.24.1",
     "css-loader": "^0.27.3",
     "html-minify-loader": "^1.1.0",
     "html-webpack-plugin": "^2.28.0",
     "html-withimg-loader": "^0.1.16",
     "raw-loader": "^0.5.1",
-    "style-loader": "^0.16.0",
+    "style-loader": "^0.16.1",
     "url-loader": "^0.5.8",
-    "webpack": "^2.3.2",
-    "webpack-dev-server": "^2.4.2"
+    "webpack": "^2.6.1",
+    "webpack-dev-server": "^2.4.5"
   },
   "dependencies": {
-    "avalon2": "^2.2.4"
+    "avalon2": "^2.2.7",
+    "bootstrap": "^3.3.7",
+    "jquery": "^1.12.4"
   }
 }

src/components/App/index.css

@@ -1,3 +1,3 @@
-.container {
+body > .container-full {
     height: 100%;    
 }

src/components/App/index.html

@@ -1,17 +1,4 @@
-<div class="container clearfix">
+<div class="container-full clearfix">
     <ms-sidebar />
-    <ms-page>
-        <ms-topbar slot="topbar" />
-        <article class="main">
-            <ul class="tab">
-                <li class="tab-page" ms-for="p in pages">
-                    <input type="radio" name="page_tab" value="">
-                    <label>{{p.title}}</label>
-                    <article class="tab-content">
-                        {{p.content}}
-                    </article>
-                </li>
-            </ul>
-        </article>
-    </ms-page>
+    <ms-main />
 </div>

src/components/Main/index.css

@@ -0,0 +1,34 @@
+.main {
+    overflow: hidden;
+    height: 100%;
+    position: relative;
+}
+
+.top {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    height: 5rem;
+    background: #f2f3f5;
+    border-bottom: solid 1px #e7e7e7;
+}
+
+.content {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 5rem;
+    bottom: 3.5rem;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.footer {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 3.5rem;
+}

src/components/Main/index.html

@@ -0,0 +1,11 @@
+<article class="main">
+    <header class="top">
+        <ms-topbar />
+    </header>
+    <article class="content">
+        <ms-tab />
+    </article>
+    <footer class="footer">
+        <ms-statusbar />
+    </footer>
+</article>

src/components/Page/index.js → src/components/Main/index.js

@@ -1,7 +1,7 @@
 import avalon, { component } from 'avalon2';
 import './index.css';
 
-component('ms-page', {
+component('ms-main', {
     template: require('./index.html'),
     defaults: {
     }

src/components/Menu/index.css

@@ -1,5 +1,4 @@
 .menu {
-    width: 200px;
     color: #ddd;
 }
 

src/components/SideBar/index.css

@@ -1,5 +1,6 @@
 .sidebar {
     float: left;
+    width: 200px;
     height: 100%;
     background: #234567;
 }

src/components/StatusBar/index.css

@@ -0,0 +1,5 @@
+.statusbar {
+    width: 100%;
+    height: 100%;
+    border-top: solid 1px #ddd;
+}

src/components/StatusBar/index.html

@@ -0,0 +1,3 @@
+<div class="statusbar">
+	this is footer
+</div>

src/components/StatusBar/index.js

@@ -0,0 +1,8 @@
+import avalon, { component } from 'avalon2';
+import './index.css';
+
+component('ms-statusbar', {
+    template: require('./index.html'),
+    defaults: {
+    }
+})

src/components/Tab/index.css

@@ -0,0 +1,53 @@
+.tab {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    list-style: none;
+}
+
+.tab-item {
+    float: left;
+    height: 3rem;
+    line-height: 3rem;
+    border-right: solid .1rem #e7e7e7;
+}
+
+.tab-check {
+    position: absolute;
+    left: -9999px;
+}
+
+.tab-page {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 3.15rem;
+    bottom: 0;
+    display: none;
+    z-index: 101;
+    overflow: auto;
+}
+
+.tab-title {
+    display: block;
+    height: 100%;
+    padding: 0 .8rem;
+}
+
+.tab-line {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 3rem;
+    border-top: solid .15rem #405060;
+    z-index: 100;
+}
+
+.tab-check:checked ~ .tab-title {
+    background: #405060;
+    color: #fff;
+}
+
+.tab-check:checked ~ .tab-page {
+    display: block;
+}

src/components/Tab/index.html

@@ -0,0 +1,26 @@
+<ul class="tab clearfix">
+    <li class="tab-item">
+        <input id="tab_check_0" type="radio" class="tab-check" name="tab_check" checked>
+        <label for="tab_check_0" class="tab-title">Home</label>
+        <span class="tab-line"></span>
+        <div class="tab-page">
+            <ms-homepage />
+        </div>
+    </li>
+    <li class="tab-item">
+        <input id="tab_check_1" type="radio" class="tab-check" name="tab_check">
+        <label for="tab_check_1" class="tab-title">page1</label>
+        <span class="tab-line"></span>
+        <div class="tab-page">
+            <ms-page1 />
+        </div>
+    </li>
+    <li class="tab-item">
+        <input id="tab_check_2" type="radio" class="tab-check" name="tab_check">
+        <label for="tab_check_2" class="tab-title">page2</label>
+        <span class="tab-line"></span>
+        <div class="tab-page">
+            <ms-page1 />
+        </div>
+    </li>
+</ul>

src/components/Tab/index.js

@@ -0,0 +1,8 @@
+import avalon, { component } from 'avalon2';
+import './index.css';
+
+component('ms-tab', {
+    template: require('./index.html'),
+    defaults: {
+    }
+})

src/components/TabBar/index.html

@@ -0,0 +1,3 @@
+<ul class="tabbar">
+	<li><span class=""></span></li>
+</ul>

src/components/TopBar/index.css

@@ -1,9 +1,9 @@
 .topbar {
     position: relative;
-    height: 4rem;
+    width: 100%;
+    height: 100%;
     margin: auto;
     text-align: center;
-    background: #f3f3f4;
 }
 
 .topbar img {

src/components/index.js

@@ -1,6 +1,8 @@
 import './Login';
 import './Menu';
 import './SideBar';
-import './Page';
+import './Main';
 import './App';
 import './Topbar';
+import './StatusBar';
+import './Tab';

src/index.js

@@ -0,0 +1,11 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap';
+import './common/common.css';
+import './components';
+import './pages';
+import avalon, { define } from 'avalon2';
+
+
+define({
+    $id: 'app'
+});

src/pages/Home/index.css

@@ -0,0 +1 @@
+article {}

src/pages/Home/index.html

@@ -0,0 +1,22 @@
+<article>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+</article>

src/pages/Home/index.js

@@ -0,0 +1,10 @@
+import './index.css';
+import avalon, { component } from 'avalon2';
+import { parseCssModule } from '../../common/common';
+
+// console.log(parseCssModule(styles, require('./index.html'));
+
+component('ms-homepage', {
+    template: require('./index.html'),
+    defaults: {}
+})

src/pages/Page1/index.css

@@ -0,0 +1 @@
+article {}

src/pages/Page1/index.html

@@ -0,0 +1,22 @@
+<article>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+</article>

src/pages/Page1/index.js

@@ -0,0 +1,10 @@
+import './index.css';
+import avalon, { component } from 'avalon2';
+import { parseCssModule } from '../../common/common';
+
+// console.log(parseCssModule(styles, require('./index.html'));
+
+component('ms-page1', {
+    template: require('./index.html'),
+    defaults: {}
+})

src/pages/Page2/index.css

@@ -0,0 +1 @@
+article {}

src/pages/Page2/index.html

@@ -0,0 +1,22 @@
+<article>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+	<p>this is home page.</p>
+</article>

src/pages/Page2/index.js

@@ -0,0 +1,10 @@
+import './index.css';
+import avalon, { component } from 'avalon2';
+import { parseCssModule } from '../../common/common';
+
+// console.log(parseCssModule(styles, require('./index.html'));
+
+component('ms-page2', {
+    template: require('./index.html'),
+    defaults: {}
+})

src/pages/index.js

@@ -0,0 +1,3 @@
+import './Home';
+import './Page1';
+import './Page2';