diff --git a/public/bottom/qrwecom01.png b/public/bottom/qrwecom01.png index 5d13460..1ef82c6 100644 Binary files a/public/bottom/qrwecom01.png and b/public/bottom/qrwecom01.png differ diff --git a/public/bottom/qrwecom02.png b/public/bottom/qrwecom02.png index 8ac8d03..cfda651 100644 Binary files a/public/bottom/qrwecom02.png and b/public/bottom/qrwecom02.png differ diff --git a/public/bottom/qrwecom03.png b/public/bottom/qrwecom03.png new file mode 100644 index 0000000..39e91ab Binary files /dev/null and b/public/bottom/qrwecom03.png differ diff --git a/src/App.vue b/src/App.vue index 461a1f5..1a7e01a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -44,6 +44,9 @@ router.isReady().then(() => { display: flex; flex-direction: column; min-height: 100vh; + width: 100%; + //裁剪多余区域 + overflow: hidden; } #defaultcontainer{ display: flex; diff --git a/src/components/Footer.vue b/src/components/Footer.vue index e89fbb4..a9080b8 100644 --- a/src/components/Footer.vue +++ b/src/components/Footer.vue @@ -24,20 +24,22 @@ export default { display: flex; background-color: black; width:100%; - align-items: center; + //align-items: center; justify-content: left; @include media-breakpoint-between(xs, md) { - min-height:806px; background-image: url('/bottom/bg_wep.png'); padding-left: 32px; + padding-top: 66px; + padding-bottom: 66px; } @include media-breakpoint-between(md,xxl){ - min-height: 759px; margin-top: 0px; background-image: url('/bottom/bg_pc.png'); padding-left: 100px; + padding-top: 109px; + padding-bottom: 109px; } @include media-breakpoint-up(xxl) { @@ -45,6 +47,8 @@ export default { margin-top: 0px; background-image: url('/bottom/bg_pc.png'); padding-left: 256px; + padding-top: 109px; + padding-bottom: 109px; } } diff --git a/src/components/Tools/FooterContent.vue b/src/components/Tools/FooterContent.vue index 388c950..784c755 100644 --- a/src/components/Tools/FooterContent.vue +++ b/src/components/Tools/FooterContent.vue @@ -3,6 +3,37 @@
期待与您共创
+
+
+ 扫码添加企业微信 +
+
+
+ + + 项目经理 + +
+
+ + + 商务经理 + +
+
+
+
+ WECHAT / 公众号 +
+
+ + + K DESIGN Lab + +
+
+
+
EMAIL
@@ -13,14 +44,7 @@
ADDRESS
- 北京市朝阳区华瀚龙门数字艺术创意园 -
-
- 微信扫码,添加商务同事 -
- -   - + 北京市朝阳区华瀚龙门数字艺术创意园D08
@@ -35,6 +59,38 @@ export default { @import "node_modules/bootstrap/scss/_functions.scss"; @import "node_modules/bootstrap/scss/_variables.scss"; @import "node_modules/bootstrap/scss/_mixins.scss"; +.qritem{ + display: flex; + flex-direction: column; + justify-content: center; +} + +#wechatpublic{ + +} + +#qrcontainer{ + display: flex; + @include media-breakpoint-between(xs, md) { + flex-direction: column; + } + + @include media-breakpoint-up(md) { + flex-direction: row; + } +} + +.qrcodeimg{ + @include media-breakpoint-between(xs, md) { + width: 88px; + height: 88px; + } + + @include media-breakpoint-up(md) { + width: 100px; + height: 100px; + } +} #footercontent { @@ -42,11 +98,12 @@ export default { flex-direction: column; justify-content: flex-start; color:white; + width: 100%; } @include media-breakpoint-between(xs, md) { #footercontent{ - max-width: 304px; + //max-width: 304px; min-height: 614px; grid-template-columns: repeat(1, 1fr); /* 1列等分 */ grid-template-rows: repeat(8,90px); /* 8行高度120px */ @@ -57,7 +114,7 @@ export default { @include media-breakpoint-up(md) { #footercontent { - width:714px; + //width:714px; min-height: 338px; grid-template-columns: repeat(2, 1fr); /* 2列等分 */ grid-template-rows: repeat(4, 90px); /* 4行高度120px */ @@ -81,50 +138,47 @@ export default { font-size: 48px; } } -#CAL{ - @include media-breakpoint-between(xs, md) { - - } - @include media-breakpoint-up(md) { - - } -} #EMAIL{ @include media-breakpoint-between(xs, md) { - + padding-top: 24px; } @include media-breakpoint-up(md) { - - } -} -#WECHAT{ - @include media-breakpoint-between(xs, md) { - - } - @include media-breakpoint-up(md) { - + padding-top: 56px; } } #ADDRESS{ @include media-breakpoint-between(xs, md) { - + padding-top: 24px; } @include media-breakpoint-up(md) { - + padding-top: 56px; } } #QRCODE{ + width: 50%; @include media-breakpoint-between(xs, md) { - + padding-top: 9px; } @include media-breakpoint-up(md) { - + padding-top: 47px; + } +} +#QRCODE2{ + display: flex; + flex-direction: column; + width: 50%; + @include media-breakpoint-between(xs, md) { + padding-top: 9px; + justify-content: flex-start; + } + @include media-breakpoint-up(md) { + padding-top: 47px; + justify-content: flex-end; } } .itemtitle { - width: 179px; overflow-wrap: break-word; color: rgba(255, 255, 255, 0.6); font-size: 16px;