byte-sailing-mobile/src/views/working/index.vue

<template>
  <div class="working">
    <div class="card" v-for="i in routerData" :key="i.path">
      <div class="title">{{ i.meta.title }}</div>
      <ul>
        <li v-for="j in i.children" :key="j.path">
          <div class="icon">
            <van-icon class-prefix="icon" name="icon_gd" />
          </div>
          <div class="text">{{ j.meta.title }}</div>
        </li>
      </ul>
    </div>
    <div class="card">
      <div class="title">出入库</div>
      <ul>
        <li @click="handleGo(1)">
          <div class="icon">
            <van-icon class-prefix="icon" name="icon_gd" />
          </div>
          <div class="text">手动出库</div>
        </li>
        <li @click="handleGo(2)">
          <div class="icon">
            <van-icon class-prefix="icon" name="icon_gd" />
          </div>
          <div class="text">手动入库</div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, getCurrentInstance, toRaw } from "vue";
const proxy = getCurrentInstance().proxy;
console.log(toRaw(proxy), "asss");
const routerData = ref([]);
const getRouter = () => {
  proxy.get("getRouters", {}).then((res) => {
    routerData.value = res.data;
  });
};
getRouter();
const handleGo = (type) => {
  if (type === 1) {
    proxy.$router.push({
      path: "/purchase-sales/manualOutbound",
    });
  }
  if (type === 2) {
    proxy.$router.push({
      path: "/purchase-sales/manualInbound",
    });
  }
  if (type === 3) {
    proxy.$router.push({
      path: "/purchase-sales/manualOutbound",
    });
  }
};
</script>
<style lang="scss" scoped>
.working {
  background-color: #f1f1f1;
  padding: 12px;
  color: #333;

  .card {
    background: #fff;
    border-radius: 5px;
    margin-top: 12px;
    .title {
      height: 52px;
      line-height: 52px;
      color: #333;
      font-size: 16px;
      font-weight: bold;
      position: relative;
      padding: 0 16px;
    }
    .title::before {
      content: "";
      display: inline-block;
      width: 4px;
      height: 12px;
      background: #409eff;
      position: absolute;
      left: 0;
      top: 20px;
      background: #0084ff;
      border-radius: 2px 2px 2px 2px;
    }

    ul {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 30px;

      li {
        width: 25%;
        text-align: center;
        margin-top: 10px;
        .icon {
          height: 40px;
          width: 40px;
          margin: 0 auto;
          background: #1989fa;
          line-height: 40px;
          border-radius: 5px;
          color: #fff;
          font-size: 20px;
        }
        .text {
          font-size: 12px;
          height: 24px;
          line-height: 24px;
        }
      }
    }
  }
}
</style>