167 lines
3.5 KiB
Vue
167 lines
3.5 KiB
Vue
<template>
|
|
<aside class="aside-tree">
|
|
<div>
|
|
<nuxt-link class="aside-header" :to="baseUrl">
|
|
<h3>{{ headerTitle }}</h3>
|
|
</nuxt-link>
|
|
<nav class="tree-box">
|
|
<no-ssr>
|
|
<el-tree
|
|
v-if="refresh"
|
|
:data="treeData"
|
|
:empty-text="$t('common.empty')"
|
|
node-key="id"
|
|
highlight-current
|
|
default-expand-all
|
|
:props="props"
|
|
:current-node-key="currentNodeKey"
|
|
:expand-on-click-node="false"
|
|
@current-change="handleNodeClick"
|
|
/>
|
|
</no-ssr>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="mt-2">
|
|
<h3 class="contact-us">{{ $t('contactUs.contactUs') }}</h3>
|
|
<div class="contact-details">
|
|
<h4 class="mt-3 mb-3">{{ footerInfo.companyName }}</h4>
|
|
<p class="mb-2">
|
|
<label class="mb-0">{{ $t('common.addressLabel') }}:</label>
|
|
<span>{{ footerInfo.address }}</span>
|
|
</p>
|
|
<p class="mb-2">
|
|
<label class="mb-0">{{ $t('common.tel') }}:</label>
|
|
<span>{{ footerInfo.tel }}</span>
|
|
</p>
|
|
<p class="mb-2">
|
|
<label class="mb-0">{{ $t('common.Mob/Whatsapp/Wechat') }}:</label>
|
|
<span>{{ footerInfo.whatsapp }}</span>
|
|
</p>
|
|
<p class="mb-2">
|
|
<label class="mb-0">{{ $t('common.E-mail') }}:</label>
|
|
<span>{{ footerInfo.email }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex';
|
|
|
|
export default {
|
|
name: 'AsideTree',
|
|
props: {
|
|
headerTitle: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
treeData: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
props: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
children: 'children',
|
|
label: 'label'
|
|
}
|
|
}
|
|
},
|
|
baseUrl: {
|
|
type: String,
|
|
default: '/'
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
currentNodeKey: '',
|
|
refresh: true
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['footerInfo'])
|
|
},
|
|
watch: {
|
|
'$route.query.catgId': {
|
|
handler (val) {
|
|
this.refresh = false
|
|
this.currentNodeKey = val
|
|
this.$nextTick(() => {
|
|
this.refresh = true
|
|
})
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
mounted () {
|
|
},
|
|
methods: {
|
|
handleNodeClick(row,node) {
|
|
this.$router.push({
|
|
path: `${this.baseUrl}`,
|
|
query: {
|
|
...this.$route.query,
|
|
catgId: row.id,
|
|
title: node.data.label
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "element-ui/lib/theme-chalk/tree.css";
|
|
@import "element-ui/lib/theme-chalk/menu.css";
|
|
@import "element-ui/lib/theme-chalk/scrollbar.css";
|
|
.aside-tree {
|
|
padding: 0;
|
|
@mixin header {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 1.5rem 0;
|
|
text-indent: 2.125rem;
|
|
color: #fff;
|
|
background-color: #015fe8;
|
|
font-size: 1.25rem;
|
|
font-weight: bold;
|
|
}
|
|
.aside-header {
|
|
@include header;
|
|
}
|
|
.tree-box {
|
|
padding: .625rem .625rem;
|
|
border: .0625rem solid #d9dde0;
|
|
::v-deep .is-current {
|
|
> .el-tree-node__content {
|
|
color: #015fe8;
|
|
}
|
|
}
|
|
}
|
|
.contact-us {
|
|
@include header;
|
|
}
|
|
.contact-details {
|
|
padding: .625rem 1.25rem;
|
|
border: .0625rem solid #d9dde0;
|
|
background-color: #f5f7f9;
|
|
font-size: .875rem;
|
|
h4 {
|
|
color: #302d2d;
|
|
font-size: .875rem;
|
|
}
|
|
label {
|
|
color: #77778b;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 特殊样式小屏幕处理
|
|
@media screen and (max-width:400px) {
|
|
|
|
}
|
|
|
|
</style> |