新布局初步成型

This commit is contained in:
zhcnyuyang 2025-05-22 22:36:25 +08:00
parent d9b27605a9
commit b51c078a5a

View File

@ -3,12 +3,6 @@
<div id="title" style="text-align: left"> <div id="title" style="text-align: left">
<strong>期待与您共创</strong> <strong>期待与您共创</strong>
</div> </div>
<div id="CAL">
<span class="itemtitle">CAL</span>
<br/>
<span class="itemcontent">13161374111 田先生<br/>
13520956868 武先生</span>
</div>
<div id="EMAIL"> <div id="EMAIL">
<span class="itemtitle">EMAIL</span> <span class="itemtitle">EMAIL</span>
<br/> <br/>
@ -16,11 +10,6 @@
kdbd@kdesign.top&nbsp;商务<br/>kdhr@kdesign.top&nbsp; 招聘 kdbd@kdesign.top&nbsp;商务<br/>kdhr@kdesign.top&nbsp; 招聘
</span> </span>
</div> </div>
<div id="WECHAT">
<span class="itemtitle">WECHAT</span>
<br/>
<span class="itemcontent">K&nbsp;Design&nbsp;Studio</span>
</div>
<div id="ADDRESS"> <div id="ADDRESS">
<span class="itemtitle">ADDRESS</span> <span class="itemtitle">ADDRESS</span>
<br/> <br/>
@ -49,7 +38,9 @@ export default {
#footercontent #footercontent
{ {
display: grid; display: flex;
flex-direction: column;
justify-content: flex-start;
color:white; color:white;
} }
@ -84,64 +75,50 @@ export default {
white-space: nowrap; white-space: nowrap;
line-height: 48px; line-height: 48px;
@include media-breakpoint-between(xs, md) { @include media-breakpoint-between(xs, md) {
grid-column: 1;
grid-row: 1;
font-size: 24px; font-size: 24px;
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
grid-column: 1;
grid-row: 1;
font-size: 48px; font-size: 48px;
} }
} }
#CAL{ #CAL{
@include media-breakpoint-between(xs, md) { @include media-breakpoint-between(xs, md) {
grid-column: 1;
grid-row: 2;
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
grid-column: 1;
grid-row: 2;
} }
} }
#EMAIL{ #EMAIL{
@include media-breakpoint-between(xs, md) { @include media-breakpoint-between(xs, md) {
grid-column: 1;
grid-row: 3;
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
grid-column: 1;
grid-row: 3;
} }
} }
#WECHAT{ #WECHAT{
@include media-breakpoint-between(xs, md) { @include media-breakpoint-between(xs, md) {
grid-column: 1;
grid-row: 4;
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
grid-column: 1;
grid-row: 4;
} }
} }
#ADDRESS{ #ADDRESS{
@include media-breakpoint-between(xs, md) { @include media-breakpoint-between(xs, md) {
grid-column: 1;
grid-row: 5;
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
grid-column: 2;
grid-row: 2;
} }
} }
#QRCODE{ #QRCODE{
@include media-breakpoint-between(xs, md) { @include media-breakpoint-between(xs, md) {
grid-column: 1;
grid-row: 6;
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
grid-column: 2;
grid-row: 3 / span 2;
} }
} }