FE_middlePlatform_server/src/views/workbench/index.vue

<template>
  <div class="wrap">
    <div class="block block1">
      <div class="title">系统后台</div>
      <div class="apps">
        <div v-for="(item, i) in systems" :key="i" class="app" @click="toSystem(item)">
          <img :src="require(`@/assets/img/workbench/${i + 1}.png`)" alt="">
          <p class="name">{{ item.systemType }}</p>
        </div>
      </div>
    </div>
    <div class="block block2">
      <div class="title">职站教学后台</div>
      <div class="apps">
        <div class="app" @click="to('/curriculum')">
          <img src="@/assets/img/workbench/6.png" alt="">
          <p class="name">教学课程管理</p>
        </div>
        <div class="app" @click="to('/theoreticalCourse')">
          <img src="@/assets/img/workbench/7.png" alt="">
          <p class="name">精品课程管理</p>
        </div>
        <div class="app" @click="to('/information')">
          <img src="@/assets/img/workbench/8.png" alt="">
          <p class="name">资讯管理</p>
        </div>
        <div class="app" @click="to('/resourse')">
          <img src="@/assets/img/workbench/9.png" alt="">
          <p class="name">资源库</p>
        </div>
      </div>
    </div>

    <div class="block middle" @click="to('/shop')">
      <img src="@/assets/img/workbench/10.png" alt="">
      <p class="name">产品管理</p>
    </div>
    <div class="block middle" @click="to('/market')">
      <img src="@/assets/img/workbench/11.png" alt="">
      <p class="name">营销管理</p>
    </div>
    <div class="block middle" @click="to('/parnerOperation')">
      <img src="@/assets/img/workbench/12.png" alt="">
      <p class="name">小程序内容管理</p>
    </div>
    <div class="block middle" @click="to('/parner')">
      <img src="@/assets/img/workbench/13.png" alt="">
      <p class="name">销售代理人管理</p>
    </div>

    <div class="block block3">
      <div class="title">运营后台</div>
      <div class="apps">
        <div class="app" @click="to('/match')">
          <img src="@/assets/img/workbench/14.png" alt="">
          <p class="name">大赛管理</p>
        </div>
        <div class="app" @click="to('/data')">
          <img src="@/assets/img/workbench/15.png" alt="">
          <p class="name">数据管理</p>
        </div>
        <div class="app" @click="to('/review')">
          <img src="@/assets/img/workbench/16.png" alt="">
          <p class="name">评阅管理</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Setting from '@/setting'
export default {
  data () {
    return {
      systems: [],

    };
  },
  mounted () {
    this.getData()
  },
  methods: {
    async getData () {
      const res = await this.$get(this.api.workbenchSystemDemonstration)
      this.systems = res.serviceConfigurationList
    },
    toSystem ({ id }) {
      this.$router.push(id === 2 ? '/theoryExam' : `/configure?id=${id}`)
    },
    to (path) {
      this.$router.push(path)
    },
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 1000px;
  margin: 0 auto;

  .block {
    padding: 20px 20px 0;
    background-color: #fff;
    border-radius: 20px;
    box-sizing: border-box;
  }

  .block1 {
    width: 55%;

    .app {
      width: 30%;
    }

    img {
      margin-bottom: 10px;
    }
  }

  .block2 {
    width: 40%;

    .app {
      width: 48%;
    }
  }

  .block3 {
    width: 100%;
    margin-top: 30px;

    .app {
      display: inline-flex;
      align-items: center;
      margin-right: 100px;
    }

    img {
      margin-right: 20px;
    }
  }

  .middle {
    display: inline-flex;
    align-items: center;
    width: 200px;
    padding: 20px;
    margin-top: 30px;
    cursor: pointer;

    img {
      margin-right: 20px;
    }
  }

  .title {
    margin-bottom: 30px;
    font-size: 18px;
  }

  .apps {
    display: flex;
    flex-wrap: wrap;
  }

  .app {
    margin-bottom: 30px;
    text-align: center;
    cursor: pointer;
  }

  .name {
    font-size: 14px;
    color: #333;
  }
}
</style>