Skip to content

X
xxx_phase2_web
Commit 90f19090 authored by 高飞's avatar 高飞
Browse files
Options

修改首页6个模块的图片

parent d0b7ca9c
Hide whitespace changes
Inline Side-by-side
Showing with 62 additions and 13 deletions
src/view/homepage.vue
View file @ 90f19090
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<div class="content"> <div class="content">
<div class="left-content"> <div class="left-content">
<div class="leftModule bk-homeapge-animation" v-for="(item,index) in modules.leftModule"> <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)"> @click="choiceModule(item.id)">
<div class="info-description"> <div class="info-description">
<div v-text="item.title"></div> <div v-text="item.title"></div>
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
</div> </div>
<div class="right-content"> <div class="right-content">
<div class="rightModule bk-homeapge-animation" v-for="(item,index) in modules.rightModule"> <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)"> @click="choiceModule(item.id)">
<div class="info-description"> <div class="info-description">
<div v-text="item.title"></div> <div v-text="item.title"></div>
...@@ -211,17 +211,24 @@ export default { ...@@ -211,17 +211,24 @@ export default {
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative; 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 { .module-info {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0px 20px; padding: 0px 20px;
box-sizing: border-box; box-sizing: border-box;
background-image: url('../assets/img/homepage/12.png');
background-size: 120% 120%; background-size: 120% 120%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position-x: -80px; background-position-x: -45px;
background-position-y: -18px; background-position-y: -23px;
cursor: pointer; cursor: pointer;
.info-description { .info-description {
...@@ -238,9 +245,26 @@ export default { ...@@ -238,9 +245,26 @@ export default {
} }
} }
.selectedModule { .selectedModule-left0 {
background-image: url('../assets/img/homepage/11.png'); 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 { .info-description {
&>div:first-child { &>div:first-child {
color: orange; color: orange;
...@@ -359,16 +383,25 @@ export default { ...@@ -359,16 +383,25 @@ export default {
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative; 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 { .module-info {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0px 20px; padding: 0px 20px;
box-sizing: border-box; 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-size: 120% 120%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position-x: -80px; background-position-x: -45px;
background-position-y: -18px; background-position-y: -23px;
cursor: pointer; cursor: pointer;
.info-description { .info-description {
...@@ -384,10 +417,26 @@ export default { ...@@ -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 { .selectedModule-right1 {
background-image: url('../assets/img/homepage/11.png'); 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 { .info-description {
&>div:first-child { &>div:first-child {
color: orange; color: orange;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment