personal-assistant.vue 2.32 KB
Newer Older
xioln's avatar
xioln committed
1 2 3 4 5 6 7
/**
* @Description:  个人助手
* @author xioln
* @date 2023-11-27
* @FilePath: applications/dee-task-center/src/views/home/compontents/apply-app.vue
*/
<template>
jingnan's avatar
jingnan committed
8
  <div class="apply-app">
xioln's avatar
xioln committed
9
    <el-card class="box-card">
jingnan's avatar
jingnan committed
10 11 12 13 14 15 16
      <div slot="header" class="clearfix">
        <span>个人助手</span>
      </div>
      <div class="text item div-card">
        <div v-for="(item, i) in cardList" :key="i" class="card" @click="handClick(item.title)">
          <div class="icon">
            <img :src="item.icon" alt="Icon">
xioln's avatar
xioln committed
17
          </div>
jingnan's avatar
jingnan committed
18 19
          <div class="title">
            {{ item.title }}
xioln's avatar
xioln committed
20
          </div>
jingnan's avatar
jingnan committed
21 22
        </div>
      </div>
xioln's avatar
xioln committed
23 24 25 26 27 28 29 30 31 32
    </el-card>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      cardList: [
        {
jingnan's avatar
jingnan committed
33
          icon: '/icons/home/biaozhunguifan.png',
xioln's avatar
xioln committed
34 35 36
          title: '标准规范'
        },
        {
jingnan's avatar
jingnan committed
37
          icon: '/icons/home/helpBook.png',
xioln's avatar
xioln committed
38 39
          title: '帮助手册'
        }
jingnan's avatar
jingnan committed
40
      ]
xioln's avatar
xioln committed
41 42 43 44 45 46 47 48 49 50 51 52
    }
  },
  computed: {},
  watch: {},
  created() {
    // 初始化数据
  },
  methods: {
  }
}
</script>
<style lang='scss'>
jingnan's avatar
jingnan committed
53
.apply-app {
xioln's avatar
xioln committed
54 55 56 57
  height: 100%;

  .box-card {
    height: 100%;
jingnan's avatar
jingnan committed
58 59 60

    .el-card__body {
      height: calc(100% - 90px);
xioln's avatar
xioln committed
61 62 63 64 65 66 67 68 69 70
    }
  }

  .div-card {
    height: 80px;
    // 下面是重点
    display: grid;
    grid-template-columns: repeat(auto-fill, calc((100% - 60px) / 4)); // 自动填充一行的卡片个数
    justify-content: space-between; // 卡片两端对齐,与flex的该属于一致
    grid-gap: 20px;
jingnan's avatar
jingnan committed
71

xioln's avatar
xioln committed
72 73 74 75 76 77 78 79 80 81 82 83 84 85 86
    // padding-bottom: 10px;
    .card {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      flex-wrap: wrap;
      width: calc(100%);
      height: calc(100%);
      font-size: 12px;
      border-radius: 4px;
      cursor: pointer;
      transition: box-shadow 0.3s ease;
      border: 1px solid #C7C7C7;
      padding: 5px;
jingnan's avatar
jingnan committed
87 88 89 90 91
      // .icon{
      //   img{
      //     width: 30px;
      //   }
      // }
xioln's avatar
xioln committed
92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110
      .title {
        text-align: center;
        width: calc(100% - 10px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .card:hover {
      box-shadow: 0 0 10px rgba(224, 220, 220, 0.7);
    }

    .card:active {
      box-shadow: 0 0 5px rgba(185, 184, 184, 0.5);
      transform: scale(0.95);
    }
  }
}</style>