337 lines
9.7 KiB
Vue
337 lines
9.7 KiB
Vue
<template>
|
|
<view>
|
|
<div class="group-nav">
|
|
<div class="mod-nav clearfix">
|
|
<div class="first-level-nav ">
|
|
<div class="clearfix navigation-bottom">
|
|
<div class="classification" id="bannerAllPro">
|
|
<div class="classification-text">
|
|
<i class="icon-nav icon-nav-menu"></i> 全部商品分类
|
|
</div>
|
|
<!--全部商品分类开始-->
|
|
<div v-show="alwaysShowCategory || showCategory" class="banner-left" style="">
|
|
<div class="mod-category">
|
|
<div class="part-category">
|
|
<div class="cate-menu" psa="a156">
|
|
<ul id="nav-sub" class="">
|
|
<li v-for="(item,index) in vk.getVuex('$app.siteData.categoryData')" class="clearfix menuliselected" :key="index">
|
|
<i class="cate-menu-icon cate-icon-1"></i>
|
|
<h2>
|
|
<a href="">{{item.name}}</a>
|
|
</h2>
|
|
<div class="cate-item clearfix">
|
|
<a v-for="(citem,cindex) in item.children" href="" :key="cindex">{{citem.name}}</a>
|
|
</div>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
<div class="cate-cont" psa="a157" style="">
|
|
<div class="item-main" style="">
|
|
<div class="part-hot-word">
|
|
<div class="item">
|
|
<div class="title">
|
|
<h2>
|
|
<a href="/market/index.html?name2=螺纹钢、高线">螺纹钢</a>
|
|
</h2>
|
|
<a href="/market/index.html" class="more">更多
|
|
<i>></i></a>
|
|
</div>
|
|
<div class="cont">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="part-logo-cont">
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!--全部商品分类结束-->
|
|
</div>
|
|
<div class="linkNav">
|
|
<ul>
|
|
<li class="nav ">
|
|
<a href="/">首页</a>
|
|
</li>
|
|
<li class="nav ">
|
|
<a href="javascript:;">金久信自营</a>
|
|
</li>
|
|
<li class="nav ">
|
|
<a href="javascript:;" @click="navTo('/pages/spot/goods/goods')" class="navigator">
|
|
现货市场
|
|
</a>
|
|
</li>
|
|
<li class="nav ">
|
|
<a href="javascript:;" @click="navTo('/pages/enquiry/list')" class="navigator">
|
|
下询价单
|
|
</a>
|
|
</li>
|
|
<li class="nav ">
|
|
<a href="javascript:;">找加工</a>
|
|
</li>
|
|
<li class="nav ">
|
|
<a href="javascript:;">找合作</a>
|
|
</li>
|
|
<li class="nav ">
|
|
<a href="javascript:;">旧货交易</a>
|
|
</li>
|
|
<li class="nav ">
|
|
<a href="javascript:;">金久信黄页</a>
|
|
</li>
|
|
<li class="nav ">
|
|
<a href="javascript:;">金久信学堂</a>
|
|
</li>
|
|
<li class="nav ">
|
|
<a href="javascript:;">特产商城</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="classification">
|
|
<div class="entry">
|
|
<div class="entry-link">
|
|
<img src="@/static/images/logo-left2.png">
|
|
</div>
|
|
</div>
|
|
<!--全部商品分类开始-->
|
|
<div v-show="alwaysShowCategory" class="zghome-nav-display">
|
|
|
|
<div v-show="alwaysShowCategory" class="mod-manage" style="height: 500px;">
|
|
|
|
<div class="me-login">
|
|
<div class="login-not">
|
|
<div class="login-head">
|
|
<img src="/static/images/logo-small.png" alt="">
|
|
</div>
|
|
<div class="login-action">
|
|
<a href="/user/login.html" class="login"
|
|
id="banner_right_login">会员登录</a>
|
|
|
|
</div>
|
|
<div class="runlings"><span
|
|
style="display: inline-block;color: #a92924">免费</span>入驻通道
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="me-tab">
|
|
<div class="me-tab-text">
|
|
<ul>
|
|
<li class="tab-left active">
|
|
<a href="/buyer/index.html">买家入口 </a>
|
|
</li>
|
|
<li class="">
|
|
<a href="/seller/index.html">卖家入口</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="me-tab-content">
|
|
<div class="tab-inner">
|
|
<div class="me-step clearfix">
|
|
<dl>
|
|
<dt>
|
|
<i class="iconNew"><img
|
|
src="/static/images/lg1.png"></i>
|
|
<i class="iconNew iconNew-step-arrow"><img
|
|
src="/static/images/lg13.png"></i>
|
|
</dt>
|
|
<dd>免费注册</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>
|
|
<i class="iconNew"><img
|
|
src="/static/images/lg2.png"></i>
|
|
<i class="iconNew iconNew-step-arrow"><img
|
|
src="/static/images/lg13.png"></i>
|
|
</dt>
|
|
<dd>发布需求</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>
|
|
<i class="iconNew"><img
|
|
src="/static/images/lg3.png"></i>
|
|
</dt>
|
|
<dd>管理采购</dd>
|
|
</dl>
|
|
<dl class="dowslf3">
|
|
<dt class="clearfix">
|
|
<i class="iconNew iconNew-step-arrow2"><img
|
|
src="/static/images/lg14.png"></i>
|
|
</dt>
|
|
</dl>
|
|
<dl>
|
|
<dt>
|
|
<i class="iconNew"><img
|
|
src="/static/images/lg6.png"></i>
|
|
<i class="iconNew iconNew-step-arrow"><img
|
|
src="/static/images/lg15.png"></i>
|
|
</dt>
|
|
<dd>达成交易</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>
|
|
<i class="iconNew"><img
|
|
src="/static/images/lg5.png"></i>
|
|
<i class="iconNew iconNew-step-arrow"><img
|
|
src="/static/images/lg15.png"></i>
|
|
</dt>
|
|
<dd>验收</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>
|
|
<i class="iconNew"><img
|
|
src="/static/images/lg4.png"></i>
|
|
</dt>
|
|
<dd> 我的订单</dd>
|
|
</dl>
|
|
</div>
|
|
<p style="width: 100%;margin:10px 0px;">
|
|
<a href="/buyer/index.html"
|
|
style="text-align: center;color: #a92924;font-size: 13px;line-height: 2">进入买家中心
|
|
></a>
|
|
</p>
|
|
</div>
|
|
<div class="tab-inner" style="display: none;">
|
|
<div class="me-step clearfix">
|
|
<dl>
|
|
<dt>
|
|
<i class="iconNew"><img
|
|
src="/static/images/lg7.png"></i>
|
|
<i class="iconNew iconNew-step-arrow"><img
|
|
src="/static/images/lg13.png"></i>
|
|
</dt>
|
|
<dd>企业注册</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>
|
|
<i class="iconNew"><img
|
|
src="/static/images/lg8.png"></i>
|
|
<i class="iconNew iconNew-step-arrow"><img
|
|
src="/static/images/lg13.png"></i>
|
|
</dt>
|
|
<dd>商品管理</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>
|
|
<i class="iconNew"><img
|
|
src="/static/images/lg9.png"></i>
|
|
</dt>
|
|
<dd>匹配需求</dd>
|
|
</dl>
|
|
<dl class="dowslf3">
|
|
<dt class="clearfix">
|
|
<i class="iconNew iconNew-step-arrow2"><img
|
|
src="/static/images/lg14.png"></i>
|
|
</dt>
|
|
</dl>
|
|
<dl>
|
|
<dt>
|
|
<i class="iconNew"><img
|
|
src="/static/images/lg12.png"></i>
|
|
<i class="iconNew iconNew-step-arrow"><img
|
|
src="/static/images/lg15.png"></i>
|
|
</dt>
|
|
<dd>完成订单</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>
|
|
<i class="iconNew"><img
|
|
src="/static/images/lg11.png"></i>
|
|
<i class="iconNew iconNew-step-arrow"><img
|
|
src="/static/images/lg15.png"></i>
|
|
</dt>
|
|
<dd>卖出货品</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>
|
|
<i class="iconNew"><img
|
|
src="/static/images/lg10.png"></i>
|
|
</dt>
|
|
<dd> 报价</dd>
|
|
</dl>
|
|
|
|
</div>
|
|
<p style="width: 100%;margin:10px 0px;">
|
|
<a href="/seller/index.html"
|
|
style="text-align: center;color: #a92924;font-size: 13px;line-height: 2">进入卖家中心
|
|
></a>
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="clearfix wartchar">
|
|
<div class="wartcharlist"><img src="/static/images/wx.png"
|
|
style="height: 38px;margin-top: 5px;">
|
|
<p style="padding-top: 5px;line-height: 2">金久信</p>
|
|
<p>微信公众号</p>
|
|
</div>
|
|
<div class="wartcharlist">
|
|
<img src="/static/images/80705c8b12d05d0ff67a2758749ef09c.jpg"
|
|
style="height: 100px;width: 100px;">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<!---->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
alwaysShowCategory: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
name: "category-bar",
|
|
data() {
|
|
return {
|
|
showCategory: false,
|
|
};
|
|
},
|
|
mounted() {
|
|
console.log("mount");
|
|
let that = this
|
|
const bannerAllPro = document.getElementById("bannerAllPro")
|
|
bannerAllPro.addEventListener("mouseover", () => {
|
|
that.showCategory = true
|
|
})
|
|
bannerAllPro.addEventListener("mouseleave", () => {
|
|
that.showCategory = false
|
|
})
|
|
},
|
|
methods: {
|
|
navTo(url) {
|
|
vk.navigateTo(url);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.navigator {
|
|
cursor: pointer;
|
|
}
|
|
</style> |