<template>
<view class="top" ref="top">
<uni-nav-bar class="top-bar" color="#333333" background-color="transparent"
@clickLeft="showCity" status-bar="true" leftWidth="80px" right-width="100px" :border-bottom="false" :border="false" :shadow="false">
<block slot="left">
<view class="city">
<view><text style="font-size: 14px">北京</text></view>
<uni-icons type="arrowdown" color="#333333" size="16" />
</view>
</block>
<view class="input-view">
<uni-icons style="line-height: 30px;" type="search" size="22" color="#666666" />
<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" @confirm="confirm">
</view>
</uni-nav-bar>
</view>
</template>
<script>
export default {
data() {
return {
href: 'https://uniapp.dcloud.io/component/README?id=uniui'
}
},
methods: {
async loginSub() {
const response = this.$api.user.login()
console.log('数据结果', response)
}
}
}
</script>
<style>
.container {
padding: 20px;
font-size: 14px;
line-height: 24px;
}
.top {
width: 750rpx;
height: 458rpx;
background: linear-gradient(90deg, #FF8E7A 1%, #FE5643 100%);
box-shadow: 24px 52px 100px 0px rgba(90, 108, 234),
}
.city {
display: flex;
flex-direction: row;
align-items: center;
margin-left: 4px;
margin-top: -4px;
}
.input-view {
display: flex;
flex-direction: row;
flex: 1;
background-color: #f8f8f8;
height: 30px;
border-radius: 15px;
padding: 0 15px;
flex-wrap: nowrap;
margin-left: 7px 0;
margin-top: 4px;
line-height: 30px;
}
.nav-bar-input {
height: 30px;
line-height: 30px;
width: 100px;
padding: 0 5px;
font-size: 14px;
background-color: #f8f8f8;
}
</style>
1***@qq.com
- 发布:2023-11-07 12:04
- 更新:2023-11-07 12:04
- 阅读:144
uni-nav-bar 插入左侧文字为啥没有展示出来
分类:uni-app