样式溢出

components/loading.vue

-<template>
-    <div class="spinner" v-if="loading"></div>
-</template>
-<script>
-export default {
-    data:()=>({
-    	loading:false
-    }),
-    methods:{
-        //start和finish是nuxt的loading内置的方法
-        start(){
-            this.loading = true;
-        },
-        finish(){
-        	this.loading = false;
-        }
-	}
-}
-</script>
-<style scoped>
-    .spinner {
-  width: 60px;
-  height: 60px;
-  background-color: #399;
- 
-  position: fixed;
-  top:50%;
-  left:50%;
-  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
-  animation: rotateplane 1.2s infinite ease-in-out;
-}
- 
-@-webkit-keyframes rotateplane {
-  0% { -webkit-transform: perspective(120px) }
-  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
-  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
-}
- 
-@keyframes rotateplane {
-  0% {
-    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
-  } 50% {
-    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
-  } 100% {
-    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-  }
-}
-</style>
\ No newline at end of file

nuxt.config.js

@@ -34,7 +34,7 @@ export default {
   ** Global CSS
   loading:'~/components/loading.vue'
   */
-  loading:'~/components/loading.vue',
+  /* loading:'~/components/loading.vue', */
   css: [
     'element-ui/lib/theme-chalk/index.css'
   ],

pages/index.vue

@@ -47,7 +47,7 @@ export default {
 <style scoped>
 
 .home {
-  width: 100%;
+  width: 99%;
   min-width: 810px;
   height: 100%;
   min-height: 600px;

pages/index/index.vue

@@ -416,6 +416,6 @@ import Cookies from "js-cookie"
     overflow: hidden;
     text-overflow:ellipsis;
     white-space: nowrap;
-    width:200px
+    width:150px
   }
 </style>