<template>
  <el-card shadow="never" style="height: 140px;">
    <div slot="header" class="clearfix">
      <b>常用系统</b>
      <el-button class="more-button" type="text">更多</el-button>
      <i class="el-icon-setting tools-icon"></i>
    </div>
    <div>
      <el-row>
        <el-col
          :span="4"
          class="often-system"
          v-for="(system, index) in oftenSystems"
          :key="system.name"
          :offset="index > 0 ? 1 : 0"
        >
          <img :src="system.icon" width="50" />
          <div>{{ system.name }}</div>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>
<script>
export default {
  data() {
    return {
      oftenSystems: [
        {name: 'ERP', icon: require('@/assets/img/s1.png')},
        {name: '知识库', icon: require('@/assets/img/s2.png')},
        {name: 'CRM', icon: require('@/assets/img/s3.png')},
        {name: '门户', icon: require('@/assets/img/s4.png')},
        {name: '员工自助', icon: require('@/assets/img/s5.png')}
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.often-system {
  margin: 5px;
  padding: 8px;
  cursor: pointer;
}

.often-system ::v-deep div {
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  white-space: nowrap;
}

.often-system:hover ::v-deep div {
  color: $--theme-color;
}
</style>
