济菏高速业务端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

119 lines
2.0 KiB

1 year ago
<template>
<Adaptation class="pageBox">
<HeaderMenu @onChange="handleChange" class="header" />
<div class="content">
<Transition name="fade">
<router-view />
</Transition>
</div>
</Adaptation>
</template>
<script>
import HeaderMenu from "./components/HeaderMenu/index.vue";
import Adaptation from "./components/Adaptation.vue";
export default {
name: "ji_ze_gao_su",
components: {
HeaderMenu,
Adaptation,
// ...modules
},
data() {
return {
};
},
methods: {
handleChange(activeMenu) {
this.$route.path != activeMenu.path && this.$router.push(activeMenu.path);
}
}
};
</script>
<style lang="less">
body {
div {
/* 滚动条整体部分 */
&::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
padding: 15px;
}
/* 滚动条的轨道 */
&::-webkit-scrollbar-track {
background: rgba(17, 72, 90, .4);
border-radius: 4px;
}
/* 滚动条的滑块按钮 */
&::-webkit-scrollbar-thumb {
background: #3785A0;
border-radius: 4px;
}
/* 上下箭头 */
&::-webkit-scrollbar-button {
display: none;
}
/* 滚动条角 */
&::-webkit-scrollbar-corner {
display: none;
}
}
}
</style>
1 year ago
<style scoped lang="less">
.pageBox {
background: #13272F;
1 year ago
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
.fade-enter-active,
.fade-leave-active {
transition: opacity .24s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.header {
height: 68px;
}
.content {
flex: 1;
height: 0;
display: flex;
flex-direction: row;
position: relative;
pointer-events: none;
::v-deep {
>div {
top: -6px;
z-index: -1;
pointer-events: auto;
1 year ago
height: calc(100% + 6px);
}
}
1 year ago
&>* {
flex: 1;
width: 100%;
position: absolute;
}
}
}
</style>