<template>
  <div
    style="background: url('/imgs/personal_banner.png'); background-size: cover"
    class="w-full h-220px relative"
  >
    <div
      class="w-full h-full bg-[rgba(18, 64, 38, 1)] backdrop-filter backdrop-blur-md"
    ></div>
    <div class="flex items-center absolute bottom-0 right-0 left-0 top-0">
      <div class="w-1200px m-auto flex items-center justify-between px-70px">
        <div class="flex items-center">
          <div
            class="w-120px h-120px rounded-full border-white border-1px border-solid mr-20px"
          >
            <img src="/imgs/avatar.png" class="object-cover w-full h-full" />
          </div>

          <div>
            <div class="text-size-20px text-white">cyt</div>
            <div class="h-26px"></div>
            <div class="text-size-16px text-white">2342342332@qq.com</div>
          </div>
        </div>
        <div class="flex items-center">
          <div class="text-white text-size-18px mr-19px">
            {{ $t("当前为月会员,有效期至2022年9月28日") }}
          </div>
          <div
            class="text-size-14px text-white w-80px h-30px bg-primary flex items-center justify-center rounded-full"
          >
            续 费
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
