首页样式提交

pages/index.vue

@@ -1,11 +1,25 @@
 <template>
   <view class="page-container">
-
+    <!-- confirm:confirm; input:change; cancel:点击取消；
+    clear：点击清除；focus:获取焦点；blur：失去焦点   -->
+    <uni-row class="demo-uni-row" >
+      <uni-col :span="7">
+        <uni-data-select align="left" :clear="false" v-model="value" :localdata="range" ></uni-data-select>
+      </uni-col>
+      <uni-col :span="17">
+        <uni-search-bar @confirm="search" :focus="true" bgColor="#fbfdfe"
+                        v-model="searchValue"
+                        cancelButton="always"
+                        placeholder="请输入搜索内容"
+                        @cancel="cancel" @clear="cancel">
+        </uni-search-bar>
+      </uni-col>
+    </uni-row>
+    <uni-section class="mb-10" title="温室列表" style="background:transparent;"  type="line">
       <scroll-view
           scroll-y
           class="list-scroll"
           @scrolltolower="loadMore"
-        :style="{ height: scrollHeight + 'px' }"
           lower-threshold="50"
           scroll-with-animation
       >
@@ -38,7 +52,14 @@
           <text>加载中...</text>
         </view>
         <view v-else-if="noMore" class="no-more">没有更多数据了</view>
+        <view class="add-agri" @tap="handleAddAgri">
+          <image :src="imageSrc" :style="'width:'+80+'rpx;height:'+80+'rpx'"></image>
+          <text class="text">点击添加大棚</text>
+        </view>
       </scroll-view>
+    </uni-section>
+<!--    <uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"-->
+<!--             :direction="direction" @trigger="trigger" @fabClick="fabClick" />-->
   </view>
 </template>
 
@@ -52,24 +73,108 @@ export default {
       isLoading: false,
       noMore: false,
       total: 20, // 模拟总条数
-      scrollHeight: 0
+      value: 0,
+      range: [{
+        "value": 0,
+        "text": "大棚名称",
+      }, {
+        "value": 1,
+        "text": "设备编号",
+      }],
+      imageSrc:'/static/agri.png',
+      scrollHeight: 0,
+      // horizontal: 'right',
+      // vertical: 'bottom',
+      // direction: 'horizontal',
+      searchValue: null,
+     /* pattern: {
+        color: '#7A7E83',
+        backgroundColor: '#fff',
+        selectedColor: '#007AFF',
+        buttonColor: '#007AFF',
+        iconColor: '#fff'
+      },
+      content: [{
+        iconPath: '/static/image.png',
+        selectedIconPath: '/static/image-active.png',
+        text: '添加大棚',
+        active: false
+      },
+        {
+          iconPath: '/static/home.png',
+          selectedIconPath: '/static/home-active.png',
+          text: '',
+          active: false
+        },
+        {
+          iconPath: '/static/star.png',
+          selectedIconPath: '/static/star-active.png',
+          text: '收藏',
+          active: false
         }
+      ]*/
+    }
+
+  },
+  onBackPress() {
+   /* if (this.$refs.fab.isShow) {
+      this.$refs.fab.close()
+      return true
+    }
+    return false*/
   },
   onLoad() {
     this.getListData()
-    // 计算滚动区域高度（适配不同设备，兼容rpx/px转换）
-    const systemInfo = uni.getSystemInfoSync()
-    // 80rpx转px：适配不同屏幕密度，避免高度计算偏差
-    const topHeight = 80 * (systemInfo.windowWidth / 750)
-    this.scrollHeight = systemInfo.windowHeight - topHeight
   },
   onReady() {
-    // 页面渲染完成后再确认高度，避免小程序端高度计算不准
+
-    const systemInfo = uni.getSystemInfoSync()
-    const topHeight = 80 * (systemInfo.windowWidth / 750)
-    this.scrollHeight = systemInfo.windowHeight - topHeight
   },
   methods: {
+    handleAddAgri() {
+      uni.showToast({
+        title: '准备添加大棚',
+        icon: 'none'
+      })
+      // 这里可以添加跳转到添加大棚页面的逻辑
+      // uni.navigateTo({ url: '/pages/add-agri/add-agri' })
+    },
+    search(res) {
+      uni.showToast({
+        title: '搜索：' + res.value,
+        icon: 'none'
+      })
+    },
+    input(res) {
+
+    },
+
+    cancel(res) {
+      uni.showToast({
+        title: '点击取消，输入值为：' + res.value,
+        icon: 'none'
+      })
+    },
+    /*trigger(e) {
+      console.log(e)
+      this.content[e.index].active = !e.item.active
+      uni.showModal({
+        title: '提示',
+        content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
+        success: function(res) {
+          if (res.confirm) {
+            console.log('用户点击确定')
+          } else if (res.cancel) {
+            console.log('用户点击取消')
+          }
+        }
+      })
+    },
+    fabClick() {
+      uni.showToast({
+        title: '点击了悬浮按钮',
+        icon: 'none'
+      })
+    },*/
     // 模拟获取列表数据
     getListData(isRefresh = false) {
       if (isRefresh) {
@@ -128,13 +233,6 @@ export default {
         icon: 'none'
       })
     },
-    // 下拉刷新（可选）
-    onPullDownRefresh() {
-      this.getListData(true)
-      setTimeout(() => {
-        uni.stopPullDownRefresh()
-      }, 1000)
-    }
   }
 }
 </script>
