Skip to content

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

页面底部重写

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