sports_wap/.svn/pristine/a3/a3a14fa8903404385d465ee849bf8ff419212317.svn-base

<template>
  <div style="height:100vh">
    <div class="header row allAlignment" style="padding:.3rem .32rem;">
      <p class="logo"><span style="color:#f76649;font-size:.43rem">HX</span><i style="color:#f4f4f2;font-size:.43rem;font-weight: bolder;">699</i></p>
      <p class="switch"><img src="@/assets/st-imges/close.png" @click="personalShow()" > <img style="margin-right:.1rem" src="@/assets/st-imges/kefu.png"></p>
    </div>
    <div class="Personal  row center">
      <div class="Personal-index">
        <div class="Personal-top boxshow">
          <div class="PictureFrame row vertical-center">
            <!-- 头像 -->
            <div class="row vertical-center">
              <div class="HeadPortrait row center">
                <!-- 头像图片 -->
                <img src="@/assets/st-imges/touxiang.jpg">
              </div>
            </div>
            <!-- 用户名 -->
            <div class="row vertical-center">
              <span style="margin-top:2px;font-size:.26rem">{{name}}</span>
            </div>
          </div>

          <div class="AmountAccount row item-center">
            <div>
                <div class="mtb">
                    <span style="color: #666666;font-size: .22rem;">账户余额(元)</span><br />
                    <!-- 账户余额 -->
                    <span style="color:#666666;display: inline-block;font-size: .3rem;font-weight: normal;margin-top:.15rem;">6999.00</span>
                </div>
            </div>
            <i></i>
            <div>
                <div class="mtb">
                    <span style="color: #666666;font-size: .22rem;">盈利(元)</span><br />
                    <!-- 盈利 -->
                    <span style="color:#1bd479;display: inline-block;font-size: .3rem;font-weight: normal;margin-top:.15rem;">999.00</span>
                </div>
            </div>
            <i></i>
            <div>
                <div class="mtb">
                    <span style="color: #666666;font-size: .22rem;">亏损(元)</span><br />
                    <!-- 亏损 -->
                    <span style="color:#f76649;display: inline-block;font-size: .3rem;font-weight: normal;margin-top:.15rem;">600.00</span>
                </div>
            </div>
          </div>
        </div>
        <div class="Personal-main row average mt03 boxshow">
            <div @click="toRouter('/ProfitAndLossRecord')">
               <img src="@/assets/st-imges/Personalstatements.png">
                <p>盈亏记录</p>
            </div>
            <div @click="toRouter('/BettingRecord')">
               <img src="@/assets/st-imges/Thedetail.png">
                 <p>投注记录</p>
            </div>
            <div @click="toRouter('/AccessRecords')">
                <img src="@/assets/st-imges/Thereport.png">
                <p>转账记录</p>
            </div>
        </div>
        <div class="Personal-bottom mt03 row allAlignment">
          <div>
              <div class="Personal-bottom-img">
                  <img src="@/assets/st-imges/Thepersonaldata.png">
              </div>
              <div class="Personal-bottom-text">
                  <p>个人资料</p>
                  <span>个人信息绑定与查询</span>
              </div>
          </div>
          <div>
              <div class="Personal-bottom-img">
                    <img src="@/assets/st-imges/Securitycenter.png">
              </div>
              <div class="Personal-bottom-text">
                    <p>安全中心</p>
                  <span>保护你的账户安全</span>
              </div>
          </div>
          <div>
              <div class="Personal-bottom-img">
                    <img src="@/assets/st-imges/Themessage.png">
              </div>
              <div class="Personal-bottom-text">
                    <p>我的消息</p>
                  <span>查看历史消息内容</span>
              </div>
          </div>
          <div>
              <div class="Personal-bottom-img">
                    <img src="@/assets/st-imges/Moreandmore.png">
              </div>
              <div class="Personal-bottom-text">
                    <p>更多</p>
                  <span>使用理多功能</span>
              </div>
          </div>
            
        </div>
        <yd-button size="large" type="danger" @click.native="logout()">退出登录</yd-button>
      </div>
    </div>
  </div>
</template>

