From c87c4fe5aa3987d61b10d57208232a94eec83d7c Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期二, 04 六月 2024 11:58:18 +0800
Subject: [PATCH] 班级学员管理
---
src/layout/components/Navbar.vue | 477 ++++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 354 insertions(+), 123 deletions(-)
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 5fd5250..3a59aa2 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,145 +1,376 @@
<template>
- <div class="navbar">
- <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-
- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
-
- <div class="right-menu">
- <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
- <div class="avatar-wrapper">
- <span>{{userName}}</span>
- <i class="el-icon-caret-bottom" />
+ <div>
+ <div class="h">
+ <div class="h-title">
+ <img
+ src="@/assets/img/logo.jpg"
+ alt=""
+ >
+ <p>姹熻タ璇煶瑙嗛鍩硅绯荤粺</p>
+ </div>
+ <div class="h-list">
+ <div
+ class="h-list-con"
+ :class="titleNum == 1 ? ' h-list-con-act ' : ''"
+ @click="handleTitleNum(1)"
+ >
+ 绯荤粺棣栭〉
</div>
- <el-dropdown-menu slot="dropdown">
- <router-link to="/profile/index">
- <el-dropdown-item>涓汉淇℃伅</el-dropdown-item>
- </router-link>
- <router-link to="/">
- <el-dropdown-item>涓婚〉</el-dropdown-item>
- </router-link>
- <el-dropdown-item @click.native="logout" divided>閫�鍑�</el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
+ <div
+ class="h-list-con"
+ :class="titleNum == 2 ? ' h-list-con-act ' : ''"
+ @click="handleTitleNum(2)"
+ >
+ 鑰冭瘯
+ </div>
+ <div
+ class="h-list-con"
+ :class="titleNum == 3 ? ' h-list-con-act ' : ''"
+ @click="handleTitleNum(3)"
+ >
+ 鏁欏
+ </div>
+ <div
+ class="h-list-con"
+ :class="titleNum == 4 ? ' h-list-con-act ' : ''"
+ @click="handleTitleNum(4)"
+ >
+ 搴旂敤绠＄悊
+ </div>
+ </div>
+ <div
+ style="width:210px; display:flex; align-items:center"
+ class="op"
+ >
+ <div>
+ <svg
+ t="1651734628449"
+ class="icon"
+ viewBox="0 0 1024 1024"
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ p-id="2227"
+ width="24"
+ height="24"
+ >
+ <path
+ d="M236.539274 477.852272c17.253966 0 31.233352-13.980409 31.233352-31.233352 0-110.680798 64.816215-197.723224 173.372629-232.82058 14.792914-4.77884 23.811312-19.713994 21.168112-35.026748-0.426719-2.480494-0.64059-4.900613-0.64059-7.197936 0-24.614607 22.683628-44.63457 50.561559-44.63457 27.858488 0 50.53086 20.018939 50.53086 44.63457 0 2.379187-0.203638 4.727675-0.599657 7.005554-2.745531 15.535835 6.537903 30.674627 21.615297 35.290761 110.202914 33.714869 173.402305 118.550023 173.402305 232.748948 0 17.253966 13.980409 31.233352 31.234375 31.233352s31.233352-13.980409 31.233352-31.233352c0-133.414569-72.349795-238.259452-194.876386-284.724717-5.174859-54.537104-53.673433-97.422843-112.541169-97.422843-59.062164 0-107.691721 43.149752-112.623034 97.921193-120.482025 47.999201-194.306404 154.959258-194.306404 284.226367C205.305923 463.871863 219.285309 477.852272 236.539274 477.852272z"
+ p-id="2228"
+ fill="#707070"
+ ></path>
+ <path
+ d="M819.911812 602.309842l0-55.889915c0-17.253966-13.980409-31.233352-31.233352-31.233352s-31.234375 13.980409-31.234375 31.233352l0 67.988464c0 7.80885 2.928702 15.34243 8.204869 21.097504 40.10951 43.780109 86.381369 99.497085 95.105055 116.89329-0.315178 10.827603-3.345188 13.552667-32.586163 13.552667L196.820668 765.951853c-26.983561 0-31.671327-7.259334-32.484855-13.735839 9.17087-17.701151 55.381331-73.072249 95.449909-116.669186 5.306866-5.765307 8.245801-13.30912 8.245801-21.137413l0-67.988464c0-17.253966-13.980409-31.233352-31.233352-31.233352s-31.233352 13.980409-31.233352 31.233352l0 55.848982C101.69617 716.315362 101.69617 737.829352 101.69617 748.300844c0 38.727023 24.991184 80.117712 95.124498 80.117712l631.347179 0c23.5166 0 95.094822 0 95.094822-80.117712C923.262668 737.788419 923.262668 716.202799 819.911812 602.309842z"
+ p-id="2229"
+ fill="#707070"
+ ></path>
+ <path
+ d="M400.99993 366.001835c-17.253966 0-31.233352 13.980409-31.233352 31.234375l0 30.470989c0 17.253966 13.980409 31.234375 31.233352 31.234375s31.234375-13.980409 31.234375-31.234375l0-30.470989C432.234305 379.982244 418.253896 366.001835 400.99993 366.001835z"
+ p-id="2230"
+ fill="#707070"
+ ></path>
+ <path
+ d="M623.957885 366.001835c-17.253966 0-31.234375 13.980409-31.234375 31.234375l0 30.470989c0 17.253966 13.980409 31.234375 31.234375 31.234375 17.253966 0 31.233352-13.980409 31.233352-31.234375l0-30.470989C655.19226 379.982244 641.21185 366.001835 623.957885 366.001835z"
+ p-id="2231"
+ fill="#707070"
+ ></path>
+ <path
+ d="M512.170892 598.435605c43.963281 0 75.105558-30.318516 86.574774-48.223305 9.222035-14.396895 5.03262-33.358759-9.242502-42.763966-14.305821-9.405207-33.593096-5.38873-43.159986 8.764618-0.132006 0.193405-13.614066 19.754926-34.172287 19.754926-19.989263 0-32.43369-18.117636-33.267685-19.378349-9.181103-14.407128-28.285207-18.809391-42.834574-9.750061-14.650675 9.099239-19.155269 28.356838-10.044774 43.007513C437.238272 567.892985 467.99374 598.435605 512.170892 598.435605z"
+ p-id="2232"
+ fill="#707070"
+ ></path>
+ <path
+ d="M601.661066 856.999498c-15.179724-8.225335-34.131355-2.593058-42.346457 12.576433-9.292644 17.142425-27.248597 27.79709-46.871517 27.79709-19.530822 0-37.476543-10.67513-46.830585-27.848255-8.256034-15.149025-27.217898-20.741393-42.366923-12.495592-15.149025 8.256034-20.741393 27.217898-12.495592 42.366923 20.304442 37.283138 59.275012 60.444651 101.6931 60.444651 42.560328 0 81.561597-23.180955 101.794407-60.494793C622.453624 884.176464 616.821347 865.224834 601.661066 856.999498z"
+ p-id="2233"
+ fill="#707070"
+ ></path>
+ </svg>
+ </div>
+ <div style="margin:0 30px;">
+ <svg
+ t="1651734671187"
+ class="icon"
+ viewBox="0 0 1024 1024"
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ p-id="3098"
+ width="24"
+ height="24"
+ >
+ <path
+ d="M511.175727 63.057151c-248.402463 0-449.734888 201.352891-449.734888 449.734888 0 248.387114 201.332425 449.740004 449.734888 449.740004 248.366647 0 449.738981-201.352891 449.738981-449.740004C960.914708 264.410042 759.542374 63.057151 511.175727 63.057151L511.175727 63.057151zM511.175727 925.048337c-227.684606 0-412.257322-184.564529-412.257322-412.256298 0-227.688699 184.573739-412.255275 412.257322-412.255275 227.687676 0 412.260391 184.566576 412.260391 412.255275C923.436118 740.482785 738.863403 925.048337 511.175727 925.048337L511.175727 925.048337zM511.175727 925.048337"
+ p-id="3099"
+ fill="#707070"
+ ></path>
+ <path
+ d="M477.49565 650.367371c-0.225127-7.990998-0.336668-13.950733-0.336668-17.922185 0-23.479761 3.347235-43.725874 9.984399-60.796668 4.874007-12.869099 12.757558-25.806759 23.588231-38.904055 7.938809-9.531074 22.288632-23.477714 42.989093-41.745776 20.703531-18.257829 34.196847-32.835849 40.384779-43.664475 6.183839-10.835789 9.29776-22.686698 9.29776-35.55989 0-23.252587-9.072633-43.72792-27.219945-61.309344-18.150382-17.581424-40.439014-26.423813-66.808592-26.423813-25.464975 0-46.734394 7.995091-63.805188 23.928992-17.068747 15.933901-28.242228 40.832987-33.573653 74.747401l-61.479213-7.313569c5.559623-45.428655 22.0062-80.195483 49.341778-104.355743 27.335578-24.159236 63.520709-36.238342 108.4899-36.238342 47.642067 0 85.638449 12.985756 113.998357 38.903032 28.354791 25.919323 42.533722 57.284681 42.533722 94.0357 0 21.264303-4.989641 40.886199-14.97404 58.809407-9.979282 17.921161-29.489638 39.755446-58.468646 65.448618-19.452028 17.353227-32.212656 30.05655-38.168298 38.280862-5.958712 8.224312-10.437723 17.58654-13.331633 28.247344-2.888793 10.662851-4.536316 27.897374-4.988618 51.836599l-57.45455 0L477.494627 650.367371 477.49565 650.367371z"
+ p-id="3100"
+ fill="#707070"
+ ></path>
+ <path
+ d="M473.811748 770.316254 473.811748 702.21011 541.923008 702.21011 541.923008 770.316254 473.811748 770.316254 473.811748 770.316254Z"
+ p-id="3101"
+ fill="#707070"
+ ></path>
+ </svg>
+ </div>
+ <!-- <div @click="handleSetting">
+ <img
+ src="https://img1.baidu.com/it/u=272523489,3471024224&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
+ style="width:24px;height:24px; border-radius:20px;"
+ alt=""
+ >
+ </div> -->
+ <el-dropdown
+ trigger="click"
+ placement="top"
+ >
+ <div>
+ <img
+ :src="avatar"
+ style="width:24px;height:24px; border-radius:20px;"
+ alt=""
+ >
+ </div>
+ <template #dropdown>
+ <el-dropdown-menu>
+ <el-dropdown-item>
+ <div
+ class="setting-con"
+ @click="getMine('/mine')"
+ >
+ 涓汉璁剧疆
+ </div>
+ </el-dropdown-item>
+ <el-dropdown-item>
+ <div
+ class="setting-con"
+ @click="getMine('/study-particulars')"
+ >
+ 瀛︿範妗ｆ
+ </div>
+ </el-dropdown-item>
+ <el-dropdown-item>
+ <div
+ class="setting-con"
+ @click="() => checkCloseDialog = true"
+ >
+ 閫�鍑虹郴缁�
+ </div>
+ </el-dropdown-item>
+ </el-dropdown-menu>
+ </template>
+ </el-dropdown>
+ </div>
+
+ <!-- <div
+ class="setting"
+ :style="`height:${settingHeight}px`"
+ v-show="settingHeight !== 0"
+ >
+ <div
+ class="setting-con"
+ @click="getMine"
+ >
+ 涓汉璁剧疆
+ </div>
+ <div
+ class="setting-con"
+ @click="() => checkCloseDialog = true"
+ >
+ 閫�鍑虹郴缁�
+ </div>
+ </div> -->
</div>
+ <s-dialog
+ v-model="checkCloseDialog"
+ style="z-index:2"
+ title="纭畾鍏抽棴绯荤粺锛�"
+ width="200px"
+ >
+ <div style="display:flex; justify-content:space-between; padding:10px 10px;">
+ <el-button
+ colorType="default"
+ size="small"
+ @click="() => checkCloseDialog = false"
+ >鍙栨秷</el-button>
+ <el-button
+ colorType="deepBlue"
+ size="small"
+ @click="closeSystem"
+ >纭畾</el-button>
+ </div>
+ </s-dialog>
</div>
</template>
<script>
-import { mapGetters, mapMutations } from 'vuex'
-import loginApi from '@/api/login'
-import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
-
+import { mapGetters } from "vuex";
+// 娉ㄩ噴鍚庡彲娴忚鍣ㄦ祴璇�
+// import { app, ipcRenderer } from "electron";
export default {
- components: {
- Breadcrumb,
- Hamburger
- },
- computed: {
- ...mapGetters([
- 'sidebar',
- 'device',
- 'userName'
- ])
+ data () {
+ return {
+ // titleNum:1,
+ settingHeight: 0,
+ checkCloseDialog: false,
+ // 澶村儚
+ avatar: require("../../assets/img/avatarIcon.png"),
+ };
},
methods: {
- toggleSideBar () {
- this.$store.dispatch('app/toggleSideBar')
+ handleTitleNum(num) {
+ switch (num) {
+ case 1:
+ this.$router.push("/");
+ break;
+ case 2:
+ this.$router.push("/exam");
+ break;
+ case 3:
+ this.$router.push("/teach");
+ break;
+ case 4:
+ this.$router.push("/manage");
+ default:
+ break;
+ }
},
- logout () {
- let _this = this
- loginApi.logout().then(function (result) {
- if (result && result.code === 1) {
- _this.clearLogin()
- _this.$router.push({ path: '/login' })
+ handleSetting() {
+ clearInterval(this.st);
+ this.t = setInterval(() => {
+ this.settingHeight += 2;
+ if (this.settingHeight >= 80) {
+ this.settingHeight = 80;
+ window.addEventListener("click", this.handleClick);
+ clearInterval(this.t);
}
- })
+ }, 1);
},
- ...mapMutations('user', ['clearLogin'])
- }
-}
+ handleClick(e) {
+ if (e.target.className !== "setting-con" && this.settingHeight == 80) {
+ this.settinghidden();
+ }
+ },
+ settinghidden() {
+ document.removeEventListener("click", this.handleClick);
+ clearInterval(this.t);
+ this.st = setInterval(() => {
+ this.settingHeight -= 2;
+ if (this.settingHeight <= 0) {
+ this.settingHeight = 0;
+ clearInterval(this.st);
+ }
+ }, 1);
+ },
+ closeSystem() {
+ // _app.destroy()
+ //娉ㄩ噴鍚庡彲娴忚鍣ㄦ祴璇�
+ // ipcRenderer.send("closeWindow");
+ // app.quit();
+ },
+ // 涓汉璁剧疆
+ getMine(i) {
+ this.$router.push(i);
+ },
+ },
+ computed: {
+ ...mapGetters({
+ titleNum: "GET_HEADER_NUM",
+ userInfo: "userInfo",
+ }),
+ },
+ created() {
+ // this.titleNum = this.$store.getters.getHeader
+ },
+ mounted() {
+ console.log(this.$store);
+ // 璁剧疆澶村儚
+ this.avatar = this.userInfo.avatar ? this.userInfo.avatar : this.avatar;
+ },
+};
</script>
-<style lang="scss" scoped>
-.navbar {
- height: 50px;
+<style scoped lang="scss">
+.h {
+ width: 100vw;
+ background: white;
+ box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
+ height: 75px;
+ display: flex;
+ justify-content: space-between;
+ position: fixed;
+ z-index: 999;
+ &-title {
+ display: flex;
+ align-items: center;
+ margin-left: 50px;
+
+ & img {
+ width: 50px;
+ height: 50px;
+ }
+ }
+
+ &-list {
+ // margin:0 auto;
+ display: flex;
+
+ &-con {
+ // width:
+ font-size: 20px;
+ line-height: 70px;
+ font-weight: 500;
+ color: #aaa;
+ margin: 0 50px;
+ cursor: pointer;
+
+ &-act {
+ border-bottom: 5px solid rgba(16, 71, 247, 1);
+
+ color: rgba(16, 71, 247, 1);
+ }
+ }
+ }
+}
+
+.setting {
+ position: absolute;
+ right: 69px;
+ top: 55px;
+ box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
+ height: 80px;
overflow: hidden;
- position: relative;
- background: #fff;
- box-shadow: 0 1px 4px rgba(0,21,41,.08);
- .hamburger-container {
- line-height: 46px;
- height: 100%;
- float: left;
+ // &-con {
+ // width: 80px;
+ // height: 30px;
+
+ // background: white;
+ // cursor: pointer;
+ // text-align: center;
+ // line-height: 30px;
+ // padding: 5px 2px;
+
+ // &:hover {
+ // background: rgb(240, 240, 240);
+ // }
+ // }
+}
+
+.op {
+ & div {
cursor: pointer;
- transition: background .3s;
- -webkit-tap-highlight-color:transparent;
-
- &:hover {
- background: rgba(0, 0, 0, .025)
- }
}
+}
- .breadcrumb-container {
- float: left;
- }
-
- .errLog-container {
- display: inline-block;
- vertical-align: top;
- }
-
- .right-menu {
- float: right;
- height: 100%;
- line-height: 50px;
-
- &:focus {
- outline: none;
- }
-
- .right-menu-item {
- display: inline-block;
- padding: 0 8px;
- height: 100%;
- font-size: 18px;
- color: #5a5e66;
- vertical-align: text-bottom;
-
- &.hover-effect {
- cursor: pointer;
- transition: background .3s;
-
- &:hover {
- background: rgba(0, 0, 0, .025)
- }
- }
- }
-
- .avatar-container {
- margin-right: 30px;
-
- .avatar-wrapper {
- margin-top: 5px;
- position: relative;
-
- .user-avatar {
- cursor: pointer;
- width: 40px;
- height: 40px;
- border-radius: 10px;
- }
-
- .el-icon-caret-bottom {
- cursor: pointer;
- position: absolute;
- right: -20px;
- top: 25px;
- font-size: 12px;
- }
- }
- }
- }
+// 涓嬫媺妗嗘牱寮�
+.example-showcase .el-dropdown + .el-dropdown {
+ margin-left: 15px;
+}
+.example-showcase .el-dropdown-link {
+ cursor: pointer;
+ color: var(--el-color-primary);
+ display: flex;
+ align-items: center;
}
</style>
--
Gitblit v1.8.0