tire-platform-ui/src/views/wel/home/equipmentControl/components/quick-launch.vue

<template>
  <div class="home-container">
    <el-card class="home-container__card">
      <div class="title">
        <span>
          快速发起
        </span>
      </div>
      <div class="content">
        <div class="content-icon" @click="inPage('064132_DA')">
          <i class="el-icon-tickets" style="color:#FFFFFF;background-color: #409EFF;border-radius: 5px;font-size: 22px;padding: 8px;"></i>
          <span>箱档案</span>
        </div>
        <div class="content-icon" @click="inPage('064132_MX')">
          <i class="el-icon-sold-out" style="color:#FFFFFF;background-color: #18e6e8;border-radius: 5px;font-size: 22px;padding: 8px;"></i>
          <span>买箱</span>
        </div>
        <div class="content-icon" @click="inPage('064132_SELL')">
          <i class="el-icon-sell" style="color:#FFFFFF;background-color: #ff1111;border-radius: 5px;font-size: 22px;padding: 8px;"></i>
          <span>卖箱</span>
        </div>
        <div class="content-icon" @click="inPage('064132_CK')">
          <i class="el-icon-top" style="color:#FFFFFF;background-color: #ecbf1a;border-radius: 5px;font-size: 22px;padding: 8px;"></i>
          <span>出口装运</span>
        </div>
        <div class="content-icon" @click="inPage('064132_JK')">
          <i class="el-icon-bottom" style="color:#FFFFFF;background-color: #1eff11;border-radius: 5px;font-size: 22px;padding: 8px;"></i>
          <span>进口返程</span>
        </div>
        <div class="content-icon" @click="inPage('064132_BT')">
          <i class="el-icon-bottom" style="color:#FFFFFF;background-color: #1eff11;border-radius: 5px;font-size: 22px;padding: 8px;"></i>
          <span>箱轨迹</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getToken } from "@/util/auth";
export default {
  name: "basicContainer",
  data() {
    return {
      largeScreenToken: '',
      roleName:''
    };
  },
  props: {
    sysType: Number
  },
  created() {
    if (this.sysType == 2) {
      this.getWorkDicts('large_screen').then(res => {
        this.largeScreenToken = res.data.data[0].dictKey;
      })
    }
    this.roleName=localStorage.getItem("roleName")
  },
  methods: {
    inPage(type) {
      //出口
      switch (type) {
        case "064132_DA":
          this.$router.push("/basicData/container/archives");
          break;
        case "064132_MX":
          this.$router.push("/boxManagement/buyContainer/index");
          break;
        case "064132_SELL":
          this.$router.push("/boxManagement/sellingContainers/index");
          break;
        case "064132_CK":
          this.$router.push("/boxManagement/exportShipment/index");
          break;
        case "064132_JK":
          this.$router.push("/boxManagement/importReturnTrip/index");
          break;
        case "064132_BT":
          this.$router.push("/boxManagement/boxTrack/index");
        break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.home-container {
  padding: 5px;
  box-sizing: border-box;
  height: 100%;

  ::v-deep .el-card__body {
    padding: 10px 15px;
    font-size: 14px;
  }

  &__card {
    width: 100%;
    height: 100%;
  }

  .title {
    display: flex;
    justify-content: space-between;
  }
}

.tradingIcon {
  font-size: 36px;
}

.content {
  display: flex;

  &-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1.5vh 1vw 0vh 1vw;

    span {
      margin-top: 0.2vh;
    }
  }
}

.content2 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10vh;
  width: 80vw;

  .divider {
    display: block;
    height: 0px;
    width: 100%;
    margin-top: -20px;
    border-top: 1px dashed #dcdfe6;
  }

  &-item {
    margin-left: 1vw;

    .card {
      width: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;

      &-title {
        width: 40px;
        height: 40px;
        text-align: center;
        border-radius: 50%;
        font-size: 20px;
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          line-height: 20px;
        }
      }

      &-title1 {
        color: #037fe1;
        background-color: rgba(3, 127, 225, 0.15);
      }

      &-title2 {
        color: #ffa21e;
        background-color: rgba(255, 162, 30, 0.15);
      }

      &-title3 {
        color: #fb5b60;
        background-color: rgba(251, 91, 96, 0.15);
      }

      &-title4 {
        color: #42bc6f;
        background-color: rgba(66, 188, 111, 0.15);
      }

      &-content {
        display: flex;
        flex-direction: column;
        margin-top: 4px;
        &-text {
          color: #909399;
        }
      }
    }
  }
}
</style>