<template>
|
<div class="footerBox">
|
<div class="footerBox-main">
|
<ul class="main-left">
|
<li class="footer-title">{{ t('message.About') }}</li>
|
<li>{{ t('message.webPolicies') }}</li>
|
<li>{{ t('message.Help') }}</li>
|
</ul>
|
<ul class="main-center">
|
<li class="footer-title">{{ t('message.FriendlyLinks') }}</li>
|
<li>
|
{{ t('message.ChinaAcademyofChineseMedicalSciences') }}
|
</li>
|
<li>
|
{{ t('message.NationalGenomicsDataCenter') }}
|
</li>
|
</ul>
|
<ul class="main-center">
|
<li class="footer-title"><br></li>
|
<li>
|
{{ t('message.NationalAdministrationofTraditionalChineseMedicine') }}
|
</li>
|
<li>
|
{{ t('message.GraduateSchoolofChinaAcademyofChineseMedicalSciences') }}
|
</li>
|
</ul>
|
<div class="main-right">
|
<img src="../../assets/images/layout/footImg-left.png" alt="">
|
<img src="../../assets/images/layout/footImg-right.png" alt=""></img>
|
</div>
|
</div>
|
<div class="footerBox-footer">
|
<p>{{ t('message.COPYRIGHT2021ChinaAcademyofChineseMedical') }}</p>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { useI18n } from 'vue-i18n';
|
const { locale, t } = useI18n();
|
|
|
</script>
|
|
<style lang="less" scoped>
|
.footerBox {
|
width: 100%;
|
height: 190px;
|
min-width: 1200px;
|
color: #fff;
|
background-color: #f0f0f0;
|
background-color: #01644C;
|
}
|
|
.footerBox-main {
|
height: 142px;
|
width: 60%;
|
margin: 0 auto;
|
padding: 20px 0;
|
display: flex;
|
}
|
|
.main-left {
|
width: 7%;
|
margin-right: 8%;
|
|
li {
|
text-wrap: nowrap;
|
margin-bottom: 10px;
|
}
|
}
|
|
.footer-title {
|
font-weight: bold;
|
}
|
|
.main-center {
|
width: 45%;
|
|
li {
|
text-wrap: nowrap;
|
margin-bottom: 10px;
|
margin-right: 10px;
|
cursor: pointer;
|
}
|
}
|
|
|
.main-right {
|
display: flex;
|
|
img {
|
margin: 0 10px;
|
}
|
}
|
|
|
|
.footerBox-footer {
|
height: 48px;
|
background-color: #015742;
|
|
p {
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
}
|
}
|
</style>
|
