<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>