shuquAi/pages/tusk/index.scss

page {
		background: #f7f7f7;
		
		overflow-x: hidden;
	}
	
	::v-deep  .uni-load-more{
		bottom: 200rpx!important;
	}
.container {
		// margin-top: 25%;
		
		padding-bottom: 130rpx;
			.content{
				.top{
					width: 100%;
					padding: 50rpx 30rpx;
					background: #fff;
					.banner{
						height: 334rpx;
						border-radius: 30rpx;
						image{
							width: 100%;
							height: 100%;
							border-radius: 30rpx;
						}
					}
					
					.searchBox{
						margin-top: 50rpx;	
						height: 90rpx;
						position: relative;
						// background: #eee;
						
						.clear{
							position: absolute;
							right: -595rpx;
						}
						.search{
							position: absolute;
							z-index: 9;
							top: 50%;
							transform: translateY(-60%);
							left: 30rpx;
						}
					}
					.line{
						height: 5rpx;
						background: #f7f7f7;
						margin-top: 30rpx;
					}
					
				}
				.taskGrid{
					padding: 0 30rpx;
					background: #fff;
					.title{
						font-size: 36rpx;
						font-weight: 600;
					}
					ul,li{
						list-style: none;
						padding-left: 0;
						padding: 0 10rpx;
					}
					ul{
					display:flex;
					justify-content: space-between;
					margin-top: 30rpx;
					overflow-x: scroll;
						li{
							display: flex;
							flex-direction: column;
							align-items: center;
							image{
								width: 130rpx;
								height:130rpx;
								border-radius: 50%;
							}
							.des{
								font-size: 34rpx;
								margin-top: 20rpx;
								text-align: center;
								// text-align: left;
							}
						}
						
					}
				}
				.taskList{
					// background: #f7f7f7;
					padding: 0 30rpx;
					.ul{
						margin-top: 30rpx;
						.li{
							background: #fff;
							border-radius: 20rpx;
							display: flex;
							align-items: center;
							padding: 30rpx;
							margin-bottom: 30rpx;
							
							.leftPicBox{
								border-radius: 20rpx;
								flex-shrink: 0;
								margin-right: 20rpx;
								width: 200rpx;
								height: 200rpx;
								background: #eee;
								image{
									border-radius: 20rpx;
									width: 200rpx;
									height: 200rpx;
								}
							}
							
							.right{
								// width: 80%;
								.title{
									font-weight: 900;
									font-size: 34rpx;
								}
								.des2{
									width:440rpx;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}
								.mb30{
									margin-bottom: 10rpx;
								}
								
								.bottom{
									display: flex;
									align-items: center;
									margin-top: 20rpx;
									width: 445rpx;
									justify-content: space-between;
									.money{
										font-size: 36rpx;
										font-weight: 600;
										// margin-right: 60rpx;
									}
									.btn{
										background: #26B3A0;
										padding: 5rpx 15rpx;
										margin-right: 20rpx;
										border-radius:25rpx;
										font-weight: 500;
										color: #fff;
									}
									
								}
							}
						}
					}
				}			
			}	
	}
	
	
	
	
	
	
	.ct_tab{
		    padding: 30rpx;
		    font-size: 38upx;
		    // font-weight: bold;
		    color: #999;
		    display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 100rpx;
			height: 150rpx;
			// position: sticky;
			top: 80rpx;
			left: 0;
			background: #fff;
			z-index: 999;
		}
		.ct_item{
		    display: inline-block;
		}
		.ct_item text{
		    padding: 30upx 0;
		}
		.ct_active{
		    color:#26B3A0;
			font-weight: bold;
		}
		// .ct_active text{
		//     border-bottom: 2px solid #26B3A0;
		// }
		.record-list {
			background: #ffffff;
			margin: 30rpx;
			padding: 30rpx;
			border-radius: 20rpx;
			.record-title{
				font-size: 32rpx;
				margin-bottom: 10rpx;
			}
			.time{
				color: #9e9e9e;
			}
			.quantity{
				font-weight: bold;
				font-size: 34rpx;
			}
		}
		
		
		.yongjin{
			color: #666;
			font-size: 26rpx;
		}