parent
cb75ffc2cb
commit
16678d3e03
@ -0,0 +1,317 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<template v-if="$route.path === '/worker'">
|
||||||
|
<el-scrollbar style="padding-top: 50px; height: 100%">
|
||||||
|
<worker></worker>
|
||||||
|
</el-scrollbar>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="$route.path === '/bookmanage'">
|
||||||
|
<div
|
||||||
|
style="width: 100%; height: 100%; padding-top: 50px; overflow-x: hidden"
|
||||||
|
>
|
||||||
|
<iframe ref="bookIframe" :src="bookUrl"
|
||||||
|
>你的浏览器不支持该iframe</iframe
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="$route.path === '/gdzc'">
|
||||||
|
<div
|
||||||
|
style="width: 100%; height: 100%; padding-top: 50px; overflow-x: hidden"
|
||||||
|
>
|
||||||
|
<iframe ref="gdzcIframe" :src="gdzcUrl"
|
||||||
|
>你的浏览器不支持该iframe</iframe
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="$route.path === '/old'">
|
||||||
|
<div
|
||||||
|
style="width: 100%; height: 100%; padding-top: 50px; overflow-x: hidden"
|
||||||
|
>
|
||||||
|
<iframe ref="oldIframe" :src="oldUrl">你的浏览器不支持该iframe</iframe>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="$route.path === '/goods'">
|
||||||
|
<div
|
||||||
|
style="width: 100%; height: 100%; padding-top: 50px; overflow-x: hidden"
|
||||||
|
>
|
||||||
|
<iframe ref="goodsIframe" :src="goodsUrl">你的浏览器不支持该iframe</iframe>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<div style="width: 100%;height: 100%">
|
||||||
|
<transition name="fade-transform" mode="out-in">
|
||||||
|
<router-view :key="$route.path" />
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ossLogin } from "@/api/system/ossLogin";
|
||||||
|
import { Navbar, Sidebar, AppMain } from "./components";
|
||||||
|
import ResizeMixin from "./mixin/ResizeHandler";
|
||||||
|
import worker from "./components/worker/index.vue";
|
||||||
|
import axios from "axios";
|
||||||
|
export default {
|
||||||
|
name: "noLayout",
|
||||||
|
components: {
|
||||||
|
Navbar,
|
||||||
|
Sidebar,
|
||||||
|
AppMain,
|
||||||
|
worker,
|
||||||
|
},
|
||||||
|
mixins: [ResizeMixin],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
active: 0,
|
||||||
|
bookUrl: process.env.VUE_APP_OUT_Book,
|
||||||
|
gdzcUrl: `${process.env.VUE_APP_OUT_GDZC}/member/oss_login?id=${this.$store.state.user.userId}&username=${this.$store.state.user.username}`,
|
||||||
|
oldUrl: `${process.env.VUE_APP_OUT_OLD}/login/oss_login?id=${this.$store.state.user.userId}&username=${this.$store.state.user.username}`,
|
||||||
|
goodsUrl: `${process.env.VUE_APP_OUT_GOODS}/admin/oss-login?id=${this.$store.state.user.userId}&username=${this.$store.state.user.username}`,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
sidebar() {
|
||||||
|
return this.$store.state.app.sidebar;
|
||||||
|
},
|
||||||
|
device() {
|
||||||
|
return this.$store.state.app.device;
|
||||||
|
},
|
||||||
|
fixedHeader() {
|
||||||
|
return this.$store.state.settings.fixedHeader;
|
||||||
|
},
|
||||||
|
classObj() {
|
||||||
|
return {
|
||||||
|
hideSidebar: !this.sidebar.opened,
|
||||||
|
openSidebar: this.sidebar.opened,
|
||||||
|
withoutAnimation: this.sidebar.withoutAnimation,
|
||||||
|
mobile: this.device === "mobile",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async logout() {
|
||||||
|
await this.$store.dispatch('app/clearLayout')
|
||||||
|
await this.$store.dispatch("user/logout");
|
||||||
|
this.$router.push(`/login?redirect=${this.$route.fullPath}`);
|
||||||
|
},
|
||||||
|
handleClickOutside() {
|
||||||
|
this.$store.dispatch("app/closeSideBar", {
|
||||||
|
withoutAnimation: false,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
menuClick(item) {
|
||||||
|
this.$router.push(item.path);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
watch: {
|
||||||
|
"$route.path": {
|
||||||
|
handler: function (url) {
|
||||||
|
if (url === "/bookmanage") {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs['bookIframe'].onload = () => {
|
||||||
|
this.$refs["bookIframe"].contentWindow.postMessage(
|
||||||
|
{
|
||||||
|
key: "login",
|
||||||
|
data: {
|
||||||
|
id: this.$store.state.user.userId,
|
||||||
|
username: this.$store.state.user.username,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"*"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
beforeRouteEnter(to,from,next){
|
||||||
|
document.getElementsByTagName('iframe').forEach(dom => {
|
||||||
|
dom.onload = null;
|
||||||
|
})
|
||||||
|
next()
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "~@/styles/mixin.scss";
|
||||||
|
@import "~@/styles/variables.scss";
|
||||||
|
|
||||||
|
.nolayout-container {
|
||||||
|
margin-top: 50px !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
}
|
||||||
|
.app-wrapper {
|
||||||
|
@include clearfix;
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&.mobile.openSidebar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-head-bar {
|
||||||
|
background: #338de3ff;
|
||||||
|
height: 50px;
|
||||||
|
filter: drop-shadow(0 1px 1px #49a0f3);
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 0.5fr 6fr 0.2fr 1fr;
|
||||||
|
grid-template-rows: 50px;
|
||||||
|
grid-template-areas: "logo . menu . user";
|
||||||
|
|
||||||
|
z-index: 2000;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
|
||||||
|
&__logo {
|
||||||
|
height: 50px;
|
||||||
|
grid-area: logo;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1000px) {
|
||||||
|
&__logo {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__user {
|
||||||
|
grid-area: user;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
grid-area: menu;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-self: flex-end;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
li {
|
||||||
|
color: #fff;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
list-style: none;
|
||||||
|
transition: all 300ms ease-out;
|
||||||
|
border-top-right-radius: 6px;
|
||||||
|
border-top-left-radius: 6px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
padding: 0 20px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
background: #338de3ff;
|
||||||
|
height: 3px;
|
||||||
|
width: 0;
|
||||||
|
border-radius: 1px;
|
||||||
|
transition: all 300ms ease-out;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
left: 6px;
|
||||||
|
bottom: 2px;
|
||||||
|
}
|
||||||
|
& + li {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background: #fff;
|
||||||
|
color: rgb(100, 100, 100);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
width: calc(100% - 12px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.li-active {
|
||||||
|
background: #fff;
|
||||||
|
color: rgb(100, 100, 100);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
width: calc(100% - 12px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.drawer-bg {
|
||||||
|
background: #000;
|
||||||
|
opacity: 0.3;
|
||||||
|
width: 100%;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-header {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 9;
|
||||||
|
width: calc(100% - #{$sideBarWidth});
|
||||||
|
transition: width 0.28s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hideSidebar .fixed-header {
|
||||||
|
width: calc(100% - 54px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile .fixed-header {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-container {
|
||||||
|
height: 100%;
|
||||||
|
margin-right: 30px;
|
||||||
|
|
||||||
|
.avatar-wrapper {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.user-avatar {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
&__name {
|
||||||
|
color: #fff;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
|
padding: 0 6px;
|
||||||
|
}
|
||||||
|
.el-icon-caret-bottom {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
right: -20px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
iframe {
|
||||||
|
width: calc(100% + 12px);
|
||||||
|
height: 100%;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue