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