<template> <div> <div class="guide" v-if="show" @click="show=false"> <div class="title"> 点击放大图片 </div> <div class="btn-block"> <img :src="listUrl"/> <img :src="backUrl"/> <img class="play-btn" :src="playUrl"/> <img :src="nextUrl"/> <img :src="refUrl"/> </div> <img :src="goDownUrl" class="toLesson"/> <div class="lesson-text">音频功能栏</div> <img class="i-know" :src="iKnowUrl"/> </div> </div> </template> <script> import {getGuideApi,setGuideApi} from "../../service/api"; import iKnowUrl from '../../assets/guide/lesson.png' import playUrl from '../../assets/guide/play.png' import nextUrl from '../../assets/guide/next.png' import backUrl from '../../assets/guide/back.png' import listUrl from '../../assets/guide/list.png' import refUrl from '../../assets/guide/ref.png' import goUrl from '../../assets/guide/go.png' import goDownUrl from '../../assets/guide/go-down.png' export default { name: "guide", data(){ return{ iKnowUrl:iKnowUrl, goDownUrl:goDownUrl, playUrl:playUrl, nextUrl:nextUrl, backUrl:backUrl, listUrl:listUrl, refUrl:refUrl, goUrl:goUrl, show:false } }, mounted(){ let json = { page_name:'audio' }; getGuideApi(json).then(res=>{ if(res == 0){ this.show=true; } }); } } </script> <style scoped lang="less"> @import "../../util/public"; .star{ width: 23*@toVw; } .title{ width:190*@toVw; height:187*@toVw; border-radius:4*@toVw; border:1*@toVw solid rgba(255,255,255,1); line-height: 187*@toVw; text-align: center; position: absolute; top: 107*@toVw; left: 93*@toVw; } .btn-block{ width:251*@toVw; height:57*@toVw; border-radius:29*@toVw; border:1*@toVw solid rgba(255,255,255,1); display: flex; position: absolute; top: 430*@toVw; left: 60*@toVw; img{ width: 16*@toVw; vertical-align: middle; } .play-btn{ width: 40*@toVw; } } .toTitle{ width: 45*@toVw; position: absolute; top: 110*@toVw; left: 60*@toVw ; } .guide{ position: fixed; top: 0; left: 0; bottom: 0; right: 0; color: white; background:rgba(0,0,0,0.8); z-index: 9999; .i-know{ position: absolute; width: 129*@toVw; left: 120*@toVw; top: 320*@toVw; } .toLesson{ width: 45*@toVw; position: absolute; top: 500*@toVw; left: 100*@toVw; transform: rotate(30deg); } .color-red{ color: #FF6477; } .lesson-text{ width:114*@toVw; height:26*@toVw; line-height: 26*@toVw; font-family:PingFang-SC-Medium; font-weight:500; font-size: 14*@toVw; border-radius:8*@toVw; position: absolute; top: 520*@toVw; left: 150*@toVw; text-align: center; border:1*@toVw solid rgba(255,255,255,1) } } </style>