.top{ padding:0.83rem; display:flex; font-size:1rem; position:fixed; width:100%; box-sizing: border-box; background:white; z-index: 1000; } .top-placeholder{ height:14.82rem; width:100px; } .top .left{ position:relative; background-image:url("../../image/left-bg0.png"); background-size:cover; height:13.16rem; flex-grow:1; margin-right:0.33rem; border-radius:0.25rem; display: flex; align-items:center; justify-content:center; } .top .right{ height:13.16rem; flex-grow:1; } .top .right .item{ position:relative; height:4.16rem; border-radius:0.25rem; display: flex; align-items:center; justify-content:center; } .top .right .item:nth-child(2){ margin:0.33rem 0; } .alarm{ display:flex; justify-content:center; align-items:center; padding:0.58rem; border-top:1px solid #dad9da; flex-wrap:nowrap; font-size:1rem; } .alarm:last-child{ border-bottom:1px solid #dad9da; } .alarm .left{ display:flex; align-items:center; flex-grow:1; } .alarm .left .content{ flex-grow:1; } .alarm .pr-name-con{ display:flex; align-items:center; } .alarm .pr-name-con img{ height:1.2rem; } .alarm .pr-name{ font-size : 1.25rem; } .alarm .icon-con{ flex-shrink:0; width:3rem; height:3rem; display:flex; border-radius:50%; justify-content:center; align-items:center; margin-right:1rem; font-size:1.25rem; background:#E9BE2B; } .alarm .right{ width:8rem; color: rgba(0,0,0,0.7); font-size: 0.9rem; } .icon-con img{ width:2rem; } .bg-shadow{ position:absolute; top:0; left:0; background:rgba(0,0,0,0.5); width:100%; height:100%; border-radius: 0.25rem; } .top .left-con{ color:#E9BE2B; z-index: 999; } .item-top{ background:url('../../image/right-top-bg.png'); background-size:cover; } .item-middle{ background-image:url("../../image/right-middle-bg.png"); background-size:cover; } .item-bottom{ background-image:url("../../image/right-bottom-bg.png"); background-size:cover; } .item-con{ color:#fff; z-index: 999; }