.coupon-page { width: 1150px; margin: 10px auto 0; .slide-container { position: relative; } .slide-wrapper { position: relative; height: 450px; overflow: hidden; ul { position: relative; height: 100%; } &:hover .slide-switch.show { display: block; } li { display: none; position: absolute; top: 0; right: 0; width: 100%; height: 100%; a { display: block; height: 100%; width: 1150px; margin: 0 auto; } &:first-child { display: block; } img { width: 100%; height: 100%; } } } .slide-switch { display: block; a { position: absolute; top: 50%; margin: -30px 0 0; width: 60px; height: 60px; line-height: 56px; text-align: center; z-index: 2; background: #fff; opacity: 0.55; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=55)"; &.prev { left: 50%; margin-left: -575px; } &.next { right: 50%; margin-right: -575px; } &:hover { opacity: 0.9; } .iconfont { font-size: 32px; color: #59585a; } } } .title { width: 300px; margin: 80px auto 40px; text-align: center; border: 1px solid #000; height: 31px; line-height: 31px; position: relative; span { margin: 5px; } } .coupon { display: inline-block; position: relative; width: 282px; height: 258px; margin-right: 2px; img { width: 100%; height: 100%; } .coupon-mask { width: 100%; height: 259px; background-color: rgba(0, 0, 0, 0.6); position: absolute; top: 0; left: 0; right: 0; z-index: 99; } .info { width: 78px; height: 78px; position: absolute; right: 2px; bottom: -1px; > div { width: 100%; height: 38px; font-size: 16px; color: #fff; text-align: center; position: absolute; top: 50%; margin-top: -19px; } > .hidden { display: none; } p { margin-bottom: 5px; } .guang { width: 50px; height: 18px; line-height: 18px; font-size: 12px; background-color: #fff; color: #d0021b; margin: 0 auto; } } } }