MoeNovaClient/pages/index/index.scss

 

	@font-face {
	    font-family: 'CustomFont';
	    src: url('@/static/fonts/alibaba.otf') format('opentype');
	    font-weight: normal;
	    font-style: normal;
	}
	.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;
			.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;
			}
			&.active {  
				background: #ACF934;
				font-family: "CustomFont" !important;
				.indicator-triangle {
					display: block; 
				}
			}
		}
	}

	.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: 22rpx 26rpx; 
			padding-bottom: 0;
				 
		}

		.topic-item {
			 
			display: flex;
			align-items: center;
			padding: 5rpx 0;
			justify-content: space-between;
			.hot-topics-left{
				display: flex;
				.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;
					&.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;
				}
			}
				.topic-participants{
					font-size: 20rpx;
					color: #999;
				}
		.hot-tag {
			 width: 46rpx;
			 height: 22rpx;
			margin: auto;
			margin-left: 10rpx;
		}
		}

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

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

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

	.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: 20rpx;
		border-top-right-radius: 20rpx;
		::v-deep.uv-swiper{
			border-radius: 10rpx !important;
			overflow: hidden;
		}
		.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);
				
;
		}