<!-- <template> <view> <u-navbar :is-back="false" title="认养市场" :border-bottom="false" :background="bgc" title-color='#3D3D3D ' title-size='36' height='48' 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="listbee"> <view class="list_item" v-for="(item,index) in 3" :key="index"> <view class="lt"> <image src="https://api.ccttiot.com/smartmeter/img/static/u4GHspe4zXIQHVXEBZpv" mode=""></image> </view> <view class="rt"> <view class="top"> 福建省宁德市福鼎市太姥山镇秦屿大... </view> <view class="fenlei"> <view class="shang">蜜种</view> <view class="shang">周期</view> <view class="shang">预产量</view> <view class="xia">枣花蜜</view> <view class="xia">360天</view> <view class="xia">5kg</view> </view> <view class="bot"> <view class="jg"> ¥<text>128.00</text> </view> <view class="ry" @click="btnry"> 去认养 </view> </view> </view> </view> </view> <tab-bar :indexs='5'></tab-bar> </view> </template> <script> export default { data() { return { bgc: { backgroundColor: " #FAFDFD", }, code: '', } }, onLoad() { }, methods: { btnry(){ uni.navigateTo({ url:'/page_adoptBee/adopxq' }) }, changserch() { // let data = { // pageNum:this.pagesum, // pageSize:this.pagesizes, // name:this.code, // sn:this.code // } // this.$u.get('/farm/beehive/list', data).then(res => { // if(res.code == 200){ // this.fxlist = [] // this.total = res.total // this.fxlist = res.rows // } // }) }, } } </script> <style lang="scss"> .u-title { margin-bottom: 20rpx; } page { padding: 0 18rpx; box-sizing: border-box; } .listbee { margin-top: 34rpx; .list_item { width: 716rpx; height: 235rpx; margin-top: 20rpx; background: #FFFFFF; box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15); border-radius: 20rpx 20rpx 20rpx 20rpx; display: flex; justify-content: space-between; padding: 14rpx 18rpx; box-sizing: border-box; .bot{ display: flex; margin-top: 22rpx; justify-content: space-between; padding-right: 20rpx; box-sizing: border-box; .jg{ font-weight: 600; font-size: 30rpx; color: #FF473E; text{ font-size: 36rpx; } } .ry{ width: 172rpx; height: 52rpx; background: #FFCC25; border-radius: 34rpx 34rpx 34rpx 34rpx; font-size: 30rpx; color: #FFFFFF; text-align: center; line-height: 52rpx; } } .rt { .top { font-size: 26rpx; color: #50565A; } .fenlei { display: flex; flex-wrap: wrap; justify-content: flex-start; margin-top: 20rpx; padding-left: 32rpx; box-sizing: border-box; .shang{ font-size: 24rpx; color: #50565A; font-weight: 400; } .xia{ font-size: 30rpx; color: #4D4D4D; font-weight: 600; margin-top: 10rpx; } view{ flex: 0 0 calc(33.333% - 10px); margin-right: 10px; text-align: left; } view:nth-child(3n+3) { margin-right: 0; } } } .lt { margin-right: 24rpx; image { width: 210rpx; height: 210rpx; border-radius: 20rpx; } } } } .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> -->