sports_wap/vue_sports/.svn/pristine/12/121285f46911f0098e1c6c253d8ed3839ebcf9fc.svn-base

<template>
  <div>
    <div class="box">
      <div class="row allAlignment center head_on_box">
        <p
          class="logo"
          style="font-size:.6rem;color:#E1E1DF;font-family:  'Franklin Gothic Medium'"
        >
          <i style="color:#F76649;">HX</i>669
        </p>
        <!-- <img class="log" src="../assets/st-imges/indexlogo.png" alt=""> -->
        <div class="row allAlignment center">
          <yd-button   type="primary" bgcolor="rgba(0,0,0,0)" @click.native="isshow()">
            <img class="user-ion" src="../assets/st-imges/user.png" alt>
          </yd-button>
          <!-- <div v-if="nameShow" class="row allAlignment center username">
              {{name}}
          </div> -->
          <img
            style="margin-left: 0.44rem;"
            class="user-ion"
            src="../assets/st-imges/contact.png"
            alt
          >
        </div>
      </div>

      <div class="navtitle-box row">
        <div style="width:1rem;height:1rem" class="row center">
          <img
            @click="returnHome"
            :src="indeximg==true?img1:img2"
            style="width:0.4rem;height:0.4rem;"
            alt
          >
        </div>
        <div  class="head_box">
        <nav>
          <div v-for="(item,$index) in title" class="row pan nav-arr" :key="item.id">
            <div class="navtitle row pan">
              <div class="nav-box row item-center">
                <div
                  class="headbox"
                  @click="activityJump($index,item[0].type_code)"
                  :class="{active:$index==active}"
                >{{item[0].type_name}}</div>
                <span
                  :class="{numactive:$index==active}"
                  class="head_box_num row center"
                >{{item[0].matchNum>99?'1+':item[0].matchNum}}</span>
              </div>
            </div>
          </div>
        </nav>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import "../css/index.css";
import Login from "@/pages/Login/index/StLogin";
import register from "@/pages/Login/index/register";
export default {
  name: "SportsHead",
  data() {
    return {
      show: this.$store.state.isShow,
      indeximg: this.$route.query.home ? false : true,
      img1: require("../assets/st-imges/home.png"),
      img2: require("../assets/st-imges/gengduo-1.png"),
      title: "",
      active: this.$route.query.number,
      init: true,
      nameShow:false, //展示登录组件或者是名字
    };
  },
  methods: {
    isshow() {
      let isShow = true;
      this.$store.dispatch("GET_ISSHOW", isShow);
      
      console.log('这是我要的结果',this.$store.state.isShow)
    },
    /**
     * 头部导航
     */
    activityJump: function(index, code) {
      this.indeximg = false;
     
      if (this.active != index) {
        this.active = index; //改变当前组件样式
        this.$store.dispatch("GETACTIVITY", code); //将活动类别存入vuex里面
        //console.log('vuex',this.$store.getters.getActivity);

        if (this.$route.query.isTrue) return false;
        this.$router.replace({
          path: "/StRollBallpage",
          query: { number: index, home: 1 }
        });
      }
    },
    /**
     * 回到首页
     */
    returnHome: function() {
      this.$router.replace({ path: "/" });
      this.indeximg = true;
    }
  },
 watch: {
   show:{
     updata(){
       this.updata()
     }
   }
 },
  mounted() {
    if(localStorage.getItem('name')){
      this.name = localStorage.getItem('name')
      this.nameShow = true;
    }else{
      this.nameShow = false;
    }
    this.$store.dispatch("GETSHOW", true);
    this.$http.get(this.$ports.home.navTypeList).then(res => {
      console.log('res',res)
      if (res.data.status == 1) {
        this.title = res.data.data;
       
        for(var i = 0; i < this.title.length; i++){
          if(sessionStorage.getItem('activity')){
            if(sessionStorage.getItem('activity') == this.title[i][0].type_code){
  
              if(this.indeximg == true){
                // console.log("!")
                 this.active = this.$route.query.number
              }else if(this.$route.query.hmsts){
                this.active = 0;
                // console.log("2")
              }else if(this.$route.query.scroll){
                // console.log("scroll")
              }
              else{
                 this.active = i;
              }
   
            }
          }
        }
         this.$store.dispatch("GETSHOW", false);
      }
    });

  },

};
</script>
<style  scoped>
.head_on_box{
  padding: 0 .32rem;
}
.box {
  height: 1.76rem;
  background: linear-gradient(to bottom, #999999, #6a6a6b);
  overflow: hidden;
}
.navtitle-box{
    height: 1rem;
    padding: 0 .32rem 0 0;
}

 

.headbox{
  font-size: .3rem;
  font-weight: bold;
  color: #E1E1DF;
}
.head_box {
  width: 86%;
  height: 1rem;
}
.head_box nav{
    
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-align: middle;
  -ms-flex-align: middle;
  align-items: middle;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.navtitle {
  font-size: 0.16rem;
  height: 1rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.nav-arr{
  width: 1.3rem;
}
.user-ion {
  width: 0.3rem;
  height: 0.3rem;
}
div.active {
  color: #f76649;
}
.numactive {
  background: #f76649 !important;
  color: #f8f8f8 !important;
}
.head_box_num{
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  font-size: .2rem;
  background: #E1E1DF;
  color: #333;
  margin-left: .1rem;
}
.username{
  color: #E1E1DF;
}
</style>