今天完成的事情：

wiki写前端方案，还剩点细节明天完善

遇到的问题：

前台Home页面使用map标签和area标签定位文学部，影视部,

图片放大缩小用vue-awesome-swiper 的zoom；

<button class="checkBtn">签到</button>
<swiper :options="swiperOption" ref="imgOverview" >
  <swiper-slide >
    <div class="swiper-zoom-container">
        <img  id="img" class="logo" src="@/assets/logo.png"  border="0" usemap="#planetmap">
         <map name="planetmap" id="planetmap">
           <area
             :shape='shape'
             :coords="coords"
             href ="/#/user/demo"
             target ="_parent"
             alt="circle" />
         </map>
    </div>
  </swiper-slide>
</swiper>

动态生成area坐标，在logo的中间生成一个area，点击可以跳转如下面黄框所示。

mounted () {
  let width = document.documentElement.clientWidth
  this.coords = [width / 2, width * 0.6 / 2, width / 16]
},

  .logo{
  width: 100vw;
  height: 60vw;
  background: grey;
}

收获：

  vue-awesome-swiper使用

map和area标签使用