fix

src/component/Pay/creditsDetail.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="creditsDetail_page">
-		<div class="creditsDetail_table_search">
-			<div class="creditsDetail_state">
-				<div class="creditsDetail_state_item">
+    <div class="creditsDetail_page generalModel_page">
+		<div class="generalModel_table_search">
+			<div class="generalModel_state">
+				<div class="generalModel_state_item">
 					<span>Time:</span>
 						<a-range-picker
 						class="range_picker"
@@ -20,16 +20,16 @@
 						</template>
 					</a-range-picker>
 				</div>
-				<div class="creditsDetail_state_item">
+				<div class="generalModel_state_item">
 					<span>State:</span>
 					<a-select v-model:value="currentState.value" style="width:25rem" size="large" optionFilterProp="label" :options="state" placeholder="Please select" allowClear show-search></a-select>
 				</div>
 			</div>
 
 			
-			<div class="creditsDetail_search">
+			<div class="generalModel_search">
 				<div
-					class="creditsDetail_search_item"
+					class="generalModel_search_item"
 					@click="searchcreditsDetailList()"
 				>
 					<span
@@ -38,7 +38,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="creditsDetail_table_content" ref="historyTable">
+		<div class="generalModel_table_content" ref="historyTable">
 			<a-table
 				:columns="columns"
 				:data-source="collectionList"
@@ -227,158 +227,7 @@ export default defineComponent({
 </script>
 <style lang="less">
 .creditsDetail_page {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    // min-width: 1440px;
-    position: relative;
-	display: flex;
-	flex-direction: column;
-	.creditsDetail_table_search {
-		display: flex;
-		margin-top: 2rem;
-		padding: 2rem 3.5rem 5rem 2.8rem;
-		background: #fff;
-		display: flex;
-		justify-content: flex-start;
-		align-items: center;
-		
-		.creditsDetail_search{
-			width: 20%;
-			.creditsDetail_search_item{
-				background: #343579;
-				border-color: #343579;
-				height: 4rem;
-				padding: .64rem 1.5rem;
-				font-size: 1.6rem;
-				border-radius: 2px;
-				display: inline-block;
-				color: #fff;
-				cursor: pointer;
-			}
-		}
-		.creditsDetail_state {
-			position: relative;
-			display: flex;
-			align-items: center;
-			cursor: pointer;
-			width: 80%;
-			.creditsDetail_state_item{
-				display: flex;
-				align-items: center;
-				margin-right: 5rem;
-				>span{
-					font-size: 2rem;
-					font-weight: 400;
-					color: #030303;
-					margin-right: 15px;
-					flex-shrink: 0;
-					display: block;
-					min-width: 5rem;
-					text-align: left;
-				}
-				.ant-picker-range{
-					height: 5rem;
-				}
-				.ant-select-lg{
-					font-size: 14px;
-					.ant-select-selector{
-						height: 5rem;
-						.ant-select-selection-item{
-							line-height: 5rem;
-						}
-						input{
-							line-height: 5rem;
-							height: 5rem;
-						}
-					}
-				}
-			}
-			.creditsDetail_current{
-				background: #fff;
-				width: 100%;
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-			}
-			.header_user_content {
-				position: absolute;
-				border: 2px solid;
-				border-radius: 1rem;
-				overflow: hidden;
-				top: 0;
-				transform: translateY(6rem);
-				z-index: 2;
-				display: none;
-				margin-left: -2rem;
-				.username{
-					padding: 0 2rem;
-					color: #000;
-				}
-				.username:hover{
-					background: #e1e1e1;
-				}
-				&.active{
-					display: block;
-				}
-			}
-		}
-	}
-
-	.creditsDetail_table_content {
-		width: 100%;
-		// height: 100%;
-		flex: 1;
-		padding-bottom: 3rem;
-		background: #fff;
-		border-radius: 2rem;
-		overflow: hidden;
-		.ant-table {
-			background: transparent;
-		}
-
-		.ant-table-body {
-			overflow-y: auto !important;
-			-ms-overflow-style: none;
-			overflow: -moz-scrollbars-none;
-
-			&::-webkit-scrollbar {
-				width: 0 !important;
-			}
-		}
-		.ant-table-thead > tr > th {
-			background: #ffffff00;
-			border-bottom: none;
-			backdrop-filter: blur(1rem);
-		}
-
-		.ant-table-tbody > tr > td {
-			border: none;
-			background: transparent;
-			// color: #fff;
-		}
-		.ant-table-tbody > tr {
-			&:hover > td {
-				background: #ffffff3a;
-			}
-		}
-		.ant-table-pagination-right {
-			padding-right: 3.5rem;
-		}
-		.operate_list {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			padding: 0 1rem;
-
-			.operate_item {
-				font-size: 1.4rem;
-				font-family: Roboto;
-				font-weight: 400;
-				color: #343579;
-				cursor: pointer;
-			}
-		}
-	}
+	padding: 0 !important;
+	flex: 1;
 }
 </style>