Browse Source

1、修改加载图片有锯齿的问题

shenjj 7 years ago
parent
commit
124fef495d
2 changed files with 13 additions and 1 deletions
  1. 13 1
      components/common/loading/Loading.vue
  2. BIN
      static/images/mobile/loading.png

+ 13 - 1
components/common/loading/Loading.vue

@@ -1,6 +1,9 @@
 <template lang="html">
   <div class="loading" v-show="loading" id="loading">
-    <img src="/images/all/loading.gif" alt="">
+    <!--<img src="/images/all/loading.gif" alt="">-->
+    <div class="wrap">
+      <div class="outer"></div>
+    </div>
   </div>
 </template>
 <script>
@@ -19,6 +22,14 @@
   }
 </script>
 <style scoped>
+  @keyframes spin {
+    0%   { transform: rotate(360deg); }
+    100% { transform: rotate(0deg); }
+  }
+  .wrap { width: 64px; height: 64px; position: absolute;left: 50%;top:50%;margin-left:-32px;margin-top: -32px; }
+  .outer {
+    background-repeat: no-repeat;
+    background-size:100%; position: absolute; width: 100%; height: 100%; background-image: url('/images/mobile/loading.png'); animation: spin 800ms infinite linear; }
   .loading {
     position: fixed;
     top: 0;
@@ -29,6 +40,7 @@
     z-index: 1000;
     text-align: center;
   }
+
   .loading img {
     position: relative;
     top: 40%;

BIN
static/images/mobile/loading.png