crowd-test-service-frontend/src/pages/Homepage/TestMenu.vue

<template>
  <div class="test-menu-wrapper">
    <div class="test-menu-item-wrapper">
      <div class="test-menu-item" v-for="(item,index) in testTypeList" :key="item.code" v-if="index<8">
        <img src="../../assets/img/testType.png" alt="testType" class="test-menu-item-img">
        {{item.name}}
      </div>
      <div class="more-test-wrapper">
        <i class="el-icon-arrow-right more-test"></i>更多分类
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "TestMenu",
    props:['testTypeList'],
    data() {
      return {

      }
    }
  }
</script>

<style scoped lang="less">
  .test-menu-wrapper {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 4px 30px 0px rgba(8, 6, 6, 0.08);
    padding: 15px 20px;
    margin-bottom: 15px;
    display: flex;

    .test-menu-item-wrapper {
      display: flex;
      width: 100%;
      justify-content: space-between;
      .test-menu-item {
        font-size: 14px;
        font-family:Source Han Sans CN;
        font-weight:400;
        color:rgba(0,0,0,1);
        .test-menu-item-img {
          width: 46px;
          height: 46px;
          background: rgba(231, 239, 247, 1);
          border-radius: 50%;
          padding: 6px;
          display: block;
          margin: 0 auto;
          margin-bottom: 5px;
        }
      }
    }

    .more-test-wrapper {
      display: block;
      .more-test {
        width: 20px;
        height: 20px;
        background: #0076cb;
        border-radius: 50%;
        color: white;
        padding: 5px;
        font-size: 20px;
        display: block;
        margin: 14px auto;
      }
    }
  }
</style>