css控制vue的背景图片

src/App.vue

@@ -1,7 +1,6 @@
 <template>
   <div id="app">
-    <dv-full-screen-container class="btgym" :style="{ backgroundImage:'url('+bgimg+')' }">
+    <dv-full-screen-container class="btgym">
-
       <!-- 顶部信息 -->
       <div class="topnav">
         <div class="toptxt">
@@ -9,9 +8,7 @@
             累计进馆人数：3,435,123万人
           </div>
           <img class="topImg" src="@/assets/index/top_title.png" />
-          <div style="margin-right: 2%" class="topTitle">
+          <div style="margin-right: 2%" class="topTitle">星期四 16:33:33</div>
-            星期四 16:33:33
-          </div>
         </div>
         <div class="links">
           <router-link to="/ty">体育</router-link>
@@ -28,28 +25,24 @@
 </template>
 
 <script>
-import ty from '@/views/ty/index'
+//https://www.jianshu.com/p/574b85349d40
-export default ({
+export default {
-  components:{
+  data() {
-    ty
+    return {
-  },
+      //
-  data(){
+      
-    return{
+    };
-       //bgimg: require("@/assets/index/bg.jpg")
-       bgimg:"",
-    }
   },
-  created(){
+  created() {
-    
     // console.log(this.$route)
-    // this.bgimg = this.$route.params.img
   },
-  mounted(){
+  mounted() {
-   // console.log("app vue")
+//
-   // console.log(this.$route.meta)
+  },
-    // this.bgimg = this.$route.meta.img
+  methods: {
-  }
+    //
-})
+  },
+};
 </script>
 
 
@@ -63,11 +56,10 @@ body {
 .btgym {
   width: 100vw;
   height: 100vh;
-  // position: relative;
+  position: relative;
-  // background-image: url("assets/g_bg.jpg");
+  // background-image: url("assets/index/bg.jpg");
-  // background-image: var(--bg);
+  background-size: 100%;
-  // background-size: 100%;
+  background-repeat: no-repeat;
-  // background-repeat: no-repeat;
 
   .topnav {
     width: 100%;
@@ -123,28 +115,28 @@ body {
         margin-top: 12px;
       }
       // 总览
-      a:nth-child(2){
+      a:nth-child(2) {
         margin-top: 22px;
-        background-image:url('assets/index/zl.png');
+        background-image: url("assets/index/zl.png");
       }
-      a:nth-child(1){
+      a:nth-child(1) {
-        background-image: url('assets/index/ty.png');
+        background-image: url("assets/index/ty.png");
       }
-      a:nth-child(3){
+      a:nth-child(3) {
-        background-image: url('assets/index/wh.png');
+        background-image: url("assets/index/wh.png");
       }
 
-      a.router-link-exact-active{
+      a.router-link-exact-active {
         color: #fff;
       }
-      a.router-link-exact-active:nth-child(1){
+      a.router-link-exact-active:nth-child(1) {
-        background-image: url('assets/index/ty_active.png');
+        background-image: url("assets/index/ty_active.png");
       }
-      a.router-link-exact-active:nth-child(2){
+      a.router-link-exact-active:nth-child(2) {
-        background-image: url('assets/index/zl_active.png');
+        background-image: url("assets/index/zl_active.png");
       }
-      a.router-link-exact-active:nth-child(3){
+      a.router-link-exact-active:nth-child(3) {
-        background-image: url('assets/index/wh_active.png');
+        background-image: url("assets/index/wh_active.png");
       }
     }
   }
@@ -160,5 +152,4 @@ body {
     left: 0;
   }
 }
-
 </style>

src/router/index.js

@@ -9,10 +9,6 @@ const routes = [
   path: '/',
   name: 'index',
   component: () => import('../views/index.vue'),
-  meta:{
-    img:require("../assets/index/bg.jpg")
-  }
-
 },
 
 // 文化
@@ -20,9 +16,6 @@ const routes = [
   path: '/cultrue',
   name: 'cultrue',
   component: ()=>import("../views/cultrue/index.vue"),
-  meta:{
-    img:require("@/assets/wh/bg.jpg")
-  }
 },
 
 
@@ -31,9 +24,6 @@ const routes = [
   path: '/ty',
   name: 'ty',
   component: ()=>import("../views/ty/index.vue"),
-  meta:{
-    img:require("@/assets/ty/bg.jpg")
-  }
 }
 
 ]

src/views/cultrue/index.vue

@@ -11,11 +11,24 @@ export default{
         }
     },
     mounted(){
-        console.log("wh vue")
+        // console.log("wh vue")
-        console.log(this.$route.meta)
+        // console.log(this.$route.meta)
     },
     methods:{
 
     }
 }
-</script>
+</script>
+<style>
+/* div#dv-full-screen-container{
+    background-image: none !important;
+} */
+.btgym::before{
+  background-image: none !important;
+  content: "";
+}
+.btgym{
+    clear: both;
+    background-image:url('../../assets/wh/whbg.jpg') !important;
+}
+</style>

src/views/index.vue

@@ -13,8 +13,17 @@ export default{
         }
     },
     mounted(){
-       console.log("index.vue")
+    //    console.log("index.vue")
-       console.log(this.$route.meta)
     }
 }
 </script>
+<style>
+.btgym::before{
+  background-image: none !important;
+  content: "";
+}
+.btgym{
+    clear: both;
+    background-image:url('../assets/index/bg.jpg') !important;
+}
+</style>

src/views/ty/index.vue

@@ -1,21 +1,31 @@
 <template>
-    <div id="ty"></div>
+  <div id="ty"></div>
 </template>
 <script>
-export default{
+export default {
-    data(){
+  data() {
-        return{
+    return {};
+  },
 
-        }
+  mounted() {
-    },
+    // console.log("ty vue");
-    mounted(){
+    // console.log(this.$route.meta);
-        console.log("ty vue")
+    // let bgurl = this.$route.meta;
-        console.log(this.$route.meta)
+    // this.$emit("bgimg", bgurl);
-        let bgurl = this.$route.meta
+  },
-        this.$emit("bgimg",bgurl)
+  beforeDestroy(){
-    },
+    // console.log("des index");
-    methods:{
+  },
-
+  methods: {},
-    }
+};
-}
 </script>
+<style>
+div.btgym::before{
+  background-image: none !important;
+  content: "";
+}
+div.btgym{
+    clear: both;
+    background-image:url('../../assets/ty/tybg.jpg') !important;
+}
+</style>