.pricing { background: #f3f7fd; padding: 7.876rem 0 2.25rem 0; } .scheme { display: flex; justify-content: center; margin-bottom: 2.55rem; } .subject { display: flex; justify-content: space-around; } .common { width: 32%; box-sizing: border-box; border: 1px solid #dddddd; /* display: flex; */ /* flex-direction: column-reverse; */ background: #ffffff; transition:all 1s ease-out; } .subject a { color: #fff; text-decoration:none } .common .upper { text-align: center; padding-top: 2.2rem; border-bottom: 1px solid #dddddd; position: relative; } .common .upper span { display: inline-block; width: 6rem; height: 2rem; background: #03a9f5; line-height: 2rem; color: #ffffff; margin-top: .4rem; margin-bottom: 1.6rem; transition:all 0.5s ease-out; } .sale::after { content: "*热销*"; position: absolute; top: .4rem; left: 43%; font-size: 14px; color: #15c381; } .common .upper p { margin-bottom: 0.75rem; } .middle { padding: 1.6rem 1.2rem 0 1.2rem; height: 16rem; border-bottom: 1px solid #dddddd; } .middle i, .whole i { display: inline-block; margin-right: .4rem; } .whole { height: 32rem; padding: 1.6rem 1.2rem 0 1.2rem; } .total { color: #f26522; } .customization { text-align: center; margin: 6.6rem 0 3.2rem 0; } .simple:hover, .basics:hover, .specialty:hover{ cursor:pointer; background: #eafdf3; border: 1px dashed #5abf87; transform:scale(1.05); } .simple:hover .upper span, .basics:hover .upper span, .specialty:hover .upper span { background: #f0483e; } /* 弹出层样式 */ .popups { position: absolute; /* background: ; */ } /* 使用说明样式 */ .instructions { width: 100%; height: 100%; background: rgba(0, 0, 0, .7); position: absolute; top: 0; z-index: 9999; } .popup { width: 40rem; height: 20rem; margin: auto; box-sizing: border-box; background: #fff; margin-top: 8.333333rem; position: relative; z-index: 999999999999999999999; } .use { padding: 1rem; height: 3.5rem; } .use h5 { float: left; } .use span { float: right; cursor:pointer; } .use span:hover { color: red; } .docums { padding: 3rem 1rem 0 1rem; }