You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
1.5 KiB
75 lines
1.5 KiB
3 years ago
|
<template>
|
||
|
|
<view class="search">
|
||
|
|
<view class="search-title">请选择演练场景</view>
|
||
|
|
<view class="my-search-container" @click="searchBoxHandler">
|
||
|
|
<view class="my-search-box" :style="{ 'border-radius': radius + 'px' }">
|
||
|
|
<uni-search-bar @confirm="search" @input="input"></uni-search-bar>
|
||
|
|
<!-- 使用 uni-ui 提供的图标组件 -->
|
||
|
|
<uni-icons type="search" size="17" color="" ></uni-icons>
|
||
|
|
<text class="placeholder">搜索场景</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
// 背景颜色
|
||
|
|
bgcolor: {
|
||
|
|
type: String,
|
||
|
|
default: 'white'
|
||
|
|
},
|
||
|
|
// 圆角尺寸
|
||
|
|
radius: {
|
||
|
|
type: Number,
|
||
|
|
default: 4 // px
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
searchBoxHandler() {
|
||
|
|
this.$emit('click')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.search-title{
|
||
|
|
font-family: 'Courier New', Courier, monospace;
|
||
|
|
color: #67676a;
|
||
|
|
margin-left: 8px;
|
||
|
|
margin-top: 6px;
|
||
|
|
}
|
||
|
|
.my-search-container {
|
||
|
|
|
||
|
|
height: 50px;
|
||
|
|
// background-color: #C00000;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0 10px;
|
||
|
|
|
||
|
|
.my-search-box {
|
||
|
|
height: 36px;
|
||
|
|
border: 0.5px solid #969696;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
// border-radius: 18px;
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.placeholder {
|
||
|
|
font-size: 12px;
|
||
|
|
margin-left: 4px;
|
||
|
|
color: #969696;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|