significative
2 months ago
parent
3f9738733b
commit
8a141fa19d
4 changed files with 382 additions and 68 deletions
@ -0,0 +1,81 @@ |
||||
<template> |
||||
<div class="footer"> |
||||
<ul> |
||||
<li> |
||||
系统标题： |
||||
{{ adminInfoStore.info.title }} |
||||
|
||||
</li><el-divider direction="vertical" border-style="dashed" /> |
||||
<li> |
||||
版权信息： |
||||
{{ adminInfoStore.info.copyrightInformation }} |
||||
|
||||
</li> <el-divider direction="vertical" border-style="dashed" /> |
||||
<li> |
||||
备案号： |
||||
{{ adminInfoStore.info.recordNumber }} |
||||
|
||||
</li> <el-divider direction="vertical" border-style="dashed" /> |
||||
<li> |
||||
qq: |
||||
{{ adminInfoStore.info.qqNumber }} |
||||
|
||||
</li><el-divider direction="vertical" border-style="dashed" /> |
||||
<li> |
||||
邮箱: |
||||
{{ adminInfoStore.info.mailbox }} |
||||
|
||||
</li> <el-divider direction="vertical" border-style="dashed" /> |
||||
<li> |
||||
电话: |
||||
{{ adminInfoStore.info.phone }} |
||||
|
||||
</li> |
||||
<li> |
||||
地址: |
||||
{{ adminInfoStore.info.address }} |
||||
</li> |
||||
<el-divider direction="vertical" border-style="dashed" /> |
||||
<li> |
||||
<el-image style="width: 50px; height: 50px" :src="adminInfoStore.info.qrCode" fit="cover" /> |
||||
</li> |
||||
<el-divider direction="vertical" border-style="dashed" /> |
||||
<li> |
||||
备案信息: |
||||
{{ adminInfoStore.info.recordInformation }} |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import useAdminInfoStore from '@/store/module/adminInfo' |
||||
const adminInfoStore = useAdminInfoStore() |
||||
console.log(adminInfoStore); |
||||
|
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.footer { |
||||
background-color: #252527; |
||||
height: 300px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
ul { |
||||
width: 600px; |
||||
height: 200px; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
align-items: center; |
||||
justify-content: center; |
||||
color: #ccc; |
||||
font-family:'Courier New', Courier, monospace; |
||||
// background: linear-gradient(white,#38495a); |
||||
// background-clip: text; |
||||
// color: transparent; |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
@ -1,81 +1,312 @@ |
||||
<template> |
||||
<div class="footer"> |
||||
<ul> |
||||
<li> |
||||
系统标题： |
||||
{{ adminInfoStore.info.title }} |
||||
<script lang="ts" setup> |
||||
import { ref } from "vue"; |
||||
import useAdminInfoStore from '@/store/module/adminInfo' |
||||
const adminInfoStore = useAdminInfoStore() |
||||
const info = adminInfoStore.info; |
||||
|
||||
</li><el-divider direction="vertical" border-style="dashed" /> |
||||
<li> |
||||
版权信息： |
||||
{{ adminInfoStore.info.copyrightInformation }} |
||||
const footer = ref(null) |
||||
|
||||
</li> <el-divider direction="vertical" border-style="dashed" /> |
||||
<li> |
||||
备案号： |
||||
{{ adminInfoStore.info.recordNumber }} |
||||
function handleDark() { |
||||
// @ts-ignore |
||||
footer.value.classList.toggle('dark__mode') |
||||
isShow.value = !isShow.value |
||||
} |
||||
const isShow = ref(false) |
||||
</script> |
||||
|
||||
</li> <el-divider direction="vertical" border-style="dashed" /> |
||||
<template> |
||||
<footer ref="footer" class="dark__mode"> |
||||
<div class="container"> |
||||
<div class="container__footer"> |
||||
<div class="profil"> |
||||
<div class="logo__area"> |
||||
<img src="../../assets/images/LOGO.png" alt=""> |
||||
<span class="logo__name">LESSON</span> |
||||
<button v-show="isShow" @click="handleDark" class="moon"><i class='bx bxs-moon'></i></button> |
||||
<button v-show="!isShow" @click="handleDark" class="sun"><i class='bx bxs-sun'></i></button> |
||||
</div> |
||||
<div class="desc__area"> |
||||
<p> |
||||
Thanks for using the integrated teaching portal system |
||||
</p> |
||||
</div> |
||||
<div class="social__media"> |
||||
<i class='bx bxl-linkedin-square'></i> |
||||
<i class='bx bxl-facebook-square'></i> |
||||
<i class='bx bxl-instagram-alt'></i> |
||||
<i class='bx bxl-github'></i> |
||||
<!-- <i> |
||||
<svg class="svg"> |
||||
<use :xlink:href="'#icon-QQ'"></use> |
||||
</svg> |
||||
</i> --> |
||||
</div> |
||||
</div> |
||||
<div class="service__area"> |
||||
<ul class="service__header"> |
||||
<li class="service__name">Information</li> |
||||
<li> |
||||
qq: |
||||
{{ adminInfoStore.info.qqNumber }} |
||||
|
||||
</li><el-divider direction="vertical" border-style="dashed" /> |
||||
<i> |
||||
系统标题：{{ info.title }} |
||||
</i> |
||||
</li> |
||||
<li> |
||||
邮箱: |
||||
{{ adminInfoStore.info.mailbox }} |
||||
|
||||
</li> <el-divider direction="vertical" border-style="dashed" /> |
||||
<i> |
||||
版权信息：{{ info.copyrightInformation }} |
||||
</i> |
||||
</li> |
||||
<li> |
||||
电话: |
||||
{{ adminInfoStore.info.phone }} |
||||
|
||||
<i> |
||||
备案号：{{ info.recordNumber }} |
||||
</i> |
||||
</li> |
||||
<li> |
||||
<i> |
||||
备案信息：{{ info.recordInformation }} |
||||
</i> |
||||
</li> |
||||
</ul> |
||||
<ul class="service__header"> |
||||
<li class="service__name">Relation</li> |
||||
<li> |
||||
<i> |
||||
邮箱：{{ info.mailbox }} |
||||
</i> |
||||
</li> |
||||
<li> |
||||
地址: |
||||
{{ adminInfoStore.info.address }} |
||||
<i> |
||||
电话：{{ info.phone }} |
||||
</i> |
||||
</li> |
||||
<el-divider direction="vertical" border-style="dashed" /> |
||||
<li> |
||||
<el-image style="width: 50px; height: 50px" :src="adminInfoStore.info.qrCode" fit="cover" /> |
||||
<i> |
||||
QQ：{{ info.qqNumber }} |
||||
</i> |
||||
</li> |
||||
<el-divider direction="vertical" border-style="dashed" /> |
||||
<li> |
||||
备案信息: |
||||
{{ adminInfoStore.info.recordInformation }} |
||||
<i> |
||||
地址：{{ info.address }} |
||||
</i> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<hr> |
||||
<!-- <div class="footer__bottom"> |
||||
<div class="copy__right"> |
||||
<i class='bx bxs-copyright'></i> |
||||
<span>2024 ayprojex</span> |
||||
</div> |
||||
<div class="tou"> |
||||
<i>Term of Use</i> |
||||
<i>Privacy Policy</i> |
||||
<i>Cookie</i> |
||||
</div> |
||||
</div> --> |
||||
</div> |
||||
</footer> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import useAdminInfoStore from '@/store/module/adminInfo' |
||||
const adminInfoStore = useAdminInfoStore() |
||||
console.log(adminInfoStore); |
||||
<style lang="scss" scoped> |
||||
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap'); |
||||
|
||||
</script> |
||||
.svg { |
||||
width: 24px; |
||||
height: 25px; |
||||
} |
||||
|
||||
<style lang="scss" scoped> |
||||
.footer { |
||||
background-color: #252527; |
||||
height: 300px; |
||||
.dark__mode { |
||||
--primary-color: #000; |
||||
--secondary-color: #fff; |
||||
} |
||||
|
||||
footer { |
||||
--primary-color: #fff; |
||||
--secondary-color: #000; |
||||
background-color: var(--primary-color); |
||||
box-shadow: 0 16px 70px -8px rgba(0, 0, 0, 0.25); |
||||
border-radius: 20px 20px 0 0; |
||||
transition: background 0.3s linear; |
||||
|
||||
.container { |
||||
max-width: 1240px; |
||||
padding: 30px 40px; |
||||
margin: auto; |
||||
|
||||
.container__footer { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
justify-content: center; |
||||
margin-bottom: 1em; |
||||
|
||||
ul { |
||||
width: 600px; |
||||
height: 200px; |
||||
.profil { |
||||
.logo__area { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
align-items: center; |
||||
margin-bottom: 1em; |
||||
|
||||
.logo__name { |
||||
font-size: 1.5em; |
||||
font-weight: 700; |
||||
margin: 0 1em; |
||||
color: var(--secondary-color); |
||||
} |
||||
|
||||
img { |
||||
width: 35px; |
||||
height: 35px; |
||||
border-radius: 50%; |
||||
border: 1px solid var(--primary-color); |
||||
} |
||||
|
||||
button { |
||||
border: none; |
||||
outline: none; |
||||
background-color: transparent; |
||||
font-size: 15px; |
||||
cursor: pointer; |
||||
|
||||
&.sun { |
||||
color: #fff; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.desc__area { |
||||
max-width: 320px; |
||||
margin-bottom: 1.25em; |
||||
|
||||
p { |
||||
color: #828282; |
||||
font-weight: 400; |
||||
line-height: 1.8; |
||||
} |
||||
} |
||||
|
||||
.social__media { |
||||
// display: flex; |
||||
|
||||
i { |
||||
color: #828282; |
||||
margin-right: 22px; |
||||
font-size: 24px; |
||||
|
||||
// &:hover { |
||||
// color: #313131; |
||||
// } |
||||
} |
||||
} |
||||
} |
||||
|
||||
.service__area { |
||||
display: flex; |
||||
|
||||
.service__header { |
||||
margin-right: 40px; |
||||
|
||||
li.service__name { |
||||
color: var(--secondary-color); |
||||
font-weight: 600; |
||||
} |
||||
|
||||
li { |
||||
margin-bottom: 10px; |
||||
|
||||
i { |
||||
color: #828282; |
||||
margin-bottom: 1px; |
||||
font-weight: 400; |
||||
|
||||
// &:hover { |
||||
// color: #313131; |
||||
// } |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
hr { |
||||
height: 1px; |
||||
border: none; |
||||
background-color: #828282; |
||||
margin-bottom: 1em; |
||||
} |
||||
|
||||
.footer__bottom { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
font-size: 0.857em; |
||||
|
||||
.copy__right { |
||||
color: #828282; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
span { |
||||
margin-left: 8px; |
||||
font-weight: 400; |
||||
letter-spacing: 0.135em; |
||||
} |
||||
} |
||||
|
||||
.tou { |
||||
i { |
||||
color: #828282; |
||||
margin-left: 1.5em; |
||||
|
||||
// &:hover { |
||||
// color: #313131; |
||||
// } |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (max-width:768px) { |
||||
|
||||
.container__footer, |
||||
.service__area { |
||||
flex-wrap: wrap; |
||||
justify-content: left; |
||||
} |
||||
|
||||
.service__header { |
||||
margin-left: 0; |
||||
margin-right: 40px; |
||||
} |
||||
|
||||
.social_media { |
||||
margin-bottom: 1em; |
||||
} |
||||
|
||||
.footer_bottom { |
||||
flex-wrap: wrap; |
||||
justify-content: center; |
||||
color: #ccc; |
||||
font-family:'Courier New', Courier, monospace; |
||||
// background: linear-gradient(white,#38495a); |
||||
// background-clip: text; |
||||
// color: transparent; |
||||
} |
||||
} |
||||
|
||||
@media screen and (max-width: 510px) { |
||||
.service__header { |
||||
margin-bottom: 8px; |
||||
} |
||||
|
||||
.copy__right { |
||||
margin-bottom: 8px; |
||||
} |
||||
} |
||||
|
||||
* { |
||||
padding: 0; |
||||
margin: 0; |
||||
box-sizing: border-box; |
||||
font-family: "Rubik", sans-serif; |
||||
font-size: 16px; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: none; |
||||
} |
||||
</style> |
||||
|
||||
|
After Width: | Height: | Size: 869 B |
Loading…
Reference in new issue