127 lines
2.4 KiB
Vue
127 lines
2.4 KiB
Vue
<template>
|
|
<view class="header-area">
|
|
<view class="search-box u-flex u-flex-nowarp u-row-between">
|
|
<view class="search-box-input" >
|
|
<u-input
|
|
:placeholder="hotSearchWord"
|
|
prefixIcon="search"
|
|
prefixIconStyle="font-size: 14px;color: #909399;margin-left:30rpx"
|
|
/>
|
|
</view>
|
|
<view class="search-box-location">
|
|
<view><u-icon name="map" color="#909399" size="15"></u-icon></view>
|
|
<view class="localtion-text"><text>{{position}}</text></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="swiper">
|
|
<u-swiper :list="headerBgList"/>
|
|
<!-- <u-image :src=headerBgURL
|
|
class="header-bgimg" width="100vw" height="25vh"/> -->
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default{
|
|
name: "HomeHeader",
|
|
props: {
|
|
hotSearchWord:{
|
|
type: String,
|
|
default() {
|
|
return '热门关键词'
|
|
}
|
|
},
|
|
headerBgList:{
|
|
type: Array,
|
|
default() {
|
|
return ["https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg","https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg"]
|
|
}
|
|
},
|
|
position:{
|
|
type: String,
|
|
default() {
|
|
return '定位中'
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
// hotSearchWord:'',
|
|
// headerBgList:[]
|
|
}
|
|
},
|
|
options: {
|
|
styleIsolation: 'shared' // 解除样式隔离
|
|
},
|
|
computed:{
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// 搜索区域样式
|
|
.header-area {
|
|
position: relative;
|
|
.search-box {
|
|
// background: #000;
|
|
position: absolute;
|
|
z-index: 1;
|
|
left: 50%;
|
|
width: 84.6%;
|
|
transform: translateX(-50%);
|
|
.search-box-input {
|
|
border-radius: 10px;
|
|
padding-top: 3px !important;
|
|
margin-top: 8px;
|
|
background-color: #fff;
|
|
.u-border{
|
|
border: none;
|
|
}
|
|
// 组件内部样式修改
|
|
.u-input__content {
|
|
background-color: #fff;
|
|
border-radius: 1;
|
|
height: 10px;
|
|
.u-input__content__field-wrapper__field {
|
|
// height: 10px !important;
|
|
font-size: 10px !important;
|
|
}
|
|
}
|
|
}
|
|
.search-box-location{
|
|
position: absolute;
|
|
z-index: 1;
|
|
height: 25px;
|
|
// width: 15vw;
|
|
top: 15px;
|
|
right: 10%;
|
|
|
|
// transform: translate(-100%);
|
|
|
|
display: flex;
|
|
.localtion-text{
|
|
padding-left: 8px;
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
.header-bgimg {
|
|
width: 100vw;
|
|
z-index: 0;
|
|
}
|
|
}
|
|
// 轮播图样式
|
|
.swiper {
|
|
.u-swiper {
|
|
border-radius:0 !important;
|
|
}
|
|
.u-swiper__wrapper__item__wrapper__image{
|
|
border-radius:0 !important;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
</style> |