113 lines
2.4 KiB
Vue
113 lines
2.4 KiB
Vue
<template>
|
|
<view class="input-and-swiper-root">
|
|
<view class="search-box" v-if="type!=='0'">
|
|
<view class="search-box-input">
|
|
<u-input placeholder="热门搜索" placeholder-style="color: #969696" prefixIcon="search"
|
|
prefixIconStyle="font-size: 24px;color: #909399;" border="true">
|
|
<template slot="suffix">
|
|
<view style="display: flex;align-items: center;">
|
|
<u-icon name="map-fill" color="#329866" size="22"></u-icon>
|
|
<text class="position">{{position}}</text>
|
|
</view>
|
|
</template>
|
|
</u-input>
|
|
</view>
|
|
</view>
|
|
<u-swiper :list="bannerURL" keyName="img" height="300rpx" @change="e => currentNum = e.current"
|
|
@click="handleSwiperList(currentNum==''?0:currentNum,bannerURL)" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "inputAndSwiper",
|
|
props: {
|
|
bannerURL: {
|
|
type: Array,
|
|
default () {
|
|
return [
|
|
"https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg",
|
|
"https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg",
|
|
"https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg"
|
|
]
|
|
}
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: '1'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
position: uni.getStorageSync('city') + uni.getStorageSync('district').slice(0, 2),
|
|
currentNum: ''
|
|
};
|
|
},
|
|
options: {
|
|
styleIsolation: 'shared', // 解除样式隔离
|
|
},
|
|
created() {
|
|
},
|
|
methods: {
|
|
//点击轮播图
|
|
handleSwiperList(currentNum, bannerURL) {
|
|
const item=bannerURL[currentNum]
|
|
uni.navigateTo({
|
|
url: item.link+`?id=${item.param}&type=${item.type}`
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.input-and-swiper-root {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.search-box {
|
|
position: absolute;
|
|
z-index: 1;
|
|
left: 50%;
|
|
width: 84.6%;
|
|
transform: translateX(-50%);
|
|
|
|
.search-box-input {
|
|
border-radius: 12rpx;
|
|
margin-top: 20rpx;
|
|
background-color: #fff;
|
|
opacity: 0.85;
|
|
|
|
.u-border {
|
|
border: none;
|
|
|
|
.u-input__content {
|
|
height: 62rpx;
|
|
border-radius: 12rpx;
|
|
background-color: #fff;
|
|
|
|
.u-input__content__field-wrapper__field {
|
|
font-size: 26rpx !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.position {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #232323;
|
|
line-height: 33rpx;
|
|
}
|
|
|
|
.u-swiper {
|
|
border-radius: 0 !important;
|
|
|
|
.u-swiper__wrapper__item__wrapper__image {
|
|
border-radius: 0 !important;
|
|
}
|
|
}
|
|
</style> |