@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:2.61rem; 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; } .advance{ width:20rem; height:2.4rem; background:rgba(255,255,255,1); } .advance-left{ float: left; width:4.5rem; height:0.69rem; font-size:0.75rem; font-family:PingFang SC; font-weight:500; color:rgba(0,0,0,1); line-height: 0.69rem; margin-top: 0.85rem; margin-left: 0.53rem; } .advance-right{ float: right; width:3.rem; height:0.67rem; line-height: 0.67rem; margin-right: 0.53rem; margin-top: 0.65rem; font-size:0.69rem; font-weight:500; color:rgba(0,0,0,1); font-family: 'iconfont'; /* project id 1584362 */ } .address{ width:20rem; height:5.33rem; background:rgba(255,255,255,1); margin-top: 0.53rem; } .address .img{ width:2.5rem; height:2.5rem; background:rgba(104,130,207,1); border-radius:50%; font-family: 'iconfont'; /* project id 1584362 */ margin-top: 1.13rem; margin-left: 0.53rem; line-height: 2.5rem; text-align: center; font-size: 1.7rem; color: white; float: left; } .address .address-item{ float: left; margin-top: 1.04rem; margin-left:0.53rem; width: 12.08rem; height: 3.36rem; } .address .address-item .name { width:7.79rem; height:0.8rem; font-size:0.85rem; font-family:PingFang SC; font-weight:500; color:rgba(0,0,0,1); line-height: 0.8rem; } .address .address-item .number{ width:12.08rem; height:1.81rem; font-size:0.75rem; font-family:PingFang SC; font-weight:500; color:rgba(0,0,0,1); line-height:1.12rem; margin-top: 0.8rem; } .information{ width:20rem; height:20.67rem; background:rgba(255,255,255,1); margin-top: 0.53rem; display: inline-block; } .information .info-top{ width:3rem; height:0.69rem; font-size:0.75rem; font-family:PingFang SC; font-weight:500; color:rgba(0,0,0,1); line-height: 0.69rem; margin-top: 0.69rem; margin-left: 0.53rem; } .info-silder{ margin-top: 0.61rem; width: 100%; } .information .info-silder .info-item{ width: 100%; height: 3.71rem; box-sizing: border-box; border-bottom: 0.03rem solid gray; display: inline-block; } .information .info-silder .info-item img{ width:2.67rem; height:2.67rem; background:rgba(245,245,245,1); border-radius:0.5rem; display: block; margin-top: 0.51rem; margin-left: 0.53rem; float: left; overflow: hidden; } .information .info-silder .info-item .item-it{ width: 16.27rem; height: 100%; float: left; margin-left: 0.53rem; } .information .info-silder .info-item .item-it .it-on{ width:100%; height:0.85rem; font-size:0.8rem; font-family:PingFang SC; font-weight:500; color:rgba(0,0,0,1); line-height: 0.75rem; margin-top: 0.7rem; overflow: hidden; } .information .info-silder .info-item .item-it .it-down{ width:100%; height:0.71rem; margin-top: 0.9rem; } .information .info-silder .info-item .item-it .it-down .down-left{ width:10rem; height:0.71rem; font-size:0.8rem; font-family:PingFang SC; font-weight:500; color:rgba(0,0,0,1); line-height: 0.61rem; display: block; overflow: hidden; float: left; } .information .info-silder .info-item .item-it .it-down .down-right{ display: block; overflow: hidden; float: right; width:0.77rem; height:0.71rem; font-size:0.71rem; font-family:PingFang SC; font-weight:500; line-height: 0.71rem; color:rgba(153,153,153,1); margin-right: 0.51rem; } .information .info-footer{ width: 20rem; height: 7.44rem; } .information .info-footer .favour, .information .info-footer .freight{ width:20rem; height:0.69rem; margin-top:1.07rem ; margin-left: 0.61rem; } .information .info-footer .favour .favour-left ,.information .info-footer .freight .freight-left{ width:3rem; height:0.69rem; font-size:0.75rem; font-family:PingFang SC; font-weight:500; color:rgba(0,0,0,1); line-height: 0.69rem; float: left; } .information .info-footer .favour .favour-right ,.information .info-footer .freight .freight-right{ width:3rem; height:0.69rem; font-size:0.75rem; font-family:PingFang SC; font-weight:500; color:rgba(255,72,56,1); float: right; font-family: 'iconfont'; /* project id 1584362 */ line-height: 0.69rem; margin-right: 0.51rem; } .information .info-footer .freight .freight-left{ width: 10rem; } .information .info-footer .freight .freight-left span{ display:inline-block; height: 0.69rem; width: 4.64rem; color: gray; } .information .info-footer .freight .freight-right{ width: 2rem; position: absolute; left: 16.76rem; margin: 0; bottom: 0.05rem; } .information .info-footer .freight{ position: relative; } .information .info-footer .add{ margin-top: 1.76rem; width: 20rem; height: 0.67rem; } .information .info-footer .add .money{ width:2.29rem; height:0.67rem; font-size:0.85rem; font-family:PingFang SC; font-weight:bold; color:rgba(255,72,56,1); line-height: 0.67rem; float: right; margin-right: 0.67rem; } .information .info-footer .add .add-value { width:1.46rem; height:0.67rem; font-size:0.69rem; font-family:PingFang SC; font-weight:500; color:rgba(0,0,0,1); line-height: 0.67rem; float: right; margin-right:0.41rem; } .order-info{ width: 20rem; height: 16rem; background: white; margin-top: 0.53rem; } .order-info .order-silder{ width: 20rem; height: 2.75rem; box-sizing: border-box; border-bottom: 0.03rem solid gray; font-size: 0.75rem; line-height: 2.75rem; color: gray; font-weight: 500; } .order-info .order-silder#a{ color: black; font-size: 1rem; font-weight: 700; } .order-info .call{ width: 6rem; height: 2rem; border-radius:1rem ; box-sizing: border-box; border: 0.03rem solid #BDBABD; margin: 1.2rem auto 0 auto; font-size: 0.8rem; font-weight: 700; text-align: center; line-height:2rem ; } .footer{ height: 2.83rem; position: relative; background: white; margin-top: 0.53rem; } .footer div{ position: absolute; width:4.27rem; height:1.55rem; border-radius:1rem; font-size:0.69rem; font-family:PingFang SC; font-weight:500; text-align: center; line-height:1.55rem ; } .footer .cutorder{ top: 0.6rem; left: 10.16rem; color: #333333; background: white; border: 0.03rem solid #666364; } .footer .gobuy{ color:#74B07E; top: 0.6rem; left: 15.2rem; border: 0.03rem solid #74B07E;