diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..4a7b224
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "endOfLine": "lf",
+  "printWidth": 120,
+  "trailingComma": "none",
+  "semi": false,
+  "htmlWhitespaceSensitivity": "strict",
+  "vueIndentScriptAndStyle": true
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 71c9234..57f5563 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1138,6 +1138,12 @@
         "postcss": "^7.0.0"
       }
     },
+    "@mdi/js": {
+      "version": "5.8.55",
+      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-5.8.55.tgz",
+      "integrity": "sha512-2bvln56SW6V/nSDC/0/NTu1bMF/CgSyZox8mcWbAPWElBN3UYIrukKDUckEER8ifr8X2YJl1RLKQqi7T7qLzmg==",
+      "dev": true
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npm.taobao.org/@mrmlnc/readdir-enhanced/download/@mrmlnc/readdir-enhanced-2.2.1.tgz",
@@ -1891,6 +1897,13 @@
             "yallist": "^2.1.2"
           }
         },
+        "prettier": {
+          "version": "1.19.1",
+          "resolved": "https://registry.npm.taobao.org/prettier/download/prettier-1.19.1.tgz?cache=0&sync_timestamp=1606521202472&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fprettier%2Fdownload%2Fprettier-1.19.1.tgz",
+          "integrity": "sha1-99f1/4qc2HKnvkyhQglZVqYHl8s=",
+          "dev": true,
+          "optional": true
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
@@ -4628,6 +4641,22 @@
       "integrity": "sha1-mS0xKc999ocLlsV4WMJJoSD4uLU=",
       "dev": true
     },
+    "epubjs": {
+      "version": "0.3.88",
+      "resolved": "https://registry.npmjs.org/epubjs/-/epubjs-0.3.88.tgz",
+      "integrity": "sha512-VRumULpUELYmYwzypyfbDwoSIqDp2LXOXCtY3o55o3YDW5Zm32UjtZuX/xaWFGqyZORNNMWWQ8VlMaY1djnDYg==",
+      "requires": {
+        "@types/localforage": "0.0.34",
+        "core-js": "^3.6.5",
+        "event-emitter": "^0.3.5",
+        "jszip": "^3.4.0",
+        "localforage": "^1.7.3",
+        "lodash": "^4.17.15",
+        "marks-pane": "^1.0.9",
+        "path-webpack": "0.0.3",
+        "xmldom": "^0.3.0"
+      }
+    },
     "epubjs-myh": {
       "version": "0.3.111",
       "resolved": "https://registry.npmjs.org/epubjs-myh/-/epubjs-myh-0.3.111.tgz",
@@ -7078,8 +7107,8 @@
     },
     "klona": {
       "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
-      "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==",
+      "resolved": "https://registry.npm.taobao.org/klona/download/klona-2.0.4.tgz",
+      "integrity": "sha1-e7Hjr/sMuGJFR+9+j2cI6i4538A=",
       "dev": true
     },
     "launch-editor": {
@@ -9038,11 +9067,9 @@
       "dev": true
     },
     "prettier": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npm.taobao.org/prettier/download/prettier-1.19.1.tgz?cache=0&sync_timestamp=1606521202472&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fprettier%2Fdownload%2Fprettier-1.19.1.tgz",
