homeindex.wxss 3.9 KB
page {
  background: #ececec;
  background: url('https://areial.w.broing.cn/uploads/20191120/20200307212228.png') no-repeat center;
  background-size: 100% 100%;
  
  position: relative
}

.headimg {
  width: 750rpx;
  height: 288rpx;
  font-size: 0;
  position: relative;
}

image {
  width: 100%;
  height: 100%;
}

.logo {
  width: 215rpx;
  height: 75rpx;
  font-size: 0;
  position: absolute;
  top: 40rpx;
  left: 50%;
  transform: translateX(-50%);
}

.swiperbox {
  width: 686rpx;
  height: 324rpx;
  position: absolute;
  bottom: -200rpx;
  left: 50%;
  transform: translateX(-50%);
}

/* 轮播图 */

.swiper_image {
  width: 686rpx;
  height: 324rpx;
  font-size: 0;
  position: relative;
  box-shadow: 0px -1px 6px 0px rgba(212, 137, 96, 0.11);
}

.swiper_item_img {
  border-radius: 10rpx;
  height: 324rpx;
}

.swiper_image image {
  width: 100%;
  height: 100%;
}

.swiper_item_img swiper-item {
  width: 686rpx;
  height: 300rpx;
  box-shadow: 0px -1px 6px 0px rgba(212, 137, 96, 0.11);
  display: felx;
  align-items: center;
  justify-content: center;
}

.swiper_item_img swiper-item image {
  width: 100%;
  height: 100%;
}

.dots {
  /* width: 156rpx; */
  height: 36rpx;
  display: flex;
  flex-direction: row;
  position: absolute;
  justify-content: center;
  left: 0;
  right: 0;
  bottom: 20rpx;
}

/*未选中时的小圆点样式 */

.dot {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  margin-right: 26rpx;
  background-color: #b9c0f7;
}

/*选中以后的小圆点样式  */

.active {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #ffa942;
  border: 3rpx solid #fff;
}

.headwhite {
  width: 750rpx;
  height: 228rpx;
  
}

.swiperdot {
  color: #fff;
  font-size: 28rpx;
  position: absolute;
  bottom: 20rpx;
  right: 20rpx;
}

.topbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topboxleft {
  width: 412rpx;
  height: 295rpx;
  font-size: 0;
  position: relative
}
/* 服务介绍 */
.topboxright_t{
  width:254rpx;
  height:295rpx;
  font-size:0;
  position: relative
}
.topboxright{
  width:214rpx;
  height:241rpx;
  font-size:0;
  position: relative
}
.topboxvip{
  width:244rpx;
  height:244rpx;
  font-size:0;
  position: relative
}
.boximg{
  padding: 34rpx 32rpx;
  box-sizing: border-box
}
.textbox{
  position:absolute;
  top:64rpx;
  left:32rpx;

}
.servicetext{
  position: absolute;
  top:20rpx;
  left:20rpx;
}
.textboxtop{
  color:#FFFFFF;
  font-size: 32rpx;
  font-weight: bold;
}
.textboxbottom{
  color:#FFFFFF;
  font-size: 32rpx;
  font-weight: bold;
  margin-top:10rpx;
}
.serviceword{
  color:#FFFFFF;
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom:10rpx;
}
.xiabox{
  margin-top:30rpx;
}
.yourow{
  width:39rpx;
  height:7rpx;
  font-size: 0;
  position: absolute;
  bottom:20rpx;
  right:10rpx;
}
.bottomimg{
  width:750rpx;
  height:90rpx;
  font-size: 0;
  position: fixed;
  bottom:0;
  left:0;
}
/* 弹窗 */
.yuyuewrap{
  width:600rpx;
  height:312rpx;
  background: #fff;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%)
}
.yuyuebottom{
  display:flex;
  align-items: center;
  position: absolute;
  bottom:0;
  left:0
}
.yuyuebottomleft{
  width:300rpx;
  height:80rpx;
  background: #BDC4CE;
  color:#fff;
  font-size: 28rpx;
  text-align: center;
  line-height:80rpx;

}
.yuyuebottomright{
  width:301rpx;
  height:80rpx;
  background: #273574;
  color:#fff;
  font-size: 28rpx;
  text-align: center;
  line-height: 80rpx;

}
.yuyuewraptop{
  color:#273574;
  font-size: 32rpx;
  text-align: center;
  margin-top:92rpx;
  font-weight: bold;
}
.yuyuesure{
  width:600rpx;
  height:80rpx;
  background: #273574;
  color:#fff;
  text-align: center;
  line-height: 80rpx;
  position: absolute;
  bottom:0;
  left:0;
}
.yuyuecheng{
  color:#263472;
  font-size: 36rpx;
  text-align: center;
  font-weight: bold;
  margin-top:58rpx;
}
.yuyuechengword{
  color:#06121E;
  font-size: 28rpx;
  text-align: center;
  margin-top:24rpx;
}