zhangchao/Road_roller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 历史报告筛选条件页面

Browse Source
This commit is contained in:
Ironsp
2026-08-31 15:40:38 +08:00
parent 504411f532
commit 08da3b171a
1 changed files with 202 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
src/pages/report/index.vue
View File

@@ -2,15 +2,213 @@
definePage({
layout: false,
style: {
navigationBarTitleText: '报告',
navigationBarTitleText: '历史报告',
},
})
// const { value: name } = useQuery('name')
function handleSearch() {
console.log('查询')
}
</script>
<template>
<view>
<view>报告</view>
<view class="page">
<view class="filter-card">
<view class="filter-header">
<text class="filter-title">
筛选条件
</text>
</view>
<view class="filter-body">
<!-- 第一行 -->
<view class="filter-row">
<view class="filter-item">
<text class="filter-label">
作业日期
</text>
<view class="date-range">
<input class="date-input" placeholder="2020-2-21">
<text class="date-separator">
至
</text>
<input class="date-input" placeholder="请选择时间">
</view>
</view>
<view class="filter-item">
<text class="filter-label">
报告状态
</text>
<picker :range="['全部', '已完成', '进行中', '待审核']">
<view class="select-input">
<text class="select-text">
全部
</text>
<text class="select-arrow">
▼
</text>
</view>
</picker>
</view>
</view>
<!-- 第二行 -->
<view class="filter-row">
<view class="filter-item">
<text class="filter-label">
施工区域
</text>
<picker :range="['请选择']">
<view class="select-input">
<text class="select-placeholder">
请选择
</text>
<text class="select-arrow">
▼
</text>
</view>
</picker>
</view>
<view class="filter-item">
<text class="filter-label">
项目筛选
</text>
<picker :range="['请选择']">
<view class="select-input">
<text class="select-placeholder">
请选择
</text>
<text class="select-arrow">
▼
</text>
</view>
</picker>
</view>
</view>
</view>
<!-- 查询按钮 -->
<view class="filter-footer">
<button class="btn-query" @tap="handleSearch">
查询
</button>
</view>
</view>
</view>
</template>
<style scoped>
.page {
min-height: 100vh;
background-color: #EAEFF9;
padding: 12px;
}
.filter-card {
background-color: #ffffff;
border-radius: 12px;
padding: 16px;
margin-top: 12px;
}
.filter-header {
margin-bottom: 12px;
}
.filter-title {
font-size: 16px;
font-weight: bold;
color: #333333;
}
.filter-body {
display: flex;
flex-direction: column;
gap: 12px;
}
.filter-row {
display: flex;
gap: 12px;
}
.filter-item {
flex: 1;
display: flex;
align-items: center;
}
.filter-label {
font-size: 14px;
color: #333333;
width: 80px;
flex-shrink: 0;
}
.date-range {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
}
.date-input {
flex: 1;
height: 36px;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 0 12px;
font-size: 13px;
color: #333333;
}
.date-separator {
font-size: 13px;
color: #999999;
}
.select-input {
flex: 1;
height: 36px;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 0 12px;
display: flex;
align-items: center;
justify-content: space-between;
}
.select-text {
font-size: 13px;
color: #333333;
}
.select-placeholder {
font-size: 13px;
color: #999999;
}
.select-arrow {
font-size: 10px;
color: #999999;
}
.filter-footer {
margin-top: 16px;
}
.btn-query {
width: 100%;
height: 44px;
background-color: #4685FD;
color: #ffffff;
border: none;
border-radius: 8px;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
}
</style>