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

二期：首页样式修改

This commit is contained in:
朱浩 2024-08-01 14:33:40 +08:00
parent 241b0d3f24
commit cac9490256
2 changed files with 74 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,27 @@
<template>
<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">
<div v-show="$route != null" style="height: 100%">
<div v-show="$route != null" style="height: 100%; flex: 1">
<router-view v-slot="{ Component, route }">
<keep-alive>
<component :is="Component" v-if="route.meta.keepAlive" :key="route.name" />
@ -18,5 +38,57 @@
<style lang="scss" scoped>
.app-main {
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>

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

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