Merge pull request #5 from IceWhaleTech/dev

🎈 perf: Optimize user experience

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@hscmap/vue-window": "^2.4.2",
+    "animate.css": "^4.1.1",
     "apexcharts": "^3.28.3",
     "axios": "^0.21.4",
     "buefy": "^0.9.0",
@@ -22,13 +23,16 @@
     "lottie-web-vue": "^1.2.0",
     "nth-check": "^2.0.1",
     "qs": "^6.10.1",
+    "ua-parser-js": "^1.0.2",
+    "v-animate-css": "^0.0.5",
     "vee-validate": "^3.4.12",
     "vue": "^2.6.11",
     "vue-apexcharts": "^1.6.2",
     "vue-custom-scrollbar": "^1.4.1",
     "vue-fullscreen": "^2.5.2",
     "vue-router": "^3.2.0",
     "vue-slider-component": "^3.2.14",
+    "vue-smooth-reflow": "^0.1.12",
     "vue-tour": "^2.0.0",
     "vuex": "^3.4.0",
     "vuex-persistedstate": "^4.0.0",

src/App.vue

@@ -2,21 +2,30 @@
  * @Author: JerryK
  * @Date: 2021-09-18 21:32:13
  * @LastEditors: JerryK
- * @LastEditTime: 2021-10-21 13:30:20
+ * @LastEditTime: 2021-11-09 16:43:29
  * @Description: Main entry of application
  * @FilePath: /CasaOS-UI/src/App.vue
 -->
 
 <template>
-  <div id="app" class="is-flex is-flex-direction-column" :style="{'background-image': 'url(' + require('./assets/background/bg.jpeg') + ')'}">
+  <div id="app" class="is-flex is-flex-direction-column" v-if="!isLoading">
+
+    <!-- Background Layer Start -->
+    <div v-if="isWelcome" id="background" v-animate-css="initAni" :style="{'background-image': 'url(' + require('./assets/background/bg3.jpg') + ')'}"></div>
+    <div v-if="!isWelcome" id="background" :style="{'background-image': 'url(' + require('./assets/background/bg3.jpg') + ')'}"></div>
+
+    <!-- Background Layer End -->
+
+    <!-- Router View Start -->
     <router-view />
+    <!-- Router View End -->
 
     <!-- BrandBar Start -->
-    <brand-bar></brand-bar>
+    <brand-bar v-animate-css="brandAni"></brand-bar>
     <!-- BrandBar End -->
 
     <!-- ContactBar Start -->
-    <contact-bar></contact-bar>
+    <contact-bar v-animate-css="contactAni"></contact-bar>
     <!-- ContactBar End -->
 
     <!-- <v-tour name="myTour" :steps="steps"></v-tour> -->
@@ -26,14 +35,18 @@
 <script>
 import BrandBar from './components/BrandBar.vue'
 import ContactBar from './components/ContactBar.vue'
+// import UAParser from 'ua-parser-js';
 
+// const parser = new UAParser();
+// console.log(parser.getResult());
 export default {
   components: {
     BrandBar,
     ContactBar,
   },
   data() {
     return {
+      isLoading: true,
       steps: [
         // {
         //   target: '#v-step-0',  // We're using document.querySelector() under the hood
@@ -44,11 +57,33 @@ export default {
         //   target: '#v-step-1',  // We're using document.querySelector() under the hood
         //   content: `Add your first App!`
         // }
-      ]
+      ],
+      isWelcome: false,
+      initAni: {
+        classes: 'zoomOutIn',
+        duration: 2500
+      },
+      brandAni: {
+        classes: "fadeInLeft",
+        duration: 700
+      },
+      contactAni: {
+        classes: "fadeInRight",
+        duration: 700
+      },
     }
   },
-  created() {
 
+  created() {
+    console.log(this.$router.history.current.path);
+    this.$api.info.guideCheck().then(res => {
+      this.isLoading = false
+      if (res.data.success == 200 && res.data.data.need_init_user) {
+        this.isWelcome = true
+      } else {
+        this.isWelcome = false
+      }
+    })
   },
   mounted() {
     //this.$tours['myTour'].start()

src/assets/scss/_animate.scss

@@ -0,0 +1,28 @@
+@-webkit-keyframes zoomOutIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(1.2, 1.2, 1.2);
+    transform: scale3d(1.2, 1.2, 1.2);
+  }
+
+  70% {
+    opacity: 1;
+  }
+}
+
+@keyframes zoomOutIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale3d(1.2, 1.2, 1.2);
+    transform: scale3d(1.2, 1.2, 1.2);
+  }
+
+  70% {
+    opacity: 1;
+  }
+}
+
+.zoomOutIn {
+  -webkit-animation-name: zoomOutIn;
+  animation-name: zoomOutIn;
+}

src/assets/scss/_scrollbars.scss

@@ -17,21 +17,21 @@
   border-radius: 10px;
   outline: none;
 }
+@media screen and (min-width: 769px) {
+  .contents::-webkit-scrollbar {
+    width: 8px;
+  }
 
-.contents::-webkit-scrollbar {
-  width: 8px;
-}
+  .contents::-webkit-scrollbar-track {
+    background: transparent;
+  }
 
-.contents::-webkit-scrollbar-track {
-  background: transparent;
+  .contents::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.4);
+    border-radius: 10px;
+    outline: none;
+  }
 }
-
-.contents::-webkit-scrollbar-thumb {
-  background-color: rgba(255, 255, 255, 0.4);
-  border-radius: 10px;
-  outline: none;
-}
-
 .scrollbars::-webkit-scrollbar {
   width: 8px;
 }