10.19

src/views/wmsHome/index.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="choicepart-container">
+    <div class="choicepat-navbar">
+      <navbar :showhome="false" :show-title="true" />
+    </div>
+    <div class="choicepart-box">
+      <div
+        v-for="(item, index) in moduleList"
+        :key="item.path"
+        class="choicepart-item"
+        @click="handelClick(item, index)"
+      >
+        <div class="choicepart-item-border">
+          <img :src="require(`../../assets/img/choicepart/${item.name}.png`)" alt="">
+        </div>
+        <div class="choicepart-item-title" :title="item.meta.title">{{ item.meta.title }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { routes } from '@/router'
+import { Navbar } from '@/layout/components'
+
+export default {
+  name: 'HomeIndex',
+  components: { Navbar },
+  data() {
+    return {
+      moduleList: []
+    }
+  },
+  mounted() {
+    this.getModuleList()
+  },
+  methods: {
+    getModuleList() {
+      const temp = []
+      routes &&
+      routes.map((item) => {
+        if (item.hidden) {
+          return true
+        }
+        temp.push(item)
+      })
+      this.moduleList = temp
+      console.log(this.moduleList)
+    },
+    handelClick(item, index) {
+      this.$store.dispatch('app/setChoicepart', index)
+      if (item.meta.unuse) {
+        this.$message.warning(this.$t('choisePart.module'))
+      } else {
+        this.toRouter(item)
+      }
+    },
+    toRouter(item) {
+      if (item.children) {
+        this.toRouter(item.children[0])
+      } else {
+        this.$router.push({ name: item.name })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.choicepart-container {
+  min-width: 100%;
+  min-height: 100vh;
+  // background: linear-gradient(-45deg, rgb(25, 25, 200), rgb(0, 100, 200));
+  background: url('../../assets/img/choicepart/choicepart-back.png') repeat;
+  background-size: cover;
+  overflow-x: scroll;
+  .choicepart-box {
+    width: 1440px;
+    margin: 0 auto;
+    margin: 0 auto;
+    padding-top: 16vh;
+    min-height: 100vh;
+    .choicepart-item {
+      display: inline-block;
+      width: 184px;
+      height: 223px;
+      margin: 40px;
+      background: url('../../assets/img/choicepart/choice-item-back.png') no-repeat;
+      background-size: 100% 100%;
+      // border: 1px dashed #fff;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+      top: 0;
+      border-radius: 5px;
+      overflow: hidden;
+      cursor: pointer;
+      position: relative;
+      img {
+        width: 104px;
+        height: 99px;
+        position: absolute;
+        top: 32px;
+        left: 43px;
+      }
+      .choicepart-item-border {
+        height: 100%;
+        border-radius: 5px;
+        padding: 0 5px;
+        line-height: 32px;
+        font-size: 28px;
+        font-weight: lighter;
+        color: #2c6bd8;
+        overflow: hidden;
+      }
+      .choicepart-item-title {
+        overflow: hidden;
+        padding: 0 10px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        position: absolute;
+        bottom: 0;
+        left: 2px;
+        right: 2px;
+        text-align: center;
+        color: #fff;
+        font-size: 16px;
+        line-height: 40px;
+        height: 40px;
+        letter-spacing: 2px;
+        background-color: rgba($color: #0b58ff, $alpha: 0.45);
+      }
+    }
+    .choicepart-item:hover {
+      .choicepart-item-title {
+        background-color: rgba($color: #0b58ff, $alpha: 1);
+      }
+    }
+  }
+  .choicepat-navbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
+  }
+}
+::-webkit-scrollbar-track-piece {
+  //滚动条凹槽的颜色，还可以设置边框属性
+  background: rgba(255, 255, 255, 0.1);
+}
+::-webkit-scrollbar {
+  //滚动条的宽度
+  width: 9px;
+  height: 9px;
+}
+::-webkit-scrollbar-thumb {
+  //滚动条的设置
+  background-color: #dddddd;
+  background-clip: padding-box;
+  min-height: 28px;
+  border-radius: 9px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: #bbb;
+}
+</style>