@@ -317,4 +415,72 @@ page {
   color: #ccc;
   background-color: #f8f8f8;
 }
+
+/deep/ .uni-searchbar {
+  padding: 20rpx 0;
+}
+/deep/ .uni-searchbar__box, /deep/ .uni-select {
+  box-shadow: 8rpx 5rpx 10rpx #999;
+  background: #fbfdfe;
+  border-radius: 0 !important;
+}
+/deep/ .uni-searchbar__box {
+  border-radius: 0 10rpx 10rpx 0 !important;
+}
+.uni-stat__select {
+  padding: 20rpx 0;
+}
+/deep/ .uni-select {
+  border: 0;
+  height: 78rpx;
+  border-radius: 10rpx 0 0 10rpx !important;
+}
+
+/* 强制隐藏搜索图标容器 */
+/deep/ .uni-searchbar__box-icon-search {
+  display: none !important;
+}
+/deep/ .uni-section .uni-section-header {
+  padding: 12rpx 10rpx;
+}
+
+/* 添加大棚容器样式 */
+.add-agri {
+  /* 核心：flex布局实现一行显示 + 垂直居中 */
+  display: flex;
+  align-items: center;
+  /* 水平居中（可选，根据需求调整） */
+  justify-content: center;
+  /* 内边距，增加点击区域和视觉间距 */
+  padding: 30rpx 0;
+  /* 可选：添加背景和圆角，和列表项风格统一 */
+  background-color: rgba(255, 255, 255, 0.85);
+  border-radius: 12rpx;
+  margin-top: 20rpx;
+  /* 点击态效果，和列表项保持一致 */
+  transition: all 0.2s ease;
+}
+.add-agri:active {
+  background-color: rgba(255, 255, 255, 0.95);
+  transform: scale(0.98);
+}
+
+/* 图片和文字的间距 */
+.add-agri image {
+  margin-right: 20rpx;
+  /* 可选：图片垂直对齐，兜底兼容 */
+  vertical-align: middle;
+}
+
+/* 文字样式优化 */
+.add-agri .text {
+  /* 文字大小，和标签风格统一 */
+  font-size: 26rpx;
+  /* 文字颜色（保留原有绿色） */
+  color: #1AAD19;
+  /* 可选：加粗，突出按钮感 */
+  font-weight: 500;
+  /* 兜底：垂直对齐 */
+  vertical-align: middle;
+}
 </style>