fanyunAi/pages/painting/ys.scss

.template-details {
		margin: 0;
		width: 100%;
		height: 100vh;
		color: #fff;
		overflow: hidden;
	}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}



	/* 图标容器15 start */
	.icon15 {
		&__item {
			width: 30%;

			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 50rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;


				}
			}
		}
	}

	/* 按钮 */
	.button-1 {
		background-color: rgba(0, 0, 0, 0.15);
		position: fixed;
		/* bottom:200rpx;
      right: 20rpx; */
		top: 25%;
		right: 30rpx;
		z-index: 1001;
		border-radius: 100px;
	}

	.button-2 {
		background-color: rgba(0, 0, 0, 0.15);
		position: fixed;
		/* bottom:200rpx;
      right: 20rpx; */
		top: 35%;
		right: 30rpx;
		z-index: 1001;
		border-radius: 100px;
	}

	.button-3 {
		background-color: rgba(0, 0, 0, 0.15);
		position: fixed;
		/* bottom:200rpx;
      right: 20rpx; */
		top: 45%;
		right: 30rpx;
		z-index: 1001;
		border-radius: 100px;
	}


	/* 用户头像 start */
	.logo-image {
		width: 100rpx;
		height: 100rpx;
		position: relative;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border: 6rpx solid rgba(255, 255, 255, 0.25);
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 50%;
		overflow: hidden;
		// background-color: #FFFFFF;
	}

	/* 底部tabbar start*/
	/* 毛玻璃*/
	.dd-glass {
		width: 100%;
		backdrop-filter: blur(20rpx);
		-webkit-backdrop-filter: blur(20rpx);
	}

	.footerfixed {
		position: fixed;
		// margin: 20rpx;
		margin: 40rpx 5%;
		width: 90%;
		bottom: calc(env(safe-area-inset-bottom) / 2);
		;
		z-index: 999;
		background-color: rgba(0, 0, 0, 0.15);
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.tabbar {
		display: flex;
		align-items: center;
		min-height: 110rpx;
		justify-content: space-between;
		padding: 0;
		height: calc(110rpx + env(safe-area-inset-bottom) / 2);
		// padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	}

	.tabbar .action {
		font-size: 22rpx;
		position: relative;
		flex: 1;
		text-align: center;
		padding: 0;
		display: block;
		height: auto;
		line-height: 1;
		margin: 0;
		overflow: initial;
	}

	.tabbar .action .bar-icon {
		width: 100rpx;
		position: relative;
		display: block;
		height: auto;
		margin: 0 auto 10rpx;
		text-align: center;
		font-size: 42rpx;
	}

	.tabbar .action .bar-icon image {
		width: 50rpx;
		height: 50rpx;
		display: inline-block;
	}


	/* 全屏轮播  start*/
	.card-swiper {
		height: 100vh !important;
	}

	.card-swiper swiper-item {
		width: 750rpx !important;
		left: 0rpx;
		box-sizing: border-box;
		overflow: initial;
		background: #000;
	}

	.card-swiper swiper-item .swiper-item {
		// width: 100%;
		// display: block;
		// height: 100vh;
		// border-radius: 0rpx;
		// transform: scale(0.9);
		// transition: all 0.2s ease-in 0s;
		// will-change: transform;
		// overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		background: #000;
	}

	.card-swiper swiper-item.cur .swiper-item {
		transform: scale(1);
		transition: all 0.2s ease-in 0s;
		will-change: transform;
	}

	.image-banner {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.image-banner image {
		width: 100%;
		// height: 100%;
	}

	/* 轮播指示点 start*/
	.indication {
		z-index: 9999;
		width: 100%;
		height: 36rpx;
		position: fixed;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.spot {
		background-color: #FFFFFF;
		opacity: 0.6;
		width: 10rpx;
		height: 10rpx;
		border-radius: 20rpx;
		top: calc(-280rpx - env(safe-area-inset-bottom) / 2);
		top: calc(-280rpx - constant(safe-area-inset-bottom));
		margin: 0 8rpx !important;
		position: relative;
	}

	.spot.active {
		opacity: 1;
		width: 30rpx;
		background-color: #FFFFFF;
	}

	.lazy-load {
		background: #000;
		display: grid;
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom);
		// height: 100%;
	}

	.lazy-load view {
		width: 100%;

	}

	.lazy-loading {
		background: #000;
		height: 100%;

	}

	.drawing {
		position: absolute;
		top: 46%;
		// color: #606266;
		font-size: 18px;
	}

	.progress {
		position: absolute;
		top: 52%;
		width: 60%;
	}

	.preloader_1 {
		position: absolute;
		// right: 8%;
		// bottom: 12%;
		// position: fixed;
		// right: 58%;
		margin-right: 65px;
		top: 42%;
	}

	.preloader_1 view {
		display: block;
		bottom: 0px;
		width: 9px;
		height: 5px;
		background: #9b59b6;
		position: absolute;
		animation: preloader_1 1.5s infinite ease-in-out;
	}

	.preloader_1 view:nth-child(2) {
		left: 11px;
		animation-delay: .2s;
	}

	.preloader_1 view:nth-child(3) {
		left: 22px;
		animation-delay: .4s;
	}

	.preloader_1 view:nth-child(4) {
		left: 33px;
		animation-delay: .6s;
	}

	.preloader_1 view:nth-child(5) {
		left: 44px;
		animation-delay: .8s;
	}

	@keyframes preloader_1 {
		0% {
			height: 5px;
			transform: translateY(0px);
			background: #9b59b6;
		}

		25% {
			height: 30px;
			transform: translateY(15px);
			background: #3498db;
		}

		50% {
			height: 5px;
			transform: translateY(0px);
			background: #9b59b6;
		}

		100% {
			height: 5px;
			transform: translateY(0px);
			background: #9b59b6;
		}
	}