<template>
|
<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>
|
<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 } from "vuex";
|
import { getStore } from "@/utils/store";
|
// 注释后可浏览器测试
|
import { app, ipcRenderer } from "electron";
|
export default {
|
data() {
|
return {
|
// titleNum:1,
|
settingHeight: 0,
|
checkCloseDialog: false,
|
// 头像
|
avatar: require("../../assets/img/avatarIcon.png"),
|
};
|
},
|
methods: {
|
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;
|
}
|
},
|
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);
|
},
|
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()
|
},
|
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 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;
|
|
// &-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;
|
}
|
}
|
|
// 下拉框样式
|
.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>
|
