点击不同的link 切换相应的background image

src/App.vue

@@ -1,16 +1,21 @@
 <template>
   <div id="app">
-    <dv-full-screen-container class="btgym">
+    <dv-full-screen-container class="btgym" :style="'{background-image:url('+ {bgimg} +')}'">
+
       <!-- 顶部信息 -->
       <div class="topnav">
         <div class="toptxt">
-            <div style="margin-left: 2%;" class="topTitle">累计进馆人数：3,435,123万人</div>
-            <img class="topImg" src="@/assets/index/top_title.png"/>
-            <div style="margin-right: 2%;" class="topTitle">星期四 16:33:33 天气：晴</div>
+          <div style="margin-left: 2%" class="topTitle">
+            累计进馆人数：3,435,123万人
+          </div>
+          <img class="topImg" src="@/assets/index/top_title.png" />
+          <div style="margin-right: 2%" class="topTitle">
+            星期四 16:33:33
+          </div>
         </div>
         <div class="links">
-          <router-link to="/ty">体育</router-link>
-          <router-link to="/">概览</router-link>
+          <router-link class="" to="/ty">体育</router-link>
+          <router-link to="/">总览</router-link>
           <router-link to="/cultrue">文化</router-link>
         </div>
       </div>
@@ -22,52 +27,116 @@
   </div>
 </template>
 
+<script>
+export default ({
+  data(){
+    return{
+       bgimg:require("assets/index/bg.jpg")
+      //  bgimg:""
+    }
+  },
+  mounted(){
+    //console.log(this.bgimg)
+  }
+})
+</script>
+
+
 <style lang="scss">
 body {
   margin: 0;
-}
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  padding: 0;
+  background: #070a24;
 }
 // 基类
 .btgym {
   width: 100vw;
   height: 100vh;
-  position: relative;
-  background-image: url("assets/g_bg.jpg");
-  background-size: 100%;
-  background-repeat:no-repeat ;
+  // position: relative;
+  // background-image: url("assets/g_bg.jpg");
+  // background-size: 100%;
+  // background-repeat: no-repeat;
 
-  .topnav{
+  .topnav {
     width: 100%;
     height: 20%;
-    background-image: url('assets/index/topnav.png');
+    background-image: url("assets/index/topnav.png");
     background-size: 100% 100%;
     background-repeat: no-repeat;
     position: relative;
 
-    .toptxt{
+    // 顶部文字
+    .toptxt {
       display: flex;
       justify-content: space-between;
 
-      .topImg{
-          margin-top: 1%;
-          width: 35%;
-          height: 15%;
-        }
-        .topTitle{
-          margin-top: 1%;
-          color: #00C6FF;
-          font-size: 14px;
-          font-weight: bold;
-        }
+      .topImg {
+        margin-top: 1%;
+        width: 35%;
+        height: 15%;
+      }
+      .topTitle {
+        margin-top: 1%;
+        color: #00c6ff;
+        font-size: 14px;
+        font-weight: bold;
+      }
     }
 
+    // 操作链接
+    .links {
+      width: 24%;
+      height: 36%;
+      // border: 1px solid red;
+      margin: 0 auto;
+      margin-top: 2.4%;
+      display: flex;
+      justify-content: space-between;
+      font-weight: bold;
+      font-size: 0.26rem;
+      text-align: center;
 
-  }
+      a {
+        text-decoration: none;
+        display: block;
+        width: 33.33%;
+        height: 86%;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        color: #00bdf9;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        cursor: pointer;
+        margin-top: 12px;
+      }
+      // 总览
+      a:nth-child(2){
+        margin-top: 22px;
+        background-image:url('assets/index/zl.png');
+      }
+      a:nth-child(1){
+        background-image: url('assets/index/ty.png');
+      }
+      a:nth-child(3){
+        background-image: url('assets/index/wh.png');
+      }
 
+      a.router-link-exact-active{
+        color: #fff;
+      }
+      a.router-link-exact-active:nth-child(1){
+        background-image: url('assets/index/ty_active.png');
+      }
+      a.router-link-exact-active:nth-child(2){
+        background-image: url('assets/index/zl_active.png');
+      }
+      a.router-link-exact-active:nth-child(3){
+        background-image: url('assets/index/wh_active.png');
+      }
+    }
+  }
+  //底部信息
   .footer {
     // width: 100%;
     height: 120vh;
@@ -79,4 +148,5 @@ body {
     left: 0;
   }
 }
+
 </style>

src/main.js

@@ -6,21 +6,21 @@ import dataV from '@jiaminghi/data-view';
 Vue.use(dataV);
 
 // 按需引入vue-awesome图标
-import Icon from 'vue-awesome/components/Icon';
-import 'vue-awesome/icons/chart-bar.js';
-import 'vue-awesome/icons/chart-area.js';
-import 'vue-awesome/icons/chart-pie.js';
-import 'vue-awesome/icons/chart-line.js';
-import 'vue-awesome/icons/align-left.js';
+// import Icon from 'vue-awesome/components/Icon';
+// import 'vue-awesome/icons/chart-bar.js';
+// import 'vue-awesome/icons/chart-area.js';
+// import 'vue-awesome/icons/chart-pie.js';
+// import 'vue-awesome/icons/chart-line.js';
+// import 'vue-awesome/icons/align-left.js';
 
 // 全局注册图标
-Vue.component('icon', Icon);
+// Vue.component('icon', Icon);
 
 // 适配flex
 import '@/common/flexible.js';
 
 // 引入全局css
-import './assets/scss/style.scss';
+// import './assets/scss/style.scss';
 
 
 //引入echart

src/views/index.vue

@@ -3,4 +3,21 @@
 
         总览的内容
     </div>
-</template>
+</template>
+<script>
+export default{
+
+    data(){
+        return{
+            // 首页背景图片
+            bgimg:'assets/index/bg.jpg'
+        }
+    },
+    // computed(){
+    //     this.$emit.bgimg = require (this.bgimg)
+    // },
+    // mounted(){
+    //     this.$emit.bgimg = require (this.bgimg)
+    // }
+}
+</script>

src/views/ty/index.vue

@@ -1,7 +1,3 @@
 <template>
-    <dv-full-screen-container>
-        
-        <dv-border-box-10>dv-border-box-10</dv-border-box-10>
-
-    </dv-full-screen-container>
+    <div id="ty"></div>
 </template>