<template> <view class="page"> <u-navbar :is-back="false" title="蜂场" :border-bottom="false" :background="bgc" title-color='#3D3D3D ' title-size='36' height='36' id="navbar"> </u-navbar> <view class="top_box"> <view class="search"> <image src="https://api.ccttiot.com/smartmeter/img/static/um5GxgXufKY8IK2qkaWR" mode=""></image> <view class="search_center"> <input type="text" class="ips" v-model="code" placeholder="编码/报修单号" placeholder-class="my-placeholder" /> </view> </view> <view class="add"> <image src="https://api.ccttiot.com/smartmeter/img/static/uR30yYn3IsHDu5qWV0ML" mode=""></image> </view> </view> <view class="no_cont"> <view class="img"> <image src="https://api.ccttiot.com/smartmeter/img/static/uUZ3MF84e3bKgwAei8Rz" mode=""></image> </view> <view class="txt"> 当前还没有添加蜂场哦 </view> </view> <tab-bar :indexs='1' style=""></tab-bar> </view> </template> <script> export default { data() { return { bgc: { backgroundColor: " #FAFDFD", }, } }, onLoad() { }, onShow() { }, methods: { } } </script> <style lang="scss"> page { background-color: #FAFDFD; } .page { // position: relative; width: 750rpx; .top_box { margin: 42rpx auto; display: flex; flex-wrap: nowrap; width: 664rpx; .search { display: flex; flex-wrap: nowrap; align-items: center; padding: 20rpx 26rpx; width: 566rpx; height: 82rpx; background: #FFFFFF; box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15); border-radius: 20rpx 20rpx 20rpx 20rpx; image { width: 35.97rpx; height: 35.97rpx; } .search_center { margin-left: 34rpx; width: 480rpx; .ips { // 基本样式设置 width: 100%; // 根据需要调整 // border: 1px solid #ccc; // 根据需要调整 // 设置 placeholder 样式 } .my-placeholder{ font-weight: 400; font-size: 32rpx; color: #808080; } } } .add { margin-left: 30rpx; width: 66rpx; height: 66rpx; } } .no_cont { margin: 152rpx auto 0; width: 432rpx; .img { image { width: 432rpx; height: 432rpx; } } .txt { margin-top: 50rpx; width: 100%; text-align: center; font-weight: 500; font-size: 32rpx; color: #808080; } } } </style>