jigesi/pages/index.scss

// .swiper{
// 	}
// 自定义指示器样式

::v-deep .u-swiper{
	border-radius: 0!important;
}
::v-deep .u-line{
	 width: 56rpx!important;
 }
 
 .container{
	 padding-bottom: 62rpx;
 }
.swiperAndBook{
	position: relative;
	.tab{
		position: absolute;
		z-index: 9;
		height: 92rpx;
		display: flex;
		align-items: center;
		color: #D8D6D4;
		padding-left: 40rpx;
		background: rgba(0, 0, 0,.19);
		width: 100%;
		.item{
			margin-right: 52rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
		}
		.itemA{
			font-size: 36rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
	
	.bottomBtn{
		.bookingAndIndicator{
			background: black;
			height: 228rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			padding-top: 92rpx;
			box-sizing: border-box;
			.btn{
				width: 362rpx;
				height: 76rpx;
				border-radius: 38rpx;
				border: 2rpx solid #FFFFFF;
				
				display: flex;
				align-items: center;
				justify-content: center;
				
				.btnTxt{
					width: 112rpx;
					height: 28rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 28rpx;
					margin-right: 12rpx;
				}
			}
			
			.indicatorBox{
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 32rpx;
				margin-bottom: 34rpx;
				.indicator {
				       @include flex(row);
				       justify-content: center;
						position: absolute;
						top: 10rpx;
				       &__dot {
							width: 81rpx;
							height: 2rpx;
				            margin: 0 8rpx;
				            transition: background-color 0.3s;				 
							 width: 24rpx;
							 height: 4rpx;
							 background: #6A6A6A;
							 border-radius: 10rpx;
				           &--active {
				                background-color:#ECECEC;
								width: 60rpx;
				            }
				       }
				   }
				   .indicator-num {
				       padding: 2px 0;
				       background-color: rgba(0, 0, 0, 0.35);
				       border-radius: 100px;
				       width: 35px;
				       @include flex;
				       justify-content: center;
				
				       &__text {
				            color: #FFFFFF;
				            font-size: 12px;
				        }
				   }
			}
		}
	}
}
.bg{
	// background:url('https://oaigc.oss-cn-chengdu.aliyuncs.com/lamp/2023-09/2023090615382538343.png') no-repeat;
	// background-image: url('@/static/index/bg.png');
	background-size: 100% 100%;
	.controlPart{
		padding: 0 32rpx;
		.top{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 112rpx;
			.left{
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				flex-direction: column;
				image{
					margin-bottom: -20rpx;
					margin-left: -20rpx;
				}
				.title{
					font-size: 36rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}
			}
			image{
				
			}
		}
		.con{
			width: 100%;
			image{
				width: 100%;
				height: 452rpx;
				border-radius: 0 25rpx 0 25rpx;
			}
		}
	}
	
	.productLead{
		padding-left: 30rpx;
		.top{
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			height: 184rpx;
			padding-right: 32rpx;
			padding-bottom: 42rpx;
			box-sizing: border-box;
			.left{
				position: relative;
				.bottomEng{
					font-size: 44rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color:#E1DDDB;
					position: absolute;
					z-index: 1;
					min-width: 568rpx;
					top:-35rpx;
					// letter-spacing: 10rpx;
				}
				.bt{
					display: flex;
					align-items: center;
					position: relative;
					z-index: 2;
					.title{
						font-size: 32rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #333333;
						margin-right: 6rpx;
					}
				}
				
			}
		}
		.con{
			// width: calc(100% - 30rpx);
			width:100%;
			display: flex;
			overflow-x: scroll;
			.item{
				width: 336rpx;
				// height: 368rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				border: 2rpx solid #F1F1F1;
				margin-right: 16rpx;
				image{
					width: 336rpx;
					height: 292rpx;
					border-radius: 30rpx 30rpx 0 0;
				}
				.bottom{
					display: flex;
					justify-content: center;
					align-items: center;
					height: 76rpx;
				}
			}	
		}
		
		.conLast{
			margin-bottom: 90rpx;
			
			.indicatorBox1{
							position: relative;
							display: flex;
							justify-content: center;
							align-items: center;
							margin-top: 32rpx;
							margin-bottom: 34rpx;
							.indicator1 {
							       @include flex(row);
							       justify-content: center;
									position: absolute;
									top: 10rpx;
							       &__dot1 {
										width: 24rpx;
										height: 8rpx;
										border-radius: 4rpx;
							            margin: 0 8rpx;
							            transition: background-color 0.3s;				 
										 background: #D4D4D4;
										 // border-radius: 10rpx;
							           &--active1 {
							                background-color:#E77817;
											width: 60rpx;
							            }
							       }
							   }
							   .indicator-num1 {
							       padding: 2px 0;
							       background-color: blue;
							       border-radius: 100px;
							       width: 35px;
							       @include flex;
							       justify-content: center;
							
							       &__text1 {
							            color: red;
							            font-size: 12px;
							        }
							   }
						}
		}
	}
}