sport_pc/.svn/pristine/a9/a9a98820beb625231f871b43c7aa3748619dfc1f.svn-base

<template>
  <div class="gambling">
    <div class="leagueMatch">
      <yd-button size="large" @click.native="show = true"></yd-button>
      <div class="leagueName">
        <span>{{name}}</span>
      </div>
      <div class="teamName">
        <span>{{team}}</span>
        <div class="vs">vs</div>
        <span>{{backTeam}}</span>
      </div>
      <div  class="time">
        <span>{{time}}</span>
      </div>
      <div v-if = "satatus" class="icon" :class="status == true ? 'rotate':'backRotate'">
        <i></i>
      </div>
    </div>
    <div class="box">
      <div id="NavSlide">
        <nav>
          <p v-for="(item,$index) in arr" @click="toggleNav($index,item.id)" :key="item.id">
            <span :class="{active:$index==active}">{{item.title}}</span>
          </p>
        </nav>
      </div>
    </div>
    <!-- 模态框 -->
    <yd-popup v-if = "satatus" v-model="show" position="center" width = "90%">
      <div class="modality">
        <div class="list" v-for="(item,index) in modality" :key="item.id" @click="check(index)">
          <span :class= "idx == index?'col':''">{{item.name}}</span>
          <span :class= "idx == index?'col':''">v</span>
          <span :class= "idx == index?'col':''">{{item.backName}}</span>
        </div>
      </div>
    </yd-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      status: false,
      active: 0,
      isIphone: false,
      isAndroid: false,
      show: false,
      name:'NBA美国职业篮球 联赛',
      team:'菲尼克斯太阳',
      backTeam:'犹他爵士',
      time:'12/03 22:00',
      satatus:true,
      idx : 0,
      arr: [
        { id: 1001, title: "受欢迎的" },
        { id: 1002, title: "所有盘口" },
        { id: 1003, title: "让球&大/小" },
        { id: 1004, title: "进球" },
        { id: 1005, title: "上半场" },
        { id: 1006, title: "上半场" }
      ],
      modality: [
        {
          name: "巴尼特",
          backName: "哈洛贾特"
        },
        {
          name:'特斯特菲尔德',
          backName:'萨顿联'
        },
        {
          name:'贝罗',
          backName:'哈洛贾特'
        },
           {
          name: "巴尼特",
          backName: "哈洛贾特"
        },
        {
          name:'特斯特菲尔德',
          backName:'萨顿联'
        },
        {
          name:'贝罗',
          backName:'哈洛贾特'
        } ,  {
          name: "巴尼特",
          backName: "哈洛贾特"
        },
        {
          name:'特斯特菲尔德',
          backName:'萨顿联'
        },
        {
          name:'贝罗',
          backName:'哈洛贾特'
        }
      ]
    };
  },
  mounted(){
    if(this.modality.length == 1){
      this.satatus = false;
    }
  },
  methods: {
    check(index){
      this.team = this.modality[index].name;
      this.backTeam = this.modality[index].backName;
      this.idx = index;
      this.show = false;
    },
      toggleNav: function(index, id) {
    this.active = index;
    console.log(index, id);
  },
    // 如果需要区分，则放里面；
    clickApp() {
      let ua = navigator.userAgent.toLowerCase();
      //Android终端
      let isAndroid = ua.indexOf("Android") > -1 || ua.indexOf("Adr") > -1; //Ios终端
      let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (isWeixinBrowser()) {
        this.$router.push({
          path: "/product"
        });
      } else {
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
          //Ios
          console.log("iphone");
          this.iphone = true;
        } else if (/(Android)/i.test(navigator.userAgent)) {
          //Android终端
          console.log("");
        }
      }

      function isWeixinBrowser() {
        return /micromessenger/.test(ua) ? true : false;
      }
    }
  }
};
</script>
<style scoped>
.gambling {
  background: #f8f8f8;
}
.leagueMatch {
  position: relative;
  padding: 0.3rem 0.32rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  border-bottom: 1px solid #e4e4e4;
}
.leagueMatch div {
  font-size: 0.28rem;
  text-align: left;
  color: #333333;
}
.leagueName {
  width: 2.26rem;
}
.leagueMatch .teamName {
  text-align: center;
}
.teamName .vs {
  text-align: center;
  font-size: 0.24rem;
  color: #fd8f26;
}
.leagueMatch .time {
  width: 0.66rem;
  color: #333333;
  font-size: 0.24rem;
}
.leagueMatch .icon i {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  background: url("./../assets/st-imges/xiangxia.png") no-repeat;
  background-size: 100% 100%;
  transform: rotate(180deg);
}
.leagueMatch .rotate {
  transform: rotate(180deg);
  transition: 0.2s;
}
.leagueMatch .backRotate {
  transform: rotate(0deg);
  transition: 0.2s;
}

.box {
  padding: 0 0.32rem;
  background: #f8f8f8;
}
#NavSlide {
  width: 100%;
  overflow: hidden;
}
#NavSlide nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: middle;
  -ms-flex-align: middle;
  align-items: middle;
  overflow: auto;
}
#NavSlide p {
  text-align: center;
  font-size: 0.28rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0 0.2rem 0 0;
  margin: 0 0.1rem 0 0;
  color: #b8b8b8;
  height: 0.88rem;
  line-height: 0.88rem;
}
/* #NavSlide p a{
	color: #E5E5E5;
	text-decoration: none;
} */
#NavSlide p span.active {
  color: #363636;
}
#NavSlide .fixadd {
  position: absolute;
  right: -4px;
  background-color: #31c17b;
}
button.yd-btn-block {
  background: #f8f8f8;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* z-index: -1; */
  margin: 0;
  opacity: 0;
}
.modality {
  text-align: center;
  background: #fbfbfb;
  padding :0.2rem 0;
  height: 5rem;
/* overflow: hidden; */
}
.modality span{
  color:#000000;
  font-size: 0.28rem;
 
}
.modality div{
  /* margin: 0.06rem 0; */
   padding: 0.2rem 0;
     background: #fbfbfb;
   border-bottom: 1px solid #e4e4e4;
}
.modality div .col{
  color: #fd8f26;
}
</style>