Skip to content

P
project-online-fi
提交 fb6467ae authored 作者: matian's avatar matian
浏览文件
操作

页面底部重写

上级 bc78f3ab
显示空白字符变更
内嵌 并排
正在显示 包含 227 行增加 和 238 行删除
src/components/layout/Footer.vue
浏览文件 @ fb6467ae
<script lang="ts" setup>
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
</script>
<template> <template>
<footer class="app-footer"> <div class="main_app">
<div class="app-footer-inner"> <div class="app_footer">
<div class="app-footer-left"> <div class="footer_top">
<div class="app-footer-left__top"> <router-link to="/" class="top_img">
<router-link to="/" class="app-footer-logo">
<img src="@/assets/images/logo_white.png" /> <img src="@/assets/images/logo_white.png" />
</router-link> </router-link>
<!-- <p><a href="#product">课程介绍</a><a href="#teacher">师资团队</a><a href="#apply">认证流程</a></p> -->
</div> </div>
<div class="app-footer-left__bottom"> <div class="foot_center">
<div class="h5_top"> <div class="center_part">
<div class="top_left top_con"> <div class="part_link">
<div class="tit">友情链接</div> <div class="link_tit">友情链接</div>
<div class="con"> <div class="link_con">
<a <a
href="http://www.cbirc.gov.cn/cn/view/pages/index/index.html" href="http://www.cbirc.gov.cn/cn/view/pages/index/index.html"
target="_blank" target="_blank"
>中国银行保险监督管理委员会</a
> >
<div class="con_link">中国银行保险监督管理委员会</div>
</a>
<a href="http://www.moe.gov.cn/" target="_blank"> <a href="http://www.moe.gov.cn/" target="_blank">
<div class="con_link">中华人民共和国教育部</div> 中华人民共和国教育部</a
</a> >
<a href="https://www.pbcsf.tsinghua.edu.cn/" target="_blank"> <a href="https://www.pbcsf.tsinghua.edu.cn/" target="_blank">
<div class="con_link">清华大学五道口金融学院</div> 清华大学五道口金融学院</a
</a> >
<a href="https://www.ezijing.com/" target="_blank"> <a href="https://www.ezijing.com/" target="_blank">
<div class="con_link">清控紫荆教育</div> 清控紫荆教育
</a> </a>
<!-- <a href="https://paa.ezijing.com/" target="_blank">
<div class="con_link">紫荆金保</div>
</a> -->
</div> </div>
</div> </div>
<div class="top_right top_con"> <div class="part_product">
<div class="tit">项目产品</div> <div class="product_tit">项目产品</div>
<div class="con"> <div class="product_con">
<a href="https://prp.ezijing.com/" target="_blank"> <a href="https://prp.ezijing.com/" target="_blank">
<div class="con_link">私人财富风险管理顾问（PRP）</div> 私人财富风险管理顾问（PRP）
</a> </a>
<a href="https://paa.ezijing.com/" target="_blank"> <a href="https://paa.ezijing.com/" target="_blank">
<div class="con_link">资产分析系列认证（PAA）</div> 资产分析系列认证（PAA）
</a> </a>
</div> </div>
</div> </div>
</div> </div>
<div class="h5_bottom"> <div class="center_part center_part1">
<div> <div class="part_concat">
<div class="tit">联系我们</div> <div class="concat_tit">联系我们</div>
<div class="con"> <div class="concat_con" v-if="!mobile">
<dl> <div class="con_address">
<dt>地址：</dt> 地 &nbsp; &nbsp;
<dd> &nbsp;址：北京市海淀区中关村东路1号院清华科技园7号楼5层
北京市海淀区中关村东路1号院清华科技园7号楼威盛大厦5层<br />深圳市福田区博今商务广场A座22层 <br />
</dd> 深圳市福田区博今商务广场A座22层
</dl>
<dl>
<dt>邮箱：</dt>
<dd>
<a href="mailto:THHZJFI@ezijing.com" class="mail"
>THHZJFI@ezijing.com</a
>
</dd>
</dl>
</div> </div>
<div class="con_email">
邮 &nbsp; &nbsp; &nbsp;箱：THHZJFI@ezijing.com
</div> </div>
<div class="app-footer-qrcode"> </div>
<div class="concat_con" v-else>
<div class="con_address">
地址：北京市海淀区中关村东路1号院清华科技园7号楼5层
<br />
深圳市福田区博今商务广场A座22层
</div>
<div class="con_email">邮箱：THHZJFI@ezijing.com</div>
</div>
</div>
<div class="part_code">
<img <img
src="https://webapp-pub.ezijing.com/project_online/fi/qrcode.png" src="https://webapp-pub.ezijing.com/project_online/fi/qrcode.png"
width="120" class="code_img"
class="code"
/> />
<div class="app-footer-qrcode-content"> <div class="code_con">
<img <img
src="https://zws-imgs-pub.ezijing.com/static/public/184235d9f6edbb39d52fc6f77339ff5b.png" src="https://zws-imgs-pub.ezijing.com/static/public/184235d9f6edbb39d52fc6f77339ff5b.png"
width="20" class="con_img"
class="icon"
/> />
<span>微信公众号</span> <div class="con_text">微信公众号</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="foot_bottom">
</footer> <div class="bottom_copyright">
<div class="app-copyright"> Copyright © 2022 Zijing Education. All rights reserved.
<div class="app-copyright-inner">
<div>Copyright © 2022 Zijing Education. All rights reserved.</div>
<a target="_blank" href="https://tsm.miit.gov.cn/dxxzsp/" <a target="_blank" href="https://tsm.miit.gov.cn/dxxzsp/"
>京ICP证150431号 >京ICP证150431号</a
</a> >
</div>
<div class="bottom_ba">
<a <a
target="_blank" target="_blank"
href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802023681" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802023681"
style="margin: 0 60px"
> >
<img <img
src="https://zws-imgs-pub.ezijing.com/e0a0ec47dfdfc1e0797b1d5254021d00.png" src="https://zws-imgs-pub.ezijing.com/e0a0ec47dfdfc1e0797b1d5254021d00.png"
alt=""
/> />
<span> 京公网安备 11010802023681号</span> <div class="ba_text">京公网安备 11010802023681号</div>
</a> </a>
<!-- <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">京ICP备15016866号-1</a> --> </div>
<span>清控紫荆（北京）教育科技股份有限公司</span> <div class="bottom_ezijing">清控紫荆（北京）教育科技股份有限公司</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<style lang="scss">
.app-footer {
border-top: 1px solid #898989; <style lang="scss" scoped>
border-bottom: 1px solid #898989; .is-pc {
background-color: #242424; .main_app {
} background: #242424;
.app-footer-inner { padding: 40px 0 10px 0;
max-width: 1200px;
margin: 0 auto; .app_footer {
padding: 50px 0; width: 1200px;
display: flex; margin: auto;
color: rgba(237, 237, 237, 0.7); .footer_top {
} text-align: left;
.app-footer-left {
flex: 1;
.app-footer-logo {
display: flex;
align-items: center;
img { img {
height: 0.48rem; width: 192px;
height: 48px;
} }
} }
} .foot_center {
.is-pc {
.app-footer-left__top {
display: flex; display: flex;
align-items: center; justify-content: space-around;
margin-bottom: 30px; margin-top: 24px;
p { .center_part {
a {
font-size: 16px;
font-weight: 500;
color: #fff;
margin: 0 18px;
}
}
}
.app-footer-left__bottom {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.h5_top { .part_link {
display: flex; display: flex;
flex-direction: column;
.top_right { .link_tit {
margin-left: 60px;
}
}
.tit {
font-size: 16px; font-size: 16px;
color: #ffffff;
font-weight: 500; font-weight: 500;
} line-height: 40px;
.con {
margin-top: 20px;
.con_link {
font-size: 14px;
line-height: 32px;
color: #ffffff; color: #ffffff;
font-weight: 300;
} }
dl { .link_con {
display: flex; display: flex;
line-height: 30px; flex-direction: column;
a {
font-size: 14px; font-size: 14px;
font-weight: 300;
line-height: 32px; line-height: 32px;
color: #ffffff; color: #ffffff;
font-weight: 300;
} }
dt { }
width: 40px; }
text-align-last: justify; .part_product {
white-space: nowrap; margin-left: 110px;
.product_tit {
font-size: 16px;
font-weight: 500;
line-height: 40px;
color: #ffffff;
}
.product_con {
display: flex;
flex-direction: column;
a {
font-size: 14px; font-size: 14px;
font-weight: 300;
line-height: 32px; line-height: 32px;
color: #ffffff; color: #ffffff;
font-weight: 300;
} }
} }
.h5_bottom {
display: flex;
align-items: flex-start;
} }
.part_concat {
.concat_tit {
font-size: 16px;
font-weight: 500;
line-height: 40px;
color: #ffffff;
} }
.app-footer-link { .concat_con {
display: flex; display: flex;
} flex-direction: column;
.app-footer-link-item { font-size: 14px;
font-size: 20px; font-weight: 300;
line-height: 32px; line-height: 32px;
color: #fff; color: #ffffff;
letter-spacing: 3px;
}
.app-footer-contact { .con_address {
h2 { padding-left: 70px;
font-size: 16px; text-indent: -70px;
font-weight: 500; }
color: #fff; }
line-height: 48px; }
margin-bottom: 30px; .part_code {
margin-left: 99px;
.code_img {
width: 120px;
height: 120px;
} }
dl { .code_con {
display: flex; display: flex;
line-height: 30px; align-items: center;
padding: 0 13px;
margin-top: 11px;
.con_img {
width: 21px;
height: 19px;
} }
dt { .con_text {
width: 60px; font-size: 14px;
text-align-last: justify; color: #ffffff;
white-space: nowrap; margin-left: 7px;
} }
dd {
&::before {
content: '：';
} }
} }
} }
.app-footer-qrcode { .center_part1 {
margin-left: 99px; margin-left: 99px;
// margin-top: 72px;
} }
.app-footer-qrcode-content { }
.foot_bottom {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: 20px;
span {
margin-left: 10px;
}
}
.app-copyright-inner {
max-width: 1200px;
margin: 0 auto;
font-size: 12px; font-size: 12px;
line-height: 40px; font-weight: 300;
color: #999; line-height: 9px;
text-align: center; color: #999999;
margin-top: 62px;
.bottom_ba {
margin: 0 55px 0 48px;
a {
display: flex; display: flex;
align-items: center;
.ba_text {
margin-left: 10px;
} }
}
.app-copyright {
background-color: #242424;
}
// .app-footer-link-h5 {
// display: none;
// }
.is-h5 {
.app-footer {
background-color: #242424;
padding-bottom: 0.5rem;
.app-footer-inner {
padding: 0.2rem;
} }
} }
.app-footer-left {
.app-footer-left__top {
.app-footer-logo {
img {
width: 1.92rem;
height: 0.48rem;
display: block;
} }
} }
} }
} }
.app-footer-left__top { .is-h5 {
.app-footer-logo { .app_footer {
background: #242424;
padding: 0.4rem 0.3rem 0.3rem 0.3rem;
.footer_top {
img { img {
display: none; height: 0.48rem;
}
} }
} }
.app-footer-left__bottom { .foot_center {
margin-top: 0.3rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: 0.3rem; .center_part {
.h5_top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.tit { .part_link {
.link_tit {
font-size: 0.22rem; font-size: 0.22rem;
white-space: nowrap;
color: #ffffff; color: #ffffff;
font-weight: 500; font-weight: 500;
} }
.con { .link_con {
margin-top: 0.2rem; display: flex;
.con_link { flex-direction: column;
margin-top: 0.19rem;
a {
font-size: 0.2rem; font-size: 0.2rem;
line-height: 0.36rem;
white-space: nowrap;
color: #ffffff; color: #ffffff;
line-height: 0.36rem;
font-weight: 300; font-weight: 300;
white-space: nowrap;
} }
} }
.top_right {
margin-left: 0.58em;
}
} }
.h5_bottom { .part_product {
display: flex; .product_tit {
align-items: center;
margin-top: 0.37rem;
.tit {
font-size: 0.22rem; font-size: 0.22rem;
white-space: nowrap;
color: #ffffff; color: #ffffff;
font-weight: 500; font-weight: 500;
} }
.con { .product_con {
width: 5.12rem;
margin-top: 0.2rem;
dl {
display: flex; display: flex;
line-height: 0.36rem; flex-direction: column;
font-size: 0.18rem; margin-top: 0.19rem;
a {
font-size: 0.2rem;
color: #ffffff; color: #ffffff;
line-height: 0.36rem;
font-weight: 300; font-weight: 300;
} }
dt { }
text-align-last: justify; }
white-space: nowrap; .part_concat {
width: 5.12rem;
.concat_tit {
font-size: 0.22rem;
color: #ffffff;
font-weight: 500;
}
.concat_con {
font-size: 0.2rem; font-size: 0.2rem;
color: #ffffff; color: #ffffff;
font-weight: 300;
line-height: 0.36rem; line-height: 0.36rem;
font-weight: 300;
margin-top: 0.19rem;
.con_address {
padding-left: 0.7rem;
text-indent: -0.7rem;
} }
} }
.app-footer-qrcode { }
margin-left: 0.8rem; .part_code {
.code { .code_img {
width: 1.26rem; width: 1.26rem;
height: 1.26rem; height: 1.26rem;
} }
.code_con {
.icon { display: flex;
justify-content: space-between;
align-items: center;
.con_img {
width: 0.21rem; width: 0.21rem;
height: 0.19rem;
} }
span { .con_text {
font-size: 0.2rem; font-size: 0.2rem;
white-space: nowrap;
color: #ffffff; color: #ffffff;
margin-left: 0.05rem;
}
} }
} }
} }
.center_part1 {
margin-top: 0.37rem;
}
} }
.app-copyright { .foot_bottom {
.app-copyright-inner { text-align: center;
line-height: 2; margin-top: 0.5rem;
color: #999999;
font-size: 0.2rem; font-size: 0.2rem;
font-weight: 300; font-weight: 300;
color: #999999;
text-align: center; .bottom_ba {
span { margin-top: 0.23rem;
display: inline-block;
white-space: nowrap;
}
a { a {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center;
img { img {
width: 0.4rem; width: 0.24rem;
height: 0.4rem; height: 0.26rem;
} }
.ba_text {
margin-left: 0.16rem;
text-align: center;
} }
} }
} }
.bottom_ezijing {
.app-footer-qrcode { margin-top: 0.24rem;
display: block; }
}
} }
} }
</style> </style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论