Home Explore Help
Sign In
caimei365
/
caimei365-www
3
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: c9fa9588d6
Branches Tags
caimei365-www
/
src
/
main
/
resources
/
static
/
css
/
encyclopedia
/
list.css

list.css 4.1 KB
History Raw

1234567891011121314151617181920212223242526272829303132 
  1. @media screen and (min-width:768px){.bk-banner{position:relative;height:510px;overflow:hidden;min-width:1200px}
    2. 

  2.     .bk-banner img{position:absolute;left:50%;top:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);display:block;height:510px}
    3. 

  3.     .bk-list{padding:48px 0;margin-bottom:120px}
    4. 

  4.     .bk-list .bk-list-item{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:24px 0;border-bottom:1px solid #E0E7EB}
    5. 

  5.     .bk-list .bk-list-item .bk-cover{position:relative;z-index:2;width:260px;height:168px;-ms-flex-negative:0;flex-shrink:0}
    6. 

  6.     .bk-list .bk-list-item .bk-cover img{display:block;width:100%;height:100%}
    7. 

  7.     .bk-list .bk-list-item .bk-info{position:relative;z-index:2;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-negative:0;flex-shrink:0;margin-left:24px}
    8. 

  8.     .bk-list .bk-list-item .bk-info h2{font-size:18px;color:#333333;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;-webkit-transition:all .4s;-o-transition:all .4s;transition:all .4s}
    9. 

  9.     .bk-list .bk-list-item .bk-info .bk-info-desc,
    10. 

  10.     .bk-list .bk-list-item .bk-info .bk-info-desc *{font-size:14px;color:#666666 !important;margin-top:16px;height:48px;line-height:24px;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
    11. 

  11.     .bk-list .bk-list-item .bk-info img{display: none}
    12. 

  12.     .bk-list .bk-list-item .bk-info .bk-info-footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:14px;color:#B2B2B2;margin-top:40px}
    13. 

  13.     .bk-list .bk-list-item::after{content:"";position:absolute;width:1248px;height:216px;border:3px solid #F57C40;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:-1;opacity:0;-webkit-transition:all .4s;-o-transition:all .4s;transition:all .4s}
    14. 

  14.     .bk-list .bk-list-item:hover{cursor:pointer}
    15. 

  15.     .bk-list .bk-list-item:hover::after{z-index:1;opacity:1}
    16. 

  16.     .bk-list .bk-list-item:hover h2{color:#F57C40}
    17. 

  17. }
    18. 

  18. 

  19. @media screen and (max-width:768px){.bk-banner{position:relative;height:3.6rem;overflow:hidden}
    20. 

  20.     .bk-banner img{position:absolute;left:50%;top:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);display:block;height:3.6rem}
    21. 

  21.     .bk-list .bk-list-item{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;padding:0.4rem 0.32rem}
    22. 

  22.     .bk-list .bk-list-item::after{content:"";position:absolute;bottom:0;left:0.32rem;width:6.86rem;display:block;border-bottom:0.01rem solid #E0E7EB}
    23. 

  23.     .bk-list .bk-list-item .bk-cover{position:relative;z-index:2;width:2.6rem;height:1.68rem;-ms-flex-negative:0;flex-shrink:0}
    24. 

  24.     .bk-list .bk-list-item .bk-cover img{display:block;width:100%;height:100%;border-radius:0.08rem}
    25. 

  25.     .bk-list .bk-list-item .bk-info{position:relative;z-index:2;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-negative:0;flex-shrink:0;margin-left:0.24rem}
    26. 

  26.     .bk-list .bk-list-item .bk-info h2{font-size:0.32rem;color:#333333;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
    27. 

  27.     .bk-list .bk-list-item .bk-info .bk-info-desc,
    28. 

  28.     .bk-list .bk-list-item .bk-info .bk-info-desc *
    29. 

  29.     {font-size:0.26rem;color:#666666;margin-top:0.16rem;height:0.75rem;line-height:0.375rem;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
    30. 

  30.     .bk-list .bk-list-item .bk-info img{display: none}
    31. 

  31.     .bk-list .bk-list-item .bk-info .bk-info-footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:0.22rem;color:#B2B2B2;margin-top:0.32rem}
    32. 

  32. }
    33.