subject_gxj/xj_project_app/static/scss/customization.scss

	
	
	@font-face {
		font-family: OPPOSans-R ;
		src: url('@/font/OPPOSans-R-2.ttf');
	}
	@font-face {
		font-family: OPPOSans-M ;
		src: url('@/font/OPPOSans-M-2.ttf');
	}
	page {
		height: 100%;
		background-color: #F4F8FF;
		font-family: OPPOSans-R;
	}
	
	.container {
		position: relative;
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, #1763E7 0%, #DCE9FF 56%, #F4F8FF 100%);
	}
	
	.cards-list {
		position: absolute;
		top: 100px;
		left: 4%;
		width: 92%;
		height: 86%;
	}

	.card {
		position: relative;
		width: 100%;
		min-height: 200rpx;
		margin-bottom: 32rpx;
		padding: 0 40rpx 40rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 40rpx;
		overflow: hidden;
		
		.special-item {
			width: 100%;
			min-height: 136rpx;
			padding: 0 34rpx;
			background: linear-gradient(112deg, #113EF0 0%, #8C49FF 100%, #E7F0FF 100%);
			box-shadow: 0rpx -36rpx 44rpx -34rpx rgba(0, 25, 121, 0.3);
			border-radius: 24rpx;
		
			.card-name-text {
				color: #fff !important;
			}
		
			.card-name-description {
				color: #fff !important;
			}
		}
			
		.card-name {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			width: 100%;
			min-height: 84rpx;
			padding: 10rpx 0;
			border-bottom: 2rpx solid #D8D8D8;
		}
		
		.card-name-title {
			display: flex;
			align-items: center;
			
			.card-name-description {
				min-width: 160rpx;
				font-size: 36rpx;
				font-weight: 400;
				color: #9E9E9E;
			}
		}
				
		.card-name-text {
			font-size: 36rpx;
			font-weight: 500;
			color: #343437;
			word-break: break-all;
		}
		
		.card-item{
			display: flex;
			justify-content: space-between;
			align-items:flex-start;
			position: relative;
			margin-top: 25rpx;
			
			.card-item-name {
				min-width: 160rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #9E9E9E;
			}
			
			.card-item-content {
				font-size: 32rpx;
				font-weight: 400;
				color: #343437;
				word-break: break-all;
			}
			
			.card-item-description {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				color: #343437;
			}
			
			.remind-text{
				color:#D8D8D8;
			}
			
			.card-item-input {
				margin: auto 0;
				text-align: right;
				font-size: 32rpx;
				color: #343437;
			}
			
			.center-input{
				text-align: center;
			}
			
			.card-item-textarea {
				width: 100%;
				height: 168rpx;
				padding: 20rpx;
				box-sizing: border-box;
				background: #EAF0FA;
				border-radius: 20rpx;
			}
			
			.card-item-unit{
				min-width: 64rpx;
				margin:auto 0 auto 15rpx;
				font-size: 32rpx;
				line-height: 32rpx;
				color: #343437;	 
			}
	
			.can-click{
				color: #1869F6;
				font-weight: 700
			}
		
			.card-item-range{
				display:flex;
			}
		
			.card-item-announcement{
				color:#343437;
				font-size: 36rpx;
				overflow:hidden;
				text-overflow:ellipsis;
				white-space:nowrap;
			}
			
			.card-item-announcement-detail{
				color:#343437;
				font-size: 36rpx;
			}
			
			.card-item-announcement-content{
				color:#9E9E9E;
				font-size: 32rpx;
			}
		}
		
		.first-card-item {
			margin: 0;
		}
			
		.card-btn {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 45%;
			height: 66rpx;
			text-align: center;
			color: #fff;
			font-size: 32rpx;
			background: #1869F6;
			border-radius: 16rpx;
		}
		
		.thin-btn{
			width: 32.5%;
		}
		
		.fat-btn{
			width: 100%;
		}
		
		.empty-btn {
			color: #1869F6;
			border: 2rpx solid #1869F6;
			background: #fff;
		}
				
		.text-btn {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			width: 22.5%;
			color: #1869F6;
			border: 2rpx solid #fff;
			background: #fff;
				
			image {
				margin-right: 26rpx;
				width: 36rpx;
				height: 40rpx;
			}
		}
	
		.report-btn{
			color:#1869F6;
			background-color:#E2ECFF;	
				font-size: 24rpx;
		}
	
		.card-icon{
			position:absolute;
			top: 15rpx;
			right: 30rpx;
			width:182rpx;
			height:182rpx;
			background: url("@/static/inputed.png");
			background-size: 100% 100%;
			transform: rotate(30deg);
			opacity:0.3;
		}
		
		.no-input{
			background: url("@/static/notInput.png");
			background-size: 100% 100%;
		}
		
		.question-closed{
			background: url("@/static/question-closed.png");
			background-size: 100% 100%;
		}
		
		.question-not-close{
			background: url("@/static/question-notClose.png");
			background-size: 100% 100%;
		}
	}
	
	.only-card{
		padding: 40rpx;
	}
	
	.confirm-btn{
		width: 100%;
		height: 84rpx;
		margin-top: 50rpx;
		line-height: 84rpx;
		font-size: 36rpx;
		color: #fff;
		text-align: center;
		background: #1869F6;
		border-radius: 16rpx;
	}
	
	.ban-submit{
		background:#9acafc;
	}
	
	.upload-file-area{
		width: 100%;
		min-height:160rpx;
		font-size: 32rpx;
		color:#343437;
		
		.upload-file-name{
			margin-bottom: 20rpx;
		  word-break:break-all
		}
	}
	
	.gap-bottom{
		width: 100%;
		height: 60rpx;
	}
	
	.card-fold-option {
		position: absolute;
		display: flex;
		justify-content: space-between;
		align-items: center;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 38rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		background: linear-gradient(270deg, #CADDFF 4%, rgba(219, 232, 255, 0) 100%);
		z-index: 999;
		
		.card-fold-count {
			flex: 1;
			font-size: 28rpx;
			color: #1869F6;
		}
	
		.card-fold-center {
			flex: 1;
	
			.card-fold-btn {
				width: 32rpx;
				height: 20rpx;
				margin: 0 auto;
				background-image: url("@/static/icon-fold.png");
				background-size: 100% 100%;
			}
	
			.card-unfold-btn {
				transform: rotate(180deg);
			}
		}
	
		.card-fold-chaos {
			flex: 1;
		}
	}
	
	.order-by {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 106rpx;
			margin-bottom: 34rpx;
			padding: 0 40rpx;
			border-radius: 40rpx;
			background: #FFF;
	
			.order-by-item {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				color: #343437;
	
				.order-by-icon {
					width: 22rpx;
					height: 46rpx;
					margin-left: 24rpx;
					background-image: url("@/static/orderBy-none.png");
					background-size: 100% 100%;
				}
	
				.desc {
					background-image: url("@/static/orderBy-desc.png");
				}
	
				.asc {
					background-image: url("@/static/orderBy-asc.png");
				}
			}
		}
	// 以下为单项设置
	.flex{
		display: flex;
	}
	
	.flex-align-start{
		align-items: flex-start;
	}