修改首页6个模块的图片

src/view/homepage.vue

@@ -10,7 +10,7 @@
         <div class="content">
             <div class="left-content">
                 <div class="leftModule bk-homeapge-animation" v-for="(item,index) in modules.leftModule">
-                    <div :class="['module-info', isSelected == item.id ? 'selectedModule' : '']"
+                    <div :class="['module-info', isSelected == item.id ? ('selectedModule-left'+index) : '','left-div-'+index]"
                         @click="choiceModule(item.id)">
                         <div class="info-description">
                             <div v-text="item.title"></div>
@@ -34,7 +34,7 @@
             </div>
             <div class="right-content">
                 <div class="rightModule bk-homeapge-animation" v-for="(item,index) in modules.rightModule">
-                    <div :class="['module-info', isSelected == item.id ? 'selectedModule' : '']"
+                    <div :class="['module-info', isSelected == item.id ? ('selectedModule-right'+index) : '','right-div-'+index]"
                         @click="choiceModule(item.id)">
                         <div class="info-description">
                             <div v-text="item.title"></div>
@@ -211,17 +211,24 @@ export default {
                 background-size: 100% 100%;
                 background-repeat: no-repeat;
                 position: relative;
-
+                .left-div-0{
+                    background-image: url('../assets/img/homepage/index0.png');
+                }
+                .left-div-1{
+                    background-image: url('../assets/img/homepage/index1.png');
+                }
+                .left-div-2{
+                    background-image: url('../assets/img/homepage/index2.png');
+                }
                 .module-info {
                     width: 100%;
                     height: 100%;
                     padding: 0px 20px;
                     box-sizing: border-box;
-                    background-image: url('../assets/img/homepage/12.png');
                     background-size: 120% 120%;
                     background-repeat: no-repeat;
-                    background-position-x: -80px;
-                    background-position-y: -18px;
+                    background-position-x: -45px;
+                    background-position-y: -23px;
                     cursor: pointer;
 
                     .info-description {
@@ -238,9 +245,26 @@ export default {
                     }
                 }
 
-                .selectedModule {
-                    background-image: url('../assets/img/homepage/11.png');
+                .selectedModule-left0 {
+                    background-image: url('../assets/img/homepage/index0-0.png');
+                    .info-description {
+                        &>div:first-child {
+                            color: orange;
+                        }
+                    }
+                }
+
+                .selectedModule-left1 {
+                    background-image: url('../assets/img/homepage/index1-0.png');
+                    .info-description {
+                        &>div:first-child {
+                            color: orange;
+                        }
+                    }
+                }
 
+                .selectedModule-left2 {
+                    background-image: url('../assets/img/homepage/index2-0.png');
                     .info-description {
                         &>div:first-child {
                             color: orange;
@@ -359,16 +383,25 @@ export default {
                 background-repeat: no-repeat;
                 position: relative;
 
+                .right-div-0{
+                    background-image: url('../assets/img/homepage/index10.png');
+                }
+                .right-div-1{
+                    background-image: url('../assets/img/homepage/index11.png');
+                }
+                .right-div-2{
+                    background-image: url('../assets/img/homepage/index12.png');
+                }
                 .module-info {
                     width: 100%;
                     height: 100%;
                     padding: 0px 20px;
                     box-sizing: border-box;
-                    background-image: url('../assets/img/homepage/12.png');
+                    // background-image: url('../assets/img/homepage/12.png');
                     background-size: 120% 120%;
                     background-repeat: no-repeat;
-                    background-position-x: -80px;
-                    background-position-y: -18px;
+                    background-position-x: -45px;
+                    background-position-y: -23px;
                     cursor: pointer;
 
                     .info-description {
@@ -384,10 +417,26 @@ export default {
                         }
                     }
                 }
+                .selectedModule-right0 {
+                    background-image: url('../assets/img/homepage/index10-0.png');
+                    .info-description {
+                        &>div:first-child {
+                            color: orange;
+                        }
+                    }
+                }
 
-                .selectedModule {
-                    background-image: url('../assets/img/homepage/11.png');
+                .selectedModule-right1 {
+                    background-image: url('../assets/img/homepage/index11-0.png');
+                    .info-description {
+                        &>div:first-child {
+                            color: orange;
+                        }
+                    }
+                }
 
+                .selectedModule-right2 {
+                    background-image: url('../assets/img/homepage/index12-0.png');
                     .info-description {
                         &>div:first-child {
                             color: orange;