add

5 years ago · f8d3affa19
10 changed files with 372 additions and 86 deletions
--- a/assets/style/border_1px/border_1px.scss
+++ b/assets/style/border_1px/border_1px.scss
@ -0,0 +1,35 @@
+//1px边框的解决方案
+@mixin borderCreator($name, $direction, $type, $color) {
+  .border-#{$name} {
+    @if $direction!= "" {
+      border-#{$direction}: 1px $type $color;
+    } @else {
+      border: 1px $type $color;
+    }
+  }
+
+  @media screen and (-webkit-min-device-pixel-ratio: 2) {
+    .border-#{$name} {
+      @if $direction!= "" {
+        border-#{$direction}: 0.5px $type $color;
+      } @else {
+        border: 0.5px $type $color;
+      }
+    }
+  }
+  @media screen and (-webkit-min-device-pixel-ratio: 3) {
+    .border-#{$name} {
+      @if $direction!= "" {
+        border-#{$direction}: 0.333333px $type $color;
+      } @else {
+        border: 0.333333px $type $color;
+      }
+    }
+  }
+}
+
+@include borderCreator("box", "", solid, #0000002f);
+@include borderCreator("right", "right", solid, #0000002f);
+@include borderCreator("top", "top", solid, #0000002f);
+@include borderCreator("bottom", "bottom", solid, #0000002f);
+@include borderCreator("left", "left", solid, #0000002f);
--- a/assets/style/border_1px/index.scss
+++ b/assets/style/border_1px/index.scss
@ -0,0 +1,35 @@
+//1px边框的解决方案
+@mixin borderCreator($name, $direction, $type, $color) {
+  .border-#{$name} {
+    @if $direction!= "" {
+      border-#{$direction}: 1px $type $color;
+    } @else {
+      border: 1px $type $color;
+    }
+  }
+
+  @media screen and (-webkit-min-device-pixel-ratio: 2) {
+    .border-#{$name} {
+      @if $direction!= "" {
+        border-#{$direction}: 0.5px $type $color;
+      } @else {
+        border: 0.5px $type $color;
+      }
+    }
+  }
+  @media screen and (-webkit-min-device-pixel-ratio: 3) {
+    .border-#{$name} {
+      @if $direction!= "" {
+        border-#{$direction}: 0.333333px $type $color;
+      } @else {
+        border: 0.333333px $type $color;
+      }
+    }
+  }
+}
+
+@include borderCreator("box", "", solid, #0000002f);
+@include borderCreator("right", "right", solid, #0000002f);
+@include borderCreator("top", "top", solid, #0000002f);
+@include borderCreator("bottom", "bottom", solid, #0000002f);
+@include borderCreator("left", "left", solid, #0000002f);
--- a/assets/style/common/index.scss
+++ b/assets/style/common/index.scss
@ -0,0 +1,3 @@
+.h-100{
+    height: 100vh;
+}
--- a/assets/style/_global.scss
+++ b/assets/style/_global.scss
@ -2,6 +2,8 @@

@import "./var.scss";
@import "./common.scss";
+@import "./common/index.scss";
+@import "./border_1px/index.scss";

 html{
    min-width: 100vw;
--- a/layouts/default
+++ b/layouts/default
@ -0,0 +1,124 @@
+<template>
+  <div class="default" :class="theme">
+    <div id="aside" class="page-sidenav">
+      <div class="sidenav h-100 border-right">
+        <div class="logo px-md-4 py-md-4 ">
+          <a href="#" style="width:140px;height:40px;">
+            <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">
+                  <i class="fas fa-beer"></i>
+                </div>
+                <div class="nav-title flex-fill">导航首页</div>
+              </div>
+            </li>
+            <li class="menu-item">
+              <div class="nav-link">
+                <div class="nav-icon"><i class="fas fa-flask"></i></div>
+                <div class="nav-title flex-fill">前端技术</div>
+              </div>
+            </li>
+            <li class="menu-item">
+              <div class="nav-link">
+                <div class="nav-icon"><i class="fas fa-wine-glass-alt"></i></div>
+                <div class="nav-title flex-fill">导航首页</div>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <div>
+          dsa
+        </div>
+      </div>
+    </div>
+    <div class="page-content" :class="theme">
+      <nuxt />
+    </div>
+  </div>
+</template>
+<script>
+// https://theme.nicetheme.xyz/lighthouse/sample-page
+// https://www.runoob.com/bootstrap4/bootstrap4-tutorial.html
+export default {
+  components: {},
+  mounted() {
+    console.log(this);
+  },
+  computed: {
+    theme() {
+      return this.$store.getters.theme;
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.default {
+  display: flex;
+  
+  .page-sidenav {
+    z-index: 1000;
+    min-width: 200px;
+    height: 100vh;
+    color: var(--navbar-color);
+    background:var(--navbar-background);
+    .sidenav {
+      display: flex;
+      flex-direction: column;
+      .logo{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .menu-item {
+        list-style: none;
+        .nav-link {
+          position: relative;
+          // font-size: 0.875rem;
+          // padding: 0 0.75rem;
+          display: flex;
+          flex-wrap: nowrap;
+          opacity: 0.6;
+          cursor: pointer;
+          &:hover {
+            opacity: 1;
+            background: var(--navbar-hover);
+          }
+
+          .nav-icon {
+            width: 40px;
+            height: 40px;
+            line-height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+          .nav-title {
+            height: 40px;
+            line-height: 40px;
+          }
+        }
+      }
+    }
+  }
+  .page-content {
+    flex: 1 1 auto !important;
+    min-height: 100vh;
+     color: var(--navbar-color);
+    background: var(--navbar-background);
+  }
+}
+</style>
--- a/layouts/default.vue
+++ b/layouts/default.vue
@ -1,8 +1,8 @@
 <template>
  <div class="default" :class="theme">
    <div id="aside" class="page-sidenav">
-      <div class="sidenav h-100">
-        <div class="logo px-md-4 py-md-4">
+      <div class="sidenav h-100 border-right">
+        <div class="logo px-md-4 py-md-4 ">
          <a href="#" style="width:140px;height:40px;">
            <img
              v-if="theme=='light'"
@ -40,6 +40,9 @@
            </li>
          </ul>
        </div>
+        <div>
+          dsa
+        </div>
      </div>
    </div>
    <div class="page-content" :class="theme">
@ -63,21 +66,15 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-
 .default {
  display: flex;
+  color: $dark-sidenav-bg;
  .page-sidenav {
    z-index: 1000;
-    min-width: 13rem;
+    min-width: 200px;
    height: 100vh;
    color: var(--navbar-color);
    background:var(--navbar-background);
-    // &.light {
-      // background-color: #f4f6fb;
-    // }
-    // &.dark {
-      // background-color: #000000;
-    // }
    .sidenav {
      display: flex;
      flex-direction: column;
@ -90,9 +87,8 @@ export default {
        list-style: none;
        .nav-link {
          position: relative;
-          font-size: 0.875rem;
-          padding: 0 0.75rem;
-          display: -ms-flexbox;
+          // font-size: 0.875rem;
+          // padding: 0 0.75rem;
          display: flex;
          flex-wrap: nowrap;
          opacity: 0.6;
--- a/nuxt.config.js
+++ b/nuxt.config.js
@ -51,11 +51,14 @@ module.exports = {
  css: [
    // 'reset-css/reset.css',
    'bootstrap/dist/css/bootstrap.css',
-    './assets/style/_global.scss',
+    // './assets/style/global.scss',
    './assets/fontawesome/css/fontawesome.css',
    './assets/fontawesome/css/brands.css',
    './assets/fontawesome/css/solid.css'
  ],
+  styleResources:{
+    scss: './assets/style/global.scss',
+  },
  /*
   ** Plugins to load before mounting the App
   */
@ -75,7 +78,8 @@ module.exports = {
  modules: [
    // 使用bootstrap-vue
    // 'bootstrap-vue/nuxt',
-    '@nuxtjs/axios'
+    '@nuxtjs/axios',
+    '@nuxtjs/style-resources'
  ],
  //https://axios.nuxtjs.org/setup
  axios: {
@ -97,10 +101,11 @@ module.exports = {
     ** You can extend webpack config here
     */
    extend(config, ctx) {
-      config.resolve.alias['@pages'] = path.resolve(__dirname, 'pages');
-      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');
+      config.resolve.alias['@pages'] = path.resolve(__dirname, './pages');
+      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');
+      config.resolve.alias['@global'] = path.resolve(__dirname, './assets', './style','./global.scss');
    },
    postcss: {
      // 添加插件名称作为键，参数作为值
@ -111,15 +116,15 @@ module.exports = {
        // 'postcss-nested': {},
        // 'postcss-responsive-type': {},
        // 'postcss-hexrgba': {}
-        'postcss-pxtorem': {
-          rootValue: 16,
-          propList: ['*'],
-          unitPrecision: 5, //保留小数位
-          // selectorBlackList: [''], //过滤的类名
-          // replace: true, //默认直接替换属性
-          // mediaQuery: false,
-          minPixelValue: 12 //所有小于设置的样式都不被转换
-        }
+        // 'postcss-pxtorem': {
+        //   rootValue: 16,
+        //   propList: ['*'],
+        //   unitPrecision: 5, //保留小数位
+        //   // selectorBlackList: [''], //过滤的类名
+        //   // replace: true, //默认直接替换属性
+        //   // mediaQuery: false,
+        //   // minPixelValue: 12 //所有小于设置的样式都不被转换
+        // }
      },
      preset: {
        // 更改postcss-preset-env 设置
--- a/package-lock.json
+++ b/package-lock.json
@ -1151,6 +1151,16 @@
        "http-proxy-middleware": "^0.19.1"
      }
    },
+    "@nuxtjs/style-resources": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/style-resources/-/style-resources-1.0.0.tgz",
+      "integrity": "sha512-tDRcC/pm8B0Kpxtzb/1/HOBkv3/kPD+2FiCiUBGMB7YriRud9OUPw1pnYCsAH9ftwpMJS4k4XOyUY8FCTk6OxA==",
+      "requires": {
+        "consola": "^2.4.0",
+        "glob-all": "^3.1.0",
+        "sass-resources-loader": "^2.0.0"
+      }
+    },
    "@nuxtjs/youch": {
      "version": "4.2.3",
      "resolved": "https://registry.npmjs.org/@nuxtjs/youch/-/youch-4.2.3.tgz",
@ -1719,6 +1729,14 @@
      "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
      "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c="
    },
+    "async": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
+      "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
+      "requires": {
+        "lodash": "^4.17.14"
+      }
+    },
    "async-each": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz",
@ -4319,6 +4337,30 @@
        "path-is-absolute": "^1.0.0"
      }
    },
+    "glob-all": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/glob-all/-/glob-all-3.1.0.tgz",
+      "integrity": "sha1-iRPd+17hrHgSZWJBsD1SF8ZLAqs=",
+      "requires": {
+        "glob": "^7.0.5",
+        "yargs": "~1.2.6"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "0.1.0",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.1.0.tgz",
+          "integrity": "sha1-md9lelJXTCHJBXSX33QnkLK0wN4="
+        },
+        "yargs": {
+          "version": "1.2.6",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-1.2.6.tgz",
+          "integrity": "sha1-nHtKgv1dWVsr8Xq23MQxNUMv40s=",
+          "requires": {
+            "minimist": "^0.1.0"
+          }
+        }
+      }
+    },
    "glob-parent": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.0.0.tgz",
@ -5462,11 +5504,6 @@
        "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",
@ -8921,6 +8958,54 @@
        "semver": "^5.5.0"
      }
    },
+    "sass-resources-loader": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/sass-resources-loader/-/sass-resources-loader-2.0.1.tgz",
+      "integrity": "sha512-UsjQWm01xglINC1kPidYwKOBBzOElVupm9RwtOkRlY0hPA4GKi2KFsn4BZypRD1kudaXgUnGnfbiVOE7c+ybAg==",
+      "requires": {
+        "async": "^2.1.4",
+        "chalk": "^1.1.3",
+        "glob": "^7.1.1",
+        "loader-utils": "^1.0.4"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+        },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+        }
+      }
+    },
    "sax": {
      "version": "1.2.4",
      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
--- a/package.json
+++ b/package.json
@ -12,6 +12,7 @@
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.6.0",
+    "@nuxtjs/style-resources": "^1.0.0",
    "autoprefixer": "^9.6.1",
    "bootstrap-vue": "^2.0.0-rc.27",
    "cross-env": "^5.2.0",