wangjiadong
/
knowledge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

门户尾部样式

Browse Source
master
significative 2 months ago
parent 3f9738733b
commit 8a141fa19d
4 changed files with 382 additions and 68 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      teaching_integration_platform_template/index.html
  2. 81
      teaching_integration_platform_template/src/Layout/footer/index copy.vue
  3. 335
      teaching_integration_platform_template/src/Layout/footer/index.vue
  4. 1
      teaching_integration_platform_template/src/assets/icons/QQ.svg

1
teaching_integration_platform_template/index.html
Unescape View File

@ -4,6 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<title>Vite + Vue + TS</title> <title>Vite + Vue + TS</title>
</head> </head>
<body> <body>

81
teaching_integration_platform_template/src/Layout/footer/index copy.vue
Unescape View File

@ -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>

335
teaching_integration_platform_template/src/Layout/footer/index.vue
Unescape View File

@ -1,81 +1,312 @@
<template> <script lang="ts" setup>
<div class="footer"> import { ref } from "vue";
<ul> import useAdminInfoStore from '@/store/module/adminInfo'
<li> const adminInfoStore = useAdminInfoStore()
系统标题： const info = adminInfoStore.info;
{{ adminInfoStore.info.title }}
</li><el-divider direction="vertical" border-style="dashed" /> const footer = ref(null)
<li>
版权信息：
{{ adminInfoStore.info.copyrightInformation }}
</li> <el-divider direction="vertical" border-style="dashed" /> function handleDark() {
<li> // @ts-ignore
备案号： footer.value.classList.toggle('dark__mode')
{{ adminInfoStore.info.recordNumber }} 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> <li>
qq: <i>
{{ adminInfoStore.info.qqNumber }} 系统标题：{{ info.title }}
</i>
</li><el-divider direction="vertical" border-style="dashed" /> </li>
<li> <li>
邮箱: <i>
{{ adminInfoStore.info.mailbox }} 版权信息：{{ info.copyrightInformation }}
</i>
</li> <el-divider direction="vertical" border-style="dashed" /> </li>
<li> <li>
电话: <i>
{{ adminInfoStore.info.phone }} 备案号：{{ 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>
<li> <li>
地址: <i>
{{ adminInfoStore.info.address }} 电话：{{ info.phone }}
</i>
</li> </li>
<el-divider direction="vertical" border-style="dashed" />
<li> <li>
<el-image style="width: 50px; height: 50px" :src="adminInfoStore.info.qrCode" fit="cover" /> <i>
QQ：{{ info.qqNumber }}
</i>
</li> </li>
<el-divider direction="vertical" border-style="dashed" />
<li> <li>
备案信息: <i>
{{ adminInfoStore.info.recordInformation }} 地址：{{ info.address }}
</i>
</li> </li>
</ul> </ul>
</div> </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> </template>
<script lang="ts" setup> <style lang="scss" scoped>
import useAdminInfoStore from '@/store/module/adminInfo' @import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
const adminInfoStore = useAdminInfoStore()
console.log(adminInfoStore);
</script> .svg {
width: 24px;
height: 25px;
}
<style lang="scss" scoped> .dark__mode {
.footer { --primary-color: #000;
background-color: #252527; --secondary-color: #fff;
height: 300px; }
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; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
justify-content: center; margin-bottom: 1em;
ul { .profil {
width: 600px; .logo__area {
height: 200px;
display: flex; display: flex;
flex-wrap: wrap;
align-items: center; 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; 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> </style>

1
teaching_integration_platform_template/src/assets/icons/QQ.svg
Unescape View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1726655680044" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2686" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m210.5 612.4c-11.5 1.4-44.9-52.7-44.9-52.7 0 31.3-16.2 72.2-51.1 101.8 16.9 5.2 54.9 19.2 45.9 34.4-7.3 12.3-125.6 7.9-159.8 4-34.2 3.8-152.5 8.3-159.8-4-9.1-15.2 28.9-29.2 45.8-34.4-35-29.5-51.1-70.4-51.1-101.8 0 0-33.4 54.1-44.9 52.7-5.4-0.7-12.4-29.6 9.4-99.7 10.3-33 22-60.5 40.2-105.8-3.1-116.9 45.3-215 160.4-215 113.9 0 163.3 96.1 160.4 215 18.1 45.2 29.9 72.8 40.2 105.8 21.7 70.1 14.6 99.1 9.3 99.7z" p-id="2687" fill="#828282"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 869 B

Write Preview
Loading…
Cancel
Save