-      "integrity": "sha1-99f1/4qc2HKnvkyhQglZVqYHl8s=",
-      "dev": true,
-      "optional": true
+      "version": "2.2.1",
+      "resolved": "https://registry.npm.taobao.org/prettier/download/prettier-2.2.1.tgz?cache=0&sync_timestamp=1606521202472&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fprettier%2Fdownload%2Fprettier-2.2.1.tgz",
+      "integrity": "sha1-eVoaeN1S8HPaDNQrIfnJE4GSP/U="
     },
     "pretty-error": {
       "version": "2.1.2",
@@ -9668,8 +9695,8 @@
     },
     "sass-loader": {
       "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.1.0.tgz",
-      "integrity": "sha512-ZCKAlczLBbFd3aGAhowpYEy69Te3Z68cg8bnHHl6WnSCvnKpbM6pQrz957HWMa8LKVuhnD9uMplmMAHwGQtHeg==",
+      "resolved": "https://registry.npm.taobao.org/sass-loader/download/sass-loader-10.1.0.tgz",
+      "integrity": "sha1-Fyf8wMMqs+sZfNph14rfTpF0pLM=",
       "dev": true,
       "requires": {
         "klona": "^2.0.4",
@@ -9681,8 +9708,8 @@
       "dependencies": {
         "loader-utils": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
+          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
           "dev": true,
           "requires": {
             "big.js": "^5.2.2",
@@ -9692,8 +9719,8 @@
         },
         "lru-cache": {
           "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "resolved": "https://registry.npm.taobao.org/lru-cache/download/lru-cache-6.0.0.tgz",
+          "integrity": "sha1-bW/mVw69lqr5D8rR2vo7JWbbOpQ=",
           "dev": true,
           "requires": {
             "yallist": "^4.0.0"
@@ -9701,8 +9728,8 @@
         },
         "schema-utils": {
           "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
-          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+          "resolved": "https://registry.npm.taobao.org/schema-utils/download/schema-utils-3.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fschema-utils%2Fdownload%2Fschema-utils-3.0.0.tgz",
+          "integrity": "sha1-Z1AvaqK2ai1AMrQnmilEl4oJE+8=",
           "dev": true,
           "requires": {
             "@types/json-schema": "^7.0.6",
@@ -9712,8 +9739,8 @@
         },
         "semver": {
           "version": "7.3.4",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
-          "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==",
+          "resolved": "https://registry.npm.taobao.org/semver/download/semver-7.3.4.tgz?cache=0&sync_timestamp=1606854493763&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-7.3.4.tgz",
+          "integrity": "sha1-J6qn0uTKdkUvmNOt0JOnLJQ+3Jc=",
           "dev": true,
           "requires": {
             "lru-cache": "^6.0.0"
@@ -9721,8 +9748,8 @@
         },
         "yallist": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "resolved": "https://registry.npm.taobao.org/yallist/download/yallist-4.0.0.tgz",
+          "integrity": "sha1-m7knkNnA7/7GO+c1GeEaNQGaOnI=",
           "dev": true
         }
       }
@@ -10798,6 +10825,11 @@
         "neo-async": "^2.6.0"
       }
     },
+    "throttle-debounce": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
+      "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npm.taobao.org/through/download/through-2.3.8.tgz",
@@ -11292,6 +11324,15 @@
       "integrity": "sha1-sj5DWK+oogL+ehAK8fX4g/AgB+4=",
       "dev": true
     },
+    "v-viewer": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/v-viewer/-/v-viewer-1.5.1.tgz",
+      "integrity": "sha512-Q5ICKzmYQD0qTf+hti2Lhgy6UYY2zgFr+YrN9a3yPgr7pOjYrG405Pz4+6Z6FXlhdhGysCWFJUNCI2tsIyvjWQ==",
+      "requires": {
+        "throttle-debounce": "^2.0.1",
+        "viewerjs": "^1.5.0"
+      }
+    },
     "v8-compile-cache": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz",
