| | |
| | | <top-search class="top-bar__item" v-if="setting.search"></top-search> |
| | | </div> |
| | | <div class="top-bar__right"> |
| | | <!-- <div v-if="setting.color" class="top-bar__item"> |
| | | <top-color></top-color> |
| | | </div> |
| | | <div v-if="setting.theme" class="top-bar__item"> |
| | | <top-theme></top-theme> |
| | | </div> --> |
| | | <div v-if="setting.lock" class="top-bar__item"> |
| | | <top-lock></top-lock> |
| | | </div> |
| | | <!-- <div class="top-bar__item"> |
| | | <top-lang></top-lang> |
| | | </div> --> |
| | | <div class="top-bar__item"> |
| | | <top-qna></top-qna> |
| | | </div> |
| | | <div class="top-bar__item" v-if="setting.fullscreen"> |
| | | <top-full></top-full> |
| | | </div> |
| | | <!-- <div class="top-bar__item" v-if="setting.debug"> |
| | | <top-logs></top-logs> |
| | | </div> --> |
| | | <div class="top-user"> |
| | | <img class="top-bar__img" :src="userInfo.avatar" /> |
| | | <el-dropdown> |
| | |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { mapGetters } from 'vuex'; |
| | | import topLock from './top-lock.vue'; |
| | |
| | | import topColor from './top-color.vue'; |
| | | import topLang from './top-lang.vue'; |
| | | import topFull from './top-full.vue'; |
| | | import topQna from './top-qna.vue'; |
| | | import topSetting from '../setting.vue'; |
| | | |
| | | export default { |
| | |
| | | topColor, |
| | | topLang, |
| | | topFull, |
| | | topQna, |
| | | topSetting, |
| | | }, |
| | | name: 'top', |
| | |
| | | return {}; |
| | | }, |
| | | filters: {}, |
| | | created() { }, |
| | | created() {}, |
| | | computed: { |
| | | ...mapGetters([ |
| | | 'setting', |
| | |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped></style> |
| | | <style lang="scss" scoped> |
| | | .avue-top { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | padding: 0 15px; |
| | | height: 50px; |
| | | background-color: #fff; |
| | | box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); |
| | | } |
| | | |
| | | .top-bar__left { |
| | | flex: 0 0 auto; |
| | | } |
| | | |
| | | .top-bar__title { |
| | | flex: 1; |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .top-bar__right { |
| | | flex: 0 0 auto; |
| | | display: flex !important; |
| | | align-items: center; |
| | | height: 100%; |
| | | } |
| | | |
| | | .top-bar__item { |
| | | margin-right: 15px; |
| | | display: inline-block !important; |
| | | } |
| | | |
| | | .top-user { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .top-bar__img { |
| | | width: 32px; |
| | | height: 32px; |
| | | border-radius: 50%; |
| | | margin-right: 10px; |
| | | } |
| | | |
| | | .el-dropdown-link { |
| | | cursor: pointer; |
| | | color: #606266; |
| | | } |
| | | |
| | | .el-dropdown-link:hover { |
| | | color: #409EFF; |
| | | } |
| | | </style> |