加载

src/components/Loading/LoadingPage.vue

@@ -16,9 +16,6 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@color1: #c8c9cc;
-@color2: #939599;
-
 .loading {
     .flex();
     justify-content: center;
@@ -32,41 +29,92 @@ export default {
         bottom: 0px;
         width: 3px;
         height: 5px;
-        background: @color1;
         position: absolute;
-        animation: preloader_1 1.5s infinite ease-in-out;
+        border-radius: 3px;
+    }
+}
 
-        &:nth-child(2) {
-            left: 6px;
-            -webkit-animation-delay: 0.2s;
-            -moz-animation-delay: 0.2s;
-            -ms-animation-delay: 0.2s;
-            -o-animation-delay: 0.2s;
-            animation-delay: 0.2s;
-        }
-        &:nth-child(3) {
-            left: 12px;
-            -webkit-animation-delay: 0.4s;
-            -moz-animation-delay: 0.4s;
-            -ms-animation-delay: 0.4s;
-            -o-animation-delay: 0.4s;
-            animation-delay: 0.4s;
-        }
-        &:nth-child(4) {
-            left: 18px;
-            -webkit-animation-delay: 0.6s;
-            -moz-animation-delay: 0.6s;
-            -ms-animation-delay: 0.6s;
-            -o-animation-delay: 0.6s;
-            animation-delay: 0.6s;
+.dark {
+    .loading-page {
+        span {
+            background: #595959;
+            animation: preloader_1 1.5s infinite ease-in-out;
+
+            &:nth-child(2) {
+                left: 6px;
+                -webkit-animation-delay: 0.2s;
+                -moz-animation-delay: 0.2s;
+                -ms-animation-delay: 0.2s;
+                -o-animation-delay: 0.2s;
+                animation-delay: 0.2s;
+            }
+            &:nth-child(3) {
+                left: 12px;
+                -webkit-animation-delay: 0.4s;
+                -moz-animation-delay: 0.4s;
+                -ms-animation-delay: 0.4s;
+                -o-animation-delay: 0.4s;
+                animation-delay: 0.4s;
+            }
+            &:nth-child(4) {
+                left: 18px;
+                -webkit-animation-delay: 0.6s;
+                -moz-animation-delay: 0.6s;
+                -ms-animation-delay: 0.6s;
+                -o-animation-delay: 0.6s;
+                animation-delay: 0.6s;
+            }
+            &:nth-child(5) {
+                left: 24px;
+                -webkit-animation-delay: 0.8s;
+                -moz-animation-delay: 0.8s;
+                -ms-animation-delay: 0.8s;
+                -o-animation-delay: 0.8s;
+                animation-delay: 0.8s;
+            }
         }
-        &:nth-child(5) {
-            left: 24px;
-            -webkit-animation-delay: 0.8s;
-            -moz-animation-delay: 0.8s;
-            -ms-animation-delay: 0.8s;
-            -o-animation-delay: 0.8s;
-            animation-delay: 0.8s;
+    }
+}
+
+.light {
+    .loading-page {
+        span {
+            background: #c8c9cc;
+
+            animation: preloader_2 1.5s infinite ease-in-out;
+
+            &:nth-child(2) {
+                left: 6px;
+                -webkit-animation-delay: 0.2s;
+                -moz-animation-delay: 0.2s;
+                -ms-animation-delay: 0.2s;
+                -o-animation-delay: 0.2s;
+                animation-delay: 0.2s;
+            }
+            &:nth-child(3) {
+                left: 12px;
+                -webkit-animation-delay: 0.4s;
+                -moz-animation-delay: 0.4s;
+                -ms-animation-delay: 0.4s;
+                -o-animation-delay: 0.4s;
+                animation-delay: 0.4s;
+            }
+            &:nth-child(4) {
+                left: 18px;
+                -webkit-animation-delay: 0.6s;
+                -moz-animation-delay: 0.6s;
+                -ms-animation-delay: 0.6s;
+                -o-animation-delay: 0.6s;
+                animation-delay: 0.6s;
+            }
+            &:nth-child(5) {
+                left: 24px;
+                -webkit-animation-delay: 0.8s;
+                -moz-animation-delay: 0.8s;
+                -ms-animation-delay: 0.8s;
+                -o-animation-delay: 0.8s;
+                animation-delay: 0.8s;
+            }
         }
     }
 }
@@ -75,89 +123,45 @@ export default {
     0% {
         height: 5px;
         transform: translateY(0px);
-        background: @color1;
+        background: #595959;
     }
     25% {
-        height: 25px;
-        transform: translateY(10px);
-        background: @color2;
+        height: 20px;
+        transform: translateY(8px);
+        background: #ffffff;
     }
     50% {
         height: 5px;
         transform: translateY(0px);
-        background: @color1;
+        background: #595959;
     }
     100% {
         height: 5px;
         transform: translateY(0px);
-        background: @color1;
+        background: #595959;
     }
 }
 
-.dark {
-    @color1: #ffffff;
-    @color2: #595959;
-
-    .loading-page {
-        span {
-            background: #ffffff;
-        }
+@keyframes preloader_2 {
+    0% {
+        height: 5px;
+        transform: translateY(0px);
+        background: #c8c9cc;
     }
-
-    @keyframes preloader_1 {
-        0% {
-            height: 5px;
-            transform: translateY(0px);
-            background: #ffffff;
-        }
-        25% {
-            height: 20px;
-            transform: translateY(8px);
-            background: #595959;
-        }
-        50% {
-            height: 5px;
-            transform: translateY(0px);
-            background: #ffffff;
-        }
-        100% {
-            height: 5px;
-            transform: translateY(0px);
-            background: #ffffff;
-        }
+    25% {
+        height: 20px;
+        transform: translateY(8px);
+        background: #939599;
     }
-}
-.light {
-    @color1: #c8c9cc;
-    @color2: #939599;
-
-    .loading-page {
-        span {
-            background: #c8c9cc;
-        }
+    50% {
+        height: 5px;
+        transform: translateY(0px);
+        background: #c8c9cc;
     }
-
-    @keyframes preloader_1 {
-        0% {
-            height: 5px;
-            transform: translateY(0px);
-            background: #c8c9cc;
-        }
-        25% {
-            height: 20px;
-            transform: translateY(8px);
-            background: #939599;
-        }
-        50% {
-            height: 5px;
-            transform: translateY(0px);
-            background: #c8c9cc;
-        }
-        100% {
-            height: 5px;
-            transform: translateY(0px);
-            background: #c8c9cc;
-        }
+    100% {
+        height: 5px;
+        transform: translateY(0px);
+        background: #c8c9cc;
     }
 }
 </style>

src/views/product/Detail.vue

@@ -481,9 +481,11 @@ export default {
             if (this.$route.params.id) {
                 this.collectionId = this.$route.params.id;
             }
-            this.$http.get('/order/checkLimit', { collectionId: this.collectionId }).then(res => {
-                this.limit = res;
-            });
+            if (this.isLogin) {
+                this.$http.get('/order/checkLimit', { collectionId: this.collectionId }).then(res => {
+                    this.limit = res;
+                });
+            }
 
             return this.getProduct();
         },