sport_mobile/.svn/pristine/e2/e2a2bb525efc7b375740502a06921853adce9e3f.svn-base

<template>
  <div>
    <div class="match">
      <div class="title flex">
        <div>
          <i class="backSingPage"></i>
          <div class="ball">
            <span>足球</span>
          </div>
           <span class="menu" style="font-size:0.16rem">日本职业棒球</span>
        </div>
        <div>
            <div class="redraw">
                <i class="refresh"></i>
            </div>
        </div>
      </div>
      <div class="banner">
          <span>东北乐天金鹰队</span>
          <span class="pk">v</span>
          <span>北海道日本火腿斗士队</span>
      </div>
      <div class="welcome pd-20">
          <span>受欢迎的</span>
      </div>
      <div class="info" v-for="item in data" :key="item.id">
          <div class="tit pd-20">
              <span>{{item.name}}</span>
          </div>
          <div class="team flex">
              <div class="teamInfo flex"  v-for="items in item.matchInfo" :key='items.id'>
                  <div class="teamName">{{items.teamName}}</div>
                  <div>
                      <span class="num">{{items.num}}</span>
                      <span class="odds">{{items.odds}}</span>
                  </div>
              </div>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
    data(){
        return{
            data:[
                {
                    name:'滚球 让球',
                    matchInfo:[
                        {
                            teamName:'东北乐天金鹰队',
                            num:'+1',
                            odds:'1.28'
                        },
                        {
                            teamName:'北海道日本火腿斗士队  ',
                            num:'-1',
                            odds:'1.28'
                        }
                    ]
                },
                {
                    name:'总得分: 滚球 大/小',
                    matchInfo:[
                        {
                            teamName:'大',
                            num:'21.5',
                            odds:'1.28'
                        },
                        {
                            teamName:'小',
                            num:'21.5',
                            odds:'1.28'
                        }
                    ]
                }
            ]
        }
    }
};
</script>
<style scoped>
.flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.title {
    height: 0.5rem;
    background: #aaaaaa;
    padding: 0 0.2rem;
    line-height: 0.5rem;
}
.title .backSingPage{
    display:inline-block;
    background: url("../assets/st-imges/arrow_left.png") no-repeat;
    background-size: 100% 100%;
    height: 0.21rem;
    width: 0.2rem;
    vertical-align: middle;
    margin-right: 0.16rem;
    cursor: pointer;
}
.title .ball{
    display: inline-block;
    width: 0.5rem;
    height: 0.36rem;
    line-height: 0.36rem;
    text-align: center;
    background: rgba(204, 204, 204, 1);
    font-size: 0.18rem;
    color: #f76649;
    position: relative;
    border-radius: 0.04rem;
    margin-right: 0.15rem;
}
.title .ball::after{
    content: "";
    display: inline-block;
    width: 0.1rem;
    height: 0.1rem;
    position: absolute;
    right: -0.2rem;
    top: 0.08rem;
    border-width: 0.1rem;
    border-style: solid;
    border-color: transparent transparent transparent rgba(204, 204, 204, 1);
}
.title .backSingPage:hover,.refresh:hover{
    filter: brightness(100);
}
.redraw{
    width: 0.3rem;
    height: 0.3rem;
    line-height: 0.4rem;
    background: #666;
    cursor: pointer;
    text-align: center;
    border-radius: 0.05rem;
}
.redraw:hover{
    background: #959595;
    color: #fff;
}
.refresh{
    background: url("../assets/st-imges/redraw.png") no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    width: 0.2rem;
    height: 0.2rem;
}
.banner{
    background-image: url("./../assets/st-imges/back.png") no-repeat;
    background-size: 100% 100%;
    background-color: #026F40;
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
}
.banner .pk{
    color: #F76649;
    margin: 0 0.05rem;
}
.banner span{
    color: #fff;
    font-size: 0.16rem;
}
.pd-20{
    padding: 0 0.2rem;
}
.welcome{
    color: #FFFFFF;
    background: #888888;
    height: 0.5rem;
    line-height: 0.5rem;
}
/* 数据格式 */

.info .tit{
    background: #CCCCCC;
    height: 0.4rem;
    line-height: 0.4rem;
}
.team{
    background: #fff;
    height: 0.48rem;
    line-height: 0.48rem;
}
.teamInfo{
    width: 50%;
    padding: 0 0.1rem 0 0.2rem;
    border-right: 1px solid #EDEDED;
    font-size: 0.14rem;
    font-size: 0.14rem;
}
.team .teamInfo:nth-child(2){
    border-right: none;
}
.teamInfo .num{
    color: #F76649;
    margin-right: 0.2rem;
}
.teamInfo .odds{
    display: inline-block;
    width: 0.48rem;
    height: 0.3rem;
    line-height: 0.3rem;
    text-align: center;
    border:1px solid #EEEEEE;
    /* border-radius: 1px; */
    /* border-radius:0.05rem; */
}
</style>