126 lines
3.0 KiB
Vue
126 lines
3.0 KiB
Vue
<template>
|
|
<footer class="footer">
|
|
<div class="container-fluid w-100 h-auto">
|
|
<div class="row justify-content-center">
|
|
<dl class="introduce col-6 col-md-2">
|
|
<dt>{{ $t('footer.contactUs') }}</dt>
|
|
<dl>
|
|
<div class="desc" v-html="footerInfo.contactUs"></div>
|
|
</dl>
|
|
<!-- <dl>
|
|
Detailed address
|
|
</dl>
|
|
<dl>
|
|
Shangang xintiandi No8, 19 floor, Lixia district, jinan, Shandong, China
|
|
</dl> -->
|
|
</dl>
|
|
|
|
<dl class="introduce col-6 col-md-2">
|
|
<dt>{{ $t('menu.ContactUs') }}</dt>
|
|
<dl>
|
|
<nuxt-link to="/separate?maxCatgId=66c10877ee325e7f5da316e69ceb2eb9&title=About%20Us">
|
|
{{ $t('menu.AboutUs') }}
|
|
</nuxt-link>
|
|
</dl>
|
|
<dl>
|
|
<nuxt-link to="/separate?maxCatgId=05948baff5643bcba547252f76c26805&title=Contact%20Us">
|
|
{{ $t('menu.ContactUs') }}
|
|
</nuxt-link>
|
|
</dl>
|
|
<dl>
|
|
<nuxt-link to="/inquiry?maxCatgId=ad42ad11ce190771d202d5a8ae597b99&title=Feedback">
|
|
{{ $t('menu.Feedback') }}
|
|
</nuxt-link>
|
|
</dl>
|
|
</dl>
|
|
|
|
<dl class="introduce col-6 col-md-3">
|
|
<dt>{{ $t('common.Categories') }}</dt>
|
|
<dl v-for="(item,index) in footerPordCategory" :key="index">
|
|
<nuxt-link :to="`/products?catgId=${item.id}&maxCatgId=660179025d0e2e0e4263db0eec86a8cc`">
|
|
{{ item.label }}
|
|
</nuxt-link>
|
|
</dl>
|
|
</dl>
|
|
|
|
<div class="contact col-6 col-md-2">
|
|
<div class="box">
|
|
<b-img :src="footerInfo.qrCode" fluid :alt="footerInfo.companyName"></b-img>
|
|
<p class="mt-1">{{ footerInfo.companyName }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 class="copyright">
|
|
{{ footerInfo.copyright }}
|
|
</h4>
|
|
</footer>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex';
|
|
import footer from '../middleware/footer';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['footerInfo','footerPordCategory'])
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.footer {
|
|
background-color:#152235;
|
|
.introduce {
|
|
padding-top: 3.25rem;
|
|
color: #b0b6b9;
|
|
font-size: .875rem;
|
|
dt {
|
|
margin-bottom: 1.125rem;
|
|
color: #ffffff;
|
|
font-size: 1.125rem;
|
|
}
|
|
::v-deep .desc {
|
|
p, a {
|
|
color: #b0b6b9 !important;
|
|
background-color: #152235 !important;
|
|
}
|
|
}
|
|
a {
|
|
color: #b0b6b9;
|
|
}
|
|
}
|
|
.contact {
|
|
padding-top: 3.25rem;
|
|
.box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-self: center;
|
|
p {
|
|
width: 8rem;
|
|
text-align: center;
|
|
color: #f0f0f0;
|
|
font-size: .75rem;
|
|
}
|
|
}
|
|
}
|
|
.copyright {
|
|
width: 100%;
|
|
height: 4.5rem;
|
|
line-height: 4.5rem;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
border-top: .0625rem solid #eaeaea;
|
|
font-size: .875rem;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
</style>
|