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-04-30 22:58:08 +08:00
parent 03a5472ee6
commit 154d08e918
2 changed files with 115 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
src/components/Footer.vue
View File

@ -14,24 +14,29 @@
white-space: nowrap;
line-height: 48px;">商务合作</strong>
</div>
<div id="">
<p class="itemtitle">CAL</p>
<p class="itemcontent">13632037777 田先生</p>
<div id="CAL">
<span class="itemtitle">CAL</span>
<br/>
<span class="itemcontent">13632037777 田先生</span>
</div>
<div id="">
<p class="itemtitle">EMAIL</p>
<p class="itemcontent">Sevice@feishu.com</p>
<div id="EMAIL">
<span class="itemtitle">EMAIL</span>
<br/>
<span class="itemcontent">Sevice@feishu.com</span>
</div>
<div id="">
<p class="itemtitle">WECHAT</p>
<p class="itemcontent">KDesign公众号</p>
<div id="WECHAT">
<span class="itemtitle">WECHAT</span>
<br/>
<span class="itemcontent">KDesign公众号</span>
</div>
<div id="">
<p class="itemtitle">ADRESS</p>
<p class="itemcontent">北京市朝阳区崔各庄创意产业</p>
<div id="ADDRESS">
<span class="itemtitle">ADDRESS</span>
<br/>
<span class="itemcontent">北京市朝阳区崔各庄创意产业</span>
</div>
<div id="">
<p class="itemtitle">微信扫码，添加商务同事</p>
<div id="QRCODE">
<span class="itemtitle">微信扫码，添加商务同事</span>
<br/>
<img src="/QRCodeBottom.png">
</div>
</div>
@ -59,41 +64,16 @@ export default {
}
#footercontent
{
display: grid;
color:white;
}
.itemtitle
{
width: 179px;
height: 60px;
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;
height: 60px;
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;
}
@include media-breakpoint-between(xs, md) {
#footerroot
{
min-height:806px;
}
#footercontent{
display: grid;
max-width: 304px;
min-height: 614px;
grid-template-columns: repeat(1, 1fr); /* 1列等分 */
@ -112,8 +92,92 @@ export default {
width:714px;
min-height: 338px;
grid-template-columns: repeat(2, 1fr); /* 2列等分 */
grid-template-rows: repeat(4, 60px); /* 2行高度120px */
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>

10
start.html Normal file
View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>