fashion-ssr-vue3/components/common/user-avatar/index.vue

<!-- @format -->

<script setup lang="ts">
import { useUserStore } from '@/stores/modules/user'
import { useCommonStore } from '@/stores/modules/common'

const commonStore = useCommonStore()
const userStore = useUserStore()
const { isLogin } = storeToRefs(userStore)
const { noticeRemind } = storeToRefs(commonStore)
const hoverStatus = ref<any>()

const { openLoginModal } = useLoginModal()
commonStore.getNoticeRemind()

// const { locale, setLocale } = useI18nLocale()
// function handleClick({ key }: any) {
//   setLocale(key)
// }

async function clickLogin() {
  try {
    const { status } = await openLoginModal()
    if (status)
      location.reload()
  }
  catch (error) {
    console.log(error)
  }
}

async function onSelected(command: string | number | object) {
  if (command === 'signOut') {
    // 退出登录
    try {
      userStore.logout()
    }
    catch (error) {
      console.log(error, 'error')
    }
  }
}
</script>

<template>
  <div>
    <div v-if="!isLogin">
      <el-button
        class="b-solid b-1px b-#AB7045 custom-btn-login !text-#AB7045 !w-100px !h-34px !text-16px !b-rd-150px"
        @mouseover="hoverStatus = '!fill-#fff'" @mouseleave="hoverStatus = '!fill-#CC9879'" @click="clickLogin"
      >
        <template #icon>
          <svgo-user :class="hoverStatus" class="w-24px h-24px" :filled="true" />
        </template> Log In
      </el-button>
    </div>
  </div>
</template>

<style lang="less">
 .custom-btn-login {
  .el-icon{
    font-size: 24px;
  }
}
.custom-dropdown {
&.el-dropdown__popper{
  border-radius: 10px;

.el-scrollbar{
  .el-dropdown__list{
    width: 415px;
    padding: 30px!important;
  }
  .el-dropdown-menu {
    .el-dropdown-menu__item{
      padding-bottom: 20px;
      padding-left: 0 !important;
      padding-right: 0 !important;
      padding-top: 0 !important;
      &:last-child{
        padding-bottom: 0;
      }
    }}
  }}
}
</style>