<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { linksData2 } from '@/config';
import { useLangStore } from '@/stores';
import { getYearByOffset } from '@/shared/utils';
import AppContent from '@/components/AppContent.vue';
import LogoFooter from '@/assets/footer/footer-logo2.png';
import LogoFooter1 from '@/assets/footer-logo1.png';
import LogoAtom from '@/assets/footer/atom-logo.png';
import FooterBg from '@/assets/footer/footer-bg.png';
import FooterBgMo from '@/assets/footer/footer-bg-mo.png';
import police from '@/assets/footer/police.png';
import CodeTitleXzs from '@/assets/footer/img-xzs.png';
import CodeTitleGzh from '@/assets/footer/img-gzh.png';
import CodeImgXzs from '@/assets/footer/code-xzs.png';
import CodeImgZgz from '@/assets/footer/code-zgz.png';
const { t } = useI18n();
const lang = computed(() => {
return useLangStore().lang;
});
const footerCodeList = [
{
img: CodeTitleXzs,
code: CodeImgXzs,
label: t('common.FOOTER.QR_CODE'),
},
{
img: CodeTitleGzh,
code: CodeImgZgz,
label: t('common.FOOTER.QR_ASSISTANT'),
},
];
const footBg = {
pc: `url(${FooterBg})`,
mo: `url(${FooterBgMo})`,
};
</script>
<template>
<div class="footer">
<AppContent :pc-top="0" :mobile-top="0">
<div class="atom">
<p class="atom-text">{{ t('common.FOOTER.ATOM_TEXT') }}</p>
<a href="https://openatom.cn" target="_blank" rel="noopener noreferrer">
<img :src="LogoAtom" class="atom-logo" alt="" />
</a>
</div>
</AppContent>
<div class="footer-content">
<AppContent :pc-top="0" :mobile-top="0">
<div class="inner">
<div class="footer-logo">
<img class="show-pc" :src="LogoFooter" alt="" />
<img class="show-mo" :src="LogoFooter1" alt="" />
<p>
<a
class="email"
href="mailto:contact@openeuler.io"
target="_blank"
>
contact@openeuler.io
</a>
</p>
</div>
<div class="footer-option">
<div class="footer-option-item">
<a
v-for="link in linksData2[lang]"
:key="link.URL"
:href="link.URL"
class="link"
target="_blank"
rel="noopener noreferrer"
>{{ link.NAME }}</a
>
</div>
<p class="license">
<span>{{ t('common.FOOTER.LICENSED_1') }}</span>
{{ t('common.FOOTER.LICENSED_2') }}
</p>
<div class="beian-box">
<p class="copyright">
{{ t('common.FOOTER.COPY_RIGHT', { year: getYearByOffset() }) }}
</p>
<p class="beian">
<a href="https://beian.miit.gov.cn/#/Integrated/index/" target="_blank">{{ t('common.FOOTER.BEIAN_1') }}</a>
<img :src="police" alt="police">
<span>{{ t('common.FOOTER.BEIAN_2') }}</span>
</p>
</div>
</div>
<div class="footer-right">
<div v-if="lang === 'zh'" class="code-box">
<div
v-for="(item, index) in footerCodeList"
:key="index"
class="code-pop"
>
<img :src="item.img" class="code-img" alt="" />
<div class="code-layer">
<img :src="item.code" alt="" />
<p class="txt">{{ item.label }}</p>
</div>
</div>
</div>
</div>
</div>
</AppContent>
</div>
</div>
</template>
<style lang="scss" scoped>
$color: #fff;
.footer {
background: var(--o-color-greyblack1);
&.migration {
margin-left: 300px;
@media (max-width: 1100px) {
margin-left: 0;
}
}
:deep(.app-content) {
padding-bottom: 0;
}
.cookie-privacy {
line-height: 48px;
width: 100%;
height: 48px;
background-color: var(--o-color-bg1);
color: var(--o-color-text3);
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 0;
right: 0;
left: 0;
z-index: 999;
box-shadow: var(--o-shadow-l1);
text-align: center;
@media screen and (max-width: 1000px) {
font-size: 12px;
line-height: 20px;
display: inline-block;
}
a {
cursor: pointer;
text-decoration: solid;
white-space: pre;
}
.icon {
cursor: pointer;
vertical-align: middle;
margin-left: 16px;
width: 24px;
height: 24px;
background: var(--o-color-greyblack3);
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
svg {
font-size: 20px;
color: var(--el-color-white);
}
@media screen and (max-width: 1000px) {
width: 20px;
height: 20px;
margin-left: 12px;
}
}
}
.atom {
text-align: center;
padding: var(--o-spacing-h3) 0 var(--o-spacing-h4);
position: relative;
border-bottom: 1px solid rgba(229, 229, 229, 0.12);
@media (max-width: 1440px) {
padding: var(--o-spacing-h4) 0;
}
&-text {
font-size: var(--o-font-size-h6);
font-weight: 400;
color: $color;
line-height: var(--o-line-height-h6);
@media (max-width: 1440px) {
font-size: var(--o-font-size-text);
line-height: var(--o-line-height-text);
}
}
&-logo {
height: 48px;
margin-top: 16px;
@media (max-width: 1100px) {
height: 30px;
}
}
}
&-content {
background: v-bind('footBg.pc') no-repeat bottom center;
@media (max-width: 767px) {
background: v-bind('footBg.mo') no-repeat bottom center;
}
.inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 0 32px;
position: relative;
min-height: 118px;
@media (max-width: 1436px) {
padding: var(--o-spacing-h4) 0;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
}
}
&-logo {
flex: 1;
img {
height: 46px;
}
.show-pc {
display: block;
}
.show-mo {
display: none;
}
@media (max-width: 1436px) {
text-align: center;
margin: 16px 0;
.show-pc {
display: none;
}
.show-mo {
display: inline-block;
height: 20px;
}
}
}
.beian-box {
display: flex;
align-items: center;
justify-content: center;
color: var(--o-color-text-secondary);
font-size: var(--o-font-size-text);
gap: 8px;
margin-top: var(--o-spacing-h5);
@media (max-width: 1436px) {
font-size: var(--o-font-size-tip);
line-height: var(--o-line-height-tip);
margin-top: var(--o-spacing-h8);
}
.beian {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
img {
height: 16px;
width: 16px;
}
a {
color: var(--o-color-text-secondary);
&:hover {
color: $color;
}
}
}
}
.license {
font-size: var(--o-font-size-text);
color: $color;
margin-top: var(--o-spacing-h5);
span {
color: var(--o-color-text-secondary);
}
@media (max-width: 1400px) {
font-size: var(--o-font-size-tip);
line-height: var(--o-line-height-tip);
margin-top: var(--o-spacing-h8);
}
}
.footer-option {
text-align: center;
.link {
color: $color;
font-size: var(--o-font-size-text);
display: inline-block;
padding: 0 var(--o-spacing-h6);
border-right: 1px solid $color;
&:last-child {
border-right: 0;
}
@media (max-width: 1436px) {
font-size: var(--o-font-size-tip);
line-height: var(--o-line-height-tip);
padding: 0 var(--o-spacing-h9);
}
}
@media (max-width: 1436px) {
order: -1;
}
}
.footer-right {
flex: 1;
.code-box {
display: flex;
justify-content: right;
gap: 16px;
.code-pop {
position: relative;
height: 20px;
display: block;
> img {
height: 100%;
object-fit: cover;
}
.code-layer {
position: absolute;
top: -105px;
left: -32px;
z-index: 99;
display: none;
background: #fff;
padding: 6px;
img {
width: 78px;
height: 78px;
}
.txt {
font-size: 12px;
color: $color;
display: none;
}
&::after {
border: 10px solid transparent;
content: '';
border-top-color: #fff;
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
display: block;
}
@media (max-width: 800px) {
display: block;
position: initial;
background: none;
padding: 0;
text-align: center;
&::after {
display: none !important;
}
.txt {
display: block;
}
}
}
&:hover {
.code-layer {
display: block;
}
}
@media (max-width: 800px) {
height: auto;
> img {
display: none;
}
}
}
@media (max-width: 1436px) {
justify-content: center;
}
@media (max-width: 1100px) {
margin-top: 24px;
}
}
.footer-links {
display: flex;
justify-content: right;
align-items: center;
gap: 16px;
.links-logo {
height: 16px;
img {
height: 100%;
object-fit: cover;
}
}
@media (max-width: 1100px) {
justify-content: center;
}
@media (max-width: 800px) {
display: flex;
text-align: center;
.img {
height: 16px;
}
}
&.iszh {
gap: 10px;
.links-logo {
height: 14px;
&:first-child {
height: 18px;
}
}
@media (max-width: 800px) {
display: grid;
grid-template-columns: repeat(3, 1fr);
text-align: center;
margin-top: 40px;
.img {
height: 16px;
}
}
}
}
p {
color: $color;
font-size: var(--o-font-size-tip);
margin-top: var(--o-spacing-h8);
}
}
.email {
color: $color;
font-size: var(--o-font-size-text);
@media (max-width: 1436px) {
font-size: var(--o-font-size-tip);
}
}
}
</style>