hjyd
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

126 lines
2.2 KiB

2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
  1. #app {
  2. height: 100%;
  3. }
  4. html,
  5. body {
  6. position: relative;
  7. height: 100%;
  8. box-sizing: border-box;
  9. }
  10. /*去除a标签下划线*/
  11. a {
  12. text-decoration: none;
  13. }
  14. /*去除未被访问的a标签的下划线*/
  15. a:link {
  16. text-decoration: none;
  17. }
  18. /*去除已经被访问过的a标签的下划线*/
  19. a:visited {
  20. text-decoration: none;
  21. }
  22. /*去除鼠标悬停时的a标签的下划线*/
  23. a:hover {
  24. text-decoration: none;
  25. }
  26. /*去除正在点击的a标签的下划线(鼠标按下,尚未松开)*/
  27. a:active {
  28. text-decoration: none;
  29. }
  30. /*去除获得焦点的a标签的下划线(被鼠标点击过)*/
  31. a:focus {
  32. text-decoration: none;
  33. }
  34. .page_padding_top {
  35. padding-top: $header_height;
  36. width: 100%;
  37. height: 100%;
  38. box-sizing: border-box;
  39. }
  40. .flex_center {
  41. display: flex;
  42. align-items: center;
  43. justify-content: center;
  44. }
  45. body {
  46. background: #eee;
  47. font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  48. font-size: 14px;
  49. color: #000;
  50. margin: 0;
  51. padding: 0;
  52. }
  53. .swiper {
  54. width: 100%;
  55. height: 100%;
  56. }
  57. .swiper-slide {
  58. // text-align: center;
  59. font-size: 18px;
  60. background: #fff;
  61. box-sizing: border-box;
  62. /* Center slide text vertically */
  63. display: flex !important;
  64. justify-content: center !important;
  65. align-items: center !important;
  66. img {
  67. display: block;
  68. width: 100%;
  69. height: 100%;
  70. object-fit: cover;
  71. }
  72. }
  73. // 头部轮播 pagination重写样式
  74. .header_swiper {
  75. position: relative;
  76. .swiper-pagination {
  77. position: absolute;
  78. right: 0 !important;
  79. left: 90vw !important;
  80. bottom: 90px !important;
  81. width: 52px !important;
  82. .swiper-pagination-bullet {
  83. width: 5px;
  84. height: 5px;
  85. background-color: #576166;
  86. }
  87. .swiper-pagination-bullet-active {
  88. background-color: $theme_color;
  89. }
  90. }
  91. }
  92. .autoplay-progress {
  93. position: absolute;
  94. left: 90vw;
  95. bottom: 73px;
  96. z-index: 10;
  97. width: 100px;
  98. height: 10px;
  99. display: flex;
  100. align-items: center;
  101. justify-content: center;
  102. font-weight: bold;
  103. }
  104. .autoplay-progress svg {
  105. --progress: 0;
  106. position: absolute;
  107. left: 0;
  108. top: 0;
  109. z-index: 10;
  110. width: 100%;
  111. height: 100%;
  112. stroke-width: 20px;
  113. fill: none;
  114. stroke: $theme_color;
  115. stroke-dashoffset: calc(480 * (1 - var(--progress)));
  116. stroke-dasharray: 480;
  117. }