<template>
    <div class="container">
        <div class="titles fontPM">开物产品全景图 — 人工智能底座</div>
        <div class="tit tit1">特色应用</div>
        <div class="tit tit2">生态云</div>
        <div class="tit tit3" style="cursor: pointer;" @click="goUrl($config.urlList[17].url)">AI操作系统</div>
        <div class="tit tit4">AI矿山操作系统底座</div>
        <div class="icard icard_1" @click="goUrl($config.urlList[0].url)">
            <img class="i_img" src="../assets/img/i_img1.png" alt="">
            <div class="i_txt">机器人中台</div>
        </div>
        <div class="icard icard_2" @click="goUrl($config.urlList[1].url)">
            <img class="i_img" src="../assets/img/i_img2.png" alt="">
            <div class="i_txt">无人矿卡调度系统</div>
        </div>
        <div class="icard icard_3" @click="goUrl($config.urlList[2].url)">
            <img class="i_img" src="../assets/img/i_img3.png" alt="">
            <div class="i_txt">Lims实验室管理系统</div>
        </div>
        <div class="icard icard_4" @click="goUrl($config.urlList[3].url)">
            <img class="i_img" src="../assets/img/i_img4.png" alt="">
            <div class="i_txt">边坡监测系统</div>
        </div>
        <div class="icard icard_5" @click="goUrl($config.urlList[4].url)">
            <img class="i_img" src="../assets/img/i_img5.png" alt="">
            <div class="i_txt">矿山大模型</div>
        </div>
        <div class="icard icard_6" @click="goUrl($config.urlList[5].url)">
            <img class="i_img" src="../assets/img/i_img6.png" alt="">
            <div class="i_txt">无人过磅</div>
        </div>
        <div class="icard icard_7" @click="goUrl($config.urlList[6].url)">
            <img class="i_img" src="../assets/img/i_img7.png" alt="">
            <div class="i_txt">虚拟电厂</div>
        </div>
        <div class="icard icard_8" @click="goUrl($config.urlList[7].url)">
            <img class="i_img" src="../assets/img/i_img8.png" alt="">
            <div class="i_txt">氢碳云平台</div>
        </div>
        <div class="icard icard_9" @click="goUrl($config.urlList[8].url)">
            <img class="i_img" src="../assets/img/i_img9.png" alt="">
            <div class="i_txt">矿拉拉Saas</div>
        </div>
        <div class="ocard ocard_1" @click="goUrl($config.urlList[9].url)">
            <img class="o_img" src="../assets/img/o_img1.png" alt="">
            <div class="o_txt">开物云ECO</div>
        </div>
        <div class="ocard ocard_2" @click="goUrl($config.urlList[10].url)">
            <img class="o_img" src="../assets/img/o_img2.png" alt="">
            <div class="o_txt">矿山生态云</div>
        </div>
        <div class="pcard pcard_1" @click="goUrl($config.urlList[11].url)">
            <img class="p_img" src="../assets/img/p_img1.png" alt="">
            <div class="p_txt">物联平台</div>
        </div>
        <div class="pcard pcard_2" @click="goUrl($config.urlList[12].url)">
            <img class="p_img" src="../assets/img/p_img2.png" alt="">
            <div class="p_txt">数据中台</div>
        </div>
        <div class="pcard pcard_3" @click="goUrl($config.urlList[13].url)">
            <img class="p_img" src="../assets/img/p_img3.png" alt="">
            <div class="p_txt">算法中台</div>
        </div>
        <div class="pcard pcard_4" @click="goUrl($config.urlList[14].url)">
            <img class="p_img" src="../assets/img/p_img4.png" alt="">
            <div class="p_txt">业务中台</div>
        </div>
        <div class="pcard pcard_5" @click="goUrl($config.urlList[15].url)">
            <img class="p_img" src="../assets/img/p_img5.png" alt="">
            <div class="p_txt">报表可视化</div>
        </div>
        <div class="pcard pcard_6" @click="goUrl($config.urlList[16].url)">
            <img class="p_img" src="../assets/img/p_img6.png" alt="">
            <div class="p_txt">支付中台</div>
        </div>
        <div class="qcard qcard_1">
            <img class="q_img" src="../assets/img/q_img1.png" alt="">
            <div class="q_txt">应用上下架</div>
        </div>
        <div class="qcard qcard_2">
            <img class="q_img" src="../assets/img/q_img1.png" alt="">
            <div class="q_txt">open API</div>
        </div>
        <div class="qcard qcard_3">
            <img class="q_img" src="../assets/img/q_img1.png" alt="">
            <div class="q_txt">任务调度管理</div>
        </div>
        <div class="qcard qcard_4">
            <img class="q_img" src="../assets/img/q_img1.png" alt="">
            <div class="q_txt">统一消息管理</div>
        </div>
        <div class="qcard qcard_5">
            <img class="q_img" src="../assets/img/q_img1.png" alt="">
            <div class="q_txt">统一用户管理</div>
        </div>
        <div class="qcard qcard_6">
            <img class="q_img" src="../assets/img/q_img1.png" alt="">
            <div class="q_txt">安全认证协议</div>
        </div>
        <div class="qcard qcard_7">
            <img class="q_img" src="../assets/img/q_img1.png" alt="">
            <div class="q_txt">应用接入协议</div>
        </div>
        <div class="qcard qcard_8">
            <img class="q_img" src="../assets/img/q_img1.png" alt="">
            <div class="q_txt">数据交换协议</div>
        </div>
        <div class="qcard qcard_9">
            <img class="q_img" src="../assets/img/q_img1.png" alt="">
            <div class="q_txt">数据知识图谱</div>
        </div>
        <div class="qcard qcard_10">
            <img class="q_img" src="../assets/img/q_img1.png" alt="">
            <div class="q_txt">数据链路管理</div>
        </div>
        <div class="qcard mcard_1">
            <div class="q_txt">安全子系统</div>
            <img class="q_img m_img" src="../assets/img/q_img1.png" alt="">
        </div>
        <div class="qcard mcard_2">
            <div class="q_txt">通用能力封装</div>
            <img class="q_img m_img" src="../assets/img/q_img1.png" alt="">
        </div>
        <div class="qcard mcard_3">
            <div class="q_txt">服务智能组合</div>
            <img class="q_img m_img" src="../assets/img/q_img1.png" alt="">
        </div>
        <div class="qcard mcard_4">
            <div class="q_txt">算法编排</div>
            <img class="q_img m_img" src="../assets/img/q_img1.png" alt="">
        </div>
        <div class="qcard mcard_5">
            <div class="q_txt">模型计算引擎</div>
            <img class="q_img m_img" src="../assets/img/q_img1.png" alt="">
        </div>
        <div class="qcard mcard_6">
            <div class="q_txt">算法计算引擎</div>
            <img class="q_img m_img" src="../assets/img/q_img1.png" alt="">
        </div>
        <div class="qcard mcard_7">
            <div class="q_txt">数据可视化</div>
            <img class="q_img m_img" src="../assets/img/q_img1.png" alt="">
        </div>
        <div class="qcard mcard_8">
            <div class="q_txt">数据质量管理</div>
            <img class="q_img m_img" src="../assets/img/q_img1.png" alt="">
        </div>
    </div>