@@ -11331,6 +11372,11 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "viewerjs": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/viewerjs/-/viewerjs-1.9.0.tgz",
+      "integrity": "sha512-2D1OdGatb5aCZbZvaCdbJYuoDObjD9ITe7GZp0SoG7rgw3arOIZoIO1ygmfG+I4+RvEuDo+aZ75kNgwmYS9j3w=="
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz",
diff --git a/package.json b/package.json
index cac5bfe..73e9d8a 100644
--- a/package.json
+++ b/package.json
@@ -9,13 +9,17 @@
   },
   "dependencies": {
     "core-js": "^3.8.1",
+    "epubjs": "^0.3.88",
     "epubjs-myh": "^0.3.111",
+    "prettier": "^2.2.1",
+    "v-viewer": "^1.5.1",
     "vue": "^2.6.12",
     "vue-router": "^3.2.0",
     "vuetify": "^2.3.21",
     "vuex": "^3.4.0"
   },
   "devDependencies": {
+    "@mdi/js": "^5.8.55",
     "@vue/cli-plugin-babel": "~4.5.9",
     "@vue/cli-plugin-eslint": "~4.5.9",
     "@vue/cli-plugin-router": "^4.5.9",
@@ -42,7 +46,9 @@
     "parserOptions": {
       "parser": "babel-eslint"
     },
-    "rules": {}
+    "rules": {
+      "no-unused-vars": "off"
+    }
   },
   "browserslist": [
     "> 1%",
diff --git a/public/Test1.epub b/public/Test1.epub
new file mode 100644
index 0000000..99578b7
Binary files /dev/null and b/public/Test1.epub differ
diff --git a/public/Test2.epub b/public/Test2.epub
new file mode 100644
index 0000000..1f7d6f6
Binary files /dev/null and b/public/Test2.epub differ
diff --git a/public/index.html b/public/index.html
index bc51465..6039ec9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -7,7 +7,6 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
   </head>
   <body>
     <noscript>
diff --git a/src/App.vue b/src/App.vue
index 3943904..c9b0e78 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,32 +1,7 @@
 <template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
-  </div>
+  <v-app><router-view /></v-app>
 </template>
 
 <style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
+@import "assets/styles/default";
 </style>
diff --git a/src/assets/styles/default.scss b/src/assets/styles/default.scss
new file mode 100644
index 0000000..d5d63c4
--- /dev/null
+++ b/src/assets/styles/default.scss
@@ -0,0 +1,11 @@
+body {
+  padding: 0 !important;
+}
+
+body::-webkit-scrollbar {
+  display: none;
+}
+
+html {
+  scrollbar-width: none;
+}
diff --git a/src/assets/styles/read.scss b/src/assets/styles/read.scss
new file mode 100644
index 0000000..a421e92
--- /dev/null
+++ b/src/assets/styles/read.scss
@@ -0,0 +1,3 @@
+.duokan-image-single img{
+  margin: 5px 0;
+}
\ No newline at end of file
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 8e95071..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-  <v-container>
-    <v-row class="text-center">
-      <v-col cols="12">
-        <v-img
-          :src="require('../assets/logo.svg')"
-          class="my-3"
-          contain
-          height="200"
-        />
-      </v-col>
-
-      <v-col class="mb-4">
-        <h1 class="display-2 font-weight-bold mb-3">
-          Welcome to Vuetify
-        </h1>
-
-        <p class="subheading font-weight-regular">
-          For help and collaboration with other Vuetify developers,
-          <br>please join our online
-          <a
-            href="https://community.vuetifyjs.com"
-            target="_blank"
-          >Discord Community</a>
-        </p>
-      </v-col>
-
-      <v-col
-        class="mb-5"
-        cols="12"
-      >
-        <h2 class="headline font-weight-bold mb-3">
-          What's next?
-        </h2>
-
-        <v-row justify="center">
-          <a
-            v-for="(next, i) in whatsNext"
-            :key="i"
-            :href="next.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ next.text }}
-          </a>
-        </v-row>
-      </v-col>
-
-      <v-col
-        class="mb-5"
-        cols="12"
-      >
-        <h2 class="headline font-weight-bold mb-3">
-          Important Links
-        </h2>
-
-        <v-row justify="center">
-          <a
-            v-for="(link, i) in importantLinks"
-            :key="i"
-            :href="link.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ link.text }}
-          </a>
-        </v-row>
-      </v-col>
-
-      <v-col
-        class="mb-5"
-        cols="12"
-      >
-        <h2 class="headline font-weight-bold mb-3">
-          Ecosystem
-        </h2>
-
-        <v-row justify="center">
-          <a
-            v-for="(eco, i) in ecosystem"
-            :key="i"
-            :href="eco.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ eco.text }}
-          </a>
-        </v-row>
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
-
-<script>
-  export default {
-    name: 'HelloWorld',
-
-    data: () => ({
-      ecosystem: [
-        {
-          text: 'vuetify-loader',
-          href: 'https://github.com/vuetifyjs/vuetify-loader',
-        },
-        {
-          text: 'github',
-          href: 'https://github.com/vuetifyjs/vuetify',
-        },
-        {
-          text: 'awesome-vuetify',
-          href: 'https://github.com/vuetifyjs/awesome-vuetify',
-        },
-      ],
-      importantLinks: [
-        {
-          text: 'Documentation',
-          href: 'https://vuetifyjs.com',
-        },
-        {
-          text: 'Chat',
-          href: 'https://community.vuetifyjs.com',
-        },
-        {
-          text: 'Made with Vuetify',
-          href: 'https://madewithvuejs.com/vuetify',
-        },
-        {
-          text: 'Twitter',
-          href: 'https://twitter.com/vuetifyjs',
-        },
-        {
-          text: 'Articles',
-          href: 'https://medium.com/vuetify',
-        },
-      ],
-      whatsNext: [
-        {
-          text: 'Explore components',
-          href: 'https://vuetifyjs.com/components/api-explorer',
-        },
-        {
-          text: 'Select a layout',
-          href: 'https://vuetifyjs.com/getting-started/pre-made-layouts',
-        },
-        {
-          text: 'Frequently Asked Questions',
-          href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
-        },
-      ],
-    }),
-  }
-</script>
diff --git a/src/components/ebook/EbookMenu.vue b/src/components/ebook/EbookMenu.vue
new file mode 100644
index 0000000..fa83473
--- /dev/null
+++ b/src/components/ebook/EbookMenu.vue
@@ -0,0 +1,181 @@
+<template>
+  <div>
+    <div v-show="menuShow" class="cover" @click="hide"></div>
+    <v-slide-y-transition>
+      <div v-show="menuShow" class="toolbar justify-center align-center">
+        <v-btn icon class="ml-6">
+          <v-icon size="32">{{ icon.mdiArrowLeft }}</v-icon>
+        </v-btn>
+        <v-spacer />
+        <v-btn icon class="mr-6">
+          <v-icon size="32">{{ icon.mdiMagnify }}</v-icon>
+        </v-btn>
+      </div></v-slide-y-transition
+    >
+    <v-slide-y-reverse-transition>
+      <div v-show="menuShow" class="menu">
+        <div class="text-center pt-3">{{ readSection }}({{ progress / 10 }}%)</div>
+        <div class="d-flex progress-wrapper pb-3">
+          <v-btn :disabled="!navigation" @click="prevSection">上一章</v-btn>
+          <v-slider
+            @end="change2"
+            @mouseup="change(true)"
+            @mousedown="change(false)"
+            :disabled="!bookAvailable"
+            max="1000"
+            min="0"
+            hide-details
+            v-model="progress"
+            class="px-3"
+          />
+          <v-btn :disabled="!navigation" @click="nextSection">下一章</v-btn>
+        </div>
+        <div class="d-flex flex-row menu-item">
+          <v-spacer end="change" v-for="(menuIcon, i) in menuIcons" :key="i" class="d-flex justify-center align-center">
+            <v-btn icon>
+              <v-icon size="28">{{ menuIcon }}</v-icon>
+            </v-btn>
+          </v-spacer>
+        </div>
+      </div>
+    </v-slide-y-reverse-transition>
+  </div>
+</template>
+
+<script>
+  import { icon } from '@/plugins/vuetify'
+  import { mapActions, mapGetters, mapMutations } from 'vuex'
+
+  export default {
+    name: 'EbookMenu',
+    data() {
+      return {
+        icon: icon,
+        menuIcons: [icon.mdiFormatListBulleted, icon.mdiWhiteBalanceSunny, icon.mdiFormatSize],
+        isChange: false,
+        promise: null,
+      }
+    },
+    computed: {
+      ...mapGetters(['menuShow']),
+      bookAvailable() {
+        return this.$store.state.read.bookAvailable
+      },
+      readSection() {
+        return this.$store.getters.readSection
+      },
+      book() {
+        return this.$store.state.read.book
+      },
+      navigation() {
+        return this.$store.state.read.navigation
+      },
+      section() {
+        return this.$store.state.read.section
+      },
+      progress: {
+        get() {
+          return this.$store.state.read.readProgress
+        },
+        set(value) {
+          this.updateReadProgress(value)
+          if (this.isChange) {
+            const cfi = this.book.locations.cfiFromPercentage(value / 1000)
+            this.display(cfi).then(() => {
+              this.isChange = false
+              this.refreshLocation([true, false])
+            })
+          }
+        }
+      }
+    },
+    methods: {
+      ...mapMutations(['updateReadProgress', 'updateSection', 'updateMenuShow']),
+      ...mapActions(['display', 'refreshLocation']),
+      change(value) {
+        this.isChange = value
+      },
+      change2(num) {
+        const cfi = this.book.locations.cfiFromPercentage(num / 1000)
+        this.display(cfi).then(() => {
+          this.refreshLocation([true, false])
+        })
+      },
+      prevSection() {
+        if (!this.promise) {
+          if (this.section > 1) {
+            this.updateSection(this.section - 1)
+            this.displaySection()
+          }
+        }
+      },
+      nextSection() {
+        if (!this.promise) {
+          if (this.section < this.navigation.length) {
+            this.updateSection(this.section + 1)
+            this.displaySection()
+          }
+        }
+      },
+      displaySection() {
+        this.displaySectionPromise().then(() => {
+          setTimeout(() => {
+            this.promise = null
+          }, 150)
+        })
+      },
+      displaySectionPromise() {
+        let vueInstance = this
+        this.promise = new Promise(function (resolve, reject) {
+          vueInstance.display(vueInstance.navigation[vueInstance.section - 1].href).then(() => {
+            vueInstance.refreshLocation([false, true])
+            resolve()
+          })
+        })
+        return this.promise
+      },
+      hide() {
+        this.updateMenuShow(false)
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .toolbar {
+    width: 100%;
+    height: 64px;
+    position: absolute;
+    display: flex;
+    top: 0;
+    left: 0;
+    background: white;
+    box-shadow: 0 8px 8px rgba(#000000, 0.15) !important;
+  }
+
+  .menu {
+    width: 100%;
+    position: absolute;
+    background: white;
+    left: 0;
+    bottom: 0;
+    box-shadow: 0 -8px 8px rgba(#000000, 0.15) !important;
+
+    .progress-wrapper {
+      padding: 5px 4vw;
+    }
+
+    .menu-item {
+      height: 64px;
+      width: 100%;
+    }
+  }
+
+  .cover {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/src/components/ebook/EbookReader.vue b/src/components/ebook/EbookReader.vue
new file mode 100644
index 0000000..0ffb0b3
--- /dev/null
+++ b/src/components/ebook/EbookReader.vue
@@ -0,0 +1,232 @@
+<template>
+  <div v-resize="onResize">
+    <div class="ebook-reader fill-height" :style="{ width: width + 'px' }">
+      <div id="read"></div>
+    </div>
+    <div ref="viewer" v-viewer v-show="false">
+      <img :src="img.src" :alt="img.alt" />
+    </div>
+    <ebook-menu></ebook-menu>
+  </div>
+</template>
+
+<script>
+  import Epub, { EpubCFI } from 'epubjs'
+  import { mapActions, mapGetters, mapMutations } from 'vuex'
+  import { flatten, throttle } from '@/util/read'
+  import styleURL from '@/assets/styles/read.scss'
+  import EbookMenu from '@/components/ebook/EbookMenu'
+
+  export default {
+    name: 'EbookReader',
+    components: { EbookMenu },
+    data() {
+      return {
+        img: {
+          src: null,
+          alt: null
+        },
+        rendition: null,
+      }
+    },
+    computed: {
+      ...mapGetters(['book']),
+      navigation() {
+        return this.$store.state.read.navigation
+      },
+      width() {
+        // 根据文档，在使用显示比例缩放的系统上，scrollLeft可能会为您提供一个十进制值。
+        // 这导致了可能错误的移动位置
+        // 这里将显示的宽度限定为8的倍数来解决问题
+        const screenWidth = Math.round(window.innerWidth)
+        const remainder = screenWidth % 8
+        return screenWidth - remainder
+        // return window.innerWidth
+      }
+    },
+    methods: {
+      ...mapMutations([
+        'updateBook',
+        'updateCover',
+        'updateNavigation',
+        'updateMetadata',
+        'updateBookAvailable',
+        'updateMenuShow'
+      ]),
+      ...mapActions(['refreshLocation']),
+      hide() {},
+      show() {
+        this.updateMenuShow(true)
+      },
+      prevPage() {
+        console.log('上一页')
+        if (this.rendition) {
+          this.rendition.prev().then(() => {
+            this.refreshLocation([true, true])
+          })
+          this.hide()
+        }
+      },
+      nextPage() {
+        console.log('下一页')
+        if (this.rendition) {
+          this.rendition.next().then(() => {
+            this.refreshLocation([true, true])
+          })
+          this.hide()
+        }
+      },
+      handleKeyDown: throttle(function handleKeyDown(e) {
+        switch (e.keyCode) {
+          case 37: //left
+            this.prevPage()
+            break
+          case 39: //right
+            this.nextPage()
+            break
+        }
+      }, 300),
+      handleMouseDown(e) {
+        const time = e.timeStamp - this.timeStart
+        if (this.hide()) return
+        if (e.target.localName === 'a' || e.target.parentNode.localName === 'a') return
+        const path = e.path || e.composedPath()
+        if (e.target.localName === 'img' && path) {
+          const classList = [].concat(...path.map((item) => [].concat.apply([], item.classList)))
+          if (classList.findIndex((item) => item === 'duokan-image-single') !== -1) return
+        }
+        if (time < 200) {
+          if (e.screenX - window.screenX > this.width * 0.75) this.nextPage()
+          else if (e.screenX - window.screenX < this.width * 0.25) this.prevPage()
+          else if (e.y < window.innerHeight * 0.75 && e.y > window.innerHeight * 0.25) this.show()
+        }
+      },
+      initEpub(book) {
+        this.updateBook(book)
+        // 指定渲染的位置和方式
+        this.rendition = book.renderTo('read', {
+          width: '100%',
+          height: window.innerHeight,
+          // flow: 'auto',
+          manager: 'continuous'
+          // snap: true,
+        })
+        this.rendition.display().then(() => {
+          // 只显示一列并且初始渲染第一页的情况下，渲染后第一次翻页一定失败
+          // Ubuntu Chrome出现，Firefox正常，需要更多测试
+          if (this.rendition._layout.divisor === 1) {
+            // this.nextPage()
+          }
+        })
+        this.initEvent()
+        this.parseBook()
+        book.ready
+          .then(() => {
+            // 修改网页title
+            document.title = book.package.metadata.title
+            // return this.book.locations.generate(750 * (window.innerWidth / 375) * bookState.defaultFontSize / 16)
+            return book.locations.generate()
+          })
+          .then(() => {
+            // 书籍加载完毕
+            this.updateBookAvailable(true)
+            this.refreshLocation([true, true])
+          })
+      },
+      initEvent() {
+        let vueInstance = this
+        this.rendition.hooks.content.register(function (contents) {
+          const baseName = contents.cfiBase.match(/\[(.*?)\]/)[1]
+          vueInstance.navigation.forEach((navItem) => {
+            if (navItem.href.indexOf(baseName) !== -1) {
+              const href = navItem.href.match(/\/(.*?)$/)[1]
+              let id = undefined
+              if (href.indexOf('#') !== -1) {
+                id = href.split('#')[1]
+              }
+              if (id) {
+                //得到每个目录的cfi地址
+                const node = contents.document.getElementById(id)
+                const cfi = new EpubCFI(node, contents.cfiBase)
+                navItem.cfi = cfi.toString()
+              }
+            }
+          })
+          contents.addStylesheet(styleURL)
+          const mousewheel = /Firefox/i.test(navigator.userAgent) ? 'DOMMouseScroll' : 'mousewheel'
+          contents.document.addEventListener(
+            mousewheel,
+            (e) => {
+              if (e.detail) {
+                e.detail > 0 ? vueInstance.nextPage() : vueInstance.prevPage()
+              } else {
+                e.deltaY > 0 ? vueInstance.nextPage() : vueInstance.prevPage()
+              }
+            },
+            true
+          )
+          contents.document.querySelectorAll('.duokan-image-single img').forEach((node) => {
+            node.style.boxShadow = 'black 0 0 3px'
+            node.style.cursor = 'pointer'
+            node.style.border = '1px solid white'
+            node.onclick = vueInstance.previewImg
+          })
+          contents.window.addEventListener('keydown', this.handleKeyDown)
+        })
+        //单击事件
+        this.rendition.on('mousedown', (event) => {
+          this.timeStart = event.timeStamp
+        })
+        this.rendition.on('mouseup', this.handleMouseDown)
+        window.addEventListener('keydown', this.handleKeyDown)
+      },
+      parseBook() {
+        this.book.loaded.cover.then((cover) => {
+          this.book.archive.createUrl(cover).then((url) => {
+            this.updateCover(url)
+          })
+        })
+        this.book.loaded.metadata.then((metadata) => {
+          this.updateMetadata(metadata)
+        })
+        this.book.loaded.navigation.then((nav) => {
+          const navItem = flatten(nav.toc)
+          function find(item, levle = 0) {
+            return !item.parent
+              ? levle
+              : find(navItem.filter((parentItem) => parentItem.id === item.parent)[0], ++levle)
+          }
+          navItem.forEach((item) => {
+            item.level = find(item)
+          })
+          this.updateNavigation(navItem)
+        })
+      },
+      previewImg(event) {
+        this.img.src = event.target.src
+        this.img.alt = event.target.alt
+        this.$refs.viewer.$viewer.show()
+      },
+      onResize() {
+        if (this.rendition) {
+          // 无效，不明原因，疑似bug
+          this.rendition.settings.width = this.width
+          this.rendition.resize(this.width, window.innerHeight)
+        }
+      }
+    },
+    destroyed() {
+      window.removeEventListener('keydown', this.handleKeyDown)
+    },
+    mounted() {
+      const fileName = 'Test2.epub'
+      this.initEpub(new Epub(fileName))
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .ebook-reader {
+    //margin: 0 auto;
+  }
+</style>
diff --git a/src/main.js b/src/main.js
index c207f51..38b34fe 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,8 +3,15 @@ import App from './App.vue'
 import vuetify from './plugins/vuetify';
 import router from './router'
 import store from './store'
+import Viewer from 'v-viewer'
+import 'viewerjs/dist/viewer.css'
 
 Vue.config.productionTip = false
+Vue.use(Viewer, {
+  defaultOptions: {
+    navbar: false
+  }
+})
 
 new Vue({
   vuetify,
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index 5bdec19..ccfc286 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -1,7 +1,15 @@
-import Vue from 'vue';
-import Vuetify from 'vuetify/lib/framework';
+import Vue from 'vue'
+import Vuetify from 'vuetify/lib/framework'
+import { mdiMagnify, mdiFormatSize, mdiFormatListBulleted, mdiWhiteBalanceSunny, mdiArrowLeft } from '@mdi/js'
 
-Vue.use(Vuetify);
+Vue.use(Vuetify)
 
-export default new Vuetify({
-});
+export default new Vuetify({})
+
+export const icon = {
+  mdiArrowLeft,
+  mdiMagnify,
+  mdiFormatSize,
+  mdiFormatListBulleted,
+  mdiWhiteBalanceSunny
+}
diff --git a/src/router/index.js b/src/router/index.js
index e44cdcd..ed23881 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,22 +1,13 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
   {
-    path: '/',
-    name: 'Home',
-    component: Home
-  },
-  {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    path: '/read',
+    name: 'Read',
+    component: () => import('../views/ebook/index'),
   }
 ]
 
diff --git a/src/store/index.js b/src/store/index.js
index 332b916..183f183 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import readModule from './read'
 
 Vue.use(Vuex)
 
@@ -11,5 +12,6 @@ export default new Vuex.Store({
   actions: {
   },
   modules: {
+    read: readModule
   }
 })
diff --git a/src/store/read.js b/src/store/read.js
new file mode 100644
index 0000000..63b85b4
--- /dev/null
+++ b/src/store/read.js
@@ -0,0 +1,109 @@
+import { saveReadProgress } from '@/util/read'
+import { EpubCFI } from 'epubjs'
+
+export default {
+  state: {
+    book: null,
+    cover: null,
+    navigation: null,
+    metadata: null,
+    bookAvailable: false,
+    readProgress: 0,
+    section: 1,
+    menuShow: false
+  },
+  getters: {
+    readSection(state) {
+      if (state.navigation) return state.navigation[state.section - 1]?.label
+      else return state.metadata?.title
+    },
+    book(state) {
+      return state.book
+    },
+    menuShow(state) {
+      return state.menuShow
+    }
+  },
+  mutations: {
+    updateBook(state, payload) {
+      state.book = payload
+    },
+    updateCover(state, payload) {
+      state.cover = payload
+    },
+    updateNavigation(state, payload) {
+      state.navigation = payload
+    },
+    updateMetadata(state, payload) {
+      state.metadata = payload
+    },
+    updateBookAvailable(state, payload) {
+      state.bookAvailable = payload
+    },
+    updateReadProgress(state, payload) {
+      state.readProgress = payload
+    },
+    updateSection(state, payload) {
+      state.section = payload
+    },
+    updateMenuShow(state, payload) {
+      state.menuShow = payload
+    }
+  },
+  actions: {
+    refreshLocation({ commit, state }, [isSection, isProgress]) {
+      const currentLocation = state.book.rendition.currentLocation()
+      // console.log(currentLocation)
+      if (currentLocation && currentLocation.start) {
+        const startCfi = currentLocation.start.cfi
+        // if (isSave) saveReadProgress(this.fileName, startCfi)
+        saveReadProgress(state.metadata.title, startCfi)
+        if (state.bookAvailable) {
+          // eslint-disable-next-line no-constant-condition
+          if (isSection) {
+            const endCfi = new EpubCFI(currentLocation.end.cfi)
+            let temp = 0
+            let flag = true
+            for (let i = 0; i < state.navigation.length; ++i) {
+              const navItem = state.navigation[i]
+              let href = navItem.href
+              if (href.indexOf('#') !== -1) href = href.split('#')[0]
+              if (navItem.cfi) {
+                temp = EpubCFI.compare(navItem.cfi, endCfi)
+              } else {
+                const index = state.book.spine.spineItems.findIndex((item) => item.href === href)
+                if (index > endCfi.spinePos) {
+                  temp = 1
+                } else {
+                  temp = -1
+                }
+              }
+              if (flag) {
+                flag = false
+                if (temp === 1) {
+                  commit('updateSection', 0)
+                  break
+                }
+              } else {
+                if (i === state.navigation.length - 1) {
+                  commit('updateSection', i + 1)
+                }
+                if (temp === 1) {
+                  commit('updateSection', i)
+                  break
+                }
+              }
+            }
+          }
+          if (isProgress) {
+            commit('updateReadProgress', Math.floor(currentLocation.start.percentage * 1000))
+          }
+        }
+      }
+    },
+    display({ commit, state }, target) {
+      return state.book.rendition.display(target)
+    }
+  },
+  modules: {}
+}
diff --git a/src/util/read.js b/src/util/read.js
new file mode 100644
index 0000000..d731e6c
--- /dev/null
+++ b/src/util/read.js
@@ -0,0 +1,50 @@
+export function throttle(fn, ms = 160) {
+  // let timeout
+  let start = new Date()
+  return function () {
+    let context = this
+    let args = arguments
+    let curr = new Date() - 0
+    // clearTimeout(timeout)
+    if (curr - start >= ms) {
+      fn.apply(context, args)
+      start = curr
+    } else {
+      // timeout = setTimeout(() => fn.apply(context, args), ms)
+    }
+  }
+}
+
+export function throttle2(fn, ms = 160) {
+  let timeout
+  let start = new Date()
+  return function () {
+    let context = this
+    let args = arguments
+    let curr = new Date() - 0
+    clearTimeout(timeout)
+    if (curr - start >= ms) {
+      fn.apply(context, args)
+      start = curr
+    } else {
+      timeout = setTimeout(() => fn.apply(context, args), ms)
+    }
+  }
+}
+
+export function flatten(array) {
+  return [].concat(...array.map((item) => [].concat(item, ...flatten(item.subitems))))
+}
+
+export function saveReadProgress(fileName, cfi) {
+  let record = JSON.parse(localStorage.getItem(`Reading_Record`) || '{}')
+  if (!record[fileName]) record[fileName] = {}
+  record[fileName].cfi = cfi
+  localStorage.setItem(`Reading_Record`, JSON.stringify(record))
+}
+
+export function GetReadProgress(fileName)
+{
+  let record = JSON.parse(localStorage.getItem(`Reading_Record`) || '{}')
+  return  record.fileName?.cfi
+}
\ No newline at end of file
diff --git a/src/views/About.vue b/src/views/About.vue
deleted file mode 100644
index 3fa2807..0000000
--- a/src/views/About.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
diff --git a/src/views/Home.vue b/src/views/Home.vue
deleted file mode 100644
index 8bd6c57..0000000
--- a/src/views/Home.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'Home',
-  components: {
-    HelloWorld
-  }
-}
-</script>
diff --git a/src/views/ebook/index.vue b/src/views/ebook/index.vue
new file mode 100644
index 0000000..eecdda1
--- /dev/null
+++ b/src/views/ebook/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <ebook-reader></ebook-reader>
+</template>
+
+<script>
+  import EbookReader from '@/components/ebook/EbookReader'
+  export default {
+    name: 'index',
+    components: { EbookReader }
+  }
+</script>
+
+<style scoped></style>
diff --git a/vue.config.js b/vue.config.js
index ef6e86b..18bf4ef 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,5 +1,27 @@
 module.exports = {
-  "transpileDependencies": [
-    "vuetify"
-  ]
-}
\ No newline at end of file
+  transpileDependencies: ['vuetify'],
+  chainWebpack: (config) => {
+    // 特殊处理read.scss
+    {
+      config.module
+        .rule('scss')
+        .oneOf('read.scss')
+        .before('normal')
+        .test(/read\.scss$/)
+
+      config.module
+        .rule('scss')
+        .oneOf('read.scss')
+        .use('file-loader')
+        .loader('file-loader')
+        .options({ name: 'css/[contenthash].css' })
+
+      const cssConfig = config.module.rule('scss').oneOf('normal').uses
+      config.module
+        .rule('scss')
+        .oneOf('read.scss')
+        .uses.set('postcss-loader', cssConfig.get('postcss-loader'))
+        .set('sass-loader', cssConfig.get('sass-loader'))
+    }
+  }
+}