Home Explore Help
Sign In
liangyibo
/
CameraMachine
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

ui

哆啦好梦 2 years ago
parent
99ba0ec588
commit
efe9c62d82
5 changed files with 191 additions and 10 deletions
Split View Show Diff Stats
  1. 92 0
      frontend/index.html
  2. 5 8
      frontend/src/App.vue
  3. 1 1
      public/dist/assets/Index-40318c85.js
  4. 0 0
      public/dist/assets/index-02b24eb9.js
  5. 93 1
      public/dist/index.html

+ 92 - 0
frontend/index.html
View File 

@@ -5,8 +5,100 @@
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0" />
 
     <title></title>
 
+    <!-- 优化：vue渲染未完成之前，先加一个css动画 -->
 
+    <style>
 
+      #loadingPage {
 
+        background-color: #dedede;
 
+        font-size: 12px;
 
+      }
 
+      .base {
 
+        height: 9em;
 
+        left: 50%;
 
+        margin: -7.5em;
 
+        padding: 3em;
 
+        position: absolute;
 
+        top: 40%;
 
+        width: 9em;
 
+        transform: rotateX(45deg) rotateZ(45deg);
 
+        transform-style: preserve-3d;
 
+      }
 
+      .cube,
 
+      .cube:after,
 
+      .cube:before {
 
+        content: '';
 
+        float: left;
 
+        height: 3em;
 
+        position: absolute;
 
+        width: 3em;
 
+      }
 
+      /* Top */
 
+      .cube {
 
+        background-color: #06cf68;
 
+        position: relative;
 
+        transform: translateZ(3em);
 
+        transform-style: preserve-3d;
 
+        transition: .25s;
 
+        box-shadow: 13em 13em 1.5em rgba(0, 0, 0, 0.1);
 
+        animation: anim 1s infinite;
 
+      }
 
+      .cube:after {
 
+        background-color: #05a151;
 
+        transform: rotateX(-90deg) translateY(3em);
 
+        transform-origin: 100% 100%;
 
+      }
 
+      .cube:before {
 
+        background-color: #026934;
 
+        transform: rotateY(90deg) translateX(3em);
 
+        transform-origin: 100% 0;
 
+      }
 
+      .cube:nth-child(1) {
 
+        animation-delay: 0.05s;
 
+      }
 
+      .cube:nth-child(2) {
 
+        animation-delay: 0.1s;
 
+      }
 
+      .cube:nth-child(3) {
 
+        animation-delay: 0.15s;
 
+      }
 
+      .cube:nth-child(4) {
 
+        animation-delay: 0.2s;
 
+      }
 
+      .cube:nth-child(5) {
 
+        animation-delay: 0.25s;
 
+      }
 
+      .cube:nth-child(6) {
 
+        animation-delay: 0.3s;
 
+      }
 
+      .cube:nth-child(7) {
 
+        animation-delay: 0.35s;
 
+      }
 
+      .cube:nth-child(8) {
 
+        animation-delay: 0.4s;
 
+      }
 
+      .cube:nth-child(9) {
 
+        animation-delay: 0.45s;
 
+      }
 
+      @keyframes anim {
 
+        50% {
 
+          transform: translateZ(0.5em);
 
+        }
 
+      }
 
+    </style>
 
   </head>
 
   <body>
 
+    <div id="loadingPage">
 
+      <div class='base'>
 
+        <div class='cube'></div>
 
+        <div class='cube'></div>
 
+        <div class='cube'></div>
 
+        <div class='cube'></div>
 
+        <div class='cube'></div>
 
+        <div class='cube'></div>
 
+        <div class='cube'></div>
 
+        <div class='cube'></div>
 
+        <div class='cube'></div>
 
+      </div>
 
+    </div>
 
     <div id="app"></div>
 
     <script type="module" src="/src/main.js"></script>
 
   </body>

+ 5 - 8
frontend/src/App.vue
View File 

@@ -1,16 +1,13 @@
 
 <template>
 
-    <router-view/>
 
+  <router-view/>
 
 </template>
 
 
 <script>
 
 export default {
 
-  name: 'App',
 
-  components: {},
 
-  data() {
 
-    return {};
 
-  },
 
-  watch: {},
 
-  methods: {}
 
+name: 'App',
 
+setup() {
 
+  document.getElementById('loadingPage').remove()
 
+}
 
 }
 
 </script>
 
 <style lang="less"></style>

+ 1 - 1
public/dist/assets/Index-d7469016.js → public/dist/assets/Index-40318c85.js
View File 

@@ -1 +1 @@
 
