yunshangxie/static/css/my.scss

.pages-a {
	max-height: 100vh;
}

/* 自定义导航栏内容 start */
.custom-nav {
	height: 100%;

	&__back {
		margin: auto 5rpx;
		font-size: 50rpx;
		margin-right: 10rpx;
		margin-left: 30rpx;
		flex-basis: 5%;
	}
}

/* 底部安全边距 start*/
.tn-tabbar-height {
	min-height: 120rpx;
	height: calc(140rpx + env(safe-area-inset-bottom) / 2);
	height: calc(140rpx + constant(safe-area-inset-bottom));
}

/* 图标容器5 start */
.icon5 {
	&__item {
		// width: 30%;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 0rpx;
		margin: 0rpx;
		transform: scale(1);
		transition: transform 0.3s linear;
		transform-origin: center center;

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

/* 轮播视觉差 start */
.card-swiper {
	height: 450rpx;
}

.card-swiper swiper-item {
	width: 750rpx;
	left: 0rpx;
	box-sizing: border-box;
	padding: 40rpx 30rpx 30rpx 30rpx;
	overflow: initial;
}

.card-swiper swiper-item .swiper-item {
	width: 100%;
	display: block;
	height: 100%;
	border-radius: 15rpx;
	transform: scale(1);
	transition: all 0.2s ease-in 0s;
	will-change: transform;
	// overflow: hidden;
}

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

.card-swiper swiper-item .swiper-item-text {
	margin-top: -220rpx;
	text-align: center;
	width: 100%;
	display: block;
	border-radius: 10rpx;
	transform: translate(100rpx, 0rpx) scale(0.9, 0.9);
	transition: all 0.6s ease 0s;
	will-change: transform;
	overflow: hidden;
}

.card-swiper swiper-item.cur .swiper-item-text {
	margin-top: -220rpx;
	width: 100%;
	transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
	transition: all 0.6s ease 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: absolute;
	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: -70rpx;
	margin: 0 8rpx !important;
	position: relative;
}

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


/* 胶囊banner*/
.image-capsule {
	padding: 100rpx 0rpx;
	font-size: 40rpx;
	font-weight: 300;
	position: relative;
}

.image-piccapsule {
	background-size: cover;
	background-repeat: no-repeat;
	// background-attachment:fixed;
	background-position: top;
	border-radius: 20rpx 20rpx 0 0;
}

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

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

/* 瀑布流*/
.wallpaper__item {
	background-color: #FFFFFF;
	overflow: hidden;
	margin: 0 10rpx;
	margin-bottom: 40rpx;
	// box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);

	.item {

		/* 图片 start */
		&__image {
			width: 100%;
			height: auto;
			background-color: #FFFFFF;
			border: 1rpx solid #F8F7F8;
			border-radius: 10rpx;
			overflow: hidden;
		}

		/* 图片 end */

		/* 内容 start */
		&__data {
			padding: 14rpx 0rpx;
		}

		/* 标题 start */
		&__title-container {
			text-align: justify;
			line-height: 38rpx;
			vertical-align: middle;
		}

		&__title {
			font-size: 30rpx;
		}

		/* 标题 end */

		/* 标签 start */
		&__tags-container {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: flex-start;
		}

		&__tag {
			margin: 10rpx;
			color: #7C8191;
			background-color: #F3F2F7;
			padding: 4rpx 14rpx 6rpx;
			border-radius: 10rpx;
			font-size: 20rpx;

			&:first-child {
				margin-left: 0rpx !important;
			}
		}

		/* 标签 end */

		/* 内容 end */
	}
}