feat:基础场景搭建

ZhangXianQiang

2024-03-29 c755b7c6e1d9dda26ac6c41a1c49896ebedd077d

 src/views/screen/components/screen-wrapper/index.vue

@@ -11,7 +11,8 @@
        <screen-video class="animate-enter-x enter-left animate-delay-2"></screen-video>
      </div>
      <div class="center-container center-wrapper">
        <screen-map></screen-map>
        <!-- <screen-map></screen-map> -->
        <screen-map-cover></screen-map-cover>
        <screen-table class="animate-enter-y enter-top"></screen-table>
        <!-- <screen-detection></screen-detection> -->

@@ -30,6 +31,7 @@
import ScreenVideo from '../screen-video/index';
import ScreenCar from '../screen-car/index';
import ScreenMap from '../screen-map/index';
import ScreenMapCover from '../screen-map-cover/index';
import ScreenTable from '../screen-table/index';
export default {
  name: 'ScreenWrapper',
@@ -40,7 +42,8 @@
    ScreenVideo,
    ScreenCar,
    ScreenMap,
    ScreenTable
    ScreenTable,
    ScreenMapCover
  },
  methods: {
    returnPath() {
@@ -105,24 +108,30 @@
  flex-direction: column;
  justify-content: space-between;
}

.animate-enter-x {
  animation: enter-x 0.4s ease forwards;
}

.animate-enter-y {
  animation: enter-y 0.4s ease forwards;
}

.enter-left {
  transform: translateX(-100px);
  opacity: 0;
}

.enter-right {
  transform: translateX(100px);
  opacity: 0;
}

.enter-top {
  transform: translateY(100px);
  opacity: 0;
}

.animate-delay-1 {
  animation-delay: 0.1s;
}