143 lines
3.0 KiB
Vue
143 lines
3.0 KiB
Vue
<template>
|
|
<div class="header">
|
|
<div class="header-row">
|
|
<image
|
|
class="logo"
|
|
:src="componentContent.imageUrl"
|
|
mode="heightFix"
|
|
/>
|
|
<div
|
|
class="search-col"
|
|
@click="toSearch(item)">
|
|
<div class="search-input">
|
|
<div v-if="componentContent.keyList.length === 0">搜索商品</div>
|
|
<swiper
|
|
v-else
|
|
class="swiper-wrapper"
|
|
:circular="true"
|
|
:indicator-dots="false"
|
|
:autoplay="true"
|
|
:vertical="true">
|
|
<swiper-item
|
|
class="swiper-slide"
|
|
v-for="(item,index) in componentContent.keyList"
|
|
:key="index">
|
|
<div class="a-link">{{ item }}</div>
|
|
</swiper-item>
|
|
</swiper>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tabs-nav-warp">
|
|
<div
|
|
class="tabs-nav"
|
|
scroll-x="true">
|
|
<div class="ul">
|
|
<div
|
|
v-for="(item, index) in componentContent.tabs"
|
|
:key="index"
|
|
class="li"
|
|
:class="{ on: activeTab === index + 1 }"
|
|
@click="jumpLink(item.link)"
|
|
>
|
|
{{ item.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, toRefs } from 'vue';
|
|
import commonMixin from '../mixin';
|
|
|
|
const props = defineProps({
|
|
componentContent: {
|
|
type: Object,
|
|
default() {
|
|
return {};
|
|
},
|
|
},
|
|
});
|
|
const {componentContent} = toRefs(props);
|
|
const {jumpLink, toSearch} = commonMixin();
|
|
const activeTab = ref(0);
|
|
</script>
|
|
|
|
<style
|
|
lang="scss"
|
|
scoped>
|
|
.header {
|
|
padding: 11rpx 34rpx 0;
|
|
|
|
.logo {
|
|
// width: 280px;
|
|
height: 40rpx;
|
|
margin-bottom: 11rpx;
|
|
}
|
|
|
|
.search-col {
|
|
height: 60rpx;
|
|
overflow: hidden;
|
|
border-radius: 30rpx;
|
|
padding: 0 30rpx 0 90rpx;
|
|
background: #FFFFFF url("https://b2c-pro-static-dev.zkthink.com/static/images/icon-search.png") no-repeat 30rpx center / auto 30rpx;
|
|
font-size: 24rpx;
|
|
line-height: 60rpx;
|
|
color: #999999;
|
|
margin: 24rpx 0;
|
|
.search-input{
|
|
width: 100%;
|
|
}
|
|
.swiper-wrapper{
|
|
width: 100%;
|
|
height: 60rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tabs-nav-warp {
|
|
margin-top: 20rpx;
|
|
overflow: hidden;
|
|
|
|
.tabs-nav {
|
|
.ul {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
overflow: auto;
|
|
|
|
.li {
|
|
margin-left: 48rpx;
|
|
font-size: 28rpx;
|
|
color: #262626;
|
|
position: relative;
|
|
padding-bottom: 18rpx;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
&.on, &:hover {
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
|
|
&:after {
|
|
content: "";
|
|
width: 48rpx;
|
|
height: 6rpx;
|
|
background: #F26E47;
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-left: -24rpx;
|
|
bottom: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|