el-carousel 指示器改成小圆点

	/deep/ .el-carousel__indicator--horizontal .el-carousel__button {
		width: 14px;
		height: 14px;
		background: #bfbfbf;
		border: 1px solid #ffffff;
		border-radius: 50%;
		opacity: 0.5;
	}
	/deep/ .el-carousel__indicator--horizontal.is-active .el-carousel__button {
		width: 14px;
		height: 14px;
		background: #ffffff;
		border-radius: 50%;
		opacity: 1;
	}
	/deep/ .el-carousel__indicators {
		// 指示灯位置
		left: unset;
		transform: unset;
		right: 2%;
	}

实现效果

 ​​​​​​​

遮罩层css

	.mask {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 48px;
		line-height: 48px;
		font-size: 24px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		color: #fff;
		background: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.1) 0%,
			rgba(0, 0, 0, 0.65) 100%
		);
		border-radius: 0px 0px 10px 10px;
		text-align: center;
	}

你可能感兴趣的:(前端,javascript,html)