edit #6

Merged
lyc merged 1 commits from lyc-dev into main 2024-07-10 09:44:02 +08:00
1 changed files with 57 additions and 30 deletions

View File

@ -4,43 +4,23 @@
<h3 class="title" @click="changeTab">AIX智慧课堂</h3> <h3 class="title" @click="changeTab">AIX智慧课堂</h3>
<div class="change-tab"> <div class="change-tab">
<ul class="flex"> <ul class="flex">
<li class="flex" @click="changePage('/resource')"> <li v-for="item in menus" :key="item.path" class="flex"
<i class="iconfont icon-resource">&#xe601;</i> :class="currentRoute == item.path ? 'active-li' : ''" @click="changePage(item.path)">
<span class="text">资源</span> <i class="iconfont" :class="item.icon"></i>
</li> <span class="text">{{ item.name }}</span>
<li class="flex" @click="changePage('/prepare')">
<i class="iconfont icon-prepare">&#xe6c2;</i>
<span class="text">备课</span>
</li>
<li class="flex" @click="changePage('/teach')">
<i class="iconfont icon-teach">&#xe672;</i>
<span class="text">授课</span>
</li> </li>
</ul> </ul>
<!-- <el-radio-group v-model="radio1">
<el-radio-button label="资源" value="resource" />
<el-radio-button label="备课" value="prepare" />
<el-radio-button label="授课" value="teach" />
</el-radio-group> -->
</div> </div>
</div> </div>
<div class="right-section flex"> <div class="right-section flex">
<div class="header-tool flex"> <div class="header-tool flex">
<span title="最小化" @click="minimizeWindow"><i class="iconfont">&#xe650;</i></span> <span title="最小化" @click="minimizeWindow"><i class="iconfont">&#xe650;</i></span>
<span :title="isMaxSize ? '向下还原' : '最大化'" @click="maximizeWindow" <span :title="isMaxSize ? '向下还原' : '最大化'" @click="maximizeWindow"><i class="iconfont">{{ isMaxSize ? '&#xe600' :
><i class="iconfont">{{ isMaxSize ? '&#xe600' : '&#xe695' }}</i></span '&#xe695' }}</i></span>
>
<span title="关闭" @click="closeWindow"><i class="iconfont">&#xe608;</i></span> <span title="关闭" @click="closeWindow"><i class="iconfont">&#xe608;</i></span>
</div> </div>
<div class="user flex"> <div class="user flex">
<!-- <el-icon color="#409EFF">
<UserFilled />
</el-icon>
<div class="user-info flex">
<span>{{ userInfo.nickName }}</span>
<span>{{ userInfo.postnames }}</span>
</div>-->
<div class="avatar-container"> <div class="avatar-container">
<el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click"> <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper"> <div class="avatar-wrapper">
@ -63,18 +43,45 @@
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref, watch } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus' import { ElMessageBox } from 'element-plus'
import useUserStore from '@/store/modules/user' import useUserStore from '@/store/modules/user'
const userStore = useUserStore() const userStore = useUserStore()
const userInfo = userStore.user const userInfo = userStore.user
console.log(userInfo)
const { ipcRenderer } = window.electron || {} const { ipcRenderer } = window.electron || {}
const radio1 = ref('resource')
const isMaxSize = ref(false) const isMaxSize = ref(false)
const router = useRouter() const router = useRouter()
const currentRoute = ref('')
const menus = ref([
{
icon: 'icon-jiaoxueziyuan icon-resource',
name: '资源',
path: '/resource'
},
{
icon: 'icon-beike icon-prepare',
name: '备课',
path: '/prepare'
},
{
icon: 'icon-jiangke1 icon-teach',
name: '授课',
path: '/teach'
}
])
//
watch(
() => router.currentRoute.value,
(newValue) => {
currentRoute.value = newValue.path
},
{ immediate: true }
)
// //
const minimizeWindow = () => { const minimizeWindow = () => {
@ -138,6 +145,7 @@ function setLayout() {
display: flex; display: flex;
align-items: center; align-items: center;
width: 50%; width: 50%;
.change-tab { .change-tab {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
margin-left: 20px; margin-left: 20px;
@ -149,30 +157,42 @@ function setLayout() {
flex-direction: column; flex-direction: column;
border-radius: 8px; border-radius: 8px;
margin: 0 5px; margin: 0 5px;
.text { .text {
font-size: 13px; font-size: 13px;
} }
.iconfont { .iconfont {
font-size: 22px; font-size: 22px;
} }
.icon-resource { .icon-resource {
color: #f99b53; color: #f99b53;
} }
.icon-prepare { .icon-prepare {
color: #b088e8; color: #b088e8;
} }
.icon-teach { .icon-teach {
color: #367dea; color: #367dea;
} }
&:hover { &:hover {
background: #d3e3fb; background: #d3e3fb;
} }
} }
.active-li {
background: #d3e3fb;
}
} }
} }
ul { ul {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
} }
.title { .title {
color: #4b73df; color: #4b73df;
font-size: 18px; font-size: 18px;
@ -186,20 +206,25 @@ function setLayout() {
justify-content: space-between; justify-content: space-between;
padding-bottom: 5px; padding-bottom: 5px;
flex-direction: column; flex-direction: column;
.header-tool { .header-tool {
padding-top: 5px; padding-top: 5px;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
span { span {
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: #c4c4c4; background-color: #c4c4c4;
} }
.iconfont { .iconfont {
margin: 0 10px; margin: 0 10px;
} }
} }
} }
.user { .user {
.user-info { .user-info {
padding-right: 5px; padding-right: 5px;
@ -209,6 +234,7 @@ function setLayout() {
} }
} }
} }
.avatar-container { .avatar-container {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
@ -221,6 +247,7 @@ function setLayout() {
border-radius: 10px; border-radius: 10px;
margin-top: 8px; margin-top: 8px;
} }
.user-avatar:hover { .user-avatar:hover {
cursor: pointer; cursor: pointer;
} }