page { height: 100%; background-color: #f9f9f9; } .home { height: 100%; background-color: #f9f9f9; } //首页广告弹框 .popup-banner { position: relative; .popup-banner-clean { position: absolute; top: 32rpx; right: 32rpx; width: 48rpx; height: 48rpx; background: #000000; opacity: 0.2; border-radius: 50%; display: flex; align-items: center; justify-content: center; } } .movableArea { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; pointer-events: none; //设置area元素不可点击,则事件便会下移至页面下层元素 .movableView { pointer-events: auto; //可以点击 width: 84rpx; height: 84rpx; padding: 0 30rpx; .img-IHg { width: 84rpx; height: 84rpx; background-color: #fff; box-shadow: 0px 8rpx 24rpx 0px rgba(220, 222, 229, 0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; } } } .slot-wrap { display: flex; align-items: center; justify-content: center; flex: 1; } .home-swiper { width: 100%; height: 592rpx; .swiper-box { width: 100%; height: 592rpx; ; ::v-deep .swiper-item { width: 100%; height: 592rpx; display: flex; align-items: center; justify-content: space-between; } } } .home-nav { position: relative; top: -10rpx; padding-top: 60rpx; border-radius: 20rpx 20rpx 0px 0px; display: flex; align-items: center; justify-content: space-between; background-color: #f9f9f9; .home-nav-item { width: 20%; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; } } .home-special-area { padding: 72rpx 30rpx 38rpx; // background-color: deeppink; display: flex; align-items: center; justify-content: space-between; .home-special-area-left { display: flex; align-items: center; justify-content: flex-start; color: #333; font-size: 36rpx; font-weight: 800; position: relative; text{ position: relative; z-index: 2; } .text-shadow { position: absolute; bottom: 0; left: 0; width: 200rpx; height: 16rpx; background: linear-gradient(270deg, rgba(249, 231, 219, 0) 0%, #F9E7DB 100%); border-radius: 200rpx 0px 0px 200rpx; z-index: 1; } &::before { position: relative; z-index: 3; content: ''; display: inline-block; width: 6rpx; height: 34rpx; background: linear-gradient(180deg, #FF6200 0%, #FF4C00 100%); border-radius: 3rpx; margin-right: 8rpx; margin-top: 2rpx; } } .home-special-area-right { display: flex; align-items: center; justify-content: flex-end; font-size: 30rpx; color: #999; } } .home-special-img { // height: 260rpx; padding: 0 30rpx; // background-color: #fff; display: flex; align-items: flex-start; justify-content: space-between; overflow-x: scroll; overflow-y: hidden; .ListItem { width: 312rpx; position: relative; margin-right: 24rpx; .kudosicon { width: 40rpx; height: 40rpx; position: absolute; right: 28rpx; top: 16rpx; border-radius: 50%; background: #FFFFFF; opacity: 0.84; display: flex; align-items: center; justify-content: center; } } .ListItem:last-child { margin-right: 0; } } .home-banner { height: 640rpx; padding: 0 30rpx; padding-top: 40rpx; background-color: #f9f9f9; .home-banner-img { position: relative; width: 100%; // height: 100%; .baner-video { position: absolute; top: 0; left: 0; } .banner-img { position: absolute; top: 0; left: 0; z-index: 9; } .img-clean { position: absolute; right: 28rpx; top: 30rpx; z-index: 99; } .img-IHg { width: 84rpx; height: 84rpx; background-color: #fff; box-shadow: 0px 8rpx 24rpx 0px rgba(220, 222, 229, 0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: fixed; top: 1030rpx; right: 30rpx; z-index: 99; } } } .home-attach { background-color: #f9f9f9; padding: 20rpx 30rpx 0rpx; } .home-hotel { // height: 120rpx; background-color: #f9f9f9; } .home-hotel-img { background-color: #F9f9f9; padding: 10rpx 30rpx 20rpx; .home-hotel-img-content { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; .home-hotel-img-content-item { width: 332rpx; background: #FFFFFF; box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.04); border-radius: 12rpx; margin-bottom: 26rpx; overflow: hidden; // &:nth-child(2n+1){ // // position: relative; // top: -33px; // } // &:nth-child(1){ // // position: relative; // top: 0; // } .home-hotel-img-content-item-img { width: 332rpx; height: 332rpx; object-fit: cover; object-position: center; } .home-hotel-img-content-item-img-long { width: 332rpx; height: 400rpx; object-fit: cover; object-position: center; } .text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 18rpx 22rpx 32rpx; .text-top { font-size: 28rpx; font-weight: bold; color: #333; } .text-main { display: none; margin-top: 20rpx; font-size: 24rpx; color: #999999; } } } } .home-hotel-img-more { height: 70rpx; background-color: #fff; border-radius: 10rpx; border: 2rpx solid #ddd; font-size: 28rpx; color: #5A5A5A; display: flex; align-items: center; justify-content: center; margin-top: 50rpx; } } .home-brand { height: 124rpx; background-color: #f9f9f9; } .home-brand-img { padding: 0 30rpx; background-color: #f9f9f9; zhe::v-deep .uni-swiper__dots-item { width: 22rpx !important; height: 2rpx !important; } ::v-deep .uni-swiper__dots-bar { width: 22rpx !important; height: 2rpx !important; } ::v-deep .uni-swiper__warp { overflow: unset !important; } .swiper-box { background-color: #f9f9f9; height: 200rpx; ::v-deep swiper-item { width: 100%; display: flex; align-items: center; justify-content: space-between; view { width: 164rpx; height: 162rpx; background: #FFFFFF; box-shadow: 0px 4rpx 8rpx 0rpx rgba(220, 222, 229, 0.4); border-radius: 32rpx; display: flex; align-items: center; justify-content: center; image { border-radius: 32rpx; } } } } } .home-bottom { background-color: #f9f9f9; padding-top: 120rpx; }