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-face {
font-family: 'ZonaPro';
src: url(./assets/fonts/ZonaPro-ExtraBold.otf);
}
/*去除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: 100vw;
height: 100vh;
}
.swiper-slide {
// text-align: center;
font-size: 18px;
background: #fff;
box-sizing: border-box;
/* Center slide text vertically */
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;
}