<template> <view> <u-navbar :is-back="false" title="认养" :border-bottom="false" :background="bgc" title-color='#3D3D3D ' title-size='36' height='45' id="navbar"> </u-navbar> <view class="search"> <image src="https://api.ccttiot.com/smartmeter/img/static/um5GxgXufKY8IK2qkaWR" mode=""></image> <view class="search_center"> <input type="text" class="ips" @confirm="changserch" v-model="code" placeholder="请输入搜索内容" placeholder-class="my-placeholder" /> </view> </view> <view class="title"> <text @click="btntit(0)" :class="index == 0 ? 'active' : ''">全部</text> <text @click="btntit(1)" :class="index == 1 ? 'active' : ''">认养中</text> <text @click="btntit(2)" :class="index == 2 ? 'active' : ''">认养结束</text> </view> <swiper class="list" :current='index' @change="swiperchange" @scrolltolower="onReachBottom"> <swiper-item style="overflow: scroll;" v-for="(item,index) in 3" :key="index"> <view class="list_item" v-for="(item,index) in 5" :key="index"> <view class="top_tit"> <view class=""> 福建省宁德市福鼎市太姥山镇秦... </view> <view class="ryz"> 认养中 </view> </view> <view class="list_bd"> <view class="lt"> <image src="https://api.ccttiot.com/smartmeter/img/static/u4GHspe4zXIQHVXEBZpv" mode=""></image> </view> <view class="rt"> <view class="" style="margin-top: 0;"> 蜜种:枣花蜜 </view> <view class=""> 预产量:5kg </view> <view class=""> 剩余割蜜次数:3次 </view> <view class=""> 认养到期:2024-09-21 </view> </view> </view> <view class="list_logistics"> <view class=""> 查看物流</view> </view> </view> </swiper-item> </swiper> <tab-bar :indexs='6'></tab-bar> </view> </template> <script> export default { data() { return { bgc: { backgroundColor: " #FAFDFD", }, code: '', index:'' } }, onLoad() { }, methods: { swiperchange(e){ this.index = e.target.current }, btntit(num){ if(num == 0){ this.index = 0 }else if(num == 1){ this.index = 1 }else{ this.index = 2 } }, } } </script> <style lang="scss"> .active{ font-size: 36rpx; color: #FFCC25; font-weight: 600; border-bottom: 8rpx solid #FFCC25; } .u-title { margin-bottom: 20rpx; } page { padding: 0 42rpx; box-sizing: border-box; overflow: hidden; } .title{ width: 100%; display: flex; justify-content: space-between; padding-left: 66rpx; padding-right: 128rpx; box-sizing: border-box; margin-top: 26rpx; font-size: 36rpx; color: #4D4D4D; } .list { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; height: 80vh; overflow: scroll; box-sizing: border-box; position: relative; padding-bottom: 260rpx; // .list_item:last-of-type{ // padding-bottom: 200rpx; // } .list_item { width:100%; box-sizing: border-box; overflow: hidden; break-inside: avoid; margin-top: 36rpx; // position: absolute; background: #FFFFFF; box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.15); border-radius: 20rpx 20rpx 20rpx 20rpx; padding: 28rpx 34rpx; box-sizing: border-box; .list_logistics{ width: 100%; height: 68rpx; position: relative; view{ position: absolute; right: 0; width: 182rpx; height: 68rpx; background: #FFCC25; border-radius: 12rpx 12rpx 12rpx 12rpx; font-size: 32rpx; color: #FFFFFF; text-align: center; line-height: 68rpx; } } .list_bd{ display: flex; margin-top: 28rpx; .lt{ margin-right: 40rpx; image{ width: 190rpx; height: 190rpx; border-radius: 20rpx; } } .rt{ view{ font-size: 28rpx; color: #4D4D4D; margin-top: 12rpx; } } } .top_tit{ display: flex; justify-content: space-between; view{ font-size: 32rpx; color: #50565A; } .ryz{ font-size: 32rpx; color: #FFCC25; } } } } .search { display: flex; flex-wrap: nowrap; align-items: center; padding: 20rpx 26rpx; width: 100%; height: 82rpx; background: #FFFFFF; box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15); border-radius: 20rpx 20rpx 20rpx 20rpx; margin-top: 42rpx; image { width: 35.97rpx; height: 35.97rpx; } .search_center { margin-left: 34rpx; width: 480rpx; .ips { width: 100%; // 根据需要调整 } .my-placeholder { font-weight: 400; font-size: 32rpx; color: #808080; } } } </style>