@font-face { font-family: 'ZonaPro'; src: url(./assets/fonts/ZonaPro-ExtraBold.otf); } @font-face { font-family: 'Source Han Sans'; font-style: normal; font-weight: 400; src: url(./assets/fonts/SourceHanSans-VF.ttf.woff2) format('woff2'); } html, body { position: relative; box-sizing: border-box; background-image: url(./assets/img/banner/onestop/1.png), url(./assets/img/banner/onestop/back.jpg), url(./assets/img/banner/lilun/back1.jpg), url(./assets/img/banner/design/g.jpg), url(./assets/img/banner/team/back2.jpg), url(./assets/img/banner/nation/back.jpg); background-size: 0 0; font-size: 24px; font-smooth: always; /* Firefox */ -webkit-font-smoothing: antialiased; /* Safari, Opera, and Chrome */ -moz-osx-font-smoothing: grayscale; /* Firefox for Mac OS */ font-family: 'Source Han Sans'; } * { font-family: 'Source Han Sans'; } /*去除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-size: 14px; color: #000; margin: 0; padding: 0; } .swiper { width: 100vw; height: 100vh; } .swiper-slide { font-size: 18px; background: #fff; box-sizing: border-box; img { display: block; width: 100%; height: 100%; object-fit: cover; } } // 首页轮播 pagination重写样式 .home_swiper { position: relative; .swiper-pagination { display: flex; flex-direction: column; align-items: center; left: 30px !important; width: 18px; margin-right: 40px; .swiper-pagination-bullet { width: 6px; height: 6px; background: $point_default; border-radius: 50%; } .swiper-pagination-bullet-active { background-color: $theme_color; transition-property: all; transition-duration: 1s; animation-fill-mode: forwards; width: 24px; height: 6px; border-radius: 3px; } } } // 头部轮播 pagination重写样式 .header_swiper { position: relative; .swiper-pagination { display: flex; flex-direction: row; position: absolute; right: 0 !important; left: 87px !important; bottom: 0px !important; width: 250px !important; height: 100px; .swiper-pagination-bullet { width: 50px; height: 3px !important; background: #c2c2c2 !important; opacity: 1 !important; // height: 5px; border-radius: 2px !important; .home_swiper_page_num { position: absolute; bottom: 90px; display: flex; height: 14px; font-size: 20px; font-family: 'ZonaPro'; font-weight: 900; color: #c2c2c2; line-height: 67px; width: 40px; justify-content: center; } } .active-class-1 { background: $theme_color !important; opacity: 1 !important; .home_swiper_page_num { position: absolute; bottom: 90px; display: flex; height: 14px; font-size: 20px; font-family: 'ZonaPro'; font-weight: 900; color: $theme_color; line-height: 67px; width: 40px; justify-content: center; } } .active-class-2 { background: #fff !important; opacity: 1 !important; .home_swiper_page_num { position: absolute; bottom: 90px; display: flex; height: 14px; font-size: 20px; font-family: 'ZonaPro'; font-weight: 900; color: #fff; line-height: 67px; width: 40px; justify-content: center; } } .swiper-pagination-bullet-active { background: $theme_color !important; opacity: 1 !important; .home_swiper_page_num { position: absolute; bottom: 90px; display: flex; height: 14px; font-size: 20px; font-family: 'ZonaPro'; font-weight: 900; color: $theme_color; line-height: 67px; width: 40px; justify-content: center; } } } } .case_detail_swiper { position: relative; width: 100%; height: 100%; .swiper-pagination { display: block; position: absolute; bottom: 20px !important; .swiper-pagination-bullet { width: 8px; height: 8px; background: #fafafa; border-radius: 50%; } .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: 10px; stroke: $theme_color; stroke-dashoffset: calc(480 * (1 - var(--progress))); stroke-dasharray: 480; } .ignore-min-width { min-width: 1280px; } .swiper-button-next:after, .swiper-button-prev:after { font-size: 0; display: none; }