mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/unity.git
synced 2026-08-19 04:13:58 +00:00
ad85832e75
user login UI
88 lines
4.4 KiB
Vue
88 lines
4.4 KiB
Vue
<template>
|
|
<div v-if="user_detail.username" class="d-flex">
|
|
<div class="header-btn-lg pr-0">
|
|
<div class="widget-content p-0">
|
|
<div class="widget-content-wrapper">
|
|
<div class="widget-content-left">
|
|
<b-dropdown toggle-class="p-0 mr-2" menu-class="dropdown-menu-lg" variant="link" no-caret right>
|
|
<span slot="button-content">
|
|
<div class="icon-wrapper icon-wrapper-alt rounded-circle">
|
|
<img width="50" height="50" class="rounded-circle" :src="user_detail.img[0].file_info.small.file" alt="">
|
|
</div>
|
|
</span>
|
|
<div class="dropdown-menu-header">
|
|
<div class="dropdown-menu-header-inner bg-info">
|
|
<div class="menu-header-image opacity-2 dd-header-bg-6"></div>
|
|
<div class="menu-header-content text-left">
|
|
<div class="widget-content p-0">
|
|
<div class="widget-content-wrapper">
|
|
<div class="widget-content-left mr-3">
|
|
<img width="42" class="rounded-circle" :src="user_detail.img[0].file_info.small.file" alt="">
|
|
</div>
|
|
<div class="widget-content-left">
|
|
<div class="widget-heading">{{ user_detail.username}}</div>
|
|
<div class="widget-subheading opacity-8">{{ user_detail.role_list[0].username }}</div>
|
|
</div>
|
|
<div class="widget-content-right mr-2">
|
|
<button
|
|
@click="logout"
|
|
class="btn-shadow btn-shine btn btn-focus"
|
|
>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="scroll-area-xs" style="height: 80px;">
|
|
<vue-perfect-scrollbar class="scrollbar-container" v-once>
|
|
<ul class="nav flex-column">
|
|
<li class="nav-item-header nav-item">My Account</li>
|
|
<li class="nav-item">
|
|
<router-link
|
|
:to="'/admin/profile/update'"
|
|
class="nav-link"
|
|
title="Profile"
|
|
>
|
|
My Profile
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
</vue-perfect-scrollbar>
|
|
</div>
|
|
</b-dropdown>
|
|
</div>
|
|
<div class="widget-content-left ml-3 header-user-info">
|
|
<div class="widget-heading">{{ user_detail.username }}</div>
|
|
<div class="widget-subheading">{{ user_detail.role_list[0].name }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import VuePerfectScrollbar from 'vue-perfect-scrollbar'
|
|
import VueCircle from 'vue2-circle-progress'
|
|
|
|
export default {
|
|
components: {
|
|
VuePerfectScrollbar,
|
|
VueCircle,
|
|
},
|
|
props: {
|
|
user_detail: Object
|
|
},
|
|
methods: {
|
|
logout() {
|
|
General.logout();
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|