[HTML] 프로필 카드

<template>
  <div
    v-if="props.isVisible"
    class="set_pop"
  >
    <ul>
      <li
        class="menu_item profile_card"
      >
        <div class="card">
          <header>
            <div class="avatar">
              <img src="../assets/puppy.png" />
            </div>
          </header>
        </div>
        <div class="name center">차은우 님</div>
        <div class="email center">asd@naver.com</div>
        <div class="button_selected">회원정보 관리</div>
      </li>
      <li
        class="menu_item"
      >
        <div class="wrap_set">
          <div class="left_set">카드관리</div>
          <div class="right_set">></div>
        </div>
        <div class="space"/>
        <div class="wrap_set">
          <div class="left_set">트래픽 설정</div>
          <div class="right_set">></div>
        </div>
      </li>
      <li
        class="menu_item" @click="pushPage('login')"
      >
        <div class="center">
          <div class="logout">로그아웃</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { routeHelper } from '@utils';

const { pushPage } = routeHelper;

// eslint-disable-next-line no-undef
const props = defineProps({
  isVisible: {
    type: Boolean,
    default: false,
  },
});
</script>

<style scoped>
.set_pop {
  position: absolute;
  z-index: 900;
  width: 350px;
  margin: 70px 0 0 1160px;
  cursor: pointer;
  background-color: #fff;
  border: solid 1px #ebebeb;
  border-radius: 20px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
}

.menu_item {
  padding: 20px 20px 20px 20px;
  font-size: 15px;
  font-weight: 500;
  color: #000; /* letter-spacing: -0.75px; */
}

.isUseToggle {
  display: flex;
  align-items: center;
}

.use_toggle {
  margin-left: 12px;
}

li:not(:last-child) {
  border-bottom: 1px solid #ebebeb;
}

.logout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 35px;
  color: grey;
  border: 1px solid rgb(186, 186, 186);
  border-radius: 5px;
}

.wrap_set {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.left_set,
.right_set {
  box-sizing: border-box;
  display: flex;
  gap: 5px;
  align-items: center;
  margin-right: 5px;
}

.space {
  height: 25px;
}

.button_selected {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  height: 30px;
  margin-bottom: 30px;
  margin-left: 30px;
  font-size: 14px;
  color: white;
  letter-spacing: 1.2px;
  cursor: pointer;
  background-color: #7369ab;
  border: solid 2px #7369ab;
  border-radius: 50px;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.email {
  margin-top: 10px;
  margin-bottom: 25px;
  font-weight: 400;
  color: #a1a1a1;
}

header {
  width: 100%;
  height: 85px;
  background-image: linear-gradient(#4129c7, #7166aa);
}

.avatar {
  position: absolute;
  top: 40px;
  left: 50%;
  z-index: 5;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  overflow: hidden;
  background: #ccc;
  border: 3px solid #fff;
  border-radius: 50%;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.card {
  position: relative;
  height: 150px;
  background: #fff;
}

.profile_card {
  padding: 0;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}
</style>