Etusivu Tutki Apua
Rekisteröidy Kirjaudu sisään
Amoy2
/
sr-iHealthwx
Tarkkaile 2
Äänestä 0
Fork 1
Tiedostot
Puu: 450d8b487d
Branchit Tagit
sr-iHealthwx
/
html
/
zxwz
/
css
/
topic-cw.css

topic-cw.css 8.7 KB
Historia Raaka

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788 
  1. @charset "utf-8";
    2. 

  2. html { font-size: 12px; overflow: hidden; height: 100%;}
    3. 

  3. body { background-color: #cc1f3b; font-size: 1rem; overflow: hidden; height: 100%;}
    4. 

  4. .c-cc1f3b { color: #cc1f3b;}
    5. 

  5. .section { position: relative;}
    6. 

  6. .section0 .top { background: url("../images/cw/0-1.png") no-repeat 0 0; background-size:  100% 100%; padding-top: 80%; width: 100%; position: absolute; top: 0;}
    7. 

  7. .section0 .bottom { position: absolute; bottom: 0; width: 100%; background: url("../images/cw/0-3.png") no-repeat 0 0; background-size: 100% 100%; padding-top: 100%;}
    8. 

  8. .section0 .bottom .stomach { background: url("../images/cw/0-2.png") no-repeat 0 0;background-size: 100% 100%; width: 35%; padding-top: 41%; margin: -13rem auto 0;}
    9. 

  9. .section1 { background: #cc1f3b url("../images/cw/1-bg.png") no-repeat 0 0; background-size: 100% auto; padding-top: 177.5%; font-size: 12px; color: #fff;}
    10. 

  10. .section1 .top { background: url("../images/cw/1-stomach.png") no-repeat 0 0; background-size:100% auto; width: 72%; padding-top: 91.44%; position: absolute; top: 6px; left:  50%; margin-left: -41.8%;}
    11. 

  11. .section1 .top  p { width: 60%; position: absolute; left: 50%; margin-left: -22%; top: 41%;}
    12. 

  12. .section1 .bottom { background: url("../images/cw/1-intestinal.png") no-repeat 0 0;background-size: 100% 100%; width: 92.8%; padding-top: 61.56%; position: absolute;bottom: 15%; right: 0;}
    13. 

  13. .section1 .bottom > div { position: absolute; top: 0; width: 100%; height: 100%;}
    14. 

  14. .section1 .bottom .list-dis { position: relative; padding-top: 100%;}
    15. 

  15. .section1 .bottom .list-dis em { font-weight: bold; }
    16. 

  16. .section1 .bottom .list-dis li { width: 7em; position: absolute; height: 3em;}
    17. 

  17. .section1 .bottom .list-dis li:first-child{ top: 2em;right: 2em;}
    18. 

  18. .section1 .bottom .list-dis li:nth-child(2) { bottom: 20%; left: 0;}
    19. 

  19. .section1 .bottom .list-dis li:nth-child(3) { bottom: 20%; left: 33%;}
    20. 

  20. .section1 .bottom .list-dis li:nth-child(4) { bottom: 20%; right: 2em;}
    21. 

  21. .section2  { padding-top: 3rem;}
    22. 

  22. .section2 .top { font-size: 1.25rem; color: #fff; background: url("../images/cw/2-top.png") no-repeat 0 0; background-size: 100% auto; width: 100%; padding-top: 13%; line-height: 3.2rem; position: relative;}
    23. 

  23. .section2 .top span { position: absolute; top: 0; text-align: center; right: 0;left: 0;}
    24. 

  24. .section2 .content .list-content li { background:url("../images/cw/2-bg.png") no-repeat 0 0; background-size: 100% auto; width: 93%; margin: 0 0 .5rem 1.5rem; color: #510000;padding-top: 36%; position: relative; top: 0;}
    25. 

  25. .section2 .content .list-content li > div { position: absolute; display:box; display: -webkit-box; -webkit-box-align: center; box-align: center; top: 0; height: 100%;}
    26. 

  26. .section2 .content .list-content:first-child { margin-top: .5rem;}
    27. 

  27. .section2 .content .list-content li p .title { font-weight: bold;}
    28. 

  28. .section2 .content .list-content li .icon { width:3.17rem; height: 3.17rem; background-size: 12.5rem 3rem; -webkit-box-flex:0; box-flex: 0; margin: 0 .5rem 0 -1.585rem;}
    29. 

  29. .section2 .content .list-content li .content { -webkit-box-flex:1; box-flex:1; margin-right: 1rem;}
    30. 

  30. .icon-01 { background: url("../images/cw/2-icon.png") no-repeat 0 0;}
    31. 

  31. .icon-02 { background: url("../images/cw/2-icon.png") no-repeat -3.13rem 0;}
    32. 

  32. .icon-03 { background: url("../images/cw/2-icon.png") no-repeat -6.2rem 0;}
    33. 

  33. .icon-04 { background: url("../images/cw/2-icon.png") no-repeat -9.4rem 0;}
    34. 

  34. .section3 { margin-top: 1rem;}
    35. 

  35. .section3 .top { background: url("../images/cw/3-top.png") no-repeat 0 0; background-size: 100% auto; padding-top: 74%; position: relative;}
    36. 

  36. .section3 .top .news { width: 80%; color: #630018; height: 14rem; left: 0; right: 0;margin: auto; position: absolute; top: 32.5%;}
    37. 

  37. .section3 .top .news .info { border-bottom: 1px dashed #660014; padding-bottom: .5rem;}
    38. 

  38. .section3 .top .news .detail { padding-top: .5rem;}
    39. 

  39. .section3 .content .list-doc { width: 92.34%; margin: 1.5rem auto 0;}
    40. 

  40. .section3 .content .list-doc li { background: url("../images/cw/3_ban01.png") no-repeat 0 0; background-size: 100% auto; padding-top: 90%; margin-top: -1.3rem; position:relative;}
    41. 

  41. .section3 .content .list-doc li:last-child { background: url("../images/cw/3_ban02.png") no-repeat 0 0; background-size: 100% auto; padding-top: 80%;}
    42. 

  42. .section3 .content .list-doc li > div { margin-right:10%; margin-left: 12%; position:absolute; top: 0;}
    43. 

  43. .section3 .content .list-doc .detail { display: box; display: -webkit-box; box-align:center; -webkit-box-align: center; padding-top: 2rem;}
    44. 

  44. .section3 .content .list-doc .avator { -webkit-box-flex: 0; box-flex: 0; margin-right: .5rem;}
    45. 

  45. .section3 .content .list-doc .avator img { width: 5rem; height: 5rem; border-radius: 50%;}
    46. 

  46. .section3 .content .list-doc .info { -webkit-box-flex: 1; box-flex: 1; color: #909090;}
    47. 

  47. .section3 .content .list-doc .des { color: #909090; margin-top: 5%; display: box; display: -webkit-box; box-align: center; -webkit-box-align: center; height:6rem; background-color: #f3f3f3; padding:0 1rem; position: relative;}
    48. 

  48. .section3 .content .list-doc .des:before { position: absolute; content: ""; top: -4px;left:14px; color: #5b5b5b; width: 8px; height: 8px; background: #f3f3f3; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
    49. 

  49. .section3 .content .list-doc .btn { background:url("../images/cw/4-btn.png") no-repeat 0 0; background-size: 100%; width: 80.5%; padding-top: 20%; position: relative; margin:  6% auto;}
    50. 

  50. .section3 .content .list-doc .btn p { position: absolute; top: 0;right: 0;left: 0;bottom: 0;}
    51. 

  51. .section3 .content .list-doc .warn { margin-top: 7%; text-align: center;}
    52. 

  52. .section3 .content .list-doc .warn span { font-style: italic;}
    53. 

  53. .list_link { width: 90%; padding-top: 13%; margin: 6% auto; position: relative;}
    54. 

  54. .list_link ul {position: absolute; top: 0; width: 100%; height: 100%;}
    55. 

  55. .list_link li { width: 46%; text-indent: -9999px; height: 100%;}
    56. 

  56. .list_link li a { display: block; height: 100%; width: 100%;}
    57. 

  57. .list_link .doc { background: url("../images/cw/4_1.png") no-repeat 0 0; background-size: 100% auto;}
    58. 

  58. .list_link .drug { background: url("../images/cw/4_2.png") no-repeat 0 0; background-size: 100% auto;}
    59. 

  59. footer { margin-bottom: 3rem;}
    60. 

  60. footer .banner { margin-top: 1rem; width:96%; background: url("../images/cw/4_ban.png") no-repeat 0 0; background-size: 100% auto; padding-top: 42%; box-sizing: border-box; position: relative;}
    61. 

  61. footer .banner div { position: absolute; top: 0; padding: 1.5rem 2rem 0 5rem;}
    62. 

  62. footer .banner p { text-indent: 2rem; margin-top: .5rem;}
    63. 

  63. footer .warn { background: url("../images/cw/4_warn.jpg") no-repeat 0 0; background-size: 100% auto; width: 88%; padding-top: 32%; margin: 0 auto;}
    64. 

  64. footer .weixin { width: 20.5%; margin: 0 auto;}
    65. 

  65. @media screen and ( min-width : 375px) {
    66. 

  66.     html { font-size: 14px;}
    67. 

  67. }
    68. 

  68. 

  69. /*推荐医师*/
    70. 

  70. .rec-doc { background: url("../images/cw/rec_01.png") no-repeat 0 0; background-size:320px 81px; font-size: 12px; padding-bottom: 50px; width: 320px;}
    71. 

  71. .rec-doc .list-doc { padding-top: 55px;}
    72. 

  72. .rec-doc .list-doc li { background: url("../images/cw/rec_03.png") no-repeat 0 0; background-size: 100% 100%; width: 297px; height: 491px; margin: 0 auto -11px;}
    73. 

  73. .rec-doc .list-doc li:last-child { background: url("../images/cw/rec_02.png") no-repeat 0 0;height: 460px; background-size: 100% 100%;}
    74. 

  74. .rec-doc .list-doc li .info,.rec-doc .list-doc li .content { width: 240px; margin: 0 auto;}
    75. 

  75. .rec-doc .list-doc li .info { display: box; display: -webkit-box; box-align: center; -webkit-box-align: center; padding-top: 15px;}
    76. 

  76. .rec-doc .list-doc li .info > div { box-flex: 1; -webkit-box-flex:  1;}
    77. 

  77. .rec-doc .list-doc li .info .avator img {width: 58px; height: 58px; border-radius: 50%; }
    78. 

  78. .rec-doc .list-doc li .content { background: #f3f3f3; height: 355px; position: relative;padding: 15px; box-sizing: border-box; margin-top: 8px;}
    79. 

  79. .rec-doc .list-doc li .content:before { position: absolute; content: ""; top: -4px; left: 14px; color: #5b5b5b; width: 8px; height: 8px; background: #f3f3f3; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
    80. 

  80. .wrap { -webkit-transform-origin: 0 0; transform-origin: 0 0;}
    81. 

  81. /*结束活动*/
    82. 

  82. .main { background: url("../images/cw/end-bg.jpg") no-repeat center 100%; background-size: auto 100%; width: 100%; height: 100%;}
    83. 

  83. .end-content { width: 320px; height: 504px; position: relative; transform-origin: 0 0;-webkit-transform-origin: 0 0;}
    84. 

  84. .end-content i { font-style: italic;}
    85. 

  85. .end-content strong { font-weight: normal;}
    86. 

  86. .end-content .end-top{ background: url("../images/cw/end-t.png") no-repeat 0 0; background-size: 100% 100%; width: 192px; height: 124px; left: 10px; top: 20px; position: absolute;}
    87. 

  87. .end-content .end-doc { background: url("../images/cw/end-doc.png") no-repeat 0 0; background-size: 100% 100%; width: 304px; height: 295px; position: absolute; bottom: 110px; margin-left: -152px; left: 50%;}
    88. 

  88. .end-content .end-bottom { position: absolute; bottom: 10px; text-align: center; margin: auto;left: 0; right: 0; color: #fff; font-size: 16px;}
    89.