UNPKG

react-app-shell

Version:

react打包脚本和example, 这里的版本请忽略

193 lines (179 loc) 5.1 kB
.course-wrapper { position: relative; max-width: 750px; margin: 0 auto; background-color: #ffffff; box-shadow: 0px 3px 3px #c8c8c8; padding-bottom: 100px; .header { img { width: 750px; height: 602px; border: 0; } .title { position: relative; padding-top: 30px; padding-bottom: 30px; h1 { color: #333333; font-size: 32px; line-height: 38px; min-height: 38px; padding-left: 37px; padding-right: 130px; } p { position: relative; color: #666666; font-size: 26px; padding-left: 37px; margin-top: 19px; .origin-price { position: absolute; top: 0; right: 27px; font-size: 26px; font-weight: 400; font-family: Helvetica; color: #666666; text-decoration: line-through; } } .price { position: absolute; top: 30px; right: 27px; font-size: 32px; font-weight: 700; font-family: Helvetica; color: #FF5151; i { display: inline-block; padding-right: 5px; font-size: 26px; } } } } .empty { height: 20px; background-color: #F5F5F5; } .course-wrapper-table{ text-align: center; color: #666666; font-size: 25px; .wrapper-headers{ height: 80px; .course-wrapper-header{ width: 100%; line-height: 80px; background: #fff; .course-header-box{ float: left; width: 375px; height: 80px; border-bottom: 2px solid #E5E5E5; &.course-header-active{ color: #333; border-bottom: 2px solid #FF5151; } } &:after{ display:block; clear:both; content:""; visibility:hidden; height:0 } } } .course-wrapper-content{ overflow: hidden; .course-wrapper-box{ width: 1500px; line-height: 0; transition: all 0.3s; .course-content-left{ width: 750px; float: left; img{ width: 100%; height: auto; } } .course-content-right{ width: 750px; float: right; img{ width: 100%; height: auto; } } &:after{ display:block; clear:both; content:""; visibility:hidden; height:0 } &.course-wrapper-transform{ -webkit-transform: translateX(-750px); -moz-transform: translateX(-750px); -ms-transform: translateX(-750px); -o-transform: translateX(-750px); transform: translateX(-750px); .image-none{ display: none; } } } } } .image-set-top { height: auto; } .course-buy { position: fixed; bottom: 0; width: 750px; left: 50%; margin-left: -375px; background: #fff; height: 100px; padding-left: 28px; padding-top: 19px; border-top: 1px solid rgba(0, 0, 0, .1); z-index:100; .price { color: #333333; font-size: 36px; line-height: 70px; span { display: inline-block; padding-right: 5px; } } .info { color: #666666; font-size: 24px; font-weight: 400; line-height: 24px; margin-top: 10px; } .button-buy { position: absolute; top: -1px; right: 0; width: 240px; height: 100px; line-height: 100px; border-radius: 0; font-size: 32px; font-weight: 700; color: #FFFFFF; background-color: #FF5151; } } }