163 lines
4.0 KiB
Vue
163 lines
4.0 KiB
Vue
<template>
|
||
<div class="pop-box" @click="setData">
|
||
<div class="border l-t"></div>
|
||
<div class="border r-t"></div>
|
||
<div class="border r-b"></div>
|
||
<div class="border l-b"></div>
|
||
<div class="content mg-b-20">
|
||
<div class="flow-light-box">
|
||
<div class="img-box">
|
||
<img style="width:100%" :src="$route.query.img" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="content col" style="justify-content: center;s">
|
||
<div class="mg-b-5 title">{{$route.query.title}}</div>
|
||
<div class="content disable opacity5 mg-b-5">
|
||
难度：
|
||
<el-rate
|
||
v-model="$route.query.rate"
|
||
:colors="colors">
|
||
</el-rate>
|
||
</div>
|
||
<div class="content disable opacity5">
|
||
火点：{{$route.query.point}}个
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mg-b-20 title">
|
||
训练说明
|
||
</div>
|
||
<div class="opacity5 mg-b-20">
|
||
{{$route.query.content}}
|
||
</div>
|
||
<div class="mg-b-20 title">
|
||
训练要点
|
||
</div>
|
||
<div class="opacity5 mg-b-20">
|
||
{{$route.query.mainPoint}}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<style lang="scss" scoped>
|
||
@keyframes turnRound {
|
||
0%{
|
||
transform:rotate(0);
|
||
}
|
||
100%{
|
||
transform:rotate(360deg);
|
||
}
|
||
}
|
||
.pop-box{
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 4px 4px 4px 4px;
|
||
opacity: 1;
|
||
border: 1px solid #FFFFFF;
|
||
background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.7) 100%);
|
||
padding: 30px;
|
||
font-size: 14px;
|
||
position: relative;
|
||
.border{
|
||
width: 8px;
|
||
height: 8px;
|
||
position: absolute;
|
||
border-left: 1px solid #FFF;
|
||
border-top: 1px solid #FFF;
|
||
&.l-t{
|
||
top: 10px;
|
||
left: 10px;
|
||
}
|
||
&.r-t{
|
||
top: 10px;
|
||
right: 10px;
|
||
transform: rotate(90deg);
|
||
}
|
||
&.r-b{
|
||
bottom: 10px;
|
||
right: 10px;
|
||
transform: rotate(180deg);
|
||
}
|
||
&.l-b{
|
||
bottom: 10px;
|
||
left: 10px;
|
||
transform: rotate(270deg);
|
||
}
|
||
}
|
||
.flow-light-box{
|
||
width: 160px;
|
||
height: 90px;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
position: relative;
|
||
margin-right: 15px;
|
||
&::before{
|
||
content: "";
|
||
width: 200px;
|
||
height: 200px;
|
||
display: block;
|
||
flex: none;
|
||
background: conic-gradient(#F5F500 ,#F4FF00,#FF8600 ,#FF0000 ,rgba(255,255,255,0.83) ,transparent,transparent,transparent,transparent );
|
||
animation: turnRound 1.5s linear infinite;
|
||
}
|
||
.img-box{
|
||
inset: 2px;
|
||
border-radius: 6px;
|
||
background: #000;
|
||
position: absolute;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
.content{
|
||
display: flex;
|
||
&.col{
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
.title{
|
||
font-size: 16px;
|
||
}
|
||
.opacity5{
|
||
opacity: 0.5;
|
||
}
|
||
.disable{
|
||
pointer-events: none;
|
||
}
|
||
.mg-b-20{
|
||
margin-bottom: 10px;
|
||
}
|
||
.mg-b-5{
|
||
margin-bottom: 5px;
|
||
}
|
||
}
|
||
</style>
|
||
<script lang="ts">
|
||
import Vue from 'vue'
|
||
declare const ue
|
||
// import acapi from '../../public/ac.min.js';
|
||
export default Vue.extend({
|
||
data(){
|
||
return{
|
||
params:{},
|
||
colors:["#FFF","#FFF","#FFF"],
|
||
star:3
|
||
}
|
||
},
|
||
created(){
|
||
ue.dtspoi.postevent(JSON.stringify(this.$route))
|
||
//
|
||
},
|
||
methods:{
|
||
// 弹窗关闭
|
||
close(){
|
||
ue.dtspoi.closewindow();
|
||
},
|
||
// 向页面内传送数据
|
||
setData(){
|
||
ue.dtspoi.postevent(JSON.stringify(this.$route))
|
||
}
|
||
}
|
||
})
|
||
</script> |