navbar tabbar

.editorconfig

@@ -1,5 +1,9 @@
-[*.{js,jsx,ts,tsx,vue}]
+root = true
+
+[*]
+charset = utf-8
 indent_style = space
 indent_size = 2
+end_of_line = lf
 trim_trailing_whitespace = true
 insert_final_newline = true

package.json

@@ -9,6 +9,8 @@
   },
   "dependencies": {
     "core-js": "^3.6.4",
+    "mint-ui": "^2.2.13",
+    "vant": "^2.4.7",
     "vue": "^2.6.11",
     "vue-router": "^3.1.5",
     "vuex": "^3.1.2"

src/App.vue

@@ -1,32 +1,21 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
+    <router-view></router-view>
+    <tabbar/>
   </div>
 </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;
+<script>
+import tabbar from '@/components/Tabbar'
 
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
+export default {
+  name: 'app',
+  components: {
+    tabbar
   }
 }
+</script>
+
+<style lang="scss">
+  @import "./assets/css/base.css";
 </style>

src/assets/css/base.css

@@ -0,0 +1,57 @@
+@import "./normalize.css";
+@import "./iconfont.css";
+
+/*:root -> 获取根元素html*/
+:root {
+  --color-text: #666;
+  --color-high-text: #ff5777;
+  --color-tint: #d4237a;
+  --color-background: #fff;
+  --font-size: 14px;
+  --line-height: 1.5;
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+  user-select: none; /* 禁止用户鼠标在页面上选中文字/图片等 */
+  -webkit-tap-highlight-color: transparent; /* webkit是苹果浏览器引擎，tap点击，highlight背景高亮，color颜色，颜色用数值调节 */
+  background: var(--color-background);
+  color: var(--color-text);
+  /* rem vw/vh */
+  width: 100vw;
+}
+
+a {
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+
+.clear-fix::after {
+  clear: both;
+  content: '';
+  display: block;
+  width: 0;
+  height: 0;
+  visibility: hidden;
+}
+
+.clear-fix {
+  zoom: 1;
+}
+
+.left {
+  float: left;
+}
+
+.right {
+  float: right;
+}

src/assets/css/iconfont.css

@@ -0,0 +1,109 @@
+@font-face {font-family: "iconfont";
+    src: url('//at.alicdn.com/t/font_1639712_0ewrdof5bupp.eot?t=1581672772889'); /* IE9 */
+    src: url('//at.alicdn.com/t/font_1639712_0ewrdof5bupp.eot?t=1581672772889#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+    url('//at.alicdn.com/t/font_1639712_0ewrdof5bupp.woff?t=1581672772889') format('woff'),
+    url('//at.alicdn.com/t/font_1639712_0ewrdof5bupp.ttf?t=1581672772889') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+    url('//at.alicdn.com/t/font_1639712_0ewrdof5bupp.svg?t=1581672772889#iconfont') format('svg'); /* iOS 4.1- */
+  }
+
+  .iconfont {
+    font-family: "iconfont" !important;
+    font-size: 16px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .icon-gouwuche1:before {
+    content: "\e600";
+  }
+
+  .icon-gouwuche:before {
+    content: "\e61b";
+  }
+
+  .icon-fenlei:before {
+    content: "\e63e";
+  }
+
+  .icon-fenlei1:before {
+    content: "\e63f";
+  }
+
+  .icon-shouye:before {
+    content: "\e644";
+  }
+
+  .icon-shouye1:before {
+    content: "\e645";
+  }
+
+  .icon-wode:before {
+    content: "\e646";
+  }
+
+  .icon-wode1:before {
+    content: "\e647";
+  }
+
+  .icon-xuanzekuang:before {
+    content: "\e64d";
+  }
+
+  .icon-xuanzhong:before {
+    content: "\e64e";
+  }
+
+  .icon-jiantou:before {
+    content: "\e64f";
+  }
+
+  .icon-dingdan:before {
+    content: "\e650";
+  }
+
+  .icon-sousuo:before {
+    content: "\e652";
+  }
+
+  .icon-diandian:before {
+    content: "\e653";
+  }
+
+  .icon-guanbi:before {
+    content: "\e654";
+  }
+
+  .icon-liebiao:before {
+    content: "\e658";
+  }
+
+  .icon-jia:before {
+    content: "\e659";
+  }
+
+  .icon-jian:before {
+    content: "\e65a";
+  }
+
+  .icon-gouxuanzhong:before {
+    content: "\e65b";
+  }
+
+  .icon-gouxuan:before {
+    content: "\e65c";
+  }
+
+  .icon-shanchu:before {
+    content: "\e65e";
+  }
+
+  .icon-tianjia:before {
+    content: "\e65f";
+  }
+
+  .icon-jianqu:before {
+    content: "\e676";
+  }
+