<template> <div class="map"> <img class="background" :src="imgUrl.background" v-if="total !== 5 && total !== 7 "/> <img class="background" :src="imgUrl.background5" v-if="total === 5"/> <img class="background" :src="imgUrl.background7" v-if="total === 7"/> <img :src="imgUrl.go" class="go" @click="shuoming = true"/> <div v-for="(data,index) in lessonList" :class="'island-block land20'+(index+1)" :id="index === lessonList.length-2? 'nowLesson' :''"> <div :class="{today:index === lessonList.length-1}" @click="showDia(data)"> <img :src="imgUrl.isLandAct" v-if="index !== lessonList.length-1" class="land"/> <img :src="imgUrl.islandNow" v-if="index === lessonList.length-1" class="land"/> <img :src="imgUrl.day[index]" class="day"/> <div class="star-block"> <img :src="imgUrl.starDefault" v-if="!starNum(data,2)"/> <img :src="imgUrl.starSelect" v-if="starNum(data,2)"/> <img :src="imgUrl.starDefault" v-if="!starNum(data,3)"/> <img :src="imgUrl.starSelect" v-if="starNum(data,3)"/> <img :src="imgUrl.starDefault" v-if="!starNum(data,4)"/> <img :src="imgUrl.starSelect" v-if="starNum(data,4)"/> </div> </div> </div> <div v-for="i in (total - lessonList.length) " :class="'island-block land'+(total-i+1)" @click="noLesson()"> <img :src="imgUrl.islandDefault" class="land"/> <img :src="imgUrl.day[total-i]" class="day"/> <div class="star-block"> <img :src="imgUrl.starDefault"/> <img :src="imgUrl.starDefault"/> <img :src="imgUrl.starDefault"/> </div> </div> </div> </template> <script> import {mapOnce} from "../../util/imgUrl"; export default { name: "once", props:[ 'total', 'lessonList' ], data(){ return { imgUrl:mapOnce } }, methods:{ starNum(data,page_id){ let ret = false; data.ele_list.forEach(i=>{ if(i.watch_list && i.watch_list.find(i=>{return i.page_id === page_id })){ ret = true } }); return ret }, showDia(data){ this.$emit('showDia',data) } } } </script> <style scoped lang="less"> @import "../../util/public"; .map{ padding-bottom: 45 * @toVw; .background{ width: 375*@toVw; } .go{ position: absolute; top: 154*@toVw; left: 31*@toVw; width: 195*@toVw; } .title-d{ font-size: 12 * @toVw; width:100 * @toVw ; height: 30 * @toVw; color: #3c2700; position: absolute; top: 0; overflow : hidden; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; &.title-d-name1{ top: 525 *@toVw; right:40 * @toVw ; } &.title-d-name6{ top: 1210 *@toVw; left:26 * @toVw ; } &.title-d-name11{ top: 1865 *@toVw; right:32 * @toVw ; } &.title-d-name16{ top: 2598 *@toVw; right:39 * @toVw ; } } .island-block{ position: absolute; width: 105*@toVw; .land{ width: 100%; } .title{ } .day{ position: absolute; width: 45*@toVw; bottom: 14*@toVw; left: 76*@toVw; } .star-block{ position: absolute; left: 22*@toVw; bottom: -3*@toVw; img{ width: 20*@toVw; } } .today{ animation: dodge 1s infinite; } &.land201{ top: 215*@toVw; right: 48*@toVw; } &.land202{ top: 343*@toVw; left: 39*@toVw; } &.land203{ top: 500*@toVw; left: 105*@toVw; } &.land204{ top: 602*@toVw; right: 32*@toVw; } &.land205{ top: 710*@toVw; left: 35*@toVw; } &.land206{ top: 846*@toVw; right: 18*@toVw; } &.land207{ top: 929*@toVw; left: 24*@toVw; } &.land208{ top: 1064*@toVw; right: 151*@toVw; } &.land209{ top: 1237*@toVw; right: 32*@toVw; } &.land2010{ top: 1356*@toVw; left: 93*@toVw; } } @keyframes dodge { 0%{ transform:scale(0.9,0.9) } 50%{ transform:scale(1.1,1.1) } 100%{ transform:scale(0.9,0.9) } } } </style>