main
liudan
5 months ago
parent
a107fc6dc0
commit
93bc517856
@ -0,0 +1,206 @@ |
||||
<template> |
||||
<!-- #ifdef H5 --> |
||||
<!-- <view class="header" |
||||
:style="'background: linear-gradient(90deg, '+ bgColor[0].item +' 50%, '+ bgColor[1].item +' 100%);margin-top:'+ mbConfig*2 +'rpx;'"> |
||||
<view class="serch-wrapper acea-row row-middle" :style="'padding-left:'+ prConfig*2 +'rpx;'"> |
||||
<view class="logo skeleton-rect" v-if="logoConfig"> |
||||
<image :src="logoConfig" mode="heightFix"></image> |
||||
</view> |
||||
<navigator url="/pages/goods/goods_search/index" class="input acea-row row-middle skeleton-rect" |
||||
:class="[boxStyle?'':'fillet',logoConfig?'':'on',txtStyle?'row-center':'']" hover-class="none"><text |
||||
class="iconfont icon-sousuo"></text> |
||||
{{$t(`搜索`)}}</navigator> |
||||
</view> |
||||
</view> --> |
||||
<!-- #endif --> |
||||
<!-- #ifdef MP || APP-PLUS --> |
||||
<!-- <view v-if="special" class="header" |
||||
:style="'background: linear-gradient(90deg, '+ bgColor[0].item +' 50%, '+ bgColor[1].item +' 100%);margin-top:'+ mbConfig*2 +'rpx;'"> |
||||
<view class="serch-wrapper acea-row row-middle" :style="'padding-left:'+ prConfig*2 +'rpx;'"> |
||||
<view class="logo skeleton-rect" v-if="logoConfig"> |
||||
<image :src="logoConfig" mode="heightFix"></image> |
||||
</view> |
||||
<navigator url="/pages/goods/goods_search/index" class="input acea-row row-middle skeleton-rect" |
||||
:class="[boxStyle?'':'fillet',logoConfig?'':'on',txtStyle?'row-center':'']" hover-class="none"><text |
||||
class="iconfont icon-sousuo"></text> |
||||
{{$t(`搜索`)}}</navigator> |
||||
</view> |
||||
</view> --> |
||||
<!-- v-else --> |
||||
<view> |
||||
<view class="mp-header"> |
||||
<view class="sys-head" :style="{ height: statusBarHeight }"></view> |
||||
<view class="serch-box" style="height: 43px;"> |
||||
<view class="serch-wrapper acea-row row-middle"> |
||||
<view class="logo skeleton-rect"> |
||||
<image src="@/static/images/logo2.png" mode="heightFix"></image> |
||||
</view> |
||||
<!-- <navigator url="/pages/goods/goods_search/index" class="input acea-row row-middle skeleton-rect" |
||||
:class="[boxStyle?'':'fillet',logoConfig?'':'on',txtStyle?'row-center':'']" hover-class="none"> |
||||
<text class="iconfont icon-sousuo"></text> |
||||
{{$t(`搜索`)}} |
||||
</navigator> --> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<!-- <view :style="'height:'+marTop+'px;'"></view> --> |
||||
</view> |
||||
<!-- #endif --> |
||||
</template> |
||||
|
||||
<script> |
||||
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'; |
||||
console.log(statusBarHeight,"888") |
||||
export default { |
||||
name: 'headerSerch', |
||||
props: { |
||||
|
||||
}, |
||||
data() { |
||||
return { |
||||
statusBarHeight: statusBarHeight, |
||||
marTop: 0, |
||||
// bgColor: this.dataConfig.bgColor.color, |
||||
// boxStyle: this.dataConfig.boxStyle.type, |
||||
// logoConfig: this.dataConfig.logoConfig.url, |
||||
// mbConfig: this.dataConfig.mbConfig.val, |
||||
// txtStyle: this.dataConfig.txtStyle.type, |
||||
// hotWords: this.dataConfig.hotWords.list, |
||||
// prConfig: this.dataConfig.prConfig.val |
||||
}; |
||||
}, |
||||
mounted() { |
||||
let that = this; |
||||
uni.setStorageSync('hotList', that.hotWords); |
||||
that.$store.commit('hotWords/setHotWord', that.hotWords); |
||||
// #ifdef MP || APP-PLUS |
||||
setTimeout(() => { |
||||
// 获取小程序头部高度 |
||||
let info = uni.createSelectorQuery().in(this).select(".mp-header"); |
||||
info.boundingClientRect(function(data) { |
||||
that.marTop = data.height |
||||
}).exec() |
||||
}, 100) |
||||
// #endif |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.header { |
||||
width: 100%; |
||||
height: 100rpx; |
||||
background:#fff; |
||||
|
||||
.serch-wrapper { |
||||
padding: 20rpx 20rpx 0 0; |
||||
|
||||
.logo { |
||||
height: 40rpx; |
||||
margin-right: 20rpx; |
||||
width: 154rpx; |
||||
text-align: center; |
||||
image { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
|
||||
.input { |
||||
flex: 1; |
||||
height: 60rpx; |
||||
padding: 0 0 0 30rpx; |
||||
background: rgba(247, 247, 247, 1); |
||||
border: 1px solid rgba(241, 241, 241, 1); |
||||
color: #BBBBBB; |
||||
font-size: 28rpx; |
||||
|
||||
.iconfont { |
||||
margin-right: 20rpx; |
||||
} |
||||
|
||||
// 没有logo，直接搜索框 |
||||
&.on { |
||||
width: 100%; |
||||
} |
||||
|
||||
// 设置圆角 |
||||
&.fillet { |
||||
border-radius: 29rpx; |
||||
} |
||||
|
||||
// 文本框文字居中 |
||||
&.row-center { |
||||
padding: 0; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
/* #ifdef MP || APP-PLUS */ |
||||
.mp-header { |
||||
z-index: 30; |
||||
// position: fixed; |
||||
// left: 0; |
||||
// top: 0; |
||||
width: 100%; |
||||
// background: linear-gradient(90deg, $bg-star 50%, $bg-end 100%); |
||||
background: #fff; |
||||
|
||||
.serch-wrapper { |
||||
height: 100%; |
||||
/* #ifdef MP */ |
||||
padding: 0 220rpx 0 24rpx; |
||||
/* #endif */ |
||||
/* #ifdef APP-PLUS */ |
||||
padding: 0 50rpx 0 40rpx; |
||||
/* #endif */ |
||||
.logo { |
||||
height: 45rpx; |
||||
margin-right: 30rpx; |
||||
image { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
|
||||
.input { |
||||
flex: 1; |
||||
height: 50rpx; |
||||
padding: 0 0 0 30rpx; |
||||
background: rgba(247, 247, 247, 1); |
||||
border: 1px solid rgba(241, 241, 241, 1); |
||||
color: #BBBBBB; |
||||
font-size: 28rpx; |
||||
|
||||
.iconfont { |
||||
margin-right: 20rpx; |
||||
} |
||||
|
||||
// 没有logo，直接搜索框 |
||||
&.on { |
||||
/* #ifdef MP */ |
||||
width: 70%; |
||||
/* #endif */ |
||||
/* #ifdef APP-PLUS */ |
||||
width: 100%; |
||||
/* #endif */ |
||||
} |
||||
|
||||
// 设置圆角 |
||||
&.fillet { |
||||
border-radius: 29rpx; |
||||
} |
||||
|
||||
// 文本框文字居中 |
||||
&.row-center { |
||||
padding: 0; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* #endif */ |
||||
</style> |
||||
|
After Width: | Height: | Size: 14 KiB |
Loading…
Reference in new issue