86 lines
1.7 KiB
Vue
86 lines
1.7 KiB
Vue
<template>
|
|
<view :class="Fixed ? 'Fixed' : ''">
|
|
<view :style="{ height: statusBarHeight }" v-if="top"></view>
|
|
<view style="height: 44px" v-if="top"></view>
|
|
<view class="search">
|
|
<!-- <view class="search_left" :class="Fixed ? 'opacityLeft' : ''">
|
|
<image class="search_left_img" src="/static/icon/xai.png" mode="widthFix"></image>
|
|
<view>郑州市</view>
|
|
</view> -->
|
|
<view class="search_right p30">
|
|
<up-input placeholder="查找地点、电站" confirmType="search" suffixIcon="/static/icon/search.png" border="none" v-model="value" @change="change" @confirm="confirm"></up-input>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
import { ref } from 'vue';
|
|
let value = ref('');
|
|
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
|
|
const emits = defineEmits(['change', 'search']);
|
|
|
|
const data = defineProps({
|
|
Fixed: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
top: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
});
|
|
|
|
let change = (e) => {
|
|
emits('change', e);
|
|
};
|
|
|
|
let confirm = (e) => {
|
|
emits('search', e);
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.Fixed {
|
|
position: fixed;
|
|
left: 0;
|
|
width: 100%;
|
|
padding: 0 30rpx;
|
|
z-index: 99;
|
|
}
|
|
|
|
.search {
|
|
@include flex($space: space-between);
|
|
|
|
&_left {
|
|
@include flex;
|
|
font-weight: bold;
|
|
font-size: 40rpx;
|
|
color: #232323;
|
|
height: 86rpx;
|
|
&_img {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
}
|
|
|
|
.opacityLeft {
|
|
background: rgba(255, 255, 255, 0.27);
|
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
|
padding: 0 10rpx;
|
|
}
|
|
|
|
&_right {
|
|
flex: 1;
|
|
@include flex;
|
|
// max-width: 500rpx;
|
|
height: 86rpx;
|
|
background: #ffffff;
|
|
box-shadow: inset 0rpx 0rpx 22rpx 2rpx #f9fbff;
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
}
|
|
}
|
|
</style>
|