效果
代码
<template><view><u-navbar :is-back="false"><view class="navbar"><view class="search"><image src="../../static/my_device/search_icon.png" class="search_image"></image><u-input focus placeholder="搜索设备名称、序列号等" v-model="search_text"></u-input></view><u-button style="width: 32px; color: #3572ee" @click="return_previous_page()">取消</u-button></view></u-navbar><view class="content"></view></view>
</template><script>
export default {data() {return {search_text: ''};},methods: {return_previous_page() {uni.navigateBack();}}
};
</script><style scoped lang="scss">
.navbar {width: 100%;height: 120rpx;padding: 20rpx;display: flex;justify-content: space-between; /* 左右分布 */align-items: center;flex-wrap: wrap;.search {width: calc(100% - 50px);height: 32px;background-color: #f3f4f5;display: flex;align-items: center;border-radius: 32px;padding: 0 10px;box-sizing: border-box;.search_image {width: 20px;height: 20px;margin-right: 6px;}}
}/deep/ .u-hairline-border:after {border: none; // 去除按钮边框
}
</style>