Browse Source

侧边栏及顶部优化

newStyle
jyt 2 years ago
parent
commit
dd6765c71f
9 changed files with 144 additions and 19 deletions
  1. BIN
      public/img/icon/accountIconSel1.png
  2. BIN
      public/img/icon/accountIconSel2.png
  3. BIN
      public/img/icon/accountIconSel3.png
  4. BIN
      public/img/icon/accountIconSel4.png
  5. BIN
      public/img/icon/msgIcon.png
  6. BIN
      public/img/icon/noticeIcon.png
  7. +34
    -4
      src/page/index/logo.vue
  8. +1
    -1
      src/page/index/sidebar/index.vue
  9. +109
    -14
      src/page/index/top/index.vue

BIN
public/img/icon/accountIconSel1.png View File

Before After
Width: 28  |  Height: 28  |  Size: 788 B

BIN
public/img/icon/accountIconSel2.png View File

Before After
Width: 28  |  Height: 28  |  Size: 1.3 KiB

BIN
public/img/icon/accountIconSel3.png View File

Before After
Width: 28  |  Height: 28  |  Size: 1.4 KiB

BIN
public/img/icon/accountIconSel4.png View File

Before After
Width: 28  |  Height: 30  |  Size: 1.1 KiB

BIN
public/img/icon/msgIcon.png View File

Before After
Width: 36  |  Height: 36  |  Size: 1.2 KiB

BIN
public/img/icon/noticeIcon.png View File

Before After
Width: 36  |  Height: 36  |  Size: 1.4 KiB

+ 34
- 4
src/page/index/logo.vue View File

@@ -1,13 +1,19 @@
<template>
<div class="avue-logo">
<div class="avue-logo" style="background-color: #001529;">
<transition name="fade">
<span v-if="keyCollapse" key="0" class="avue-logo_subtitle" @click="goIndex">
{{website.subtitle}}
<div class="logo">
<i class="logoIcon" style="width:44px;"></i>
<!-- <span>{{ website.subtitle }}</span> -->
</div>
</span>
</transition>
<transition-group name="fade">
<span v-if="!keyCollapse" key="1" class="avue-logo_title" @click="goIndex">
{{ website.title }}
<div class="logo">
<i class="logoIcon"></i>
<span>{{ website.title }}</span>
</div>
</span>
</transition-group>
</div>
@@ -34,6 +40,30 @@ export default {
</script>

<style lang="scss">
.logo{
display: flex;
align-items: center;
justify-content: center;
padding-top: 20px;
span{
width: 99px;
height: 28px;
font-size: 20px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 28px;
margin-left: 12px;
}
.logoIcon{
display: block;
width: 58px;
height: 44px;
background: url('../../../public/logoPng.png') no-repeat;
background-size: 100%;
}
}

.fade-leave-active {
transition: opacity 0.2s;
}
@@ -51,7 +81,7 @@ export default {
width: 240px;
height: 64px;
line-height: 64px;
background-color: #20222a;
// background-color: #20222a;
font-size: 20px;
overflow: hidden;
box-sizing: border-box;


+ 1
- 1
src/page/index/sidebar/index.vue View File

@@ -1,5 +1,5 @@
<template>
<div class="avue-sidebar">
<div class="avue-sidebar" style="background-color: #001529;">
<logo/>
<el-scrollbar style="height:100%">
<div


+ 109
- 14
src/page/index/top/index.vue View File

@@ -35,7 +35,7 @@
}}
</div>
<el-button @click="goChange" class="avue-header" style="margin-left: 10px;color: #fff;padding: 10px;">切换后台</el-button>
<el-button @click="goChange" class="avue-header" style="margin-left: 10px;color: #2671E2;border:1px solid #2671E2;padding: 10px;">切换后台</el-button>
</div>
<div
v-if="companyName"
@@ -53,9 +53,9 @@
<img class="daili2img" src="/img/qh1.png" alt="" />
</div> -->
<div class="daili">
{{ companyName }}
{{ companyName }}1
</div>
<el-button @click="goBack" class="avue-header" style="margin-left: 10px;color: #fff;padding: 10px;">切换项目</el-button>
<el-button @click="goBack" class="avue-header" style="margin-left: 10px;color: #2671E2;border:1px solid #2671E2;padding: 10px;">切换项目</el-button>
</div>
</div>
<div class="top-bar__right">
@@ -89,8 +89,12 @@
<top-lock />
</div>
</el-tooltip>
<div class="notice">
<i class="noticeIcon"></i>
<span>通知(0)</span>
</div>
<!-- 暂时注释下一版本开发上线 -->
<!-- <el-popover placement="bottom" trigger="hover" width="350">
<el-popover placement="bottom" trigger="hover" width="350">
<el-table :data="gridData" @row-click="msgTap">
<el-table-column
width="324"
@@ -105,8 +109,11 @@
</template>
</el-table-column>
</el-table>
<i slot="reference" class="el-icon-bell" style="font-size: 18px;color: #fff;"></i>
</el-popover> -->
<div class="msg" slot="reference">
<i class="msgIcon"></i>
<span>消息(0)</span>
</div>
</el-popover>