-import{_ as a,o as t,c as s,a as e}from"./index-f45cb953.js";const c={data:()=>({test:""}),methods:{test(){}}},d={id:"hero"},f=[e('<h1 class="tagline" data-v-19ff7cd7><span class="accent" data-v-19ff7cd7>Electron-Egg</span></h1><p class="description" data-v-19ff7cd7> A fast, desktop software development framework </p><p class="actions" data-v-19ff7cd7><a class="setup" href="https://www.kaka996.com/" target="_blank" data-v-19ff7cd7>Get Started</a></p>',3)];const o=a(c,[["render",function(a,e,c,o,n,r){return t(),s("section",d,f)}],["__scopeId","data-v-19ff7cd7"]]);export{o as default};
 
+import{_ as a,o as t,c as s,a as e}from"./index-02b24eb9.js";const c={data:()=>({test:""}),methods:{test(){}}},d={id:"hero"},f=[e('<h1 class="tagline" data-v-19ff7cd7><span class="accent" data-v-19ff7cd7>Electron-Egg</span></h1><p class="description" data-v-19ff7cd7> A fast, desktop software development framework </p><p class="actions" data-v-19ff7cd7><a class="setup" href="https://www.kaka996.com/" target="_blank" data-v-19ff7cd7>Get Started</a></p>',3)];const o=a(c,[["render",function(a,e,c,o,n,r){return t(),s("section",d,f)}],["__scopeId","data-v-19ff7cd7"]]);export{o as default};

File diff suppressed because it is too large
+ 0 - 0
public/dist/assets/index-02b24eb9.js


+ 93 - 1
public/dist/index.html
View File 

@@ -5,10 +5,102 @@
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0" />
 
     <title></title>
 
-    <script type="module" crossorigin src="./assets/index-f45cb953.js"></script>
 
+    <!-- 优化：vue渲染未完成之前，先加一个css动画 -->
 
+    <style>
 
+      #loadingPage {
 
+        background-color: #dedede;
 
+        font-size: 12px;
 
+      }
 
+      .base {
 
+        height: 9em;
 
+        left: 50%;
 
+        margin: -7.5em;
 
+        padding: 3em;
 
+        position: absolute;
 
+        top: 40%;
 
+        width: 9em;
 
+        transform: rotateX(45deg) rotateZ(45deg);
 
+        transform-style: preserve-3d;
 
+      }
 
+      .cube,
 
+      .cube:after,
 
+      .cube:before {
 
+        content: '';
 
+        float: left;
 
+        height: 3em;
 
+        position: absolute;
 
+        width: 3em;
 
+      }
 
+      /* Top */
 
+      .cube {
 
+        background-color: #06cf68;
 
+        position: relative;
 
+        transform: translateZ(3em);
 
+        transform-style: preserve-3d;
 
+        transition: .25s;
 
+        box-shadow: 13em 13em 1.5em rgba(0, 0, 0, 0.1);
 
+        animation: anim 1s infinite;
 
+      }
 
+      .cube:after {
 
+        background-color: #05a151;
 
+        transform: rotateX(-90deg) translateY(3em);
 
+        transform-origin: 100% 100%;
 
+      }
 
+      .cube:before {
 
+        background-color: #026934;
 
+        transform: rotateY(90deg) translateX(3em);
 
+        transform-origin: 100% 0;
 
+      }
 
+      .cube:nth-child(1) {
 
+        animation-delay: 0.05s;
 
+      }
 
+      .cube:nth-child(2) {
 
+        animation-delay: 0.1s;
 
+      }
 
+      .cube:nth-child(3) {
 
+        animation-delay: 0.15s;
 
+      }
 
+      .cube:nth-child(4) {
 
+        animation-delay: 0.2s;
 
+      }
 
+      .cube:nth-child(5) {
 
+        animation-delay: 0.25s;
 
+      }
 
+      .cube:nth-child(6) {
 
+        animation-delay: 0.3s;
 
+      }
 
+      .cube:nth-child(7) {
 
+        animation-delay: 0.35s;
 
+      }
 
+      .cube:nth-child(8) {
 
+        animation-delay: 0.4s;
 
+      }
 
+      .cube:nth-child(9) {
 
+        animation-delay: 0.45s;
 
+      }
 
+      @keyframes anim {
 
+        50% {
 
+          transform: translateZ(0.5em);
 
+        }
 
+      }
 
+    </style>
 
+    <script type="module" crossorigin src="./assets/index-02b24eb9.js"></script>
 
     <link rel="stylesheet" href="./assets/index-b7b2ffb7.css">
 
   </head>
 
   <body>
 
+    <div id="loadingPage">
 
+      <div class='base'>
 
+        <div class='cube'></div>
 
+        <div class='cube'></div>
 
+        <div class='cube'></div>
 
+        <div class='cube'></div>
 
+        <div class='cube'></div>
 
+        <div class='cube'></div>
 
+        <div class='cube'></div>
 
+        <div class='cube'></div>
 
+        <div class='cube'></div>
 
+      </div>
 
+    </div>
 
     <div id="app"></div>
 
     
   </body>

Some files were not shown because too many files changed in this diff