查询条件卡片重构：标题栏移除，设备号与输入框左对齐，抵扣状态与查询按钮右置，布局更紧凑高效

```json
{
"summary": "查询条件卡片重构：去掉标题栏；设备号标签与输入框同行左对齐，抵扣状态与查询按钮同行右置，整体更紧凑高效。",
"widget": {
"type": "full-html",
"html": "<template>\n <view class=\"deduction-record\">\n <scroll-view class=\"deduction-record__body\" scroll-y>\n <!-- 查询条件卡片（无标题版） -->\n <view class=\"search-card\">\n <!-- 设备号：标签 + 输入框 一行 -->\n <view class=\"search-card__row search-card__row--device\">\n <view class=\"row-label\">\n <image src=\"/static/icons/barcode.svg\" class=\"icon icon--label\" />\n <text class=\"row-label__text\">设备号</text>\n </view>\n <view class=\"row-input-wrap\">\n <input\n class=\"row-input\"\n v-model=\"queryForm.deviceNo\"\n type=\"text\"\n maxlength=\"64\"\n placeholder=\"请输入设备机身号\"\n placeholder-class=\"input-placeholder\"\n @input=\"onDeviceNoInput\"\n />\n <view\n class=\"row-input__clear\"\n v-if=\"queryForm.deviceNo.length > 0\"\n @click=\"queryForm.deviceNo = ''\"\n >\n <image src=\"/static/icons/xmark.svg\" class=\"icon icon--clear\" />\n </view>\n </view>\n </view>\n\n <!-- 抵扣状态 + 查询按钮 一行 -->\n <view class=\"search-card__row search-card__row--action\">\n <view class=\"row-picker\">\n <view class=\"row-picker__label-wrap\">\n <image src=\"/static/icons/list-dropdown.svg\" class=\"icon icon--label\" />\n <text class=\"row-picker__label\">状态</text>\n </view>\n <picker\n mode=\"selector\"\n :range=\"statusOptions\"\n :value=\"queryForm.statusIndex\"\n @change=\"onStatusChange\"\n >\n <view class=\"row-picker__box\">\n <text class=\"row-picker__text\" :class=\"{ 'is-active': queryForm.statusIndex > 0 }\">\n {{ statusOptions[queryForm.statusIndex] }}\n </text>\n <image src=\"/static/icons/angle-down.svg\" class=\"icon icon--arrow\" />\n </view>\n </picker>\n </view>\n\n <button class=\"row-btn\" @click=\"onQuery\">\n <image src=\"/static/icons/magnifying-glass.svg\" class=\"icon icon--btn\" />\n <text>查询</text>\n </button>\n </view>\n </view>\n\n <!-- 统计信息 -->\n <view class=\"stat-bar\">\n <text class=\"stat-bar__text\">共 <text class=\"stat-bar__num\">{{ filteredList.length }}</text> 条抵扣记录</text>\n </view>\n\n <!-- 列表结果 -->\n <view class=\"list-section\" v-if=\"filteredList.length > 0\">\n <view\n class=\"record-card\"\n v-for=\"(item, index) in filteredList\"\n :key=\"index\"\n >\n <!-- 设备号 + 复制 -->\n <view class=\"record-card__device\">\n <view class=\"device__left\">\n <image src=\"/static/icons/qrcode.svg\" class=\"icon icon--device\" />\n <text class=\"device__number\">{{ item.deviceNo }}</text>\n </view>\n <view class=\"device__copy\" @click=\"onCopy(item.deviceNo)\">\n <image src=\"/static/icons/copy.svg\" class=\"icon icon--copy\" />\n <text class=\"device__copy-text\">复制</text>\n </view>\n </view>\n\n <!-- 分割线 -->\n <view class=\"record-card__divider\"></view>\n\n <!-- 平台 -->\n <view class=\"record-card__row\">\n <view class=\"row__left\">\n <image src=\"/static/icons/store.svg\" class=\"icon icon--row\" />\n <text class=\"row__label\">平台</text>\n </view>\n <text class=\"row__value\">{{ item.platform }}</text>\n </view>\n\n <!-- 抵扣状态 -->\n <view class=\"record-card__row\">\n <view class=\"row__left\">\n <image src=\"/static/icons/circle-info.svg\" class=\"icon icon--row\" />\n <text class=\"row__label\">抵扣状态</text>\n </view>\n <view class=\"row__status\" :class=\"'status--' + item.statusKey\">\n <image\n :src=\"'/static/icons/' + item.statusIcon + '.svg'\"\n class=\"icon icon--status\"\n />\n <text class=\"status__text\">{{ item.statusText }}</text>\n </view>\n </view>\n\n <!-- 抵扣时间 -->\n <view class=\"record-card__row\">\n <view class=\"row__left\">\n <image src=\"/static/icons/clock.svg\" class=\"icon icon--row\" />\n <text class=\"row__label\">抵扣时间</text>\n </view>\n <text class=\"row__value row__value--time\">{{ item.deductionTime }}</text>\n </view>\n\n <!-- 抵扣金额 -->\n <view class=\"record-card__row\">\n <view class=\"row__left\">\n <image src=\"/static/icons/coins.svg\" class=\"icon icon--row\" />\n <text class=\"row__label\">抵扣金额</text>\n </view>\n <text class=\"row__value row__value--amount\">¥{{ item.amount }}</text>\n </view>\n\n <!-- 商户号 -->\n <view class=\"record-card__row record-card__row--last\">\n <view class=\"row__left\">\n <image src=\"/static/icons/building.svg\" class=\"icon icon--row\" />\n <text class=\"row__label\">商户号</text>\n </view>\n <text class=\"row__value row__value--merchant\">{{ item.merchantNo }}</text>\n </view>\n\n <!-- 更多按钮 -->\n <view class=\"record-card__more\" @click=\"onGoDetail(item)\">\n <text class=\"more__text\">查看更多</text>\n <image src=\"/static/icons/angle-right.svg\" class=\"icon icon--more\" />\n </view>\n </view>\n </view>\n\n <!-- 空状态 -->\n <view class=\"empty-state\" v-else>\n <view class=\"empty-state__icon-wrap\">\n <image src=\"/static/icons/box-open.svg\" class=\"icon icon--empty\" />\n </view>\n <text class=\"empty-state__title\">暂无抵扣记录</text>\n <text class=\"empty-state__desc\">请调整查询条件后重新搜索</text>\n </view>\n\n <view class=\"deduction-record__footer\"></view>\n </scroll-view>\n </view>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n queryForm: {\n deviceNo: '',\n statusIndex: 0\n },\n statusOptions: ['所有状态', '等待扣除', '已扣除', '已取消', '已撤销扣除'],\n recordList: [\n {\n deviceNo: 'SN2024A78001',\n platform: '微信支付',\n statusKey: 'pending',\n statusIcon: 'clock',\n statusText: '等待扣除',\n deductionTime: '2024-12-18 14:30',\n amount: '1280.50',\n merchantNo: 'M20241218001'\n },\n {\n deviceNo: 'SN2024B89002',\n platform: '支付宝',\n statusKey: 'completed',\n statusIcon: 'circle-check',\n statusText: '已扣除',\n deductionTime: '2024-12-20 09:15',\n amount: '3560.00',\n merchantNo: 'M20241220002'\n },\n {\n deviceNo: 'SN2024C67003',\n platform: '银联商务',\n statusKey: 'cancelled',\n statusIcon: 'circle-xmark',\n statusText: '已取消',\n deductionTime: '2024-12-22 16:45',\n amount: '890.32',\n merchantNo: 'M20241222003'\n },\n {\n deviceNo: 'SN2024D56004',\n platform: '微信支付',\n statusKey: 'revoked',\n statusIcon: 'rotate-left',\n statusText: '已撤销扣除',\n deductionTime: '2024-12-25 11:20',\n amount: '2450.78',\n merchantNo: 'M20241225004'\n },\n {\n deviceNo: 'SN2024E34005',\n platform: '拉卡拉',\n statusKey: 'pending',\n statusIcon: 'clock',\n statusText: '等待扣除',\n deductionTime: '2024-12-28 08:00',\n amount: '5120.66',\n merchantNo: 'M20241228005'\n }\n ]\n }\n },\n computed: {\n filteredList() {\n let list = [...this.recordList]\n const deviceNo = this.queryForm.deviceNo.trim().toUpperCase()\n if (deviceNo) {\n list = list.filter(item =>\n item.deviceNo.toUpperCase().includes(deviceNo)\n )\n }\n const idx = parseInt(this.queryForm.statusIndex)\n if (idx > 0) {\n const keyMap = ['', 'pending', 'completed', 'cancelled', 'revoked']\n list = list.filter(item => item.statusKey === keyMap[idx])\n }\n return list\n }\n },\n methods: {\n onDeviceNoInput(e) {\n let val = e.detail.value\n val = val.replace(/[^a-zA-Z0-9]/g, '')\n this.queryForm.deviceNo = val\n },\n onStatusChange(e) {\n this.queryForm.statusIndex = parseInt(e.detail.value)\n },\n onQuery() {\n uni.showToast({\n title: `查询完成，共 ${this.filteredList.length} 条记录`,\n icon: 'none',\n duration: 2000\n })\n },\n onCopy(deviceNo) {\n uni.setClipboardData({\n data: deviceNo,\n success: () => {\n uni.showToast({\n title: '设备号已复制',\n icon: 'success',\n duration: 1500\n })\n },\n fail: () => {\n uni.showToast({\n title: '复制失败',\n icon: 'none',\n duration: 1500\n })\n }\n })\n },\n onGoDetail(item) {\n uni.navigateTo({\n url: `/pages/deduction-detail/deduction-detail?deviceNo=${item.deviceNo}&merchantNo=${item.merchantNo}`\n })\n }\n }\n}\n</script>\n\n<style lang=\"scss\">\n// ============================================\n// 设计系统变量\n// ============================================\n$color-primary: #FF5A1F;\n$color-primary-dark: #E04A0E;\n$color-primary-light: #FF7A4A;\n$color-primary-gradient: linear-gradient(135deg, #FF5A1F 0%, #FF8C00 100%);\n$color-secondary: #FF8C00;\n$color-accent-blue: #2196F3;\n$color-accent-green: #4CAF50;\n$color-accent-red: #F44336;\n\n$color-bg: #FFF5F0;\n$color-card: #FFFFFF;\n$color-text: #2D1B14;\n$color-text-secondary: #8C7A72;\n$color-text-muted: #B8A8A0;\n\n$color-shadow: rgba(255, 90, 31, 0.10);\n\n$radius-sm: 8rpx;\n$radius-md: 14rpx;\n$radius-lg: 20rpx;\n$radius-xl: 24rpx;\n\n// ============================================\n// 全局样式\n// ============================================\npage {\n background-color: $color-bg;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;\n color: $color-text;\n}\n\n// ============================================\n// 图标基础\n// ============================================\n.icon {\n width: 28rpx;\n height: 28rpx;\n display: inline-block;\n vertical-align: middle;\n flex-shrink: 0;\n\n &--label {\n width: 24rpx;\n height: 24rpx;\n margin-right: 4rpx;\n opacity: 0.7;\n }\n &--arrow {\n width: 24rpx;\n height: 24rpx;\n transition: transform 0.3s ease;\n }\n &--btn {\n width: 28rpx;\n height: 28rpx;\n margin-right: 4rpx;\n filter: brightness(0) invert(1);\n }\n &--clear {\n width: 24rpx;\n height: 24rpx;\n opacity: 0.4;\n }\n &--device {\n width: 28rpx;\n height: 28rpx;\n margin-right: 6rpx;\n }\n &--copy {\n width: 22rpx;\n height: 22rpx;\n margin-right: 3rpx;\n }\n &--row {\n width: 24rpx;\n height: 24rpx;\n margin-right: 6rpx;\n opacity: 0.55;\n }\n &--status {\n width: 24rpx;\n height: 24rpx;\n margin-right: 4rpx;\n }\n &--more {\n width: 24rpx;\n height: 24rpx;\n margin-left: 4rpx;\n opacity: 0.6;\n transition: transform 0.3s ease;\n }\n &--empty {\n width: 100rpx;\n height: 100rpx;\n opacity: 0.25;\n }\n}\n\n.input-placeholder {\n color: #C8B8B0;\n font-size: 24rpx;\n}\n\n// ============================================\n// 页面容器\n// ============================================\n.deduction-record {\n display: flex;\n flex-direction: column;\n height: 100vh;\n overflow: hidden;\n\n &__body {\n flex: 1;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n padding: 0 20rpx;\n }\n\n &__footer {\n height: 30rpx;\n }\n}\n\n// ============================================\n// 查询卡片（无标题、行布局）\n// ============================================\n.search-card {\n background: $color-card;\n border-radius: $radius-lg;\n padding: 18rpx 20rpx 18rpx;\n margin: 16rpx 0 12rpx;\n box-shadow: 0 6rpx 30rpx $color-shadow,\n 0 2rpx 6rpx rgba(0, 0, 0, 0.04);\n position: relative;\n overflow: hidden;\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3rpx;\n background: $color-primary-gradient;\n }\n\n // 行容器\n &__row {\n display: flex;\n align-items: center;\n\n // 设备号行：标签 + 输入框\n &--device {\n margin-bottom: 14rpx;\n gap: 10rpx;\n }\n\n // 操作行：状态选择器 + 查询按钮\n &--action {\n gap: 10rpx;\n }\n }\n}\n\n// 行内标签\n.row-label {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n width: 90rpx;\n\n &__text {\n font-size: 24rpx;\n font-weight: 500;\n color: $color-text-secondary;\n }\n}\n\n// 行内输入框容器\n.row-input-wrap {\n display: flex;\n align-items: center;\n flex: 1;\n background: #FFF8F5;\n border: 2rpx solid #FFE8DC;\n border-radius: $radius-md;\n padding: 0 14rpx;\n height: 60rpx;\n transition: all 0.3s ease;\n\n &:focus-within {\n border-color: $color-primary;\n background: #FFFBF8;\n box-shadow: 0 0 0 3rpx rgba(255, 90, 31, 0.08);\n }\n}\n\n.row-input {\n flex: 1;\n height: 60rpx;\n font-size: 26rpx;\n color: $color-text;\n background: transparent;\n border: none;\n outline: none;\n\n &__clear {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 6rpx;\n }\n}\n\n// 行内状态选择器\n.row-picker {\n display: flex;\n align-items: center;\n gap: 6rpx;\n flex: 1;\n min-width: 0;\n\n &__label-wrap {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n width: 60rpx;\n }\n\n &__label {\n font-size: 24rpx;\n font-weight: 500;\n color: $color-text-secondary;\n }\n\n &__box {\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex: 1;\n background: #FFF8F5;\n border: 2rpx solid #FFE8DC;\n border-radius: $radius-md;\n padding: 0 14rpx;\n height: 60rpx;\n transition: all 0.3s ease;\n min-width: 0;\n\n &:active {\n border-color: $color-primary;\n background: #FFFBF8;\n }\n }\n\n &__text {\n font-size: 24rpx;\n color: #C8B8B0;\n transition: color 0.3s ease;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &.is-active {\n color: $color-text;\n font-weight: 500;\n }\n }\n}\n\n// 行内查询按钮\n.row-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 140rpx;\n height: 60rpx;\n background: $color-primary-gradient;\n border-radius: $radius-md;\n font-size: 26rpx;\n font-weight: 600;\n color: #FFFFFF;\n letter-spacing: 2rpx;\n border: none;\n outline: none;\n box-shadow: 0 3rpx 16rpx rgba(255, 90, 31, 0.28);\n transition: all 0.3s ease;\n padding: 0;\n\n &::after {\n display: none;\n }\n\n &:active {\n transform: scale(0.96);\n box-shadow: 0 2rpx 8rpx rgba(255, 90, 31, 0.18);\n opacity: 0.92;\n }\n}\n\n// ============================================\n// 统计条\n// ============================================\n.stat-bar {\n display: flex;\n align-items: center;\n padding: 8rpx 4rpx 4rpx;\n margin-bottom: 4rpx;\n\n &__text {\n font-size: 22rpx;\n color: $color-text-muted;\n letter-spacing: 0.5rpx;\n }\n\n &__num {\n color: $color-primary;\n font-weight: 700;\n font-size: 26rpx;\n }\n}\n\n// ============================================\n// 记录卡片（紧凑版）\n// ============================================\n.list-section {\n display: flex;\n flex-direction: column;\n gap: 16rpx;\n}\n\n.record-card {\n background: $color-card;\n border-radius: $radius-lg;\n padding: 18rpx 20rpx 0;\n box-shadow: 0 3rpx 16rpx rgba(0, 0, 0, 0.04),\n 0 1rpx 3rpx rgba(0, 0, 0, 0.02);\n position: relative;\n overflow: hidden;\n transition: all 0.3s ease;\n\n &:active {\n transform: scale(0.99);\n box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);\n }\n\n // 左侧彩色装饰条\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 4rpx;\n height: 100%;\n background: $color-primary-gradient;\n border-radius: 0 2rpx 2rpx 0;\n }\n\n // 设备号\n &__device {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 0 12rpx;\n }\n\n .device {\n &__left {\n display: flex;\n align-items: center;\n flex: 1;\n min-width: 0;\n }\n\n &__number {\n font-size: 26rpx;\n font-weight: 700;\n color: $color-text;\n letter-spacing: 0.5rpx;\n font-family: 'Courier New', Courier, monospace;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &__copy {\n display: flex;\n align-items: center;\n background: linear-gradient(135deg, #FFF0E8, #FFE8DC);\n border: 1rpx solid #FFD8C8;\n border-radius: $radius-sm;\n padding: 3rpx 10rpx;\n margin-left: 10rpx;\n flex-shrink: 0;\n transition: all 0.25s ease;\n\n &:active {\n background: $color-primary;\n border-color: $color-primary;\n\n .icon--copy {\n filter: brightness(0) invert(1);\n }\n\n .device__copy-text {\n color: #FFFFFF;\n }\n }\n }\n\n &__copy-text {\n font-size: 20rpx;\n color: $color-primary;\n font-weight: 500;\n transition: color 0.25s ease;\n }\n }\n\n // 分割线\n &__divider {\n height: 1rpx;\n background-color: #e5e5e5;\n margin-bottom: 2rpx;\n }\n\n // 数据行\n &__row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 9rpx 0;\n min-height: 42rpx;\n\n &--last {\n padding-bottom: 12rpx;\n }\n }\n\n .row {\n &__left {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n &__label {\n font-size: 24rpx;\n color: $color-text-muted;\n letter-spacing: 0.5rpx;\n }\n\n &__value {\n font-size: 24rpx;\n color: $color-text;\n font-weight: 500;\n text-align: right;\n max-width: 55%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &--time {\n color: $color-text-secondary;\n font-weight: 400;\n font-family: 'Courier New', Courier, monospace;\n font-size: 22rpx;\n }\n\n &--amount {\n font-size: 28rpx;\n font-weight: 700;\n color: $color-primary;\n }\n\n &--merchant {\n font-family: 'Courier New', Courier, monospace;\n font-size: 22rpx;\n color: $color-text-secondary;\n }\n }\n\n &__status {\n display: inline-flex;\n align-items: center;\n padding: 2rpx 10rpx;\n border-radius: 16rpx;\n font-size: 22rpx;\n font-weight: 500;\n\n &.status {\n &--pending {\n background: linear-gradient(135deg, #FFF3E0, #FFE0B2);\n color: #E65100;\n .icon--status {\n opacity: 0.8;\n }\n }\n &--completed {\n background: linear-gradient(135deg, #E8F5E9, #C8E6C9);\n color: #2E7D32;\n }\n &--cancelled {\n background: linear-gradient(135deg, #FFF3E0, #FFCCBC);\n color: #BF360C;\n }\n &--revoked {\n background: linear-gradient(135deg, #E3F2FD, #BBDEFB);\n color: #1565C0;\n }\n }\n }\n }\n\n // 更多按钮\n &__more {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 14rpx 0;\n border-top: 1rpx solid #FFF0E8;\n margin: 0 -20rpx;\n transition: all 0.3s ease;\n\n &:active {\n background: #FFF8F5;\n\n .more__text {\n color: $color-primary;\n }\n\n .icon--more {\n transform: translateX(4rpx);\n opacity: 1;\n }\n }\n }\n\n .more {\n &__text {\n font-size: 24rpx;\n color: $color-text-muted;\n font-weight: 500;\n transition: color 0.3s ease;\n }\n }\n}\n\n// ============================================\n// 空状态（紧凑）\n// ============================================\n.empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 80rpx 40rpx 60rpx;\n\n &__icon-wrap {\n width: 130rpx;\n height: 130rpx;\n border-radius: 50%;\n background: #FFF0E8;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 24rpx;\n }\n\n &__title {\n font-size: 28rpx;\n font-weight: 600;\n color: $color-text-secondary;\n margin-bottom: 8rpx;\n }\n\n &__desc {\n font-size: 24rpx;\n color: $color-text-muted;\n letter-spacing: 0.5rpx;\n }\n}\n</style>"
},
"next": [
"添加下拉刷新",
"分页加载更多",
"筛选结果计数动效",
"数据导出入口"
],
"breakpoint": "xs"
}
```