#app { height: 100%; } html, body { position: relative; height: 100%; box-sizing: border-box; } /*去除a标签下划线*/ a { text-decoration: none; } /*去除未被访问的a标签的下划线*/ a:link { text-decoration: none; } /*去除已经被访问过的a标签的下划线*/ a:visited { text-decoration: none; } /*去除鼠标悬停时的a标签的下划线*/ a:hover { text-decoration: none; } /*去除正在点击的a标签的下划线(鼠标按下,尚未松开)*/ a:active { text-decoration: none; } /*去除获得焦点的a标签的下划线(被鼠标点击过)*/ a:focus { text-decoration: none; } .page_padding_top { padding-top: $header_height; width: 100%; height: 100%; box-sizing: border-box; } .flex_center { display: flex; align-items: center; justify-content: center; } body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; } .swiper { width: 100%; height: 100%; } .swiper-slide { // text-align: center; font-size: 18px; background: #fff; box-sizing: border-box; /* Center slide text vertically */ display: flex !important; justify-content: center !important; align-items: center !important; img { display: block; width: 100%; height: 100%; object-fit: cover; } } // 头部轮播 pagination重写样式 .header_swiper { position: relative; .swiper-pagination { position: absolute; right: 0 !important; left: 90vw !important; bottom: 90px !important; width: 52px !important; .swiper-pagination-bullet { width: 5px; height: 5px; background-color: #576166; } .swiper-pagination-bullet-active { background-color: $theme_color; } } } .autoplay-progress { position: absolute; left: 90vw; bottom: 73px; z-index: 10; width: 100px; height: 10px; display: flex; align-items: center; justify-content: center; font-weight: bold; } .autoplay-progress svg { --progress: 0; position: absolute; left: 0; top: 0; z-index: 10; width: 100%; height: 100%; stroke-width: 20px; fill: none; stroke: $theme_color; stroke-dashoffset: calc(480 * (1 - var(--progress))); stroke-dasharray: 480; }