main
parent
3ca17c62b4
commit
0e6e977471
@ -1,11 +1,16 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view />
|
||||
<OnlineFile></OnlineFile>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OnlineFile from '@/components/OnlineFile'
|
||||
export default {
|
||||
components: {
|
||||
OnlineFile
|
||||
},
|
||||
name: 'App'
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div>
|
||||
<vxe-modal
|
||||
v-model="showModal"
|
||||
:width="840"
|
||||
:height="600"
|
||||
show-zoom
|
||||
:fullscreen="$store.getters.device === 'mobile'"
|
||||
:z-index="zIndex"
|
||||
:footer-hide="true"
|
||||
title="预览"
|
||||
>
|
||||
<template>
|
||||
<iframe
|
||||
style="width: 100%; height: 100%;"
|
||||
:src="codeUri"
|
||||
frameborder="0"
|
||||
/>
|
||||
</template>
|
||||
</vxe-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PopupManager } from 'element-ui/lib/utils/popup'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
zIndex: PopupManager.nextZIndex(),
|
||||
showModal: false,
|
||||
codeUri: ''
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
this.$bus.$on('online-file', (url) => this.open(url))
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$bus.$off('online-file')
|
||||
},
|
||||
methods: {
|
||||
open(url) {
|
||||
this.codeUri = `${process.env.VUE_APP_PREVIEW}?url=${encodeURIComponent(
|
||||
new Buffer(url).toString('base64')
|
||||
)}`
|
||||
this.showModal = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
@ -0,0 +1,187 @@
|
||||
.d-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background: var(--theme-color);
|
||||
}
|
||||
.navbar .cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.navbar .container {
|
||||
height: 54px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.navbar .container .modules__toggler {
|
||||
display: none;
|
||||
}
|
||||
.navbar .container .navbar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.navbar .container .navbar-brand .navbar-brand__img {
|
||||
height: 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.navbar .container .navbar-brand .navbar-brand__logo {
|
||||
height: 20px;
|
||||
}
|
||||
.navbar .container .toggle-sidebar {
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.navbar .container .navbar-module {
|
||||
flex: 1;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.navbar .container .navbar-module .modules__toggler {
|
||||
color: #fff;
|
||||
}
|
||||
.navbar .container .navbar-module #navbar-menu {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
.navbar .container .navbar-module #navbar-menu::-webkit-scrollbar {
|
||||
background-color: transparent;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
.navbar .container .navbar-nav {
|
||||
display: flex;
|
||||
margin-right: auto;
|
||||
}
|
||||
.navbar .container .navbar-nav .tool {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.navbar .container .navbar-nav .tool .el-color-picker {
|
||||
height: auto;
|
||||
}
|
||||
.navbar .container .navbar-nav .tool .tool-item {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
}
|
||||
.navbar .container .navbar-nav .tool .tool-item .el-badge__content:not(.is-dot) {
|
||||
line-height: 14px;
|
||||
height: 14px;
|
||||
padding: 0 5px;
|
||||
border-radius: 8px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.navbar .container .navbar-nav .tool .tool-item + .tool-item {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.navbar .container .navbar-nav .nav-info {
|
||||
display: flex;
|
||||
color: #fff;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.navbar .container .navbar-nav .nav-info > div {
|
||||
padding-left: 8px;
|
||||
}
|
||||
.navbar .container .navbar-nav .nav-info .avatar {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.navbar .container .navbar-nav .nav-info .department {
|
||||
color: #eeeeee;
|
||||
font-size: 85%;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.navbar .container {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
#navbar-menu .sidebar-item .sub-el-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.navbar .container {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
#navbar-menu .sidebar-item .el-menu-item span, #navbar-menu .sidebar-item .el-submenu__title span {
|
||||
display: none;
|
||||
}
|
||||
#navbar-menu .sidebar-item .sub-el-icon {
|
||||
display: initial;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.navbar .modules__toggler {
|
||||
display: initial !important;
|
||||
}
|
||||
.navbar .navbar-brand .navbar-brand__img {
|
||||
display: none;
|
||||
}
|
||||
.navbar .navbar-module #navbar-menu {
|
||||
display: none;
|
||||
}
|
||||
.navbar .nav-info > div {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
#navbar-menu .sidebar-item {
|
||||
display: inline-block;
|
||||
}
|
||||
#navbar-menu .sidebar-item .el-menu-item:hover, #navbar-menu .sidebar-item .el-submenu__title:hover {
|
||||
color: #fff !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
#navbar-menu .el-menu-item, #navbar-menu .el-submenu__title {
|
||||
height: 54px;
|
||||
line-height: 54px;
|
||||
}
|
||||
#navbar-menu .el-submenu__icon-arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar .el-menu--horizontal {
|
||||
border-bottom: none !important;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#navbar-menu-mobile {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
#navbar-menu-mobile .el-menu {
|
||||
border-right: none;
|
||||
}
|
||||
#navbar-menu-mobile .el-menu .el-menu-item, #navbar-menu-mobile .el-menu .el-submenu__title {
|
||||
height: auto;
|
||||
line-height: inherit;
|
||||
min-height: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#navbar-menu-mobile .el-menu .el-submenu.is-active .el-submenu__title {
|
||||
border-bottom: 0;
|
||||
color: var(--theme-color);
|
||||
}
|
||||
#navbar-menu-mobile .el-menu {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
#navbar-menu-mobile .sidebar-item .el-menu-item, #navbar-menu-mobile .sidebar-item .el-submenu__title {
|
||||
color: #333 !important;
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=navbar.css.map */
|
||||
@ -0,0 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["navbar.scss"],"names":[],"mappings":"AAAA;EACE;;;AAEF;EACE;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAEA;EACE;EACA;EACA;;AAIN;EACE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGJ;EACE;;AAGJ;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;;AAMV;EAEI;IACE;;;EAKA;IACE;;;AAKR;EAEI;IACE;;;EAKA;IACE;;EAEF;IACE;IACA;;;AAKR;EAEI;IACE;;EAGA;IACE;;EAIF;IACE;;EAIF;IACE;;;AAON;EACE;;AAEA;EACE;EACA;;AAGJ;EACE;EACA;;AAEF;EACE;;;AAIF;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAGJ;EACE;;AAIA;EACE;EACA","file":"navbar.css"}
|
||||
Loading…
Reference in new issue