brand-detail.css 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. @media screen and (min-width: 768px) {
  2. .main {
  3. padding-top: 50px;
  4. }
  5. .main .title {
  6. font-size: 28px;
  7. }
  8. .main .date {
  9. font-size: 18px;
  10. color: #b2b2b2;
  11. margin-top: 16px;
  12. }
  13. .main .line {
  14. width: 100%;
  15. margin: 40px 0 70px;
  16. position: relative;
  17. height: 1px;
  18. background-color: #d8d8d8;
  19. }
  20. .main .line::after {
  21. content: "";
  22. display: block;
  23. width: 24px;
  24. height: 2px;
  25. background: #0688d2;
  26. }
  27. .main .detail p {
  28. line-height: 34px;
  29. margin: 32px 0;
  30. }
  31. }
  32. @media screen and (max-width: 768px) {
  33. .main {
  34. padding: 0.8rem 0.32rem;
  35. }
  36. .main .title {
  37. font-size: 0.34rem;
  38. }
  39. .main .date {
  40. font-size: 0.24rem;
  41. color: #b2b2b2;
  42. margin-top: 0.16rem;
  43. }
  44. .main .line {
  45. width: 100%;
  46. margin: 0.34rem 0 0.5rem;
  47. position: relative;
  48. height: 0.01rem;
  49. background-color: #d8d8d8;
  50. }
  51. .main .line::after {
  52. content: "";
  53. display: block;
  54. width: 0.4rem;
  55. height: 0.03rem;
  56. background: #0688d2;
  57. }
  58. .main .detail p {
  59. line-height: 0.48rem;
  60. margin: 0.32rem 0;
  61. font-size: 0.26rem;
  62. color: #404040;
  63. }
  64. .main .detail img {
  65. max-width: 100%;
  66. }
  67. }