最终效果图:
效果图需求:
当点击其中一个div时,1.背景图切换;2.绿色的小icon变成白色;3.字体变成白色
环境:
vue2
代码:
<template>
<div style="position: relative;">
<div style="margin-top: 14%">
<img style="width: 100%;" :src="imgUrl" >
</div>
<div style="position: absolute;top:11%;right: 65%;left: 19%;width: 16.5%;">
<div @click="imgClick(0)" :class="[{bk:active0},{organ:!active0}]">
<img style="vertical-align: middle;margin:5% 5% 5% -20%" :src="smallImgUrl0" />
<span align="left" class="font" :class="[{font:active0},{content:!active0}]">机构随心<br>
<span class="color" :class="[{color:active0},{content_color:!active0}]">1000+机构覆盖全国</span>
</span>
</div>
<div @click="imgClick(1)" :class="[{bk:active1},{organ:!active1}]">
<img style="vertical-align: middle;margin: 5% 5% 5% -15%" :src="smallImgUrl1" />
<span align="left" :class="[{font:active1},{content:!active1}]">家属预约<br>
<span :class="[{color:active1},{content_color:!active1}]">添加家属享受体检折扣</span>
</span>
</div>
<div @click="imgClick(2)" :class="[{bk:active2},{organ:!active2}]">
<img style="vertical-align: middle;margin: 5% 5% 5% -15%" :src="smallImgUrl2" />
<span align="left" :class="[{font:active2},{content:!active2}]">报告查询<br>
<span :class="[{color:active2},{content_color:!active2}]">在线领取报告免费解读</span>
</span>
</div>
<div @click="imgClick(3)" :class="[{bk:active3},{organ:!active3}]">
<img style="vertical-align: middle;margin: 5% 5% 5% -8%" :src="smallImgUrl3" />
<span align="left" :class="[{font:active3},{content:!active3}]">在线问诊<br>
<span :class="[{color:active3},{content_color:!active3}]">各科室名医在线问诊咨询</span>
</span>
</div>
<div @click="imgClick(4)" :class="[{bk:active4},{organ:!active4}]">
<img style="vertical-align: middle;margin: 5% 5% 5% -4%" :src="smallImgUrl4" />
<span align="left" :class="[{font:active4},{content:!active4}]">企业看板<br>
<span :class="[{color:active4},{content_color:!active4}]">企业员工健康数据一目了然</span>
</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Index',
data () {
return {
// 机构随心
// 字体颜色/icon
active0: false,
active1: false,
active2: false,
active3: false,
active4: false,
imgList: [require('../assets/P机构随心.png'), require('../assets/P家属预约.png'), require('../assets/P报告查询.png'), require('../assets/P在线问诊.png'), require('../assets/P企业看板.png')],
imgUrl: require('../assets/P机构随心.png'),
smallIconUrlGreen: [require('../assets/i机构(绿).png'), require('../assets/i预约(绿).png'), require('../assets/i查询报告(绿).png'), require('../assets/i问诊(绿).png'), require('../assets/i看板(绿).png')],
smallIconUrlWhite: [require('../assets/i机构(白).png'), require('../assets/i预约(白).png'), require('../assets/i查询报告(白).png'), require('../assets/i问诊(白).png'), require('../assets/i看板(白).png')],
// 默认初始小icon是绿色
smallImgUrl0: require('../assets/i机构(绿).png'),
smallImgUrl1: require('../assets/i预约(绿).png'),
smallImgUrl2: require('../assets/i查询报告(绿).png'),
smallImgUrl3: require('../assets/i问诊(绿).png'),
smallImgUrl4: require('../assets/i看板(绿).png'),
}
},
methods: {
// 由于代码太长,这里只贴出index==0,后面的实现一样
imgClick (index) {
// 当索引==0时
if (index == 0) {
// 同时切换对应的背景图
this.imgUrl = this.imgList[index]
// 同时切换对应的小的白色icon,另外其它4个保持绿色不变
this.smallImgUrl0 = this.smallIconUrlWhite[index]
this.smallImgUrl1 = this.smallIconUrlGreen[1]
this.smallImgUrl2 = this.smallIconUrlGreen[2]
this.smallImgUrl3 = this.smallIconUrlGreen[3]
this.smallImgUrl4 = this.smallIconUrlGreen[4]
// 当active0 = true,当前点击的div颜色变成绿色,其它保持白色不变,以及字体颜色不变
this.active0 = true
this.active1 = false
this.active2 = false
this.active3 = false
this.active4 = false
}
}
}
}
</script>
<style scoped>
/*icon*/
.bk{
background: #019A92;text-align: center;cursor: pointer;margin-top: 10%
}
.organ{
background-color: #FFFFFF;text-align: center;cursor: pointer;margin-top: 10%
}
/*字体颜色*/
.font{
font-size: 100%; color: #FFFFFF;display: inline-block;vertical-align: middle
}
.content{
font-size: 100%; color: #019A92;display: inline-block;vertical-align: middle
}
.color{
font-size: 80%;color: #FFFFFF;
}
.content_color{
font-size: 80%;color: #7D7D7D;
}
</style>
我这个实现方法是比较傻瓜式的,如大家有更巧妙或更高明的办法欢迎留言告诉我,一起学习~~
网友评论