123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- .mainPage{
- .body{
- >span{
- width: 100%;
- display: block;
- line-height: .28rem;
- font-size: .12rem;
- color: #666;
- text-indent: .2rem;
- margin: .2rem auto 0;
- position: relative;
- z-index: 3;
- background: #fff;
- em{
- font-size: .16rem;
- font-weight: bolder;
- color: #333;
- }
- }
- >ul{
- padding: .05rem .2rem 0;
- position: relative;
- z-index: 2;
- box-shadow: 0 0 .1rem .02rem rgba(0, 0, 0, .05);
- >li{
- font-size: 0;
- white-space: nowrap;
- text-align: center;
- position: relative;
- &.active::after{
- content: '';
- width: 1.1rem;
- height: .02rem;
- background: #fa2a00;
- position: absolute;
- left: 50%;
- bottom: 0;
- transform: translateX(-50%);
- -webkit-transform: translateX(-50%);
- }
- >span{
- display: inline-block;
- line-height: .42rem;
- font-size: .15rem;
- color: #666;
- &:nth-child(2){
- font-size: .12rem;
- }
- }
- }
- }
- >div{
- >div{
- width: 100%;
- position: absolute;
- left: 0;
- top: 0;
- bottom: 0;
- overflow: hidden;
- >ul{
- width: 100%;
- height: 100%;
- position: relative;
- overflow: hidden;
- >li{
- padding: 0 .2rem;
- position: relative;
- height: 100%;
- overflow-y: scroll;
- -webkit-overflow-scrolling: touch;
- transform: translateZ(0);
- -webkit-transform: translateZ(0);
- .list{
- width: 100%;
- padding: .1rem 0;
- >li{
- width: 100%;
- position: relative;
- overflow: hidden;
- border-bottom: .01rem solid #eee;
- &:last-child{
- border: none;
- }
- align-items: center;
- span{
- line-height: .38rem;
- font-size: .12rem;
- color: #666;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- }
- >div{
- span{
- width: 100%;
- display: block;
- }
- margin-left: .1rem;
- &:first-child{
- margin-left: 0;
- }
- &:nth-child(2){
- span{
- text-align: center;
- }
- }
- }
- }
- }
- }
- }
- }
- }
- }
- }
|