<template>
    <div>
        <div class="person_info">
            <div class="preson">
                <div class="person_text">
                    <img src="../assets/imgs/img_head.png" alt="">
                    <span>你好，{{person}}！最近登录{{login_time}}</span>
                </div>
                <div class="person_menu">管理功能&nbsp;&nbsp;&nbsp; <img src="../assets/imgs/home_ic_more_w.png" alt=""></div>
            </div>
            <div class="menu">
                <div :class="now_user==0?'menu_box0':now_user==1?'menu_box1':'menu_box2'" v-for="(item,index) in menu_arr[now_user]" :key="index+100" >
                    <img :src="item.pic" alt="">
                    <div class="menu_text">
                        <p>{{item.text}}</p>
                        <p :style="index == menu_arr[now_user].length - 1||now_user==1&&index==0?{color:item.color,marginRight:'-20px'}:{color:item.color}"><span style="font-size:36px">{{item.num}}</span><span v-if="index == menu_arr[now_user].length - 1||now_user==1&&index==0">万</span></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="case_box">
            <div class="data_asy">
                <p style="margin-top:20px;margin-bottom:10px;">数据分析中心 <img style="vertical-align:-9px;" src="../assets/imgs/home_btn_enter.png" alt=""></p>
                <div class="data_charts">
                    <div class="data_charts_left">
                        <p><span></span> 服务健康状态</p>
                        <div :id="health"></div>
                    </div>
                    <div class="data_charts_right">
                        <p><span></span> 服务运营分析</p>
                        <div :id="yy_asy"></div>
                    </div>
                </div>
            </div>
            <div class="online_tool"></div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            person:'康先生',
            login_time:'2020-03-12 10:21:22',
            now_user:0,
            health:'',
            yy_asy:"",
            menu_arr:[
                [
                    {
                        text:'服务总数',
                        pic:require('../assets/imgs/ic_fuwuzs_navy.png'),
                        bg:'#e6ebfe',
                        color:'#515fe7',
                        num:'12,332',
                    },
                    {
                        text:'应用总数',
                        pic:require('../assets/imgs/ic_yingyongzs.png'),
                        bg:'#e5f4fe',
                        color:'#38aef9',
                        num:'223',
                    },
                    {
                        text:'收益总额',
                        pic:require('../assets/imgs/ic_shouyize.png'),
                        bg:'#fcefd6',
                        color:'#ea7d19',
                        num:'￥2,312',
                    },
                ],
                [
                    {
                        text:'收益总额',
                        pic:require('../assets/imgs/ic_shouyize.png'),
                        bg:'#fcefd6',
                        color:'#ea7d19',
                        num:'￥2,312',
                    },
                    {
                        text:'服务总数',
                        pic:require('../assets/imgs/ic_fuwuzs_navy.png'),
                        bg:'#e6ebfe',
                        color:'#515fe7',
                        num:'12,332',
                    },
                    {
                        text:'应用总数',
                        pic:require('../assets/imgs/ic_yingyongzs.png'),
                        bg:'#e5f4fe',
                        color:'#38aef9',
                        num:'223',
                    },
                    {
                        text:'收益总额',
                        pic:require('../assets/imgs/ic_shouyize.png'),
                        bg:'#fcefd6',
                        color:'#ea7d19',
                        num:'￥2,312',
                    },
                ],
            ],
        }
    }
}
</script>

<style scoped>
.person_info{
    width: 1200px;
	height: 206px;
	background-color: #ffffff;
	box-shadow: 0px 3px 6px 0px 
		#f4f7fc;
    border-radius: 12px;
    padding: 20px;
}
.preson{
    width: 100%;
    height: 52px;
    line-height: 52px;
    border-bottom: 2px solid #f4f7fc;
}
.person_text{
    float: left;
    padding: 0 10px;
}
.person_text img{
    border-radius: 18px;
    margin-right: 10px;
    vertical-align: -10px;
}
.person_menu{
    float: right;
    width: 100px;
    height: 32px;
    line-height: 32px;
    text-align: center;
	background-color: #e56600;
	border-radius: 8px;
    color: #fff;
    cursor: pointer;
    margin-top: 10px;
}
.menu{
    width: 100%;
    height: 102px;
    margin-top: 20px;
}
.menu_box0,.menu_box1{
    float: left;
    width: calc((100% - 60px)/3);
    margin-right: 30px;
    width: 366px;
	height: 92px;
	background-color: #e6ebfe;
	border-radius: 12px 12px 12px 46px;
}
.menu_box0:nth-last-of-type(1),.menu_box1:nth-last-of-type(1){
    margin-right: 0px;
}
.menu_box1{
    width: calc((100% - 60px)/4);
    margin-right: 20px;
}
.menu img{
    float: left;
    margin: 28px 0 0 28px;
}
.menu .menu_text{
    float: right;
    margin-top: 15px;
    margin-right: 29px;
} 
.menu_text p{
    text-align: right;
}

.case_box{
    width: 100%;
    overflow: hidden;
}
.data_asy{
    width: 720px;
    float: left;
    margin-right: 20px;
}
.data_charts{
    width: 720px;
	height: 270px;
	background-color: #ffffff;
	box-shadow: 0px 3px 6px 0px 
		#f4f7fc;
    border-radius: 12px;
    padding: 20px;
}
.data_charts_left{
    height: 100%;
    width: 220px;
    float: left;
}
.data_charts_right{
    height: 100%;
    width: 420px;
    float: right;
}
.data_charts_left p,.data_charts_right p{
    font-size: 16px;
    color: #707693;
}
.data_charts_left p span,.data_charts_right p span{
    width: 8px;
	height: 8px;
    background-color: #515fe7;
    border-radius: 4px;
    display: inline-block;
    margin-right: 5px;
}
</style>