mteacher/src/views/message/modal/applyModal.vue

<template>
  <div class="workflow">
    <van-collapse v-model="activeNames" :border="false">
      <template v-for="(item, index) in applyList">
        <van-collapse-item :name="index" :key="index" v-if="item.process_list2 && item.process_list2.length > 0">
          <template #title>
              <h2 class="title">{{ item.name }}</h2>
          </template>
          <div class="grid">
            <div
              class="grid-item"
              v-for="process in item.process_list2"
              :key="process.id"
              @click="onHref(process)"
            >
              <e-icon class="icon" :icon-name="process.icon" />
              <p>{{ process.name }}</p>
            </div>
          </div>
        </van-collapse-item>
      </template>
    </van-collapse>
 </div>
</template>

<script>
export default {
  props: {
    applyList: {
      type: [Array, Object],
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      activeNames: [0],
    };
  },
  methods: {
    onHref(process) {
      this.$router.push({
        path: "/approvalApply",
        query: {
          processId: process.id,
          name: process.name
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.workflow {
  padding: 0 0.16rem .12rem;
  .icon {
    // border: 1px solid #666;
    // padding: 0.1rem;
    // border-radius: 50%;
    // width: .4rem;
    // height: .4rem;
    font-size: .4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.03rem;
  }
  .title {
    display: flex;
    align-items: center;
    font-size: 0.16rem;
    line-height: 0.28rem;
    font-weight: 500;
    color: #333333;

    &::before {
      content: " ";
      width: 0.04rem;
      height: 0.17rem;
      background: #01c1b5;
      display: inline-block;
      margin-right: 0.07rem;
      border-radius: 8px;
    }
  }

  .grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-top: 0.08rem;
    .grid-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-items: center;
      justify-content: center;
      padding: 0 0 0.15rem;
      width: 25%;
      color: #666;
      p {
        width: 96%;
        text-align: center;
        padding: 0.05rem 2% 0;
        font-size: 12px;
      }
    }
  }

  /deep/.van-collapse-item {
    margin-bottom: .1rem;
    border-radius: 0.05rem;
    overflow: hidden;
  }
}
</style>