sports_wap/vue_sports/.svn/pristine/72/72d4f4d1587a566c1f218bbef3d84906409280de.svn-base

<template>
  <div id="NavSlide" class="row allAlignment center">
    <div class="nav-div" :style="navWidth">
      <nav>
        <div
          class="column center img-div"
          v-for="(item,index) in data"
          @click="toggle(item.game_code)"
          :key="index"
        >
          <img class="img-box" :style="item.game_name=='冠军杯'?'width:.43rem;height:.48rem;margin:0 .43rem;':''" :src="item.url">
          <span style="margin-top: 0.08rem;">{{item.game_name}}</span>
        </div>
      </nav>
    </div>
  </div>
</template>
<script>
import "../css/index.css";
export default {
  name: "ScrollNav",
  data() {
    return {
      data: "",
      arr: [
        {
          url: require("../assets/st-imges/football.png"),
          game_name: "足球"
      
        },
        {
          url: require("../assets/st-imges/basketball.png"),
          game_name: "篮球"
         
        },
        {
          url: require("../assets/st-imges/baseball.png"),
          game_name: "棒球"
        
        },
        {
          url: require("../assets/st-imges/tennis.png"),
          game_name: "网球"
         
        },
        {
          url: require("../assets/st-imges/trophy.png"),
          game_name: "冠军杯"
         
        }
      ],
      navWidth: {
        width: "6.28rem;"
      }
    };
  },
  methods: {
    toggle: function(id) {
      this.$router.push({ path: "/AllMatch", query: { id: id ,home:true,scroll:2} });
      this.$store.dispatch("GET_BALL_ID", id);
    },
    leftAdd: function() {},
    rigthAdd: function() {}
  },
  mounted: function() {
    if (window.innerWidth > 375) {
      this.navWidth.width = window.innerWidth + "px";
    }
       this.$store.dispatch('GETSHOW',true);
    this.$http.get(this.$ports.home.ballList).then(res => {
    
   
      console.log('code',this.code)
      if (res.data.status == 1) {
        if (res.data.data[0].game_ico_url != "") {
          this.data = res.data.data;
        } else {
          for (var i = 0; i < res.data.data.length; i++) {
            this.arr[i].id = res.data.data[i].id;
            this.arr[i].game_name = res.data.data[i].game_name;
            this.arr[i].game_code = res.data.data[i].game_code;
          }
          this.data = this.arr;
        }
           this.$store.dispatch('GETSHOW',false);
      }else{
          this.$store.dispatch('GETSHOW',false);
      }
    });
  }
};
</script>
<style  scoped>
#NavSlide {
  height: 1rem;
  background: #f8f8f8;
}
.nav-div {
  width: 6.28rem;
  /* overflow:hidden; */
}
.img-box {
  width: 0.48rem;
  height: 0.48rem;
  margin: 0 0.35rem;
}
.img-div {
  height: 1rem;
}
#NavSlide nav {
  /* padding: 0 0.43rem; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: middle;
  -ms-flex-align: middle;
  align-items: middle;
  overflow-x: auto;
  background-color: #f8f8f8;
  -webkit-overflow-scrolling: touch;
}
#NavSlide div {
  text-align: center;
  font-size: 0.2rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  /* padding:0 0.1rem;
    margin:0 0.05rem; */
  color: #000000;
}
/* #NavSlide p a{
	color: #000000;
	text-decoration: none;
}*/
#NavSlide p a.active {
  color: #000000;
}
#NavSlide .fixadd {
  position: absolute;
  right: -4px;
  background-color: #f8f8f8;
}
</style>