|
@@ -1,274 +0,0 @@
|
|
|
-<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" v-if="downOrUp">
|
|
|
- </div>
|
|
|
- <div class="leftPanePackDown" @click="switchPack_up" v-else>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="innerContainer rightPane"
|
|
|
- :class="{ 'rightPaneAnimationUp': iSRightPaneAnimationUp, 'rightPaneAnimationDown': isRightPaneAnimationDown, }">
|
|
|
- <DXGL />
|
|
|
- <GDBH />
|
|
|
- <JCJG />
|
|
|
- <div class="rightPanePackUp" @click="switchPack_down" v-if="downOrUp">
|
|
|
- </div>
|
|
|
- <div class="rightPanePackDown" @click="switchPack_up" v-else>
|
|
|
- </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: "overview",
|
|
|
- components: {
|
|
|
- QYGH,
|
|
|
- DXGL,
|
|
|
- ZRZY,
|
|
|
- KCZY,
|
|
|
- GDBH,
|
|
|
- JCJG
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- iSRightPaneAnimationUp: false,
|
|
|
- isRightPaneAnimationDown: false,
|
|
|
- isleftPaneAnimationDown: false,
|
|
|
- isleftPaneAnimationUp: false,
|
|
|
- downOrUp: true
|
|
|
- };
|
|
|
- },
|
|
|
- created() { },
|
|
|
- methods: {
|
|
|
- switchPack_down() {
|
|
|
- // 按钮控制
|
|
|
- setTimeout(() => {
|
|
|
- this.downOrUp = false;
|
|
|
- }, 700);
|
|
|
- // 右侧动画控制
|
|
|
- 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() {
|
|
|
- setTimeout(() => {
|
|
|
- this.downOrUp = true;
|
|
|
- }, 700);
|
|
|
-
|
|
|
- // 右侧动画控制
|
|
|
- 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%;
|
|
|
-}
|
|
|
-
|
|
|
-.leftPanePackDown {
|
|
|
- width: 25px;
|
|
|
- height: 25PX;
|
|
|
- min-height: 50px;
|
|
|
- background-image: url("/static/images/homepage/packUp.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-size: 100% 100%;
|
|
|
- position: absolute;
|
|
|
- left: -10%;
|
|
|
- z-index: 11111;
|
|
|
- top: 50%;
|
|
|
-}
|
|
|
-
|
|
|
-.rightPanePackDown {
|
|
|
- width: 25px;
|
|
|
- height: 25PX;
|
|
|
- min-height: 50px;
|
|
|
- background-image: url("/static/images/homepage/packDown.png");
|
|
|
-
|
|
|
- background-size: 100% 100%;
|
|
|
- position: absolute;
|
|
|
- left: -10%;
|
|
|
- z-index: 11111;
|
|
|
- top: 50%;
|
|
|
-}</style>
|