<template>
    <div class="page-header">
        <div class="headerTitle">我的应用</div>
        <div>
            <el-carousel height="85px" :autoplay="false">
                <!-- <el-carousel-item style="display: flex;" v-for="item in 2" :key="item"></el-carousel-item> -->
                <el-carousel-item style="display: flex;">
                    <div class="itmeInfo">
                        <div class="infoVia">
                            <el-image class="headImage" :src="doctorVia" fit="fill" @click="trueBigScreen"/>
                        </div>
                        <div class="appsTit">大屏首页</div>
                    </div>
                    <div class="itmeInfo">
                        <div class="infoVia">
                            <el-image class="headImage" :src="doctorVia" fit="fill" />
                        </div>
                        <div class="appsTit">话务平台</div>
                    </div>
                    
                </el-carousel-item>
              </el-carousel>
        </div>
    </div>
  </template>
  <script setup>
    import { onMounted, ref } from 'vue';
    import { useRouter } from 'vue-router';

    import doctorVia from '@/assets/images/doctorVia.png'
    import unfinishIcon from '@/assets/images/unfinishIcon.png'
    import finishIcon from '@/assets/images/finishIcon.png'
    import overDueIcon  from '@/assets/images/overDueIcon .png'
    const router = useRouter();
    onMounted(() => { })
    function trueBigScreen(params) {
        const {href} = router.resolve({
            path: '/bigScreen',
        });
        window.open(href, "_blank");
    }
  </script>
  
  <style scoped lang="scss">
    :deep(.el-carousel__arrow--right){
        right: 0;
    }
    :deep(.el-carousel__arrow--left){
        left: 0;
    }
    .page-header {
        background-color: #ffffff;
        margin: 15px;
        padding: 15px;
        border-radius: 10px;
        margin-left: 0px;
        .infoVia{
            width: 60px;
            height: 60px;
            border-radius: 10px;
            background-color:#CBE4FF ;
            margin-right: 15px;
            .headImage{
                width: 46px;
                margin: 8px;
            }
        }
        .appsTit{
            line-height: 30px;
            font-size: 14px;
        }
        .headerTitle{
            font-size: 22px;
            line-height: 30px;
            margin-bottom: 15px;
            
        }

    }

  </style>