odjbin/city-store-transfer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

罗世杰：feat：搜索框定位文本

Browse Source
This commit is contained in:
luojie
2023-10-30 10:30:07 +08:00
parent 23b65d18f2
commit 50a12d9ccb
2 changed files with 114 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
pages/index/childComps/HomeHeader.vue Normal file
View File

@@ -0,0 +1,112 @@
<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: {
},
data() {
return {
hotSearchWord:'热门关键词',
headerBgList:["https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg"]
}
},
options: {
styleIsolation: 'shared' // 解除样式隔离
},
computed:{
position(){
return '定位中...'
}
}
}
</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>

46
pages/index/index.vue
View File

@@ -1,5 +1,6 @@
<template> <template>
<home-header></home-header> <home-header></home-header>
</template> </template>
<script> <script>
@@ -28,51 +29,6 @@
</script> </script>
<style lang="scss"> <style lang="scss">
// 搜索区域样式
.search_box {
background: #000;
position: relative;
.search_box_border {
width: 84.6%;
height: 25px;
z-index: 1;
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
border-radius: 10px;
padding-top: 3px !important;
margin-top: 8px;
background-color: #fff;
.u-border{
border: none;
}
// .u
.u-input__content {
background-color: #fff;
border-radius: 1;
height: 10px;
.u-input__content__field-wrapper__field {
height: 10px !important;
font-size: 10px !important;
}
}
}
.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> </style>