mteacher/src/views/teacher/Business.vue

<template>
  <div class="business">
    <m-header />

    <section class="module m-shadow">
      <h2 class="title">审批</h2>
      <div class="module-item">
        <router-link :to="{ path: '/approval' }" class="module-link"
          ><i class="icon icon_1"></i>OA审批</router-link
        >
        <router-link :to="{ path: '/abnormalCourse' }" class="module-link"
          ><i class="icon icon_9"></i>异常课程</router-link
        >
        <!-- <router-link :to="{ path: '/istarted' }" 
                            class="module-link"><i class="icon icon_2"></i>我发起的</router-link>
                <router-link :to="{ path: '/ccme' }" 
                            class="module-link"><i class="icon icon_3"></i>抄送我的</router-link>
            </div>
        </section> -->
      </div>
    </section>
    <section class="module m-shadow">
      <h2 class="title">业务申请</h2>
      <div class="module-item">
        <router-link :to="{ path: '/leave' }" class="module-link"
          ><i class="icon icon_4"></i>课程请假</router-link
        >
        <router-link :to="{ path: '/periodadjust' }" class="module-link"
          ><i class="icon icon_5"></i>课时调整</router-link
        >
        <router-link :to="{ path: '/VIPApply' }" class="module-link"
          ><i class="icon icon_6"></i>VIP申请</router-link
        >
      </div>
    </section>

    <section class="module m-shadow">
      <h2 class="title">教学</h2>
      <div class="module-item">
        <!-- <span class="module-link"><i class="icon icon_7"></i>练习列表</span> -->
        <router-link class="module-link" :to="{ path: '/tobeReport' }"
          ><i class="icon icon_8"></i>待完成月报</router-link
        >
        <router-link class="module-link" :to="{ path: '/manageEvaluation' }"
          ><i class="icon icon_evaluate"></i>线上课评价</router-link
        >
        <router-link class="module-link" :to="{ path: '/visitList' }"
          ><i class="icon icon_visited"></i>回访记录</router-link
        >
      </div>
    </section>
  </div>
</template>
<script>
import MHeader from "@/components/MHeader";
export default {
  name: "business",
  components: { MHeader },
  data() {
    return {
      userId: this.$route.params.userId,
      dataInfo: null,
    };
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
@import url("../../assets/commonLess/variable.less");
.business {
  min-height: 100vh;
}
section,
.tip-message {
  margin: 0.1rem 0.16rem 0;
  background: @whiteColor;
}
.business {
  background: @whiteColor;
  overflow: hidden;
}

.module {
  padding: 0.1rem 0;
  color: @mFontColor;
  .title {
    font-size: 0.16rem;
    font-weight: bold;
    padding-left: 0.2rem;
    padding-bottom: 0.1rem;
  }
  .module-item {
    display: flex;
    align-items: center;
    justify-items: center;
    // justify-content: space-around;
    font-size: 0.14rem;
    .module-link {
      //   flex: 1;
      width: 33.333%;
      text-align: center;
    }
  }

  .icon {
    width: 0.42rem;
    height: 0.42rem;
    display: block;
    margin: 0 auto 0.06rem;
  }
  .icon_1 {
    background: url("../../assets/images/business/1.png") no-repeat center;
    background-size: contain;
  }
  .icon_2 {
    background: url("../../assets/images/business/2.png") no-repeat center;
    background-size: contain;
  }
  .icon_3 {
    background: url("../../assets/images/business/3.png") no-repeat center;
    background-size: contain;
  }
  .icon_4 {
    background: url("../../assets/images/business/4.png") no-repeat center;
    background-size: contain;
  }
  .icon_5 {
    background: url("../../assets/images/business/5.png") no-repeat center;
    background-size: contain;
  }
  .icon_6 {
    background: url("../../assets/images/business/6.png") no-repeat center;
    background-size: contain;
  }
  .icon_7 {
    background: url("../../assets/images/business/7.png") no-repeat center;
    background-size: contain;
  }
  .icon_8 {
    background: url("../../assets/images/business/8.png") no-repeat center;
    background-size: contain;
  }
  .icon_9 {
    background: url("../../assets/images/business/9.png") no-repeat center;
    background-size: contain;
  }
  .icon_evaluate {
    background: url("../../assets/images/business/icon_evaluate.png") no-repeat
      center;
    background-size: contain;
  }
  .icon_visited {
    background: url("../../assets/images/business/icon_visited.png") no-repeat
      center;
    background-size: contain;
  }
}
</style>