<script>
import "@/css/index.css";
export default {
  name:'PersonalCenter',
  data() {
    return {
      // 用户名
      name:'',
      // 个人中心显示隐藏开关
    };
  },
  computed:{
 
  },
  watch: {
 
  },
  methods: {
    // 退出登录
    logout(){
        this.$dialog.confirm({
                    title: '退出登录',
                    mes: '您确定要退出登录吗？',
                    opts: () => {
                       this.$http.get(this.$ports.login.loginOut,{token:localStorage.getItem('token')}).then(res=>{
                         if(res){
                          this.$dialog.toast({mes: '退出登录成功,请前往登录', timeout: 1500});
                          this.$public.setItem('token','')
							            this.$store.dispatch('SET_TOKEN','')
                          localStorage.setItem('name','')
                          this.$router.go(-1)
                         }
                       })
            }
        });
    },
    // 个人中心显示隐藏
    personalShow(){

      this.$router.go(-1)
    },
    // 路由
    toRouter(url){
      this.$router.push({path:url})
    }
  },
  mounted() {
    if(localStorage.getItem('name')){
      this.name = localStorage.getItem('name')
    }
      
  },
};
</script>

<style scoped>
.yd-btn-block{
  margin-top: .6rem;
}
.header{
  height: 1.8rem;
  background-image: linear-gradient(0deg, 
		#565656 0%, 
		#999999 100%);
}
.logo{
  font-weight: bolder;
}
.switch img{
  width: .3rem;
  height: .3rem;
  margin-left: .4rem;
  margin-top: .1rem;
}
.Personal {
  width: 100%;
  margin-top: -.65rem
}
.Personal-index {
  width: 7rem;
  height: 10rem;
}
.Personal-top {
  height: 2rem;
  background: #efefef;
  border-radius: 0.1rem;
}
.mt03 {
  margin-top: 0.5rem;
}
.Personal-main {
  height: 2.2rem;
  background: #efefef;
  border-radius: 0.1rem;
}
.Personal-main img{
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
}
.Personal-main p{
    font-size: .26rem;
    color: #555555;
    margin-top: -.1rem
}
.Personal-main div{
    text-align: center;
    padding: .4rem 0;
}
.Personal-bottom {
  height: 4rem;
  flex-wrap: wrap;
}
.boxshow {
  box-shadow: -2px 0px 5px 1px rgba(0, 0, 0, 0.05),
    0px -2px 5px 1px rgba(0, 0, 0, 0.05), 2px 0px 5px 1px rgba(0, 0, 0, 0.05),
    0px 2px 5px 1px rgba(0, 0, 0, 0.05);
}
.Personal-bottom > div {
  width: 3.34rem;
  height: 1.6rem;
  border-radius: 0.1rem;
  background: #efefef;
  box-shadow: -2px 0px 5px 1px rgba(0, 0, 0, 0.05),
    0px -2px 5px 1px rgba(0, 0, 0, 0.05), 2px 0px 5px 1px rgba(0, 0, 0, 0.05),
    0px 2px 5px 1px rgba(0, 0, 0, 0.05);
}
.AmountAccount {
  height: 1.2rem;
}
.AmountAccount>i{
    display: inline-block;
    width: 1px;
    height: .5rem;
    background: #cccccc;
}
.AmountAccount>div{
    width: 2.38rem;
    
}
.PictureFrame {
  height: 0.8rem;
  flex-wrap: wrap;
}
.PictureFrame > div {
  width: 100%;
}
.HeadPortrait {
  width: 1rem;
  height: 0.99rem;
  background: #efefef;
  border-radius: 50%;
  margin-top: -0.5rem;
  box-shadow: 0px 0rem 10px 2px rgba(0, 0, 0, 0.3);
}
.HeadPortrait > img {
  width: 0.94rem;
  height: 0.94rem;
  border-radius: 50%;
}
.mtb{
    text-align: center;
    line-height: .2rem;
}
.Personal-bottom-img{
    width: .94rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.Personal-bottom-img>img{
    width: .56rem;
    height: .56rem;
}
.Personal-bottom>div{
    display: flex;
}
.Personal-bottom-text{
    height: 100%;
    padding: .35rem 0;
}
.Personal-bottom-text>p{
    margin-bottom:.1rem;
    color: #555555;
    font-size: .26rem;
}
.Personal-bottom-text>span{
    color:#999999;
    font-size: .22rem;
}
</style>