简化版界面

src/pages/modules/home/home_mini.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="main-container">
+    <div class="navs_wraper">
+      <div class="nav_item" v-for="(e, i) in nav" :key="i" :class="'nav_item_' + (i + 1)" @click="toPage(e)">
+        <div class="relative nav_item_i">
+          <div class="nav_icon"></div>
+          <p>{{ e.title }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MinniHome',
+  data () {
+    return {
+      nav: [
+        {title: '任务', zh_title: '任务', en_title: 'Task', router: '/mini/carrypoint'},
+        {title: '故障', zh_title: '故障', en_title: 'Fault', router: '/mini/errorinfo'},
+        {title: '示教', zh_title: '示教', en_title: 'Teach', router: '/mini/teach'}
+      ]
+    }
+  },
+  methods: {
+    toPage (e) {
+      this.$router.push(e.router)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@style/mixin'
+.main-container
+  display flex
+.navs_wraper
+  _fj()
+  width 100%
+  padding 0 12%
+.nav_item
+  width 29%
+  padding 12px
+  color #fff
+  font-size 40px
+  border 1px solid #2f9ae3
+  background-image: linear-gradient(to bottom,transparent 11px,rgba(32, 74, 128, 90%) 1px),
+                    linear-gradient(to right,transparent 11px,rgba(32, 74, 128, 90%) 1px);
+  background-size: 12px 12px;
+  background-repeat: repeat;
+  cursor pointer
+.nav_item_i
+  _fj()
+  padding 20px 40px 20px 35px
+  background-image linear-gradient(to bottom,rgba(42, 83, 138, 50%), rgba(57, 101, 181, 50%))
+  border-top 2px solid #62b2f0
+  border-left 2px solid #62b2f0
+  box-shadow inset 0 0px 12px 8px rgba(98, 180, 243, 50%)
+  p
+    font-size 56px
+    color #F6F9FE
+    font-family: YouSheBiaoTiHei
+    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(49,190,255,0.9) 0%, rgba(239,252,254,1) 40%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  &::before
+    content ''
+    position absolute
+    bottom 0
+    left 0
+    width 100%
+    height 2px
+    background-image linear-gradient(to right,#62b2f0,#b1ebf8)
+  &::after
+    content ''
+    position absolute
+    top 0
+    right 0
+    height 100%
+    width 2px
+    background-image linear-gradient(to bottom,#62b2f0,#b1ebf8)
+.nav_icon
+  width 25%
+  padding-top 25%
+  border-radius 50%
+.nav_item_1
+  .nav_icon
+    background #217872 center center / 70% auto url(../../../images/new/RF1.png) no-repeat
+.nav_item_2
+  .nav_icon
+    background #80732F center center / 70% auto url(../../../images/new/RF2.png) no-repeat
+.nav_item_3
+  .nav_icon
+    background #80372D center center / 70% auto url(../../../images/new/RF3.png) no-repeat
+</style>