|
|
@@ -169,6 +169,7 @@
|
|
|
/* 轮播图区域 start */
|
|
|
.swiper{
|
|
|
position: relative;
|
|
|
+ height: 460px;
|
|
|
}
|
|
|
.swiper .swiper-img{
|
|
|
position: absolute;
|
|
|
@@ -208,6 +209,53 @@
|
|
|
background-color: #ff6700;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+ .swiper .swiper-btn-left{
|
|
|
+ width: 41px;
|
|
|
+ height: 69px;
|
|
|
+ background-image: url("./img/xiaomi/icon-slides.png");
|
|
|
+ position: absolute;
|
|
|
+ left: 234px;
|
|
|
+ top: 50%;
|
|
|
+ margin-top: -34px;
|
|
|
+ background-position: -84px 0;
|
|
|
+ }
|
|
|
+ .swiper .swiper-btn-left:hover{
|
|
|
+ background-position: 0 0;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .swiper .swiper-btn-right{
|
|
|
+ width: 41px;
|
|
|
+ height: 69px;
|
|
|
+ background-image: url("./img/xiaomi/icon-slides.png");
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 50%;
|
|
|
+ margin-top: -34px;
|
|
|
+ background-position: -125px 0;
|
|
|
+ }
|
|
|
+ .swiper .swiper-btn-right:hover{
|
|
|
+ background-position: -42px 0;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .swiper .swiper-btn-dot{
|
|
|
+ position: absolute;
|
|
|
+ right: 30px;
|
|
|
+ bottom: 30px;
|
|
|
+ }
|
|
|
+ .swiper .swiper-btn-dot li{
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ border:2px solid hsla(0,0%,100%,.3);
|
|
|
+ background-color: rgba(0,0,0,.4);
|
|
|
+ float: left;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin: 0 4px;
|
|
|
+ }
|
|
|
+ .swiper .swiper-btn-dot li:hover{
|
|
|
+ border: 2px solid rgba(0,0,0,.4);
|
|
|
+ background-color: hsla(0,0%,100%,.3);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
/* 轮播图区域 end */
|
|
|
</style>
|
|
|
</head>
|
|
|
@@ -333,7 +381,21 @@
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="swiper-img">
|
|
|
- <img src="./img/xiaomi/swiperimg.jpg" alt="swiper">
|
|
|
+ <img src="./img/xiaomi/swiper.jpg" alt="swiper">
|
|
|
+ </div>
|
|
|
+ <div class="swiper-btn">
|
|
|
+ <div class="swiper-btn-left"></div>
|
|
|
+ <div class="swiper-btn-right"></div>
|
|
|
+ <div class="swiper-btn-dot">
|
|
|
+ <ul>
|
|
|
+ <li></li>
|
|
|
+ <li></li>
|
|
|
+ <li></li>
|
|
|
+ <li></li>
|
|
|
+ <li></li>
|
|
|
+ <li></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- bnner 区域 -->
|
