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

src/pages/report/index.vue

@@ -2,15 +2,213 @@
 definePage({
   layout: false,
   style: {
-    navigationBarTitleText: '报告',
+    navigationBarTitleText: '历史报告',
   },
 })
 
-// const { value: name } = useQuery('name')
+function handleSearch() {
+  console.log('查询')
+}
 </script>
 
 <template>
-  <view>
+  <view class="page">
-    <view>报告</view>
+    <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>