HealthStudentWeb/src/components/SubmenuList.vue

<!--  -->
<template>
  <div class="submenu-list">
    <div class="header">
      <div class="left">
        <p>{{ title }}</p>
      </div>
      <div class="right"></div>
    </div>
    <div class="main">
      <div class="list">
        <div class="item" v-for="(item, index) in list" :key="index" @click="onItemClick(item)">
          <div class="img-icon-con" :style="{ borderRadius: rounded ? '50%' : '8px', backgroundColor: item.bgColor }">
            <img :src="item.imgPath" alt="" />
          </div>
          <div class="text">
            <span>{{ item.text }}</span>
          </div>
        </div>
        <slot name="addDevice"></slot>
      </div>
    </div>
    <!-- <div class="footer"></div> -->
  </div>
</template>

<script>
export default {
  name: 'SubmenuList',
  props: {
    title: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default: '' || []
    },
    rounded: {
      type: Boolean,
      default: null || false
    }
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    onItemClick(item) {
      console.log('点击的item', item);
      if (item.showType) {
        if (item.showType === 'newPage') {
          this.$router.push({
            name: `${item.routerName}`
          });
        }
      }
    }
  }
};
</script>
<style scoped lang="scss">
.submenu-list {
  height: 100%;
  width: 100%;
  position: relative;
  .header {
    position: relative;
    font-weight: bold;
    padding: 10px 20px;
    @include flexbox(flex-start, center, row, wrap);
    .left {
      p {
        font-size: 42px;
      }
    }
  }
  .main {
    position: relative;
    @include flexbox(flex-start, center, row, wrap);
    width: 100%;
    .list {
      position: relative;
      padding-left: 20px;
      /* @include flexbox(flex-start, flex-start, row, wrap); */
      display: grid;
      grid-template-columns: repeat(4, auto);
      grid-gap: 40px;
      /* grid-template-rows: auto auto; */
      .item {
        position: relative;
        /* height: 140px; */
        /* max-width: 180px; */
        /* padding: 0 20px; */
        @include flexbox(center, center, column, nowrap);
        .img-icon-con {
          padding: 20px;
          @include flexbox(space-around, center, column, wrap);
          img {
            height: 80px;
            widows: 80px;
          }
        }
        .text {
          @include flexbox(flex-start, center, column, wrap);
          padding: 5px;
          font-size: 28px;
          font-weight: 400;
        }
      }
    }
  }
}
/* @import url(); 引入css类 */
</style>