<el-tooltip
v-if="showTheme"
@@ -139,22 +146,41 @@
>
</el-tooltip>
<el-dropdown style="cursor: pointer">
<span class="el-dropdown-link">
<span class="el-dropdown-link" style="display:flex;align-items: center;">
<el-avatar :size="30" :src="circleUrl" style="margin-right:5px"></el-avatar>
{{ userInfo.username }}
<i class="el-icon-arrow-down el-icon--right" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item divided>
<router-link to="/">首页</router-link>
</el-dropdown-item>
<el-dropdown-item divided>
<router-link to="/info/index">个人信息</router-link>
<router-link to="/">
<span class="accountIcon">
<i class="accountIcon1"></i>
首页
</span>
</router-link>
</el-dropdown-item>
<el-dropdown-item divided @click.native="$refs.seting.open()"
>界面设置
>
<span class="accountIcon">
<i class="accountIcon2"></i>
帮助中心
</span>
</el-dropdown-item>
<el-dropdown-item divided>
<router-link to="/info/index">
<span class="accountIcon">
<i class="accountIcon3"></i>
账号设置
</span>
</router-link>
</el-dropdown-item>
<el-dropdown-item divided @click.native="logout"
>退出系统
>
<span class="accountIcon">
<i class="accountIcon4"></i>
退出系统
</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@@ -185,6 +211,7 @@ export default {
filters: {},
data() {
return {
circleUrl:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
options: [],
value: "",
companyName: localStorage.getItem("topName"),
@@ -492,8 +519,76 @@ export default {
</script>

<style lang="scss" scoped>
.accountIcon{
display: flex;
align-items: center;
.accountIcon1{
display: block;
background: url('../../../../public/img/icon/accountIconSel1.png') no-repeat;
width: 16px;
height: 16px;
background-size: 100%;
margin-right: 8px;
}
.accountIcon2{
display: block;
background: url('../../../../public/img/icon/accountIconSel2.png') no-repeat;
width: 16px;
height: 16px;
background-size: 100%;
margin-right: 8px;
}
.accountIcon3{
display: block;
background: url('../../../../public/img/icon/accountIconSel3.png') no-repeat;
width: 16px;
height: 16px;
background-size: 100%;
margin-right: 8px;
}
.accountIcon4{
display: block;
background: url('../../../../public/img/icon/accountIconSel4.png') no-repeat;
width: 16px;
height: 16px;
background-size: 100%;
margin-right: 8px;
}
}
.notice{
display: flex;
align-items: center;
margin-right: 20px;
cursor: pointer;
.noticeIcon{
display: block;
background: url('../../../../public/img/icon/noticeIcon.png') no-repeat;
width: 16px;
height: 16px;
background-size: 100%;
}
span{
font-size: 15px;color: #32363D;font-weight: 400;margin-left: 5px;
}
}
.msg{
display: flex;
align-items: center;
margin-right: 20px;
cursor: pointer;
.msgIcon{
display: block;
background: url('../../../../public/img/icon/msgIcon.png') no-repeat;
width: 16px;
height: 16px;
background-size: 100%;
}
span{
font-size: 15px;color: #32363D;font-weight: 400;margin-left: 5px;
}
}
.daili {
color: #ffffff;
color: #32363D;
font-size: 15px;
margin-left: 4px;
}


Loading…
Cancel
Save