Начата работа над компонентом Reader

client/components/App.vue

@@ -35,7 +35,7 @@
             </el-menu>
         </el-aside>
 
-        <el-main v-if="showMain">
+        <el-main v-if="showMain" :style="{padding: (isReaderActive ? 0 : '5px')}">
             <keep-alive>
                 <router-view></router-view>
             </keep-alive>
@@ -132,8 +132,12 @@ class App extends Vue {
         return (this.mode != 'reader' && this.mode != 'omnireader');
     }
 
+    get isReaderActive() {
+        return this.rootRoute == '/reader';
+    }
+
     get showMain() {
-        return (this.showAsideBar || this.rootRoute == '/reader');
+        return (this.showAsideBar || this.isReaderActive);
     }
 }
 //-----------------------------------------------------------------------------
@@ -161,9 +165,9 @@ class App extends Vue {
     background-color: #ccc;
     color: #000;
 }
-  
+
 .el-main {
-    padding: 5px;
+    padding: 0;
     background-color: #E6EDF4;
     color: #000;
 }

client/components/Reader/Reader.vue

@@ -1,6 +1,18 @@
 <template>
     <el-container>
-        Раздел Reader в разработке
+        <el-header height='50px'>
+            <el-button plain class="tool-button" @click="doBack"><i class="el-icon-back"></i></el-button>
+            <div class="space"></div>
+            <el-button plain class="tool-button" @click="" ><i class="el-icon-arrow-left"></i></el-button>
+            <el-button plain class="tool-button" @click="" ><i class="el-icon-arrow-right"></i></el-button>
+            <div class="space"></div>
+            <el-button plain class="tool-button" @click=""><i class="el-icon-rank"></i></el-button>
+
+
+        </el-header>
+
+        <el-main>
+        </el-main>
     </el-container>
 </template>
 
@@ -15,6 +27,49 @@ class Reader extends Vue {
     created() {
     }
 
+    doBack() {
+    }
 }
 //-----------------------------------------------------------------------------
+//, .tool-button:focus, .tool-button:active, .tool-button:hover
 </script>
+
+<style scoped>
+i {
+    font-size: 240%;
+}
+
+.el-container {
+    padding: 0;
+    margin: 0;
+    height: 100%;
+}
+
+.el-header {
+    padding-left: 7px;
+    background-color: #1B695F;
+    color: #000;
+}
+  
+.el-main {
+    padding: 0;
+    margin: 0;
+    background-color: #EBE2C9;
+    color: #000;
+}
+
+.tool-button {
+    margin: 0;
+    padding: 0;
+    background-color: #E6EDF4;
+    margin-top: 5px;
+    height: 38px;
+    width: 38px;
+    border: 0;
+}
+
+.space {
+    width: 10px;
+    display: inline-block;
+}
+</style>

client/element.js

@@ -23,6 +23,9 @@ import './theme/menu-item.css';
 import ElButton from 'element-ui/lib/button';
 import './theme/button.css';
 
+import ElCheckbox from 'element-ui/lib/checkbox';
+import './theme/checkbox.css';
+
 import ElTabs from 'element-ui/lib/tabs';
 import './theme/tabs.css';
 
@@ -35,6 +38,9 @@ import './theme/container.css';
 import ElAside from 'element-ui/lib/aside';
 import './theme/aside.css';
 
+import ElHeader from 'element-ui/lib/header';
+import './theme/header.css';
+
 import ElMain from 'element-ui/lib/main';
 import './theme/main.css';
 
@@ -42,8 +48,8 @@ const ElNotification = () => import('element-ui/lib/notification');
 import './theme/notification.css';
 
 const components = {
-    ElMenu, ElMenuItem, ElButton, ElTabs, ElTabPane,
-    ElContainer, ElAside, ElMain,
+    ElMenu, ElMenuItem, ElButton, ElCheckbox, ElTabs, ElTabPane,
+    ElContainer, ElAside, ElMain, ElHeader,
     ElNotification
 };