186 lines
5.6 KiB
Vue
186 lines
5.6 KiB
Vue
<template>
|
|
<view>
|
|
<div class="layout layout-fix-tab-narrow" style="right: 0px;">
|
|
<div class="mod-fix-tab-narrow" style="display: block; ">
|
|
<div class="fix-tab-main">
|
|
<ul>
|
|
<li class="side-hrd">
|
|
<a rel="nofollow" href="javascript:;" class="DeliveryMyCard"
|
|
@click="navTo('/pages/enquiry/list')">
|
|
<div class="item">
|
|
<i class="wag-icon"><img src="@/static/images/cl1.png"></i>
|
|
</div>
|
|
<span>找买家</span>
|
|
</a>
|
|
</li>
|
|
<li class="side-add-cart"><a rel="nofollow" href="javascript:;"
|
|
@click="navTo('/pages/index/shop/cart')">
|
|
<div class="item">
|
|
<i class="wag-icon"><img src="@/static/images/cl3.png"></i>
|
|
</div>
|
|
<span class="txt"> 进货单 </span>
|
|
</a>
|
|
</li>
|
|
<li class="side-steel-kefu">
|
|
<a rel="nofollow"
|
|
href="http://wpa.qq.com/msgrd?v=3&uin=949419497&site=qq&menu=yes"
|
|
target="_blank">
|
|
<div class="item">
|
|
<i class="wag-icon"><img src="@/static/images/cl4.png"></i>
|
|
</div>
|
|
<span>在线客服</span>
|
|
</a>
|
|
</li>
|
|
<li class="side-steel-counter">
|
|
<a rel="nofollow" href="/counter/index.html">
|
|
<div class="item">
|
|
<i class="wag-icon"><img src="@/static/images/cl5.png"></i>
|
|
</div>
|
|
<span>钢材计算器</span>
|
|
</a>
|
|
</li>
|
|
<li class="side-steel-search">
|
|
<a rel="nofollow" href="javascript:;" @click="navTo('/pages/yellowPage/list')">
|
|
<div class="item">
|
|
<i class="wag-icon"><img src="@/static/images/cl6.png"></i>
|
|
</div>
|
|
<span>金久信黄页</span>
|
|
</a>
|
|
</li>
|
|
<li class="side-steel-search">
|
|
<a rel="nofollow" href="javascript:;" @click="navTo('/pages/contract/index?tab=sign')">
|
|
<div class="item">
|
|
<agreement theme="outline" size="16" fill="#666" strokeLinecap="square"/>
|
|
</div>
|
|
<span>签约宝</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="actGotop" style="display: none;">
|
|
<div class="item">
|
|
<i class="wag-icon"><img src="@/static/images/cc-top.png"></i>
|
|
</div>
|
|
<span>返回顶部</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {Agreement} from '@icon-park/vue'
|
|
|
|
export default {
|
|
components: {Agreement},
|
|
name: "right-bar",
|
|
data() {
|
|
return {};
|
|
},
|
|
methods: {
|
|
navTo(url) {
|
|
vk.navigateTo(url);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.layout-fix-tab-narrow {
|
|
border-left: 1px solid #f1f1f1;
|
|
position: fixed;
|
|
right: -40px;
|
|
top: 0;
|
|
width: 40px;
|
|
height: 100%;
|
|
background: #fff;
|
|
z-index: 9999999;
|
|
-webkit-transition: right .5s ease;
|
|
-moz-transition: right .5s ease;
|
|
-ms-transition: right .5s ease;
|
|
-o-transition: right .5s ease;
|
|
transition: right .5s ease;
|
|
line-height: 1.5;
|
|
color: #656565;
|
|
font-size: 12px;
|
|
font-family: -apple-system, BlinkMacSystemFont, Hiragino Sans GB, Microsoft YaHei, sans-serif;
|
|
}
|
|
|
|
.mod-fix-tab-narrow li {
|
|
width: 40px;
|
|
position: relative;
|
|
margin: 3px 0;
|
|
}
|
|
|
|
.mod-fix-tab-narrow li {
|
|
padding: 4px 0;
|
|
cursor: pointer;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.layout-fix-tab-narrow a {
|
|
color: #656565;
|
|
text-decoration: none;
|
|
padding: 5px 0px;
|
|
}
|
|
|
|
.mod-fix-tab-narrow li .item {
|
|
display: block;
|
|
position: relative;
|
|
z-index: 99;
|
|
text-align: center;
|
|
height: 23px;
|
|
}
|
|
|
|
.mod-fix-tab-narrow li span {
|
|
display: block;
|
|
right: 0;
|
|
width: 16px;
|
|
white-space: inherit;
|
|
text-align: center;
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
padding: 0 12px;
|
|
line-height: 14px;
|
|
z-index: 10;
|
|
top: 32px;
|
|
transition: inherit;
|
|
}
|
|
|
|
.wag-icon {
|
|
font-size: 16px;
|
|
height: 30px;
|
|
width: 30px;
|
|
font-style: normal;
|
|
color: #353535;
|
|
|
|
}
|
|
|
|
.mod-fix-tab-narrow li:hover {
|
|
box-shadow: 0 0;
|
|
color: #a92924
|
|
}
|
|
|
|
.mod-fix-tab-narrow li:hover {
|
|
box-shadow: 0 0 16px 0 hsla(0, 0%, 77%, .5)
|
|
}
|
|
|
|
.mod-fix-tab-narrow li:hover span {
|
|
box-shadow: 0 0;
|
|
color: #a92924
|
|
}
|
|
|
|
.mod-fix-tab-narrow {
|
|
margin-top: 50px;
|
|
}
|
|
|
|
.a-fadeinL {
|
|
margin-top: 50px;
|
|
-webkit-transition: right .5s ease;
|
|
-moz-transition: right .5s ease;
|
|
-ms-transition: right .5s ease;
|
|
-o-transition: right .5s ease;
|
|
transition: right .5s ease;
|
|
}
|
|
</style> |