通过class 控制样式

src/utils/getclass.js

@@ -0,0 +1,45 @@
+// 操作dom
+export function getClass (ele) {
+    return ele.className.replace(/\s+/, ' ').split(' ')
+  }
+  
+  export function hasClass (ele, cls) {
+    return (' ' + ele.className + ' ').indexOf(' ' + cls + ' ') > -1
+  }
+  
+  export function addClass (ele, cls) {
+    if (!hasClass(ele, cls)) {
+      ele.className += ' ' + cls
+      var curClass = ele.className
+  
+      var classes = (cls || '').split(' ')
+      for (var i = 0, j = classes.length; i < j; i++) {
+        var clsName = classes[i]
+        if (!clsName) continue
+  
+        if (ele.classList) {
+          ele.classList.add(clsName)
+        } else if (!hasClass(ele, clsName)) {
+          curClass += ' ' + clsName
+        }
+      }
+      if (!ele.classList) {
+        ele.className = curClass
+      }
+    }
+  }
+  
+  export function removeClass (ele, cls) {
+    if (hasClass(ele, cls)) {
+      var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)', 'gi')
+      ele.className = ele.className.replace(reg, ' ')
+    }
+  }
+  
+  export function toggleClass (ele, cls) {
+    if (hasClass(ele, cls)) {
+      removeClass(ele, cls)
+    } else {
+      addClass(ele, cls)
+    }
+  }

src/views/cultrue/index.vue

@@ -1,34 +1,27 @@
 <template>
-    <div id="cultrue">
+  <div id="cultrue">文化</div>
-        文化
-    </div>
 </template>
 <script>
-export default{
+export default {
-    data(){
+  data() {
-        return{
+    return {};
-            
+  },
-        }
+  mounted() {
-    },
+    let cc = window.document.getElementById("dv-full-screen-container");
-    mounted(){
+    // 清除其他多余的classname
-        // console.log("wh vue")
+    if (cc.className.indexOf("wh_bg") > -1) {
-        // console.log(this.$route.meta)
+      cc.className = "btgym";
-    },
+    } else {
-    methods:{
+      cc.classList.add("wh_bg");
-
     }
-}
+    console.log(cc.classList)
+  },
+  methods: {},
+};
 </script>
 <style>
-/* div#dv-full-screen-container{
+.wh_bg {
-    background-image: none !important;
+  clear: both;
-} */
+  background-image: url("../../assets/wh/whbg.jpg") !important;
-.btgym::before{
-  background-image: none !important;
-  content: "";
-}
-.btgym{
-    clear: both;
-    background-image:url('../../assets/wh/whbg.jpg') !important;
 }
 </style>

src/views/index.vue

@@ -5,6 +5,7 @@
     </div>
 </template>
 <script>
+
 export default{
 
     data(){
@@ -13,16 +14,23 @@ export default{
         }
     },
     mounted(){
-    //    console.log("index.vue")
+        let cc = window.document.getElementById("dv-full-screen-container")
+        // 清除其他多余的classname
+        let len = cc.classList.length
+        
+        if(len>1){
+            cc.className="btgym page_wh"
+        //    cc.className ="btgym"
+        // }else{
+        //     cc.classList.add("page_bg")
+        }
+        console.log("index vue:"+len)
+       console.log(cc.classList)
     }
 }
 </script>
 <style>
-.btgym::before{
+.page_bg{
-  background-image: none !important;
-  content: "";
-}
-.btgym{
     clear: both;
     background-image:url('../assets/index/bg.jpg') !important;
 }

src/views/ty/index.vue

@@ -8,24 +8,20 @@ export default {
   },
 
   mounted() {
-    // console.log("ty vue");
+    let cc = window.document.getElementById("dv-full-screen-container");
-    // console.log(this.$route.meta);
+    // 清除其他多余的classname
-    // let bgurl = this.$route.meta;
+    if (cc.className.indexOf('ty_bg') > -1) {
-    // this.$emit("bgimg", bgurl);
+      cc.className = "btgym";
-  },
+    } else {
-  beforeDestroy(){
+      cc.classList.add("ty_bg");
-    // console.log("des index");
+    }
   },
   methods: {},
 };
 </script>
 <style>
-div.btgym::before{
+.ty_bg {
-  background-image: none !important;
+  clear: both;
-  content: "";
+  background-image: url("../../assets/ty/tybg.jpg") !important;
-}
-div.btgym{
-    clear: both;
-    background-image:url('../../assets/ty/tybg.jpg') !important;
 }
 </style>