feat: 测试demo

wsq815 · Aug 16, 2022 · 0e7cb22 · 0e7cb22
1 parent d9f2d13
commit 0e7cb22
Show file tree

Hide file tree

Showing 9 changed files with 305 additions and 173 deletions.
diff --git a/playground/public/3d-bg.jpg b/playground/public/3d-bg.jpg
diff --git a/playground/public/panel-bg.png b/playground/public/panel-bg.png
diff --git a/playground/public/samba-dancing.fbx b/playground/public/samba-dancing.fbx
diff --git a/playground/src/App.vue b/playground/src/App.vue
@@ -1,184 +1,26 @@
 <script setup>
-import { onMounted, ref } from 'vue'
-import { leave } from 'vue-fit-next'
-import Header from '~/components/Header/index.vue'
-const show = ref(true)
-const click = (value) => {
-  console.log(value)
-}
-
-function onEnter(el) {
-  console.log(el)
-}
 </script>
 
 <template>
-  <Header />
-  <Transition mode="out-in" :css="false" @leave="leave">
-    <div v-if="show" class="box">
-      <div
-        v-fit="{
-          origin: 'top',
-          lock: { x: true },
-          animate: {
-            enter: {
-              name: 'slideInLeft',
-              duration: 500,
-            },
-            leave: 'slideOutLeft',
-          },
-        }"
-        class="left"
-      >
-        <div>left-1-1</div>
-        <div>left-1-2</div>
-      </div>
-
-      <div
-        v-fit:right="{
-          animate: {
-            enter: 'slideInRight',
-            leave: 'slideOutRight',
-          },
-        }"
-        class="right"
-      >
-        right-1
-      </div>
-
-      <div
-        v-fit:2="{
-          animate: {
-            enter: 'slideInUp',
-            leave: 'slideOutUp',
-          },
-        }"
-        class="top"
-      >
-        top
-      </div>
-
-      <div v-fit:8 class="bottom">
-        bottom
-      </div>
-    </div>
-
-    <div v-else class="box">
-      <div
-        v-fit:left="{
-          animate: {
-            enter: 'slideInLeft',
-            leave: 'slideOutLeft',
-          },
-        }"
-        class="left"
-      >
-        left-2
-      </div>
-
-      <div
-        v-fit:bottom="{
-          animate: {
-            enter: 'slideInRight',
-            leave: 'slideOutRight',
-          },
-        }"
-        class="right"
-      >
-        right-2
-      </div>
-
-      <div
-        v-fit:2="{
-          animate: {
-            enter: 'slideInUp',
-            leave: 'slideOutUp',
-          },
-        }"
-        class="top"
-      >
-        top
-      </div>
-
-      <div
-        v-fit:8="{
-          animate: {
-            enter: 'slideInDown',
-            leave: 'slideOutDown',
-          },
-        }"
-        class="bottom"
-      >
-        bottom
-      </div>
-    </div>
-  </Transition>
-
-  <button class="button" @click="show = !show">
-    切换
-  </button>
+  <router-view />
 </template>
 
 <style>
 * {
   padding: 0;
   margin: 0;
+  user-select: none;
 }
 
-html {
+html,
+bdoy {
   height: 100vh;
   overflow: hidden;
 }
 
-body {
-  transform-origin: 0 0;
-}
-
-.box {
-  /* width: 777px; */
+#app {
+  width: 100vw;
   height: 100vh;
-  display: flex;
-  justify-content: space-between;
   position: relative;
 }
-
-.left {
-  width: 675px;
-  height: 2025px;
-  background: red;
-}
-
-.right {
-  width: 675px;
-  height: 2025px;
-  background: blue;
-}
-
-.top {
-  width: 800px;
-  height: 200px;
-  background: green;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  margin: 0 auto;
-}
-
-.bottom {
-  position: absolute;
-  width: 800px;
-  height: 200px;
-  background: pink;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: 0 auto;
-}
-
-.button {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-}
 </style>
diff --git a/playground/src/components/Header/index.vue b/playground/src/components/Header/index.vue
@@ -1,20 +1,54 @@
 <template>
-  <div v-fit:center class="header">
-    <div class="header-bg" />
+  <div v-fit:center="{ lockY: true }" class="header">
+    <div class="logo">
+      LOGO
+    </div>
+    <div class="title">
+      集中运维可视化平台
+    </div>
+    <div class="time">
+      2022-08-16 11:30
+    </div>
   </div>
 </template>
 
 <style scoped>
 .header {
   width: 3840px;
   height: 119px;
-}
-
-.header-bg{
-  width: 3804px;
-  height: 119px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   margin: 0 auto;
   background: url("/header-bg.png");
   background-size: 100% 100%;
+  position: absolute;
+}
+
+.title {
+  font-size: 60px;
+  font-weight: 400;
+  color: #fff;
+  letter-spacing: 4px;
+  position: relative;
+  top: -14px;
+}
+
+.logo {
+  width: 200px;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  background: red;
+  position: relative;
+  top: -20px;
+  font-size: 26px;
+}
+.time {
+  font-size: 32px;
+  color: #fff;
+  position: relative;
+  top: -20px;
+  right: 10px;
 }
 </style>
diff --git a/playground/src/main.ts b/playground/src/main.ts
@@ -1,19 +1,28 @@
 import { createApp } from 'vue'
 import Fit from 'vue-fit-next'
+import { createRouter, createWebHistory } from 'vue-router'
+import routes from 'virtual:generated-pages'
 import App from './App.vue'
 
 const app = createApp(App)
 
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes,
+})
+
 app