</template>

<script>

export default {
    name: 'dashboard',
    components: {
        
    },
    data() {
        return {
            
        };
    },
    mounted() {
    },
    methods: {
        goUrl(url){
            if(url){
                window.open(url)
            }
        },
    }
};
</script>

<style scoped lang="less">
@font-face {
    font-family: MFLiHei;
    src: url('./font/MFLiHei_Noncommercial-Regular.otf') format('opentype');
}
@font-face {
    font-family: PangMen;
    src: url('./font/pangmen.ttf');
}
@font-face {
    font-family: FXLed;
    src: url('./font/FX-LED Bold.TTF');
}
.fontMF {
    font-family: MFLiHei;
}
.fontFx {
    font-family: FXLed;
}
.fontPM {
    font-family: PangMen;
}
.container {
    width: 100%;
    height: 1080px;
    background: url('../assets/img/background.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.titles{
    position: absolute;
    top: 0;
    left: 20px;
    width: 524px;
    line-height: 62px;
    font-family: PangMen;
    font-weight: 400;
    font-size: 35px;
    color: #FFFFFF;
}
.tit{
    
    height: 52px;
    position: absolute;
    font-weight: bold;
    font-size: 22px;
    color: #FFFFFF;
    line-height: 49px;
    text-align: center;
}
.tit1{
    width: 212px;
    top:287px;
    left: 857px;
}
.tit2{
    width: 212px;
    top:484px;
    left: 857px;
}
.tit3{
    width: 212px;
    top:754px;
    left: 866px;
}
.tit4{
    width: 230px;
    top:1015px;
    left: 855px;
}
.icard{
    position: absolute;
    display: flex;
    flex-flow: column;
    align-items: center;
    cursor: pointer;
    .i_img{
        // width: 58px;
        // height: 76px;
        width: 87px;
        height: 114px;
    }
    .i_txt{
        height: 28px;
        line-height: 28px;
        padding: 0 8px;
        border-radius: 4px;
        border: 1px solid transparent;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        background-image: linear-gradient(to right,rgba(23,50,144,1),rgba(23,50,144,1)), linear-gradient(to right,#0178F8 0%,#11F4FF 40%,#11F4FF 60%,#0178F8 90%);
        font-weight: 400;
        font-size: 14px;
        color: #00F1FF;
        margin-top: -14px;
    }
}
.icard_1{
    left: 296px;
    top: 84px;
}
.icard_2{
    left: 418px;
    top: 116px;
}
.icard_3{
    left: 578px;
    top: 126px;
}
.icard_4{
    left: 755px;
    top: 135px;
}
.icard_5{
    left: 916px;
    top: 150px;
}
.icard_6{
    left: 1065px;
    top: 135px;
}
.icard_7{
    left: 1230px;
    top: 126px;
}
.icard_8{
    left: 1390px;
    top: 116px;
}
.icard_9{
    left: 1540px;
    top: 84px;
}
.ocard{
    position: absolute;
    display: flex;
    flex-flow: column;
    align-items: center;
    cursor: pointer;
    .o_img{
        // width: 79px;
        // height: 101px;
        width: 118.5px;
        height: 151.5px;
    }
    .o_txt{
        height: 28px;
        line-height: 28px;
        padding: 0 8px;
        border-radius: 4px;
        border: 1px solid transparent;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        background-image: linear-gradient(to right,rgba(23,50,144,1),rgba(23,50,144,1)), linear-gradient(to right,#0178F8 0%,#11F4FF 40%,#11F4FF 60%,#0178F8 90%);
        font-weight: 400;
        font-size: 14px;
        color: #00F1FF;
        margin-top: -14px;
    }
}
.ocard_1{
    left: 700px;
    top: 320px;
}
.ocard_2{
    left: 1110px;
    top: 320px;
}
.pcard{
    position: absolute;
    display: flex;
    flex-flow: column;
    align-items: center;
    cursor: pointer;
    .p_img{
        // width: 71px;
        // height: 88px;
        width: 106.5px;
        height: 132px;
    }
    .p_txt{
        height: 28px;
        line-height: 28px;
        padding: 0 8px;
        border-radius: 4px;
        border: 1px solid transparent;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        background-image: linear-gradient(to right,rgba(23,50,144,1),rgba(23,50,144,1)), linear-gradient(to right,#0178F8 0%,#11F4FF 40%,#11F4FF 60%,#0178F8 90%);
        font-weight: 400;
        font-size: 14px;
        color: #00F1FF;
    }
}
.pcard_1{
    left: 528px;
    top: 541px;
}
.pcard_2{
    left: 660px;
    top: 566px;
}
.pcard_3{
    left: 814px;
    top: 580px;
}
.pcard_4{
    left: 1022px;
    top: 580px;
}
.pcard_5{
    left: 1186px;
    top: 566px;
}
.pcard_6{
    left: 1320px;
    top: 541px;
}
.qcard{
    position: absolute;
    display: flex;
    flex-flow: column;
    align-items: center;
    cursor: pointer;
    .q_img{
        // width: 43px;
        // height: 52px;
        width: 64.5px;
        height: 78px;
    }
    .q_txt{
        height: 28px;
        line-height: 28px;
        padding: 0 8px;
        border-radius: 4px;
        border: 1px solid transparent;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        background-image: linear-gradient(to right,rgba(23,50,144,1),rgba(23,50,144,1)), linear-gradient(to right,#0178F8 0%,#11F4FF 40%,#11F4FF 60%,#0178F8 90%);
        font-weight: 400;
        font-size: 14px;
        color: #00F1FF;
    }
    .m_img{
        margin-top: 5px;
    }
}
.qcard_1{
    top: 870px;
    left:300px;
}
.qcard_2{
    top: 898px;
    left:400px;
}
.qcard_3{
    top: 910px;
    left:495px;
}
.qcard_4{
    top: 918px;
    left:615px;
}
.qcard_5{
    top: 922px;
    left:735px;
}
.qcard_6{
    top: 920px;
    right:715px;
}
.qcard_7{
    top: 917px;
    right:600px;
}
.qcard_8{
    top: 910px;
    right:485px;
}
.qcard_9{
    top: 897px;
    right:370px;
}
.qcard_10{
    top: 865px;
    right:268px;
}
.mcard_1{
    top: 810px;
    left:345px;
    .m_img{
        filter: brightness(90%);
    }
}
.mcard_2{
    top: 795px;
    left:440px;
    .m_img{
        filter: brightness(80%);
    }
}
.mcard_3{
    top: 785px;
    left:555px;
    .m_img{
        filter: brightness(70%);
    }
}
.mcard_4{
    top: 779px;
    left:686px;
    .m_img{
        filter: brightness(60%);
    }
}
.mcard_5{
    top: 779px;
    right:647px;
    .m_img{
        filter: brightness(60%);
    }
}
.mcard_6{
    top: 785px;
    right:535px;
    .m_img{
        filter: brightness(70%);
    }
}
.mcard_7{
    top: 795px;
    right:435px;
    .m_img{
        filter: brightness(80%);
    }
}
.mcard_8{
    top: 810px;
    right:320px;
    .m_img{
        filter: brightness(90%);
    }
}
</style>
