usoft-town/components/news/navs.vue

<template>
  <div class="list-info">
    <div class="title">
      <h4>园区快讯</h4>
    </div>
    <div class="list">
      <ul class="list-unstyled">
        <li v-for="(item, key) in listData" @mouseenter="item.activeImg = true" @mouseleave="item.activeImg = false" :class="{active: item.active}" @click="setActive(key)">
          <img :src="item.activeImg || item.active ? item.nt_activeicon : item.nt_icon">
          <span v-text="item.nt_name">12</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'NavsView',
    data () {
      return {
        listData: [],
        page: 1,
        limit: 10
      }
    },
    created () {
      if (!this.$store.state.news.newType.data.list) return  false
      let data = JSON.parse(JSON.stringify(this.$store.state.news.newType.data.list))
      if (this.$route.query.type) {
        for (let i = 0; i < data.length; i++) {
          this.$set(data[i], 'active', data[i].nt_name === this.$route.query.type)
          this.$set(data[i], 'activeImg', data[i].nt_name === this.$route.query.type)
        }
      } else {
        for (let i = 0; i < data.length; i++) {
          this.$set(data[i], 'active', i === 0)
          this.$set(data[i], 'activeImg', i === 0)
        }
      }
      this.$store.dispatch('loadNewsList', {page: this.page, limit: this.limit, type: this.$route.query.type ? this.$route.query.type : data[0].nt_name})
      this.listData = data
    },
    methods: {
      setActive(type) {
        for (let i = 0; i < this.listData.length; i++) {
          if (type === i) {
            this.listData[i].active = true
            this.$store.dispatch('loadNewsList', {page: this.page, limit: this.limit, type: this.listData[i].nt_name})
            this.$emit('loadStep', this.listData[i].nt_name)
            this.$router.push('/news' + (this.$route.query.type ? '?type=' + this.listData[i].nt_name : ''))
          } else {
            this.listData[i].active = false
            this.listData[i].activeImg = false
          }
        }
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
.list-info{
  background: #fff;
  .title{
    padding-left:25px;
    border-bottom:2px solid #8d8d8d;
    h4{
      line-height: 45px;
      color:#8d8d8d;
      font-size: 16px;
    }
  }
  .list{
    padding:10px 0;
    ul{
      li{
        text-align: center;
        height:60px;
        line-height: 60px;
        &.active, &:hover{
          background: #f8f8f8;
          cursor:pointer;
          span{
            color:#46a9d4;
          }
        }
        img{
          margin-right:15px;
          width:20px;
          height:20px;
          vertical-align: middle;
        }
        span{
          font-size: 18px;
          color:#646464;
        }
      }
    }
  }
}
</style>