+  .use(router)
   .use(Fit({
     width: 3840,
     height: 2160,
+    mode: 'scale',
     animate: {
       enter: {
-        duration: 600,
+        duration: 500,
       },
       leave: {
-        duration: 600,
+        duration: 500,
       },
     },
   }))

diff --git a/playground/src/pages/demo-001.vue b/playground/src/pages/demo-001.vue
@@ -0,0 +1,71 @@
+<script setup>
+import { leave } from 'vue-fit-next'
+import { ref, shallowRef } from 'vue'
+import view001 from './view-001/index.vue'
+import view002 from './view-002/index.vue'
+import Header from '~/components/Header/index.vue'
+
+const component = shallowRef(view002)
+const componentsMap = {
+  1: view001,
+  2: view002,
+}
+
+function changeView(viewName) {
+  component.value = componentsMap[viewName]
+}
+</script>
+
+<template>
+  <div class="bg-3d" />
+  <Header />
+
+  <!-- 如果需要出场动画，则需要添加 Transition 标签 -->
+  <Transition mode="out-in" @leave="leave">
+    <component :is="component" />
+  </Transition>
+
+  <div v-fit:center class="action">
+    <div class="menu-btn" @click="changeView('1')">
+      视图-001
+    </div>
+    <div class="menu-btn" @click="changeView('2')">
+      视图-002
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.bg-3d {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background: url("/3d-bg.jpg");
+  background-size: cover;
+  z-index: -1;
+}
+.action {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  display: flex;
+}
+
+.menu-btn {
+  text-align: center;
+  width: 248px;
+  height: 77px;
+  line-height: 77px;
+  font-size: 36px;
+  color: #fff;
+  cursor: pointer;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPgAAABNCAYAAACL1qnNAAAC30lEQVR4nO3bMUiUYRyA8ce4SGxrcCtqiqT2mhpqSLBa2iK0TDsyI7kwhCShlELLwZK0GoqiTHSpQSIIkmyKQIiGxqjAhhrCNC4vvjjjuDpb7/48v+2+6X357uH97n2/q8rlciNICimVTCpVU+vdlYLJzs+xypsqxWXgUmCp4qll5+daCz+nampH/QJIlckVXArMwKXADFwK7K/f4P7mluJwBZcCM3ApMI/JpMBcwaXADFwKzMClwDwmkwJzBZcCM3ApMI/JpMBcwaXADFwKzMClwDwmkwJzBZcCM3ApMAOXAjNwKTADlwIzcCkwA5cCM3ApMAOXAjNwKTADlwIzcCkwA5cCM3ApMAOXAjNwKTADlwIzcCkwA5cCM3ApMAOXAjNwKTADlwIzcCkwA5cCM3ApMAOXAjNwKTADlwIzcCkwA5cCM3ApMAOXAjNwKTADlwIzcCkwA5cCqtuy+fekDFwKZv/eemZfTS8BDwxcCqQt3czE2O3vwBDwLOXNlWLo6T7D2a7MZ+Aa8CmZlIFLAVzpv8DJttZ3wHXg2/KMDFyqYJs2biDTcYJ0S9MMcA/IFs7GwKUKtXvXTqYejeeASeDJv2bhJptUgY40HUziXgRGSsWNgUuVp6vzFKPDg1+By8DrEhOoAgZ8RJcqyMXec5zuaHuf3yn/UmLkSdc3gUYDlypAdfUaLvX1JOfcs/l4F0uMugYYAxpwk00qf9u21pFuPcyxo41PgQlgqcSg1wGPgR3LFwxcKmP7GvYw+fBOEvR94PkKI10PTCWvoRdedJNNKlOtzY1J3AvA1f/EnUT9ojhuDFwqT8lO+fBQf7JT3g+8WWGQ24Hp/Ape6AeQ9hFdKjN957vpzLR/yP9hpNROeaIeGAfWFl1P3kM/AMwYuFRGBgd6aT/e8jb/TvnCCiM7BNwCVhddf5mP+yPLm2zZ+TnvsVQeknfK7wI/VxhOJv/onrzMUugG0P7nCA34BSHngSSLlbqZAAAAAElFTkSuQmCC);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  margin-left: 24px;
+  margin-right: 24px;
+}
+</style>