117 lines
3.3 KiB
Vue
117 lines
3.3 KiB
Vue
<template>
|
|
<view>
|
|
<div class="group-head clearfix">
|
|
<div class="group-inner clearfix">
|
|
<div class="mod-logo">
|
|
<a href="/" class="logo"><img src="@/static/images/logo.png"></a>
|
|
</div>
|
|
<div class="mod-mini-search">
|
|
<div class="navigation-top clearfix">
|
|
<div class="searchBar">
|
|
<ul class="searchBar-tab clearfix">
|
|
<li @click="searchTypeChange(0)" :class="{'active': searchType == 0}" class="_goods" >商品</li>
|
|
<li @click="searchTypeChange(1)" :class="{'active': searchType == 1}" class="_shop">商户</li>
|
|
</ul>
|
|
<div class="clearfix">
|
|
<div class="searchBar-input">
|
|
<div class="searchBar-input-inner">
|
|
<input type="text" :placeholder="searchList[searchType].placeholder"
|
|
maxlength="100" autocomplete="off">
|
|
</div>
|
|
<div class="searchBar-input-list" style="display: none;"></div>
|
|
</div>
|
|
<div class="preventButton button" desc=""></div>
|
|
<div class="button" @click="search">搜索</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mod-hot-query">
|
|
<ul class="clearfix">
|
|
<li>
|
|
<a href="/market/index.html?product_name=直缝焊管">直缝焊管</a>
|
|
</li>
|
|
<li>
|
|
<a href="/market/index.html?product_name=架子管">架子管</a>
|
|
</li>
|
|
<li>
|
|
<a href="/market/index.html?product_name=无缝管">无缝管</a>
|
|
</li>
|
|
<li>
|
|
<a href="/market/index.html?product_name=方矩管">方矩管</a>
|
|
</li>
|
|
<li>
|
|
<a href="/market/index.html?product_name=钢板">钢板</a>
|
|
</li>
|
|
<li>
|
|
<a href="/market/index.html?product_name=螺纹钢">螺纹钢</a>
|
|
</li>
|
|
<li>
|
|
<a href="/market/index.html?product_name=H型钢">H型钢</a>
|
|
</li>
|
|
<li>
|
|
<a href="/market/index.html?product_name=工字钢">工字钢</a>
|
|
</li>
|
|
<li>
|
|
<a href="/market/index.html?product_name=槽钢">槽钢</a>
|
|
</li>
|
|
<li>
|
|
<a href="/market/index.html?product_name=镀锌钢管">镀锌钢管</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mod-menu">
|
|
<div class="hrd">
|
|
<a href="/support/index.html" class="hrd-landing">
|
|
<img src="@/static/images/logo-left.png">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="mod-download-icon js-download">
|
|
<a class="download clearfix" href="" target="_blank">
|
|
<span style="float: left;font-size: 13px;padding-top: 27px;padding-right: 10px;">金久信<br>
|
|
手机站</span>
|
|
<img src="/public/upload/image/20210220/80705c8b12d05d0ff67a2758749ef09c.jpg"
|
|
style="height: 90px;width: 90px;float: left;">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "common-header",
|
|
data() {
|
|
return {
|
|
searchType: 0,
|
|
searchList: [
|
|
{
|
|
type: 0,
|
|
name: '商品',
|
|
placeholder:'请输入品名 材质 规格 钢厂等搜索'
|
|
},
|
|
{
|
|
type: 1,
|
|
name: '商户',
|
|
placeholder:'请输入商户名或公司名进行搜索'
|
|
}
|
|
]
|
|
};
|
|
},
|
|
methods: {
|
|
searchTypeChange(e) {
|
|
this.searchType = e
|
|
},
|
|
search() {
|
|
this.$message('这是一条消息提示');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
</style> |