之前没有了解过图片局部热区跳转这种样式，百度搜索实现方法发现两种方法。所谓图片热区跳转就是用户点击图片中的某些区域可以跳转到不同的页面，如下图，点击“舞动人生馆”可以跳转到舞动人生对应的活动页面，点击展望美好馆可以跳转到展望美好对应的活动页面等等。

1、通过原生img标签的usemap熟悉绑定map标签，利用area标签实现热区

参考实现1
参考实现2

2、纯手写实现

首先将整张图片设置为背景图，同时外层大盒子设置相对定位，在图片所在盒子内添加热区对应的绝对定位的小盒子，需要量好每个小盒子的宽高和定位位置，js中添加点击跳转方法。

html代码：

<div class="active-list">
	<div class="item" v-for="(item,index) in activeList" :key="index" @click="goTo(item)"></div>
</div>

css代码：

.active-list {
        width: pxrem(750);
        height: pxrem(1724);
        background-image: url(../images/bgImg.png);
        background-size: 100% 100%;
    }

    .item {
        position: absolute;
        cursor: pointer;

        &:nth-child(1) {
            width: pxrem(217);
            height: pxrem(389);
            left: pxrem(272);
            top: pxrem(297);
        }

        &:nth-child(2) {
            width: pxrem(221);
            height: pxrem(238);
            left: pxrem(57);
            top: pxrem(628);
        }

        &:nth-child(3) {
            width: pxrem(208);
            height: pxrem(237);
            left: pxrem(503);
            top: pxrem(634);
        }

        &:nth-child(4) {
            width: pxrem(225);
            height: pxrem(277);
            left: pxrem(276);
            top: pxrem(784);
        }

        &:nth-child(5) {
            width: pxrem(278);
            height: pxrem(238);
            left: pxrem(22);
            top: pxrem(961);
        }


        &:nth-child(6) {
            width: pxrem(228);
            height: pxrem(264);
            left: pxrem(495);
            top: pxrem(948);
        }


        &:nth-child(7) {
            width: pxrem(263);
            height: pxrem(236);
            left: pxrem(261);
            top: pxrem(1106);
        }

        &:nth-child(8) {
            width: pxrem(231);
            height: pxrem(240);
            left: pxrem(51);
            top: pxrem(1295);
        }

        &:nth-child(9) {
            width: pxrem(270);
            height: pxrem(277);
            left: pxrem(440);
            top: pxrem(1304);
        }
    }