* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
}
nav {
width: 100%;
height: 40px;
background-color: #333333;
}
.zhongjian {
margin: 0px auto;
width: 1226px;
height: 40px;
}
.zhongjian>.s1>li {
float: left;
font-size: 12px;
padding: 0px 3px;
}
.zhongjian>.s1 {
width: 794.13px;
text-align: center;
line-height: 40px;
background-color: red;
}
.s2 {
text-align: center;
line-height: 40px;
position: relative;
left: 155px;
}
.s2>li {
float: left;
padding: 0px 3px;
font-size: 12px;
}
.s3 {
width: 120px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: #424242;
float: left;
margin-left: 186px;
}
.s3>span {
font-size: 12px;
}
.s8:hover {
color: orange;
background-color: white;
}
.zhongjian a {
color: #B0B0B0;
}
.zhongjian a:hover {
color: white;
}
.zhongjian li:nth-of-type(2n) {
color: #424242;
}
.s6 {
width: 330px;
/* height: 110px; */
height: 0px;
border-left: 3px solid #f5f2f2;
border-right: 3px solid #f5f2f2;
border-bottom: 3px solid #f5f2f2;
/* box-shadow: 0px 3px 9px rgba(#333333); */
margin-left: -210px;
line-height: 150px;
overflow: hidden;
text-align: center;
line-height: 110px;
transition: all 0.6s;
position: relative;
z-index: 12000;
background-color: white;
}
.s3:hover>.s6 {
height: 110px;
}
.a1 {
width: 45.95px;
height: 40px;
}
#s5 {
width: 0px;
height: 0px;
border: 8px solid white;
border-color: transparent transparent white;
margin-left: 17px;
margin-top: -15px;
display: none;
position: relative;
z-index: 9999;
}
.a1:hover>#s5 {
display: block;
}
.s7 {
width: 120px;
height: 0px;
box-shadow: 0px 0px 4px rgba(167, 167, 167, 0.5);
background-color: white;
/* display: none; */
margin-left: -35px;
overflow: hidden;
transition: all 0.6s;
position: relative;
z-index: 9999;
}
.a1:hover>.s7 {
/* display: block; */
height: 140px;
position: relative;
z-index: 12000;
}
.s7>span {
position: relative;
font-size: 15px;
bottom: 20px;
}
/* .search{
border: 1px solid black;
} */
/* .search>input:focus{
outline: none;
} */
#a1 {
width: 100%;
height: 100px;
position: relative;
z-index: 9999;
}
#a2 {
float: left;
line-height: 100px;
}
#a3 {
float: left;
text-align: center;
line-height: 100px;
margin-left: 174px;
}
#a3>li {
float: left;
height: 17.6;
font-size: 16px;
padding-left: 9px;
padding-right: 9px;
}
#a3 a {
color: #333333;
}
#a3 a:hover {
color: #FF7FA5;
}
a.icon-icon-xiaomiguishu {
font-size: 56px;
color: #FF6A00;
}
#a4 {
line-height: 100px;
float: right;
padding-left: 20px;
}
#a4:hover>#a6 {
border: 1px solid #B0B0B0;
}
#a4:hover>.icon-sousuo {
border-top: 1px solid #B0B0B0;
border-right: 1px solid #B0B0B0;
border-bottom: 1px solid #B0B0B0;
}
#a4:active>#a6 {
border: 1px solid red;
}
#a4:active>.icon-sousuo {
border-top: 1px solid red;
border-right: 1px solid red;
border-bottom: 1px solid red;
}
#a4>input {
border: 1px solid #E0E0E0;
outline: none;
}
#a4>span {
font-size: 26.5px;
width: 52px;
height: 49px;
padding: 12px;
border-top: 1px solid #E0E0E0;
border-right: 1px solid #E0E0E0;
border-bottom: 1px solid #E0E0E0;
box-sizing: border-box;
position: relative;
bottom: 0.5px;
}
#a4>span:hover {
background-color: #FF6700;
}
#a5 {
width: 1226px;
height: 100px;
margin: 0px auto;
}
#a6 {
width: 245px;
line-height: 50px;
position: relative;
bottom: 6px;
left: 5px;
}
#a4:hover>#o1 {
border-right: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
#o1 {
background-color: white;
margin-top: -28px;
margin-left: 5px;
width: 243px;
/* border: 1px solid black; */
display: none;
}
#a4:active>#o1 {
display: block;
}
#o1>p {
line-height: 40px;
margin-left: 10px;
font-size: 13px;
}
#o1>p>a {
color: #333333;
}
.c1 {
width: 100%;
height: 150px;
border-top: 1px solid #E0E0E0;
box-shadow: 0px 2px 3px #DADADA;
background-color: white;
position: absolute;
/* position: relative; */
left: 0;
/* overflow: hidden;
transition: all 0.6s; */
display: none;
z-index: 11;
}
.c2:hover>.c1 {
display: block;
}
.d1 {
width: 1226px;
height: 500px;
margin: 0px auto;
}
.d2 {
width: 234px;
height: 500px;
background-color: rgba(165, 163, 163, .3);
position: relative;
z-index: 4;
}
.d3>li {
line-height: 42px;
/* overflow: hidden; */
font-size: 16px;
padding-left: 25px;
height: 42;
}
.d3>li:hover {
background-color: #FF6700;
}
.d3>li>a {
color: white;
}
.d3 div {
width: 992px;
height: 498px;
/* background-color: #FF6700; */
border: 1px solid gray;
background-color: white;
box-shadow: 0px 0px 5px grey;
position: absolute;
display: none;
left: 234px;
z-index: 6px;
bottom: 0px;
}
.d3:hover div {
display: block;
}
.d4 {
margin-top: 15px;
padding-top: 20px;
}
span.icon-right {
float: right;
color: white;
font-size: 40px;
}
.swiper {
width: 1226px !important;
height: 500px;
overflow: hidden;
/* display: none; */
position: relative;
/* left: 234px; */
bottom: 500px;
padding-right: -50px;
z-index: 2;
}
.swiper-slide>img {
position: relative;
z-index: 10;
}
.j1 {
width: 100%;
/* height: 170px; */
margin: 0px auto;
background-color: rgb(19, 18, 17);
}
.e1 {
width: 234px;
height: 170px;
padding: 3px;
box-sizing: border-box;
background-color: #5f5750;
float: left;
}
.e2 {
width: 1226px;
margin: 20px auto;
}
.e1 li {
float: left;
width: 76px;
height: 82px;
position: relative;
box-sizing: border-box;
left: 14px;
}
.e1 img {
display: block;
font-size: 22px;
margin-bottom: 4px;
padding: 13px;
}
.e1 a {
color: #fff;
font-size: 12px;
opacity: .7;
display: block;
}
.e1 a:hover {
opacity: 1;
}
.f1::after {
position: absolute;
content: "";
bottom: 0;
left: -5px;
height: 1px;
width: 64px;
background-color: #797876;
}
.f2::before {
position: absolute;
top: 6px;
right: 10px;
content: "";
width: 1px;
height: 70px;
background-color: #797876;
}
.g1>li {
float: left;
}
.g2 {
margin-left: 12px;
}
.g3 {
margin-left: 10px;
margin-right: 10px;
}
.g1 img:hover {
box-shadow: 0px 3px 5px gray;
transition: all 0.6s;
}
.swiper-button-prev {
margin-left: 224px;
color: #D9D9D7;
width: 40px;
height: 60px;
/* background-color: #7F7F7F; */
/* display: none; */
}
.swiper-button-next {
color: #D9D9D7;
width: 40px;
height: 60px;
/* background-color: #7F7F7F; */
}
/* .swiper-button-prev:hover{
display: block;
} */
.swiper-button-next:hover {
background-color: #333333;
}
.swiper-button-prev:hover {
background-color: #333333;
}
#p1 * {
width: 12px;
height: 12px;
border: 3px solid #807e7e;
background-color: #bdb9b9;
position: relative;
left: 520px;
bottom: 20px;
box-sizing: border-box;
}
#p1 *:hover{
border: 3px solid #807e7e;
background-color: #bdb9b9;
}
.m1 {
position: fixed;
bottom: 100px;
right: 0;
}
.m1>li {
width: 70px;
line-height: 40px;
border: 1px solid rgb(190, 187, 187);
}
.m1>li>a>span {
position: relative;
top: 10px;
left: 17px;
font-size: 40px;
color: #999999;
}
.m1>li>a>.p1 {
position: relative;
left: 10px;
}
.m1>li>a>p {
color: #999999;
}
.m1 a:hover {
color: #FF6700;
}
.m1 a:hover>span {
color: #FF6700;
}
.m1 a:hover>p {
color: #FF6700;
}
小米商城app
购物车 (0)
购物车还没有商品,赶快选购吧!
var mySwiper = new Swiper('.swiper', {
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: true,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
clickableClass: 'my-pagination-clickable',
},
loop: true, // 循环模式选项
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
effect: 'fade',
pagination: {
el: '.swiper-pagination',
clickable: true,
}
})
// 鼠标滑过pagination控制swiper切换
// for(i=0;i // mySwiper.pagination.bullets[i].οnmοuseοver=function(){ // this.click(); // }; // } //如果你在swiper初始化后才决定使用clickable,可以这样设置 mySwiper.params.pagination.clickable = true; //此外还需要重新初始化pagination mySwiper.pagination.destroy() mySwiper.pagination.init() mySwiper.pagination.bullets.eq(0).addClass('swiper-pagination-bullet-active');