sport_mobile/.svn/pristine/9d/9de022fc4f025f5c8c59e5d9019161a52d9f17d3.svn-base

<template>
  <div>
    <div class="headerB-top">
      <div class="middle row">
        <div class="row item-center headerB-top-left">
          <h1 class="row headerB-title">
            <p style="color:#F76649;">HX</p>
            <span style="color:#FFFFFF">669</span>
          </h1>
          <ul class="row headerB-nav">
            <li
              v-for="(item,index) in List"
              :key="index"
              style="margin-left:.3rem"
              class="row item-center"
              :class="num==index?'active':''"
              @click="listActive(index)"
            >{{item.title}}</li>
          </ul>
        </div>
        <div class="headerB-login">
          <div v-show="userIsLogin==false" class="row item-center" style="height:100%">
            <div style="width:2rem;">
              <input style="border-radius:.05rem 0 0 .05rem;" placeholder="用户名" type="text">
            </div>
            <div class="headerB-login-pwd row center">
              <input type="password" placeholder="用户密码">
              <div class="row center headerB-login-txt" style="border-radius:0 .05rem .05rem 0;">登录</div>
              <span class>忘记密码？</span>
            </div>
            <div
              class="row center"
              style="width:1rem;margin-left:.2rem;background:#888;border-radius:.05rem;"
            >
              <p style="font-size:.18rem;color:#DDD;">注册</p>
            </div>
          </div>
          <div v-show="userIsLogin==true" class="row item-center loginTo" style="height:100%">
              <div class="row item-center headerB-userCode">
                  <p>{{user.userName}}</p>
                  <div style="width:1px;background:#ccc;height:.3rem;margin:0 .23rem;"></div>
                  <p>余额:<span style="color:#F76649">{{user.balance}}</span></p>
              </div>
              <div class="row item-center headerB-img">
                  <img @mouseover='imgMT(1)' @mouseout='imgOUT()' :src="imgNum==1?img.walletHover:img.wallet" alt="">
                  <img @mouseover='imgMT(2)' @mouseout='imgOUT()' :src="imgNum==2?img.userHover:img.user" alt="">
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/css/index.css";
export default {
  data() {
    return {
      userIsLogin: false,//  用户是否登录
      user:{                         // 用户信息
           userName:'你好，李寻欢',
           balance:1500,
      },
      img:{
          user:require('@/assets/st-imges/user.png'),
          userHover:require('@/assets/st-imges/user-hover.png'),
          wallet:require('@/assets/st-imges/wallet.png'),
          walletHover:require('@/assets/st-imges/wallet-hover.png'),
          eaml:require('@/assets/st-imges/emal.png'),
          eamlHover:require('@/assets/st-imges/emal-hover.png')
      },
      List: [   // 头部导航列表
        {
          title: "体育赛事",
          num: 0
        },
        {
          title: "滚球盘",
          num: 1
        },
        {
          title: "优惠",
          num: 2
        },
        {
          title: "手机版",
          num: 3
        }
      ],
      imgNum:0,
      num: 0 //头部导航激活样式
    };
  },
  methods: {
    listActive(index) {
      this.num = index;
    },
    imgMT(index){
        this.imgNum=index
    },
    imgOUT(){
        this.imgNum=0
    }
  }
};
</script>

<style scoped>
.headerB-top {
  height: 1rem;
  background: linear-gradient(
    180deg,
    rgba(153, 153, 153, 1) 0%,
    rgba(86, 86, 86, 1) 100%
  );
}

.headerB-title {
  font-size: 0.42rem;
  margin-left: 0.3rem;
}
.headerB-nav {
  font-size: 0.24rem;
  height: 100%;
  color: #fff;
}
.headerB-nav li {
  height: 100%;
}
.headerB-nav li.active {
  font-weight: bold;
  position: relative;
}

.headerB-login {
  height: 100%;
}
.headerB-login div {
  height: 0.4rem;
}
.headerB-login div input {
  width: 2rem;
  height: 100%;
  border: none;
  background: #eeeeee;
  color: #999;
  font-size: 0.16rem;
  padding-left: 0.2rem;
}
.headerB-login-pwd {
  width: 3rem;
  margin-left: 0.1rem;
  position: relative;
}
.headerB-login-pwd span {
  font-size: 0.16rem;
  color: #999;
  position: absolute;
  left: 1.2rem;
  top: 0.1rem;
}
.headerB-login-txt {
  width: 1rem;
  background: #f76649;
  color: #ffffff;
  font-size: 0.18rem;
}
.headerB-top-left {
  width: 55%;
}



.loginTo div{
    height: 100%;
    font-size: .18rem;
    color: #FFF;
    
}
.headerB-userCode{
    margin-left: 1.8rem;
}
.headerB-img img{
    width: .3rem;
    height: .3rem;
    margin-left: .2rem
}
.headerB-img{
    margin-left: .5rem;
}
</style>