@font-face { font-family: 'iconfont'; /* project id 1584362 */ src: url('//at.alicdn.com/t/font_1584362_38u2h39vioe.eot'); src: url('//at.alicdn.com/t/font_1584362_38u2h39vioe.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_1584362_38u2h39vioe.woff2') format('woff2'), url('//at.alicdn.com/t/font_1584362_38u2h39vioe.woff') format('woff'), url('//at.alicdn.com/t/font_1584362_38u2h39vioe.ttf') format('truetype'), url('//at.alicdn.com/t/font_1584362_38u2h39vioe.svg#iconfont') format('svg'); } html{ min-height: 100vh; background: #F6F6F6; } .header{ width: 20rem; height: 3.41rem; background: white; display: inline-block; position: relative; } .header .title{ width:4rem; height:0.91rem; font-size:0.96rem; font-family:PingFang SC; font-weight:bold; color:rgba(0,0,0,1); margin-left: 8.08rem; margin-top: 1.92rem; line-height:0.91rem ; } .header a{ position: absolute; display: block; color:rgba(51,51,51,1); width: 2rem; height: 2rem; top: 1.42rem; font-family: 'iconfont'; /* project id 1584362 */ line-height: 2rem; text-align: center; font-size:1.7rem ; font-weight: 700; text-decoration: none; } .page-top{ width:20rem; height:4rem; background:rgba(104,130,207,1); } .page-top span{ width:4.5rem; height:0.8rem; font-size:0.85rem; font-family:PingFang SC; font-weight:500; color:rgba(255,255,255,1); line-height:0.8rem ; display:inline-block; margin-top: 1.49rem; margin-left: 0.53rem; cursor: pointer; } .container{ width:20rem; height:9.92rem; background:rgba(255,255,255,1); position: relative; } .value{ width: 6.67rem; height: 9.92rem; margin-left: 1.92rem; display: flex; flex-flow: column nowrap; justify-content: space-around; } .value .content{ width:6.67rem; height:2rem; font-size:0.75rem; font-family:PingFang SC; font-weight:500; color:rgba(57,85,168,1); position: relative; } .content .name,.content .time{ width: 6.67rem; height: 1rem; line-height: 1rem; } .container:before{ content: ''; position: absolute; left: 1.12rem; top: 1.52rem; width:0.06rem; height:7rem; background:rgba(104,130,207,1); z-index: 1; } .value .content:before{ width:0.4rem; height:0.4rem; content: ''; transform: translateY(-50%); border-radius: 50%; cursor: pointer; top: 50%; right: 7.26rem; background: #999999; position: absolute; z-index: 2; } .value .content#a:before{ width: 0.53rem; height: 0.53rem; background: #3955A8; right: 7.17rem; } .ma{ width:20rem; height:4.8rem; background:rgba(255,255,255,1); margin-top: 0.53rem; } .ma .top,.ma .down{ width: 19.47rem; height: 2.4rem; font-size:0.75rem; font-family:PingFang SC; font-weight:500; color:rgba(51,51,51,1); line-height:2.4rem; margin-left: 0.53rem; } .ma .top span{ color: #3955A8; } .ma .down .down-left{ height: 2.4rem; font-size:0.75rem; font-family:PingFang SC; font-weight:500; color:rgba(51,51,51,1); line-height:2.4rem; width: 7.87rem; float: left; } .ma .down .down_right{ height: 2.4rem; font-size:0.75rem; font-weight:500; color:rgba(51,51,51,1); line-height:2.4rem; width: 5.6rem; margin-right: 0.53rem; float: right; font-family: 'iconfont'; /* project id 1584362 */ }