tire-platform-ui/src/views/wel/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">
          <i class="tradingIcon icon-sales" style="color:#409EFF"></i>
          <span>销售</span>
        </div>
        <div class="content-icon">
          <i class="tradingIcon icon-purchase" style="color:#75CD28"></i>
          <span>采购</span>
        </div>
        <div class="content-icon">
          <i class="tradingIcon icon-ship" style="color:#143056"></i>
          <span>发货</span>
        </div>
        <div class="content-icon">
          <i class="tradingIcon icon-receipt" style="color:#921939"></i>
          <span>收货</span>
        </div>
        <div class="content-icon">
          <i class="tradingIcon icon-apply" style="color:#BE3216"></i>
          <span>申请付款</span>
        </div>
        <div class="content-icon">
          <i class="tradingIcon icon-charge" style="color:#4D6016"></i>
          <span>收费</span>
        </div>
        <div class="content-icon">
          <i class="tradingIcon icon-pay" style="color:#7E8270"></i>
          <span>付费</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "basicContainer"
};
</script>

<style lang="scss" scoped>
.home-container {
  padding: 5px;
  box-sizing: border-box;
  height: 100%;
  ::v-deep .el-card__body {
    padding: 5px 10px;
    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:1vh;
    }
  }
}
</style>