yangprivate-web/kdofficial
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 32 Wiki Activity

底部栏内容自成模块

Browse Source
This commit is contained in:
zhcnyuyang 2025-05-02 17:28:54 +08:00
parent 325e7f87d9
commit 506dd94d1d
1 changed files with 4 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
src/components/Footer.vue
View File

@ -1,49 +1,10 @@
<script setup>
import FooterContent from './components/Tools/FooterContent.vue'
import FooterContent from './Tools/FooterContent.vue'
</script>
<template>
<div id="footerroot" class="container-fluid">
<div id="footercontent">
<div id="title" style="text-align: left">
<strong style="
width: 112px;
height: 48px;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 28px;
font-family: PingFangSC-Medium;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 48px;">商务合作</strong>
</div>
<div id="CAL">
<span class="itemtitle">CAL</span>
<br/>
<span class="itemcontent">13632037777 田先生</span>
</div>
<div id="EMAIL">
<span class="itemtitle">EMAIL</span>
<br/>
<span class="itemcontent">Sevice@feishu.com</span>
</div>
<div id="WECHAT">
<span class="itemtitle">WECHAT</span>
<br/>
<span class="itemcontent">KDesign公众号</span>
</div>
<div id="ADDRESS">
<span class="itemtitle">ADDRESS</span>
<br/>
<span class="itemcontent">北京市朝阳区崔各庄创意产业</span>
</div>
<div id="QRCODE">
<span class="itemtitle">微信扫码，添加商务同事</span>
<br/>
<img src="/QRCodeBottom.png">
</div>
</div>
<FooterContent></FooterContent>
</div>
</template>
@ -65,124 +26,14 @@ export default {
width:100%;
align-items: center;
justify-content: center;
}
#footercontent
{
display: grid;
color:white;
}
@include media-breakpoint-between(xs, md) {
#footerroot
{
@include media-breakpoint-between(xs, md) {
min-height:806px;
}
#footercontent{
max-width: 304px;
min-height: 614px;
grid-template-columns: repeat(1, 1fr); /* 1列等分 */
grid-template-rows: repeat(8,90px); /* 8行高度120px */
}
}
@include media-breakpoint-up(md) {
#footerroot
{
@include media-breakpoint-up(md) {
min-height: 759px;
margin-top: 0px;
}
#footercontent
{
width:714px;
min-height: 338px;
grid-template-columns: repeat(2, 1fr); /* 2列等分 */
grid-template-rows: repeat(4, 90px); /* 4行高度120px */
}
}
#title{
@include media-breakpoint-between(xs, md) {
grid-column: 1;
grid-row: 1;
}
@include media-breakpoint-up(md) {
grid-column: 1;
grid-row: 1;
}
}
#CAL{
@include media-breakpoint-between(xs, md) {
grid-column: 1;
grid-row: 2;
}
@include media-breakpoint-up(md) {
grid-column: 1;
grid-row: 2;
}
}
#EMAIL{
@include media-breakpoint-between(xs, md) {
grid-column: 1;
grid-row: 3;
}
@include media-breakpoint-up(md) {
grid-column: 1;
grid-row: 3;
}
}
#WECHAT{
@include media-breakpoint-between(xs, md) {
grid-column: 1;
grid-row: 4;
}
@include media-breakpoint-up(md) {
grid-column: 1;
grid-row: 4;
}
}
#ADDRESS{
@include media-breakpoint-between(xs, md) {
grid-column: 1;
grid-row: 5;
}
@include media-breakpoint-up(md) {
grid-column: 2;
grid-row: 2;
}
}
#QRCODE{
@include media-breakpoint-between(xs, md) {
grid-column: 1;
grid-row: 6;
}
@include media-breakpoint-up(md) {
grid-column: 2;
grid-row: 3 / span 2;
}
}
.itemtitle
{
width: 179px;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 0.6);
font-size: 16px;
font-family: PingFangSC-Regular;
font-weight: normal;
text-align: left;
line-height: 30px;
}
.itemcontent
{
width: 198px;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 20px;
font-family: PingFangSC-Regular;
font-weight: normal;
text-align: left;
line-height: 30px;
}
</style>