MoeNovaClient/pages/index/index.scss

	@font-face {
	    font-family: 'CustomFont';
	    src: url('@/static/fonts/alibaba.otf') format('opentype');
	    font-weight: normal;
	    font-style: normal;
	}
	.page-top{
		background:url("/static/home/home-top.png") 518rpx calc(-10rpx + var(--status-bar-height))/212rpx 296rpx no-repeat,url("/static/home/home-t.png") top center/100% auto no-repeat,linear-gradient(to top, #D0FFA5, #ACFF5F);
	}
	.tab-nav {
		display: flex;
		justify-content: flex-start;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		background: #ffffff;
 
		.tab-item {
			padding: 10rpx 38rpx;
			color: #1F1F1F;
			font-size: 28rpx;
			background: #F2F6F2;
			margin-right: 20rpx;
			border-radius: 30rpx;
			position: relative;
			left: 0;
			top: 0;
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
			
			&:active {
				transform: scale(0.95);
				box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.05);
			}

			.indicator-triangle {
				position: absolute;
				bottom: -10rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 0;
				height: 0;
				border-left: 10rpx solid transparent;
				border-right: 10rpx solid transparent;
				border-top: 10rpx solid #ACF934;
				display: none;
				transition: all 0.3s ease;
			}
			&.active {  
				background: #ACF934;
				font-family: "CustomFont" !important;
				box-shadow: 0 4rpx 12rpx rgba(172, 249, 52, 0.3);
				
				.indicator-triangle {
					display: block;
					transform: translateX(-50%) scale(1.2);
				}
			}
		}
	}

	.hot-topics {
		padding: 20rpx;
		// background: #fff;
		margin: 20rpx;
		border-radius: 16rpx;
		border: #000000 solid 2rpx; 
		 background:url("../../static/home/hot-topice-bg.png") center/100% 99%  no-repeat;
		 
		.hot-topics-header {
			margin-bottom: 20rpx;
		
			.hot-topics-title { 
				width: 140rpx;
				height: 34rpx;
			}
		}

		.hot-topics-swiper {
			height: 220rpx;  
			box-sizing: border-box;
		}

		.hot-topics-list {
			padding: 0 26rpx; 
			padding-bottom: 0;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			min-height: 220rpx;
		}

		.topic-item {
			display: flex;
			align-items: center;
			padding: 10rpx 0;
			justify-content: space-between;
			width: 100%;
			min-height: 50rpx;
			margin-bottom: 10rpx;
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
			
			&:active {
				transform: scale(0.98); 
			}
			
			&:last-child {
				margin-bottom: 0;
			}
			.hot-topics-left{
				display: flex;
				transition: all 0.3s ease;
				.topic-index{
					width: 30rpx;
					height: 30rpx;
					font-weight: 700;
					font-size: 24rpx;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					border-radius: 5rpx;
					margin-right: 18rpx; 
					background: #CECECE;
					transition: all 0.3s ease;
					&.topic-index-img{
						background: transparent;
						color: transparent;
						width: 36rpx;
						height: 36rpx;
						position: relative;
						left: -2rpx;
						top: 0;
					}
				} 
				.topic-content{
					font-size: 24rpx; 
					max-width: 330rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					transition: all 0.3s ease;
				}
			}
			.topic-participants{
				font-size: 20rpx;
				color: #999;
				transition: all 0.3s ease;
			}
			.hot-tag {
				width: 46rpx;
				height: 22rpx;
				margin: auto;
				margin-left: 10rpx;
				transition: all 0.3s ease;
			}
		}

		.indicator-dots {
			display: flex;
			justify-content: center;
			margin-top: 20rpx;

			.dot {
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				background: #ffffff;
				margin: 0 6rpx;

				&.active {
					background: #808080;
				}
			}
		}
	}

	.follow-list {
		padding: 20rpx;
		background: #fff;
		margin: 0rpx;
		border-radius: 0rpx;

		.works-list {
			display: flex;
			flex-wrap: wrap;
			padding: 10rpx;

			.work-item {
				width: 48%;
				margin: 1%;
				margin-bottom: 20rpx;

				.work-image {
					width: 100%;
					aspect-ratio: 1;
					border-radius: 12rpx;
				}

				.work-title {
					font-size: 28rpx;
					color: #ffffff;
					margin-top: 10rpx;
					padding: 0 10rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

		.no-data {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 60rpx 0;
			background-color: #fff;
			text {
				color: #808080;
				font-size: 28rpx;
			}
		}
	}

	.no-data {
		text-align: center;
		padding: 40rpx 0;
		color: #808080;
		font-size: 28rpx;
	}

	.news-list {
		padding: 20rpx;
		background: #fff;

		.news-grid {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.news-item {
				width: 48%;
				margin-bottom: 30rpx;
				background: #28292D;
				border-radius: 12rpx;
				overflow: hidden;

				.news-image {
					width: 100%;
					aspect-ratio: 1;
					height: auto;
					border-radius: 12rpx 12rpx 0 0;
				}

				.news-title {
					font-size: 28rpx;
					color: #ffffff;
					padding: 15rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					height: 60rpx;
					line-height: 60rpx;
				}

				.news-footer {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 15rpx 15rpx;

					.news-author {
						font-size: 24rpx;
						color: #808080;
						max-width: 60%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.news-views {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #808080;

						.view-icon {
							width: 26rpx;
							height: 18rpx;
							margin-right: 6rpx;
						}
					}
				}
			}
		}
	}

	.float-btn {
		position: fixed;
		right: 30rpx;
		bottom: 145rpx;
		width: 120rpx;
		height: 120rpx; 
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center; 
		z-index: 999;

		.float-btn-icon {
			width: 100%;
			height: 100%;
		}
	}

	.blankHeight {
		// width: 500rpx;
		// height: 500rpx;
		width: 100%;
		height: 144rpx;
	}
	.benner-box{
		box-sizing: border-box;
		padding:  20rpx; 
		background: #fff;	
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		::v-deep.uv-swiper{
			border-radius: 20rpx !important;
			overflow: hidden;
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
			
			&:active {
				transform: scale(0.98); 
			}
		}
		.classModel{
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			left: 0;
			right: 0;
			.benner-iconBom{
				height: 18rpx;
				width: 50rpx;
				position: absolute;
				top: calc(55% + 18rpx);
				left: 50%;
				transform: translateX(-50%);
				z-index: 99;
			}
			.benner-icontop{
				width: 45rpx;
				height: 20rpx;
				position: absolute;
				top: 55%;
				left: 50%;
				transform: translateX(-50%);
			
			}
			.benner-box{
				height: 256rpx;
				width: 344rpx;
				position: relative;
			}
	
			.benner-left-box{
				background:url("../../static/home/benner-left.-bg.png") center/100% 99%  no-repeat;
			.text1{
				color: rgba(255,255,255, 0.8);
				color: 28rpx;
				position: absolute;
				left: 26rpx;
				top: 88rpx;
				
			}
			.btn{
				font-size: 24rpx;
				background: #1F1F1F;
				color: #ACF934 ;
				display: inline-block;
				border-radius: 390rpx;
				padding: 8rpx 24rpx;
				padding-bottom: 10rpx;
				position: absolute;
				bottom: 38rpx;
				left: 26rpx;
			}
			}
			.benner-right-box{
				background:url("../../static/home/benner-right-bg.png") center/100% 99%  no-repeat;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				align-items: center; 
				height: 256rpx;
				.text{
					color: #999;
					font-size: 20rpx;
					position: absolute;
					top: 56rpx;
					left: 26rpx; 	
				}
				.guard{
					position: relative;
					left: 0;
					top: 0;
					width: 312rpx;
					height: 104rpx;
					background: url("../../static/home/benner-right-btnTop.png") center/100%   no-repeat;
					margin-bottom: 10rpx;
				}
				.match{
					position: relative;
					left: 0;
					top: 0;
					width: 312rpx;
					height: 104rpx;
					background: url("../../static/home/benner-right-btnBom.png") center/100%   no-repeat;
				}
			}
			}
		}
		.waterfall-list-container{
			background: #fff;
		}
		.navCenter{
			.topBox{
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}
		}
		.lhSelectCity{
			background-color: #fff; 
			position: fixed;
			left: 0;
			right: 0;
			width: 100%;
			height: 100vh;
			padding: 0 25rpx;
			padding-top:  var(--status-bar-height);
				
;
		}