<!--
 * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
 * @Date: 2022-07-04 16:24:00
 * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
 * @LastEditTime: 2022-08-18 11:00:05
 * @FilePath: \mcep-h5\src\components\common\Tatle.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="tool">

    <!-- <van-row class="titlelperson">
      <van-col span="24" class="title">{{ title }}</van-col> -->

    <!-- <van-row>
        <van-col span="8">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-touxiang"></use>
          </svg>
        </van-col>
         <van-row>
          <van-col span="8">{{ param.name }}</van-col>
          <van-col span="8">{{ param.live }}</van-col>
          <van-col span="8">成长值{{ param.grow }}</van-col>
        </van-row> 
        
         <van-row>
          <van-col span="24">
            <svg class="icon" aria-hidden="true">
               <use xlink:href="#icon-touxiang"></use>
           </svg>
        </van-col>
        </van-row>
        
      </van-row> -->
    <!-- 两端对齐 -->
    <div class="d-flex flex-column">
      <div class="p-2 " style="margin: 0px auto;font-size: 18px;color: #ffffff;">{{ title }}</div>
      <div class="d-flex p-3  text-white" v-if="!login">
        <div class="p-2 " style="width: 62px;height: 62px;">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-touxiang"></use>
          </svg>
        </div>
        <div class="" style="width: 100%;margin-top: 10%;margin-left: 3%;">
          <div class="d-flex flex-column">
            <div class="" style="font-size: 16px;font-weight: 900;">{{ param.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="d-flex p-3  text-white" v-if="login">
        <div class="p-2 " style="width: 62px;height: 62px;">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-touxiang"></use>
          </svg>
        </div>
        <div class="" style="width: 100%;margin-top: 2%;margin-left: 6%;">
          <div class="d-flex flex-column">
            <div class="" style="font-size: 16px;font-weight: 900;">{{ param.name }}
            </div>
            <div class="d-flex  " style="width: 100%;">
              <div class="live ">
                {{ param.live }}</div>
              <div class=" ml-auto " @click="pushStarts()"><img class="imgstar" src="../../assets/images/stars.png" alt=""></div>
            </div>
            <div  @click="layoutDiss()"
              style="background-color: #ffffff;  border-radius: 4px; color: #FE6B1B; width: 90px; font-size: 12px;text-align: center;margin-top: 4px;">
              成长值{{ param.grow }}
              <van-icon name="arrow" class="arrow" />
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
/*
* title
*/
@Component({
  name: "Person",
})
export default class Person extends Vue {
  @Prop({ default: "" }) title: string | undefined; // 页面标题
  @Prop({ default: "" }) param: any | undefined; // Name
  @Prop({ default: "" }) starname: string | undefined; // 星星
  @Prop({ default: "" }) grow: string | undefined; // 成长
  @Prop({ default: false }) login: boolean | undefined; // 是否登录

  //星星的点击事件
  pushStarts(){
    // this.$router.push({
    //   name:"level"
    // })
  }
  layoutDiss(){
    this.$router.push({
      name:"Growth"
    })
  }
}
</script>
<style scoped lang="scss">
.live {
    background-color: #ffbb15;
    border-radius: 4px;
    line-height: 18px;
    width: 49px;
    font-size: 12px;
    text-align: center;
    height: 17px;
}

.tool {

  height: 100%;
  background: linear-gradient(0deg, rgba(172, 215, 255, 1) 0%, rgba(11, 84, 224, 1) 100%);
}

.namePerson {
  text-align: left;
  font-size: 16px;
  color: #FFFFFF;
  margin-left: 4%;
  margin-top: 3%;
}

.imgstar {
  width: 30px;
  height: 30px;
}

.title {
  margin: 4% auto 5% 0%;
  font-size: 18px;
  color: #FFFFFF;
  border-width: 0px;
  white-space: nowrap;
  text-transform: none;
  width: 100%;
  height: 100%;
  text-align: center;
}

.arrow {
  font-size: 12px;
  color: #FE6B1B;
  text-align: left;
}

.icon {
  //    width: 62px;
  //   height: 62px;
  // padding-bottom: 50%;
  // padding-left: 2%;
  width: 62px;
  height: 62px;
  // padding-bottom: 50%;
  /* padding-left: 2%; */
  //margin: 14% auto;
}

.imglocal {
  text-align: right;
  font-size: 12px;
  color: #FFFFFF;
}

.wiandle {
  margin-left: 24%;
  width: 30%;
}

.img {
  width: 40%;
}
</style>