fix EventRecordList.vue style

src/pages/event/EventRecordList.vue

@@ -1,43 +1,45 @@
 <template>
 	<div v-can="permissionCodes.eventRecord.read" class="registration-record-list">
 		<div class="search-bar">
-			<t-input
-				v-model.trim="keyword"
-				class="search-input"
-				type="search"
-				borderless
-				placeholder="搜索客户、姓名拼音、编码、事件、备注、登记人"
-			/>
-			<div class="filter-line">
-				<t-dropdown-menu class="filter-menu">
+			<div class="search-status">
+				<t-input
+					v-model.trim="keyword"
+					class="search-input"
+					type="search"
+					borderless
+					placeholder="搜索客户、姓名拼音、编码、事件、备注、登记人"
+				/>
+				<t-dropdown-menu class="date-filter">
 					<t-dropdown-item
 						v-model="dateFilterType"
 						:label="dateFilterLabel"
 						:options="dateOptions"
 						@change="selectDateFilter"
 					/>
-					<t-dropdown-item
-						v-model="actionFilter"
-						:label="eventFilterLabel"
-						options-columns="2"
-						:options="actionOptions"
-						multiple
-					/>
-					<t-dropdown-item
-						v-model="verificationFilter"
-						:label="verificationFilterLabel"
-						:options="verificationOptions"
-					/>
-					<t-dropdown-item
-						v-if="optionFilterOptions.length"
-						v-model="optionFilter"
-						:label="optionFilterLabel"
-						options-columns="2"
-						:options="optionFilterOptions"
-						multiple
-					/>
 				</t-dropdown-menu>
 			</div>
+			<t-dropdown-menu class="filter-menu">
+				<t-dropdown-item
+					v-model="actionFilter"
+					:label="eventFilterLabel"
+					options-columns="2"
+					:options="actionOptions"
+					multiple
+				/>
+				<t-dropdown-item
+					v-model="verificationFilter"
+					:label="verificationFilterLabel"
+					:options="verificationOptions"
+				/>
+				<t-dropdown-item
+					v-model="optionFilter"
+					:label="optionFilterLabel"
+					:disabled="!optionFilterOptions.length"
+					options-columns="2"
+					:options="optionFilterOptions"
+					multiple
+				/>
+			</t-dropdown-menu>
 		</div>
 		<t-pull-down-refresh
 			v-model="isRefreshing"
@@ -717,13 +719,34 @@ onUnmounted(() => {
 		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
-		.search-input {
-			--td-input-vertical-padding: 8px 14px;
+		.search-status {
+			display: flex;
 
-			border: 1px solid rgba(148, 163, 184, .28);
-			z-index: 1;
-			background: #f8fbff;
-			border-radius: 1rem;
+			.search-input {
+				--td-input-vertical-padding: .25rem 1rem;
+
+				flex: 1;
+				border: 1px solid rgba(148, 163, 184, .28);
+				z-index: 2;
+				background: #f8fbff;
+				border-radius: 1rem;
+			}
+
+			.date-filter {
+				--td-spacer: 4px;
+				--td-spacer-1: 6px;
+
+				border: 1px solid rgba(148, 163, 184, .18);
+				z-index: 1;
+				margin-left: -2.5rem;
+				padding-left: 3rem;
+				padding-right: .7rem;
+				border-radius: 1rem;
+
+				&:after {
+					display: none;
+				}
+			}
 		}
 
 		.filter-menu {
@@ -735,6 +758,7 @@ onUnmounted(() => {
 			padding-top: .8rem;
 			background: #fff;
 			border: 1px solid rgba(148, 163, 184, .18);
+			border-top: none;
 			border-radius: 0 0 1rem 1rem;
 
 			&:after {
@@ -795,6 +819,7 @@ onUnmounted(() => {
 				border-color: rgba(148, 163, 184, .16);
 			}
 
+			.date-filter,
 			.filter-menu {
 				background: #172033;
 				border-color: rgba(148, 163, 184, .16);