zhuhao
/
AIx_Smarttalk
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 26 Wiki Activity

zhuhao_dev #91

Merged
zhuhao merged 3 commits from zhuhao_dev into main 2024-08-01 17:47:53 +08:00
Conversation 0 Commits 3 Files Changed 9 +74 -2
2 changed files with 74 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit cac9490256 - Show all commits

74
src/renderer/src/layout/components/AppMain.vue
View File

@ -1,7 +1,27 @@
<template> <template>
<section class="app-main"> <section class="app-main">
<div class="app-main-left">
<div class="app-main-left-item">
<div class="app-main-left-item-icon">
<i class="iconfont icon-gongzuotai"></i>
</div>
<div class="app-main-left-item-text">工作台</div>
</div>
<div class="app-main-left-item">
<div class="app-main-left-item-icon">
<i class="iconfont icon-yanjiushi"></i>
</div>
<div class="app-main-left-item-text">研究室</div>
</div>
<div class="app-main-left-item">
<div class="app-main-left-item-icon">
<i class="iconfont icon-zhuanyeziyuanku"></i>
</div>
<div class="app-main-left-item-text">资料库</div>
</div>
</div>
<transition mode="out-in" name="fade-transform"> <transition mode="out-in" name="fade-transform">
<div v-show="$route != null" style="height: 100%"> <div v-show="$route != null" style="height: 100%; flex: 1">
<router-view v-slot="{ Component, route }"> <router-view v-slot="{ Component, route }">
<keep-alive> <keep-alive>
<component :is="Component" v-if="route.meta.keepAlive" :key="route.name" /> <component :is="Component" v-if="route.meta.keepAlive" :key="route.name" />
@ -18,5 +38,57 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.app-main { .app-main {
height: 100%; height: 100%;
display: flex;
flex-direction: row;
.app-main-left {
width: 80px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
.app-main-left-item {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 65px;
height: 65px;
padding-top: 10px;
margin: 10px 0;
cursor: pointer;
&:hover {
background: #839ce0;
border-radius: 10px;
.app-main-left-item-icon {
background: #fff;
color: #758fd3;
}
}
&.active {
background: #839ce0;
border-radius: 10px;
.app-main-left-item-icon {
background: #fff;
color: #758fd3;
}
}
.app-main-left-item-text {
font-size: 12px;
}
.app-main-left-item-icon {
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
background: #7c97e1;
color: #fff;
i {
font-size: 24px;
}
}
}
}
} }
</style> </style>

2
src/renderer/src/layout/index.vue
View File

@ -32,6 +32,6 @@ let uploaderStore = ref(uploaderState())
height: 80px; height: 80px;
} }
.el-main { .el-main {
--el-main-padding: 0 20px; --el-main-padding: 0 20px 0 0;
} }
</style> </style>