<template> <div class="map"> <img class="background" :src="imgUrl.bg20"/> <img :src="imgUrl.go20" class="go go20" @click="shuoming.show = true"/> <div v-for="(data,index) in lessonList" :class="'title-d title-d-name'+ (index+1)" v-if="index === 0 ||index === 5 ||index === 10 ||index === 15"> {{data.title}}</div> <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.map20Land" v-if="index !== lessonList.length-1" class="land"/> <img :src="imgUrl.map20Land" v-if="index === lessonList.length-1" class="land"/> <img :src="imgUrl.day20[index]" class="day day20"/> <div class="star-block"> <img :src="imgUrl.mapBgStarN" v-if="!starNum(data,2)"/> <img :src="imgUrl.mapBgStar" v-if="starNum(data,2)"/> <img :src="imgUrl.mapBgStarN" v-if="!starNum(data,3)"/> <img :src="imgUrl.mapBgStar" v-if="starNum(data,3)"/> <img :src="imgUrl.mapBgStarN" v-if="!starNum(data,5)"/> <img :src="imgUrl.mapBgStar" v-if="starNum(data,5)"/> </div> </div> </div> <div v-for="i in (20 - lessonList.length) " :class="'island-block land20'+(20-i+1)" @click="noLesson()"> <img :src="imgUrl.map20LandC" class="land"/> <img :src="imgUrl.day20[total-i]" class="day day20"/> <div class="star-block"> <img :src="imgUrl.starDefault"/> <img :src="imgUrl.starDefault"/> <img :src="imgUrl.starDefault"/> </div> </div> </div> </template> <script> import {mapDefault} from "../../util/imgUrl"; export default { name: "mapDefault", data(){ return { imgUrl:mapDefault } }, props:[ 'total', 'lessonList', 'shuoming' ], 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; } .go20{ position: absolute; width: 134 * @toVw; top: 196 * @toVw; left: 42 * @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; &.day20{ width: 45 * @toVw; left: 60 * @toVw; } } .star-block{ position: absolute; left: 22*@toVw; bottom: -3*@toVw; img{ width: 20*@toVw; } } .today{ animation: dodge 1s infinite; } &.land201{ top: 287 * @toVw; right: 39 * @toVw; } &.land202{ top: 407 * @toVw; left: 39 * @toVw; } &.land203{ top: 564 * @toVw; right: 158 * @toVw; } &.land204{ top: 666 * @toVw; right: 24 * @toVw; } &.land205{ top: 775 * @toVw; left: 35 * @toVw; } &.land206{ top: 910 * @toVw; right: 11 * @toVw; } &.land207{ top: 993 * @toVw; left: 24 * @toVw; } &.land208{ top: 1131 * @toVw; right: 112 * @toVw; } &.land209{ top: 1301 * @toVw; right: 24 * @toVw; } &.land2010{ top: 1420 * @toVw; right: 169 * @toVw; } &.land2011{ top: 1602 * @toVw; right: 50 * @toVw; } &.land2012{ top: 1765 * @toVw; left: 48 * @toVw; } &.land2013{ top: 1908 * @toVw; right: 78 * @toVw; } &.land2014{ top: 2095 * @toVw; right: 38 * @toVw; } &.land2015{ top: 2208 * @toVw; left: 46 * @toVw; } &.land2016{ top: 2381 * @toVw; right: 81 * @toVw; } &.land2017{ top: 2549 * @toVw; left: 33 * @toVw; } &.land2018{ top: 2646 * @toVw; right: 69 * @toVw; } &.land2019{ top: 2799 * @toVw; right: 200 * @toVw; } &.land2020{ top: 2959 * @toVw; right: 47 * @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>