wj_web/pages/artist/artist.scss

//过度动画
.init{
	transform:rotate(180deg);
	transition: all 1s;
}
.cz{
	transform: rotate(360deg);
}
.inits{
	transform:translateY(30%);
	opacity: 0.1;
	transition: all 1s;
}
.czs{
	transform: translateY(0);
	opacity: 1;
}

.shouchang{
	position: absolute;
	top: 40rpx;
	right: 35rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #000000;
	color: #ffffff;
	font-size: 30rpx;
	padding: 7rpx 20rpx;
	border-radius: 30rpx;
	>image{
		width: 30rpx;
		height: 30rpx;
	}
	>text{
		margin-left: 5rpx;
	}
}
.contioner{
	width: 750rpx;
	padding-top: 50rpx;
	
	.header{
		width: 700rpx;
		margin: 0rpx auto;
		position: relative;
		// .left{
		// 	left: 200rpx;
		// }
		// .rigth{
		// 	left: -180rpx;
		// }
		.collect{
			width: 161rpx;
			display: inline-block;
			color: #FFFFFF;
			margin-right: 20rpx;
			font-size: 40rpx;
			 font-weight: 700;
			 position: relative;
			 left: 0rpx;
			 transition: all 1s;
		}
		.left{
			left: 200rpx;
		}
		.rigth{
			left: -180rpx;
		}
		.active{
			 // transition: all 0.2s;
			display: inline-block;
			 // font-weight: 700;
			 color: transparent;
			-webkit-background-clip: text!important;
			background: linear-gradient(to bottom, #cca5f5, #71dbee);
			// font-size: 40rpx;
			// margin-right: 40rpx;
		}
		.ruzhu{
			width: 200rpx;
			height: 50rpx;
			color: #54d3fe;
			border: solid 2rpx #54d3fe;
			display: inline-block;
			float: right;
			text-align: center;
			border-radius: 25rpx;
			line-height: 50rpx;
		}
	}
	.care{
		padding-bottom: 120rpx;
	}
	.mycare{
		color: #FFFFFF;
		font-size: 34rpx;
		font-weight: bold;
	    margin-left: 25rpx;
		margin-bottom: 20rpx;
		margin-top: 50rpx;
	}
	.scroll{
			width: 700rpx;
			 white-space: nowrap;
			margin-left: 25rpx;
		.craeImg{
			display: inline-block;
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			box-sizing: border-box;
			border: 2rpx solid #586b6d50;
			margin-right: 20rpx;
			.craeImgname{
			width: 150rpx;
			color: #FFFFFF;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-top: 10rpx;
			text-align: center;
			}
			
				image{
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
					margin-top: 15rpx;
					margin-left: 15rpx;
				}
		}
	}
	
	.all{
		width: 700rpx;
		display: flex;
		margin: 0rpx auto;
		justify-content: space-between;
		margin-top: 80rpx;
		.allname{
			color: #FFFFFF;
			font-size: 30rpx;
		}
		.ruzhu{
			
			color:#bdbdbe;
			border-bottom:  2rpx solid #bdbdbe;
			
		}
	}
	
	.artistlist{
		width: 700rpx;
		margin: 0rpx auto;
		padding-top: 10rpx;
		padding-bottom: 80rpx;
		.artistlistitem{
			width: 700rpx;
			height: 460rpx;
			border: 2rpx solid #4f5a5e;
			border-radius: 20rpx;
			position: relative;
			margin-top: 40rpx;
			position: relative;
			.artistlistitemImg{
				text-align: center;
				margin-top: 30rpx;
				image{
					width: 660rpx;
					height: 250rpx;
					border-radius: 20rpx;
				}
			}
			.artistlistitemTitle{
				text-align: center;
				color: #FFFFFF;
				font-size: 34rpx;
				margin-top: 40rpx;
			}
			.RNM{
				text-align: center;
				margin-top: 20rpx;
				padding:0 20rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				color: #b9b9b9;
                   overflow: hidden;
                   text-overflow: ellipsis;
                   white-space: nowrap;
			  }
			.headerimg{
				width: 170rpx;
				height: 170rpx;
				border-radius: 50%;
				box-sizing: border-box;
			border: 2rpx solid #586b6d50;
			position: absolute;
			top: 160rpx;
			left: 270rpx;
			
				image{
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
					margin-top: 15rpx;
					margin-left: 15rpx;
				}
				
			}
		}
	}
	
	
	.list{
		width: 750rpx;
		padding-top: 40rpx;
		padding-bottom: 130rpx;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		.Title{
			color: #65f9ff;
			text-align: center;
			font-size: 34rpx;
		}
		.listcontent{
			width: 700rpx;
			margin: 0rpx auto;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding-top: 20rpx;
			padding-bottom: 50rpx;
			.listitem{
				width: 330rpx;
				height: 440rpx;
				border: solid 2rpx #484848;
					border-radius: 20rpx;
					margin-top: 30rpx;
				.item-img{
					image{
						width: 330rpx;
						height: 290rpx;
					border-radius: 20rpx;
					}
				}
				.item-name{
					display: flex;
					color: #FFFFFF;
					margin-top: 10rpx;
				
				}
				.foot{
					display: flex;
					margin: 0rpx auto;
					align-items: center;
				   margin-top: 20rpx;
					.footimg{
						width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
							box-sizing: border-box;
						    border: 2rpx solid #586b6d50;
						   margin-right: 10rpx;
						   margin-left: 10rpx;
							image{
								width: 50rpx;
								height: 50rpx;
								border-radius: 50%;
								margin-top: 5rpx;
								margin-left: 5rpx;
							}
					}
						
					.footname{
						color: #99999a;
						font-size: 26rpx;
						width: 102rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.price{
						color: #53d3fd;
						font-size: 26rpx;
						float: right;
						margin-left: 40rpx;
					}
				}
			}
		}
	}
}





page{
	background-image: url("../../static/bcimg/molv.webp");
	background-size: cover;
}