|
|
@@ -0,0 +1,238 @@
|
|
|
+<template>
|
|
|
+ <div class="overview">
|
|
|
+ <!-- <div class="innerContainer leftPane">驾驶舱</div> -->
|
|
|
+ <div class="innerContainer leftPane"
|
|
|
+ :class="{ 'leftPaneAnimationDown': isleftPaneAnimationDown, 'leftPaneAnimationUp': isleftPaneAnimationUp }">
|
|
|
+ <!-- <QYGH />
|
|
|
+ <ZRZY />
|
|
|
+ <KCZY /> -->
|
|
|
+ <div class="leftPanePackUp" @click="switchPack_down">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="innerContainer rightPane"
|
|
|
+ :class="{ 'rightPaneAnimationUp': iSRightPaneAnimationUp, 'rightPaneAnimationDown': isRightPaneAnimationDown, }">
|
|
|
+ <!-- <DXGL />
|
|
|
+ <GDBH />
|
|
|
+ <JCJG /> -->
|
|
|
+ <div class="rightPanePackUp" @click="switchPack_up">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// import QYGH from './homepage/qygh.vue';
|
|
|
+// import ZRZY from './homepage/zrzy.vue';
|
|
|
+// import KCZY from './homepage/kczy.vue';
|
|
|
+// import DXGL from './homepage/dxgl.vue';
|
|
|
+// import GDBH from './homepage/gdbh.vue';
|
|
|
+// import JCJG from './homepage/jcjg.vue';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "overview1",
|
|
|
+ components: {
|
|
|
+ // QYGH,
|
|
|
+ // DXGL,
|
|
|
+ // ZRZY,
|
|
|
+ // KCZY,
|
|
|
+ // GDBH,
|
|
|
+ // JCJG
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ iSRightPaneAnimationUp: false,
|
|
|
+ isRightPaneAnimationDown: false,
|
|
|
+ isleftPaneAnimationDown: false,
|
|
|
+ isleftPaneAnimationUp: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() { },
|
|
|
+ methods: {
|
|
|
+ switchPack_down() {
|
|
|
+ // 右侧动画控制
|
|
|
+ this.iSRightPaneAnimationUp = !this.iSRightPaneAnimationUp;
|
|
|
+ this.isRightPaneAnimationDown = false;
|
|
|
+ // 动画完成之后，修改位置
|
|
|
+ setTimeout(() => {
|
|
|
+ let dom = document.getElementsByClassName('rightPane')[0];
|
|
|
+ dom.style.right = '-360px';
|
|
|
+ }, 600);
|
|
|
+
|
|
|
+ // 左侧控制
|
|
|
+ this.isleftPaneAnimationDown = !this.isleftPaneAnimationDown;
|
|
|
+ this.isleftPaneAnimationUp = false;
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ let leftPane = document.getElementsByClassName('leftPane')[0];
|
|
|
+ leftPane.style.left = '-360px';
|
|
|
+ }, 600);
|
|
|
+ },
|
|
|
+ switchPack_up() {
|
|
|
+ // 右侧动画控制
|
|
|
+ this.isRightPaneAnimationDown = !this.isRightPaneAnimationDown;
|
|
|
+ this.iSRightPaneAnimationUp = false;
|
|
|
+ // 动画完成之后，修改位置
|
|
|
+ setTimeout(() => {
|
|
|
+ let rightPane = document.getElementsByClassName('rightPane')[0];
|
|
|
+ rightPane.style.right = '10px';
|
|
|
+ }, 600);
|
|
|
+
|
|
|
+ // 左侧控制
|
|
|
+ this.isleftPaneAnimationDown = false;
|
|
|
+ this.isleftPaneAnimationUp = !this.isleftPaneAnimationUp;
|
|
|
+ setTimeout(() => {
|
|
|
+ let leftPane = document.getElementsByClassName('leftPane')[0];
|
|
|
+ leftPane.style.left = '10px';
|
|
|
+ }, 600);
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.overview {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+}
|
|
|
+
|
|
|
+.innerContainer {
|
|
|
+ width: 350px;
|
|
|
+ height: calc(100% - 20px);
|
|
|
+ position: absolute;
|
|
|
+ background-image: url("/static/images/homepage/00-底框.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ z-index: 99;
|
|
|
+ top: 10px;
|
|
|
+ // writing-mode: vertical-lr;
|
|
|
+ text-align: center;
|
|
|
+ // font-size: 73px;
|
|
|
+ // line-height: 350px;
|
|
|
+ color: red;
|
|
|
+}
|
|
|
+
|
|
|
+.leftPane {
|
|
|
+ left: 10px;
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.rightPane {
|
|
|
+ right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+// 右侧面板收起动画
|
|
|
+@keyframes rightPaneAnimation-packUp {
|
|
|
+
|
|
|
+ from {
|
|
|
+ right: 10px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ right: -360px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.rightPaneAnimationUp {
|
|
|
+ animation: rightPaneAnimation-packUp 0.5s linear 0.5s forwards;
|
|
|
+ animation-iteration-count: 1;
|
|
|
+}
|
|
|
+
|
|
|
+// 右侧面板放开动画
|
|
|
+@keyframes rightPaneAnimation-packDown {
|
|
|
+ from {
|
|
|
+ right: -360px;
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ right: 10px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.rightPaneAnimationDown {
|
|
|
+ animation: rightPaneAnimation-packDown 0.5s linear 0.5s forwards;
|
|
|
+ animation-iteration-count: 1;
|
|
|
+}
|
|
|
+
|
|
|
+// 左侧面板收起
|
|
|
+@keyframes leftPaneAnimation-Down {
|
|
|
+ from {
|
|
|
+ left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ left: -360px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.leftPaneAnimationDown {
|
|
|
+ animation: leftPaneAnimation-Down 0.5s linear 0.5s forwards;
|
|
|
+ animation-iteration-count: 1;
|
|
|
+}
|
|
|
+
|
|
|
+// 左侧面板打开
|
|
|
+@keyframes leftPaneAnimation-up {
|
|
|
+ from {
|
|
|
+ left: -360px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ left: 10px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.leftPaneAnimationUp {
|
|
|
+ animation: leftPaneAnimation-up 0.5s linear 0.5s forwards;
|
|
|
+ animation-iteration-count: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.leftPanePackUp {
|
|
|
+ width: 25px;
|
|
|
+ height: 25PX;
|
|
|
+ min-height: 50px;
|
|
|
+ background-image: url("/static/images/homepage/packDown.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: absolute;
|
|
|
+ left: 103%;
|
|
|
+ z-index: 11111;
|
|
|
+ top: 50%;
|
|
|
+}
|
|
|
+
|
|
|
+.rightPanePackUp {
|
|
|
+ width: 25px;
|
|
|
+ height: 25PX;
|
|
|
+ min-height: 50px;
|
|
|
+ // background-image: url("/static/images/homepage/packUp.png");
|
|
|
+ background-image: url("/static/images/homepage/packDown.png");
|
|
|
+
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: absolute;
|
|
|
+ left: -10%;
|
|
|
+ z-index: 11111;
|
|
|
+ top: 50%;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
zpf