usoft-town/components/service/ServiceList.vue

<template>
  <div class="service-list">
    <div class="container">
      <div class="list-title">
        <p>园区服务</p>
      </div>
      <div class="list-link">
        <ul class="list-inline">
          <li class="active">全部</li>
          <li v-for="item in serviceData" class="active">{{ item.st_name }}</li>
        </ul>
      </div>
      <div class="list-bottom" v-for="(item) in serviceData">
        <div class="left_title">
          <img :src="item.st_icon">
          <p v-text="item.st_name"/>
        </div>
        <ul class="list-inline" >
          <li v-for="(childItem) in item.serves" @click="jump(childItem.sv_id)">
            <img :src="childItem.sv_logourl.platform">
            <p>{{ childItem.sv_name }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: 'ServiceList',
      computed: {
        serviceData () {
          return this.$store.state.serviceList.serviceData.data.configs
        }
      },
      methods: {
        jump (type) {
          if (!this.$store.state.option.user.data.name) {
            this.$message({
              type: 'error',
              message: '亲，请先登录！'
            })
          } else {
            this.$router.push('/repairs/' + type)
          }
        }
      }
    }
</script>

<style scoped type="text/scss" lang="scss">
  .service-list{
    padding-top:50px;
    padding-bottom:165px;
    .list-title {
      text-align: center;
      p{
        margin-bottom:40px;
        font-size: 28px;
        color:#000;
      }
    }
    .list-link{
      margin:0 auto;
      margin-bottom:80px;
      text-align: center;
      ul{
        margin:0;
        li {
          padding: 0 15px;
          font-size: 14px;
          color: #333;
          text-align: center;
          border-right:1px solid #bfbfbf;
          &:last-child{
            border:0;
          }
          &:hover, &.active{
            color:#149ccf;
            cursor:pointer;
          }
        }
      }
    }
    .list-bottom{
      margin-bottom:45px;
      .left_title{
        float:left;
        width:130px;
        height:240px;
        position:relative;
        img{
          position:absolute;
          top:0 ;
          left:0;
          width: 100%;
          height:100%;
          z-index:-100;
        }
        p{
          padding-top:24px;
          font-size: 22px;
          color:#fff;
          text-align: center;
        }
      }
      ul{
        margin-left:130px;
        height:240px;
        background: #fff;
        li{
          width: 150px;
          height: 120px;
          text-align: center;
          line-height: 40px;
          padding-top: 15px;
          &:hover{
            cursor:pointer;
            transform:scale(1.1);
            > p{
              color:#149ccf;
            }
          }
          img{
            vertical-align: top;
            text-align: center;
            width:40%;
            height:40%;
          }
          > p{
            font-size: 16px;
            color:#464646;
            width:100%;
            margin:0;
          }
        }
      }
    }
  }
</style>