diff --git a/assets/style/_global.scss b/assets/style/_global.scss
index 15f8037..a1e5bba 100644
--- a/assets/style/_global.scss
+++ b/assets/style/_global.scss
@@ -24,4 +24,9 @@ html{
 img {
     max-width: 100%;
     height: auto;
+}
+
+*{
+    margin: 0;
+    padding: 0;
 }
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 4eaa8d2..7d8bba3 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,13 +1,36 @@
 <template>
   <div class="default">
     <div id="aside" class="page-sidenav" :class="theme">
-      <div class="sidenav">
+      <div class="sidenav h-100">
         <div class="logo px-md-4 py-md-4">
           <a href="#" class="navbar-brand" style="width:140px;">
-            <img v-if="theme=='light'" src="https://theme.nicetheme.xyz/lighthouse/wp-content/themes/Lighthouse-1.0.1/images/logo.png" alt="nicetheme">
-            <img v-if="theme=='dark'" src="https://theme.nicetheme.xyz/lighthouse/wp-content/themes/Lighthouse-1.0.1/images/logo-dark.png" alt="nicetheme">
+            <img
+              v-if="theme=='light'"
+              src="https://theme.nicetheme.xyz/lighthouse/wp-content/themes/Lighthouse-1.0.1/images/logo.png"
+              alt="nicetheme"
+            />
+            <img
+              v-if="theme=='dark'"
+              src="https://theme.nicetheme.xyz/lighthouse/wp-content/themes/Lighthouse-1.0.1/images/logo-dark.png"
+              alt="nicetheme"
+            />
           </a>
         </div>
+        <div class="flex-fill scrollable hover py-lg-0">
+          <ul>
+            <li class="menu-item">
+              <div class="nav-link">
+                <div class="nav-icon">sa</div>
+              </div>
+            </li>
+            <li class="menu-item">
+              <div class="nav-link">sda</div>
+            </li>
+            <li class="menu-item">
+              <div class="nav-link">sda</div>
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
     <div class="page-content" :class="theme">
@@ -20,39 +43,60 @@
 // https://www.runoob.com/bootstrap4/bootstrap4-tutorial.html
 export default {
   components: {},
-  mounted(){
+  mounted() {
     console.log(this);
-    
   },
-  computed:{
-    theme(){
-      return this.$store.getters.theme
+  computed: {
+    theme() {
+      return this.$store.getters.theme;
     }
   }
 };
 </script>
 <style lang="scss" scoped>
-
 .default {
   display: flex;
   .page-sidenav {
     z-index: 1000;
     min-width: 13rem;
     height: 100vh;
-    &.light{
+    &.light {
       background-color: #f4f6fb;
     }
-    &.dark{
+    &.dark {
       background-color: #000000;
     }
+    .sidenav {
+      display: flex;
+      flex-direction: column;
+      .menu-item {
+        list-style: none;
+        .nav-link {
+          position: relative;
+          font-size: 0.875rem;
+          padding: 0 0.75rem;
+          display: -ms-flexbox;
+          display: flex;
+          flex-wrap: nowrap;
+          opacity: 0.6;
+          .nav-icon{
+            width: 40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+      }
+    }
   }
   .page-content {
-    flex: 1 1 auto!important;
+    flex: 1 1 auto !important;
     min-height: 100vh;
-    &.light{
+    &.light {
       background-color: #ffffff;
     }
-    &.dark{
+    &.dark {
       background-color: #000000;
     }
   }
diff --git a/nuxt.config.js b/nuxt.config.js
index 13455cc..0c4b396 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,5 +1,5 @@
 const path = require('path');
-console.log(__dirname+'/assets/style/_global.scss');
+console.log(__dirname + '/assets/style/_global.scss');
 
 module.exports = {
   mode: 'universal',
@@ -10,17 +10,17 @@ module.exports = {
     // process.env.npm_package_name || 
     title: 'Beer',
     meta: [{
-        charset: 'utf-8'
-      },
-      {
-        name: 'viewport',
-        content: 'width=device-width, initial-scale=1, shrink-to-fit=no'
-      },
-      {
-        hid: 'description',
-        name: 'description',
-        content: process.env.npm_package_description || ''
-      }
+      charset: 'utf-8'
+    },
+    {
+      name: 'viewport',
+      content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'
+    },
+    {
+      hid: 'description',
+      name: 'description',
+      content: process.env.npm_package_description || ''
+    }
     ],
     link: [{
       rel: 'icon',
@@ -55,6 +55,7 @@ module.exports = {
    ** Plugins to load before mounting the App
    */
   plugins: [
+    // { src: "~/plugins/flexible", ssr: false },
     '~/plugins/global',
     '~/plugins/axios',
     '~/plugins/global-components'
@@ -62,7 +63,7 @@ module.exports = {
   /*
    ** Nuxt.js dev-modules
    */
-  devModules: [],
+  buildModules: [],
   /*
    ** Nuxt.js modules
    */
@@ -95,6 +96,30 @@ module.exports = {
       config.resolve.alias['@assets'] = path.resolve(__dirname, 'assets');
       config.resolve.alias['@components'] = path.resolve(__dirname, 'components');
       config.resolve.alias['@images'] = path.resolve(__dirname, 'assets', 'images');
+    },
+    postcss: {
+      // 添加插件名称作为键，参数作为值
+      // 使用npm或yarn安装它们
+      plugins: {
+        // 通过传递 false 来禁用插件
+        // 'postcss-url': false,
+        // 'postcss-nested': {},
+        // 'postcss-responsive-type': {},
+        // 'postcss-hexrgba': {}
+        'postcss-pxtorem': {
+          rootValue: 16,
+          propList: ['*'],
+          unitPrecision: 5, //保留小数位
+          // selectorBlackList: [''], //过滤的类名
+          // replace: true, //默认直接替换属性
+          // mediaQuery: false,
+          minPixelValue: 12 //所有小于设置的样式都不被转换
+        }
+      },
+      preset: {
+        // 更改postcss-preset-env 设置
+        autoprefixer: true
+      }
     }
   },
   serverMiddleware: [
diff --git a/package-lock.json b/package-lock.json
index 22733b6..8b84a72 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5462,6 +5462,11 @@
         "invert-kv": "^1.0.0"
       }
     },
+    "lib-flexible": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/lib-flexible/-/lib-flexible-0.3.2.tgz",
+      "integrity": "sha1-BvWnSDIxSi01wSA5vJw8otrqpCY="
+    },
     "lie": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
diff --git a/package.json b/package.json
index 9458ed2..c277b62 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,9 @@
     "vuex-persistedstate": "^2.5.4"
   },
   "devDependencies": {
-    "nodemon": "^1.18.9"
+    "autoprefixer": "^9.7.2",
+    "nodemon": "^1.18.9",
+    "postcss-pxtorem": "^4.0.1"
   },
   "config": {
     "nuxt": {
diff --git a/pages/index.vue b/pages/index.vue
index a4afe88..4afbcbb 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +1,7 @@
 <template>
-  <div @click="change">asdsaddsa</div>
+  <div @click="change">
+    <input class="switch switch-anim" type="checkbox" checked />//html部分
+  </div>
   <!-- {{data.category[0]}} -->
 </template>
 
@@ -11,13 +13,61 @@ export default {
       data
     };
   },
-  methods:{
-    change(){
-      this.$store.dispatch('changeTheme')
+  methods: {
+    change() {
+      this.$store.dispatch("changeTheme");
     }
   }
 };
 </script>
 
-<style lang='scss'>
+<style lang='scss' scoped>
+.switch {
+  width: 57px;
+  height: 28px;
+  position: relative;
+  border: 1px solid #dfdfdf;
+  background-color: #fdfdfd;
+  box-shadow: #dfdfdf 0 0 0 0 inset;
+  border-radius: 20px;
+  background-clip: content-box;
+  display: inline-block;
+  -webkit-appearance: none;
+  user-select: none;
+  outline: none;
+}
+.switch:before {
+  content: "";
+  width: 26px;
+  height: 26px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 20px;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+}
+.switch:checked {
+  border-color: #64bd63;
+  box-shadow: #64bd63 0 0 0 16px inset;
+  background-color: #64bd63;
+}
+.switch:checked:before {
+  left: 30px;
+}
+.switch.switch-anim {
+  transition: border cubic-bezier(0, 0, 0, 1) 0.4s,
+    box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
+}
+.switch.switch-anim:before {
+  transition: left 0.3s;
+}
+.switch.switch-anim:checked {
+  box-shadow: #64bd63 0 0 0 16px inset;
+  background-color: #64bd63;
+  transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
+}
+.switch.switch-anim:checked:before {
+  transition: left 0.3s;
+}
 </style>
diff --git a/plugins/flexible.js b/plugins/flexible.js
new file mode 100644
index 0000000..c748ed9
--- /dev/null
+++ b/plugins/flexible.js
@@ -0,0 +1,118 @@
+
+;(function(win, lib) {
+    var doc = win.document;
+    var docEl = doc.documentElement;
+    var metaEl = doc.querySelector('meta[name="viewport"]');
+    var flexibleEl = doc.querySelector('meta[name="flexible"]');
+    var dpr = 0;
+    var scale = 0;
+    var tid;
+    var flexible = lib.flexible || (lib.flexible = {});
+
+    if (metaEl) {
+        console.warn('将根据已有的meta标签来设置缩放比例');
+        var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
+        if (match) {
+            scale = parseFloat(match[1]);
+            dpr = parseInt(1 / scale);
+        }
+    } else if (flexibleEl) {
+        var content = flexibleEl.getAttribute('content');
+        if (content) {
+            var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
+            var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
+            if (initialDpr) {
+                dpr = parseFloat(initialDpr[1]);
+                scale = parseFloat((1 / dpr).toFixed(2));
+            }
+            if (maximumDpr) {
+                dpr = parseFloat(maximumDpr[1]);
+                scale = parseFloat((1 / dpr).toFixed(2));
+            }
+        }
+    }
+
+    if (!dpr && !scale) {
+        var isAndroid = win.navigator.appVersion.match(/android/gi);
+        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
+        var devicePixelRatio = win.devicePixelRatio;
+        if (isIPhone) {
+            // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
+            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
+                dpr = 3;
+            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
+                dpr = 2;
+            } else {
+                dpr = 1;
+            }
+        } else {
+            // 其他设备下，仍旧使用1倍的方案
+            dpr = 1;
+        }
+        scale = 1 / dpr;
+    }
+
+    docEl.setAttribute('data-dpr', dpr);
+    if (!metaEl) {
+        metaEl = doc.createElement('meta');
+        metaEl.setAttribute('name', 'viewport');
+        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
+        if (docEl.firstElementChild) {
+            docEl.firstElementChild.appendChild(metaEl);
+        } else {
+            var wrap = doc.createElement('div');
+            wrap.appendChild(metaEl);
+            doc.write(wrap.innerHTML);
+        }
+    }
+
+    function refreshRem(){
+        var width = docEl.getBoundingClientRect().width;
+        if (width / dpr > 540) {
+            width = 540 * dpr;
+        }
+        var rem = width / 10;
+        docEl.style.fontSize = rem + 'px';
+        flexible.rem = win.rem = rem;
+    }
+
+    win.addEventListener('resize', function() {
+        clearTimeout(tid);
+        tid = setTimeout(refreshRem, 300);
+    }, false);
+    win.addEventListener('pageshow', function(e) {
+        if (e.persisted) {
+            clearTimeout(tid);
+            tid = setTimeout(refreshRem, 300);
+        }
+    }, false);
+
+    if (doc.readyState === 'complete') {
+        doc.body.style.fontSize = 12 * dpr + 'px';
+    } else {
+        doc.addEventListener('DOMContentLoaded', function(e) {
+            doc.body.style.fontSize = 12 * dpr + 'px';
+        }, false);
+    }
+
+
+    refreshRem();
+
+    flexible.dpr = win.dpr = dpr;
+    flexible.refreshRem = refreshRem;
+    flexible.rem2px = function(d) {
+        var val = parseFloat(d) * this.rem;
+        if (typeof d === 'string' && d.match(/rem$/)) {
+            val += 'px';
+        }
+        return val;
+    }
+    flexible.px2rem = function(d) {
+        var val = parseFloat(d) / this.rem;
+        if (typeof d === 'string' && d.match(/px$/)) {
+            val += 'rem';
+        }
+        return val;
+    }
+
+})(window, window['lib'] || (window['lib'] = {}));
diff --git a/plugins/flexible.js.zip b/plugins/flexible.js.zip
new file mode 100644
index 0000000..65ee5f6
Binary files /dev/null and b/plugins/flexible.js.zip differ