123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273 |
- <template>
- <el-row type="flex" class="header-bg" justify="center">
- <el-col :span="20" style="display: flex; align-items: center">
- <div class="col-logo">
- <a href="/">
- <div style="display: flex; flex-direction: row; align-items: center">
- <div v-if="siteData.frontLogo">
- <!-- <img
- :src="siteData.frontLogo"
- :alt="siteData.siteName"
- style="height: 40px"
- /> -->
- <div class="logoBox">
- <img
- v-if="siteData.backLogo"
- :src="siteData.backLogo"
- class="sidebar-logo"
- style="height: 40px"
- />
- <h1 class="sidebar-title">{{ siteData.siteName }}</h1>
- </div>
- </div>
- <div v-else class="site-tt">{{ siteData.siteName }}</div>
- </div>
- </a>
- </div>
- <div class="col-menu">
- <div>
- <el-button
- v-for="item in menuList"
- :key="item.url"
- :class="isActive(item.url)"
- size="small"
- round
- @click="navClick(item.url)"
- >
- {{ item.title }}
- </el-button>
- </div>
- </div>
- <div class="right-user">
- <div class="top-avatar">
- <img v-if="avatar != null && avatar !== ''" :src="avatar" />
- <img v-else src="@/assets/web/avatar.png" />
- </div>
- <div>{{ realName }}</div>
- <a v-if="roleType === 2" class="alink" @click="toAdmin">管理中心</a>
- <a @click="logout">退出</a>
- </div>
- </el-col>
- </el-row>
- </template>
- <script>
- import { mapGetters } from "vuex";
- export default {
- data() {
- return {
- menuList: [
- {
- url: "/web/course",
- title: "课程学习",
- },
- {
- url: "/web/index",
- title: "在线考试",
- },
- {
- url: "/web/repo",
- title: "题库训练",
- },
- {
- url: "/web/notice",
- title: "系统公告",
- },
- {
- url: "/web/uc",
- title: "用户中心",
- },
- ],
- activeIndex: "/web/course",
- };
- },
- computed: {
- ...mapGetters(["avatar", "realName", "siteData", "roleType"]),
- },
- created() {
- this.focusMenu();
- },
- methods: {
- // 选定菜单
- focusMenu() {
- const activeMenu = this.$route.meta.activeMenu;
- if (activeMenu) {
- this.activeIndex = activeMenu;
- return;
- }
- const path = this.$route.path.split("/");
- const prefix = path[0] + "/" + path[1] + "/" + path[2];
- console.log(prefix);
- this.activeIndex = prefix;
- },
- isActive(url) {
- if (this.activeIndex === url) {
- return "nav active";
- }
- return "nav";
- },
- navClick(url) {
- this.activeIndex = url;
- this.$router.push({ path: url });
- },
- async logout() {
- const that = this;
- this.$confirm("确实要退出吗?", "提示", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "info",
- })
- .then(() => {
- that.$store.dispatch("user/logout").then(() => {
- that.$router.push("/login");
- });
- })
- .catch(() => {});
- },
- handleUc() {
- this.$router.push({ name: "UserCenter" });
- },
- toAdmin() {
- this.$router.push({ path: "/admin/dashboard" });
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- .header-bg {
- height: 60px;
- background: #4377fb;
- }
- .right-user {
- display: flex;
- justify-content: flex-end;
- flex-direction: row;
- line-height: 60px;
- align-items: center;
- width: 250px;
- }
- .site-tt {
- font-weight: 700;
- font-size: 20px;
- color: #eee;
- flex-grow: 1;
- text-align: left;
- padding-left: 10px;
- }
- .right-user a,
- .right-user div {
- color: #efefef;
- font-size: 14px;
- font-weight: 500;
- margin-right: 10px;
- }
- .right-user a:last-child {
- margin-right: 0px !important;
- }
- .right-user a:hover {
- color: #ffd550;
- }
- /deep/ .alink {
- color: #ffd550 !important;
- }
- /deep/ .alink:hover {
- color: #f94e3e !important;
- }
- .nav {
- color: #fff;
- border: none;
- background: transparent;
- font-weight: 500;
- font-size: 16px;
- padding: 5px 10px 5px 10px;
- margin-right: 10px;
- }
- .active {
- color: #000055;
- background: #ffd550;
- }
- .nav:hover {
- color: #000055;
- background: #ffd550;
- }
- .col-logo {
- display: flex;
- align-items: center;
- justify-content: flex-start;
- height: 60px;
- max-width: 200px;
- }
- .col-menu {
- flex-grow: 1;
- align-items: center;
- text-align: center;
- }
- /deep/ .top-avatar {
- text-align: right;
- display: flex;
- align-items: center;
- margin-right: 5px !important;
- }
- /deep/ .top-avatar div {
- display: flex;
- align-items: center;
- margin-right: -10px !important;
- }
- /deep/ .top-avatar img {
- width: 30px;
- height: 30px;
- border-radius: 15px;
- }
- .logoBox {
- display: flex;
- justify-content: flex-start;
- align-items: center;
- position: relative;
- .sidebar-logo {
- margin-right: 0px;
- }
- .sidebar-title {
- position: absolute;
- left: 48px;
- display: inline-block;
- margin: 0;
- color: #fff;
- font-weight: 600;
- line-height: 50px;
- font-size: 18px;
- font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
- vertical-align: middle;
- white-space: nowrap;
- }
- }
- </style>
|