apt

src/pages/modules/home.vue

@@ -0,0 +1,102 @@
+<template>
+  <el-row type="flex" class="navs_wraper" justify="space-between" align="middle">
+    <el-col :span="7" class="nav_item" v-for="(e, i) in nav" :key="i" :class="'nav_item_' + (i + 1)">
+      <div class="nav_item_i" @click="toPage(e)">
+        <div class="nav_icon"></div>
+        <p>{{ e[$langPre.computedProp('title')] }}</p>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: 'MinniHome',
+  data () {
+    return {
+      nav: [
+        {title: '操作', zh_title: '操作', en_title: 'Task', router: '/index/device'},
+        {title: '建图', zh_title: '建图', en_title: 'Fault', router: '/mini/errorinfo'},
+        {title: '取消任务', zh_title: '取消任务', en_title: 'Teach', router: '/mini/teach'},
+        {title: '地图', zh_title: '地图', en_title: 'Teach', router: '/mini/teach'}
+      ],
+      disabled: false
+    }
+  },
+  methods: {
+    toPage (e) {
+      this.$router.push(e.router)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@style/mixin'
+.navs_wraper
+  width 100%
+  padding 0 12%
+  flex-wrap wrap
+  align-content center
+.nav_item
+  height 35%
+  padding 1.5%
+  color #fff
+  font-size .2rem
+  margin .1rem 0
+  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(center,,column)
+  height 100%
+  padding .1rem
+  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 .3rem
+    line-height 1
+    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 40%
+  padding-top 40%
+  border-radius 50%
+  margin-bottom 12%
+.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 #217872 center center / 70% auto url(../../images/new/RF3.png) no-repeat
+.nav_item_4
+  .nav_icon
+    background #80372D center center / 70% auto url(../../images/new/RF4.png) no-repeat
+</style>