<template>
  <div class="w-full h-220rem relative bg-primary flex items-center">

    <div class=" w-full flex items-center justify-between px-24rem">
      <div @click="$router.push('/user/account-setting')" class="flex h-120rem">
        <div class="w-120rem h-120rem rounded-full border-white border-1rem border-solid mr-20rem">
          <img :src="$store.state.userinfo.avatarUrl"  class="object-cover w-full h-full rounded-full" />
        </div>

        <div class="flex flex-col h-full justify-around">
          <div class="text-size-36rem font-300 text-white flex items-end">
            <span>{{$store.state.userinfo.nickname}}</span>
            <img v-if="$store.state.userinfo.exipreVip"  src="/imgs/h5-vip.png" class="w-25rem h-auto ml-10rem" />
          </div>
          <div class="text-size-36rem font-300 text-white">{{$store.state.userinfo.email}}</div>
          <div v-if="$store.state.userinfo.exipreVip"  class="text-white text-size-20rem font-300 mr-19rem">
            {{ $t("当前会员有效期至") + $store.state.userinfo.vipStopStr}}
          </div>
        </div>
      </div>
      <div v-if="$store.state.userinfo.exipreVip" @click="$router.push('/open-vip')" class="flex items-center">
        <div
          class="text-size-24rem text-primary w-120rem h-50rem bg-white flex items-center justify-center rounded-full">
          {{ $t("续费")}}
        </div>
      </div>
    </div>
  </div>
</template>
