.swiper-box, swiper{ height: 400rpx; } .swiper-image{ width: 100%; height: 100%; } .swiper .wx-swiper-dots.wx-swiper-dots-horizontal { position: absolute; z-index: 999; } .swiper .wx-swiper-dot { display: inline-flex; justify-content: space-between; } .swiper .wx-swiper-dot::before { content: ''; flex-grow: 1; background: #ffffff; border-radius: 5px; } .swiper .wx-swiper-dot-active::before { background: #0026ff; } .venue-detail{ padding: 0 20rpx; border-bottom: 5px solid #ddd; } .venue-title{ width: 710rpx; margin-top: 20rpx; } .venue-name{ display: flex; justify-content: space-between; } .name-text{ font-weight: bold; font-size: 34rpx; color: #000; } .pay{ display: inline-block; background: green; color: #fff; padding: 0 8rpx; } .star image{ width: 35rpx; height: 35rpx; vertical-align: middle; } .venue-book{ border-bottom: 1px solid #ddd; padding: 20rpx 0; display: flex; justify-content: space-between; } .book{ color: #888; } .type{ display: inline-block; color: #fff; background: green; padding: 0 8rpx; } .venue-location{ padding: 20rpx 0; border-bottom: 1px solid #ddd; color: #BBBBBB; font-size: 32rpx; } .venue-location image, .venue-transportation image{ width: 28rpx; height: 28rpx; vertical-align: middle; } /* .venue-location image.phone{ width: 38rpx; } */ .venue-transportation{ padding: 20rpx 0; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; color: #BBBBBB; font-size: 28rpx; } .left{ width: 25%; } .right{ width: 75%; } .tab-btn{ overflow-x: auto; white-space: nowrap; font-size: 36rpx; } .tab{ display: inline-block; text-align: center; padding: 20rpx; font-weight: bold; font-size: 30rpx; position: relative; } .tab.active{ color: #4B7AFE; } .tab.active::after{ content: ''; display: block; width: 46rpx; height: 6rpx; background: #4B7AFE; border-radius: 10rpx; position: absolute; bottom: 0; left: 50%; margin-left: -23rpx; } .venue-info{ padding: 15rpx 30rpx; color: #888; font-size: 32rpx; } .venue-desc{ margin: 10rpx 0; } .title{ font-size: 34rpx; font-weight: bold; color: #5F5F5F; margin-bottom: 10rpx; } .desc{ color: #BBBBBB; font-size: 28rpx; margin: 20rpx 0; } .date{ padding: 15rpx 30rpx; } .date-container{ white-space: nowrap; } .date-box{ background: #fff; padding: 0 20rpx; text-align: center; margin-right: 15rpx; display: inline-block; width: 180rpx; font-size: 30rpx; border:2rpx solid rgba(236,236,236,1); position: relative; padding-bottom: 30rpx; } .today{ font-weight: bold; border-bottom: 2rpx solid #ECECEC; color: #4B7AFE; line-height: 60rpx; } .day{ color: #4B7AFE; line-height: 60rpx; margin: 10rpx 0 10rpx; border-bottom: 2rpx solid #ECECEC; } .book-btn-box{ text-align: center; position: absolute; bottom: -20rpx; left: 50%; width: 124rpx; height: 40rpx; background: #4B7AFE; margin-left: -62rpx; color: #fff; font-size: 26rpx; line-height: 40rpx; border-radius: 24rpx; } .book-btn{ width: 100%; height: 100%; } .facilities-service{ padding: 0 30rpx; margin-top: 20rpx; } .facilities{ padding: 15rpx 0; border-bottom: 1px solid #ddd; } .facilities-title{ color: #5F5F5F; font-weight: bold; margin-bottom: 15rpx; box-sizing: border-box; font-size: 28rpx; } .row{ margin-bottom: 15rpx; font-size: 32rpx; } .name{ display: inline-block; width: 25%; text-align: right; padding-right: 20rpx; box-sizing: border-box; color: #888; vertical-align: top; } .service{ border: none; } .service-item{ display: inline-block; margin-right: 15rpx; padding-left: 5%; box-sizing: border-box; color: #888; vertical-align: top; font-size: 30rpx; } .content{ display: inline-block; width: 75%; color: #888; } .comment{ padding: 0 20rpx; } .comment-title{ padding: 20rpx 0; border-bottom: 1px solid #ddd; } .comment-box{ display: flex; justify-content: space-between; padding: 20rpx 0; border-bottom: 1px solid #ddd; } .user-avatar{ width: 60rpx; height: 60rpx; } .user-avatar image{ width: 100%; height: 100%; } .user-comment{ width: 630rpx; } .user-info{ line-height: 60rpx; display: flex; justify-content: space-between; } .username{ color: rgb(97, 190, 252); } .star-level image{ width: 35rpx; height: 35rpx; } .venue-intro{ padding: 20rpx; font-size: 28rpx; color: #4B7AFE; text-align: right; margin-bottom: 120rpx; } .bottom-btn{ position: fixed; bottom: 0; left: 0; right: 0; background: #fff; padding: 20rpx 30rpx; height: 120rpx; box-sizing: border-box; box-shadow:0px 0px 17px 0px rgba(0,0,0,0.1); } .bottom-btn-box{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff; background: #4B7AFE; font-size: 32rpx; border-radius: 10rpx; } .project{ border-bottom: 3px solid #DEDEDE; padding-bottom: 10rpx; } .project-tab{ display: flex; } .project-btn{ flex-shrink: 0; padding: 15rpx 0; font-size: 32rpx; color: #242424; margin-right: 30rpx; font-weight: bold; } .project-btn.active{ color: #4B7AFE; border-bottom: 2px solid #4B7AFE; } .project-title{ color: #5F5F5F; font-weight: bold; margin-bottom: 15rpx; font-size: 28rpx; } .project-content{ text-indent: 10rpx; font-size: 26rpx; color: #888; } .location-box{ display: flex; justify-content: space-between; } .location-text{ width: 80%; } .go-there{ width: 18%; text-align: right; color: #4B7AFE; }