<template> <div> <div class="guide" v-if="show" @click="show=false"> <img :src="bgUrl" class="bg"/> <div class="tips"> 需要先在课程中将歌曲<span class="color-red">加入收藏</span> 才可以使用哦 </div> </div> </div> </template> <script> import {getGuideApi,setGuideApi} from "../../service/api"; import bgUrl from '../../assets/guide/collect.png' export default { name: "guide", data(){ return{ bgUrl:bgUrl, show:false } }, mounted(){ let json = { page_name:'collection' }; this.show=true; } } </script> <style scoped lang="less"> @import "../../util/public"; .color-red{ color:#FF5050 ; } .guide{ position: fixed; top: 0; left: 0; bottom: 0; overflow: hidden; right: 0; background-size: 100% 100%; color: white; z-index: 9999; background:rgba(0,0,0,0.8); .bg{ margin-top: -60*@toVw; width: 100%; } .tips{ width: 196*@toVw; position: absolute; top: 440*@toVw; left: 20*@toVw; font-size:14*@toVw; font-family:PingFang-SC-Medium; font-weight:500; color:rgba(255,255,255,1); text-align: center; padding: 10*@toVw; border: 1*@toVw solid #fff; border-radius: 8*@toVw; } } </style>