diff --git a/src/assets/img/feature1.svg b/src/assets/img/feature1.svg new file mode 100644 index 0000000..e746429 --- /dev/null +++ b/src/assets/img/feature1.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + ¥ + + + + + diff --git a/src/assets/img/feature2.svg b/src/assets/img/feature2.svg new file mode 100644 index 0000000..27131eb --- /dev/null +++ b/src/assets/img/feature2.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/feature3.svg b/src/assets/img/feature3.svg new file mode 100644 index 0000000..41e572e --- /dev/null +++ b/src/assets/img/feature3.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/feature4.svg b/src/assets/img/feature4.svg new file mode 100644 index 0000000..dc4947c --- /dev/null +++ b/src/assets/img/feature4.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/less/footer.less b/src/components/less/footer.less index 0a2551b..2ac1667 100644 --- a/src/components/less/footer.less +++ b/src/components/less/footer.less @@ -52,12 +52,34 @@ } } -@media (max-width: 420px) { +@media (max-width: 768px) { .@{prefix}-footer { + padding: 25px 15px 15px 15px; + .footer-content { + flex-direction: column; + gap: 15px; + padding: 0; + } + .footer-qrcode { + width: 100%; + text-align: center; + } + .footer-qrcode img { + width: 200px !important; + max-width: 200px; + height: auto !important; + margin: 0 auto 10px; + } .links { + width: 100%; + padding: 0 5px; a { - margin: 0 5px; - font-size: 12px; + display: inline-block; + margin: 0 3px; + padding: 4px 6px; + font-size: 11px; + line-height: 1.6; + border-radius: 4px; &:after { content: none; } @@ -65,21 +87,16 @@ br { display: block; } + img { + width: 14px !important; + height: 16px !important; + vertical-align: middle; + } } - .footer-content { - flex-direction: column; - gap: 12px; - } - .footer-qrcode img { - width: 180px !important; - height: auto !important; - margin-bottom: 8px; - } - .links a { - display: inline-block; - padding: 4px 6px; - line-height: 1.6; - border-radius: 4px; + .copy-right { + font-size: 11px; + padding: 10px 5px; + line-height: 1.5; } } } diff --git a/src/components/less/header.less b/src/components/less/header.less index 9c19bae..76fd64a 100644 --- a/src/components/less/header.less +++ b/src/components/less/header.less @@ -58,7 +58,7 @@ } } -@media (max-width: 420px) { +@media (max-width: 768px) { .@{prefix}-header{ height: 60px; .zui-logo{ @@ -67,31 +67,50 @@ margin: 0 0 0 10px; } .@{prefix}-logo-text{ - padding-top: 14px; - font-size: 12px; height: 60px; + line-height: 60px; + font-size: 10px; + margin: 0; + a { + margin: 0 4px; + font-size: 10px; + } } .@{prefix}-button{ - display: none; + display: none !important; } .@{prefix}-rightcol{ - display: flex; - font-size: 10px; + display: flex !important; + align-items: center; + justify-content: center; + font-size: 14px; float: right; - line-height: 30px; - margin: 15px 5px 0 0; - min-width: 50px; + line-height: 35px; + margin: 12px 10px 0 0; + min-width: 60px; + padding: 0 12px; font-weight: bold; - color: #32adc6; + color: #fff; + background: linear-gradient(135deg, #35A3BA, #0088ff); + border-radius: 6px; + cursor: pointer; + box-shadow: 0 2px 6px rgba(53, 163, 186, 0.3); + transition: all 0.2s ease; + } + .@{prefix}-rightcol:active { + transform: scale(0.96); + box-shadow: 0 1px 3px rgba(53, 163, 186, 0.4); } .@{prefix}-logo-line { - width: 1px; - height: 30px; - background: #32adc6; - display: inline-block; - position: relative; - top: 15px; - left: 5px; + display: none; + } + } +} + +@media (min-width: 769px) { + .@{prefix}-header{ + .@{prefix}-rightcol{ + display: none !important; } } } diff --git a/src/components/less/page.less b/src/components/less/page.less index b476e80..61d5b8b 100644 --- a/src/components/less/page.less +++ b/src/components/less/page.less @@ -90,6 +90,11 @@ background: #f6f8fa; cursor: pointer; } +@media (max-width: 600px) { + .zui-page { + overflow-x: hidden; + } +} @media (min-width: 1200px) { .zui-drawer, .zui-drawer-overlay { diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue index a9dce58..573967b 100644 --- a/src/views/HomePage.vue +++ b/src/views/HomePage.vue @@ -2,17 +2,12 @@ -

+

  记账平台   健康档案   茅台预约

◄目录►
-
-   记账平台 -   健康档案 -   茅台预约 -
联系我们 资料下载 @@ -133,10 +128,10 @@ import ZuiHeader from '../components/Header' import ZuiFooter from '../components/Footer' import ZuiButton from '../components/Button' - import feature1 from '../assets/img/feature1.png' - import feature2 from '../assets/img/feature2.png' - import feature3 from '../assets/img/feature3.png' - import feature4 from '../assets/img/feature4.png' + import feature1 from '../assets/img/feature1.svg' + import feature2 from '../assets/img/feature2.svg' + import feature3 from '../assets/img/feature3.svg' + import feature4 from '../assets/img/feature4.svg' import Util from '../Util' export default{ components: {Page, Logo, ZuiHeader, ZuiFooter,ZuiButton}, @@ -275,10 +270,37 @@ } } @media (max-width: 1024px) { - .features .zui-card-list { grid-template-columns: repeat(2, 1fr); } + .features .zui-card-list { + grid-template-columns: repeat(2, 1fr); + padding: 0 20px; + } } @media (max-width: 600px) { - .features .zui-card-list { grid-template-columns: 1fr; } - .features .zui-card__media img { width: 80px; } + .features { + padding: 30px 15px !important; + } + .features .zui-card-list { + grid-template-columns: 1fr; + gap: 16px; + padding: 0 10px; + } + .features .zui-card { + min-height: 200px; + padding: 16px !important; + } + .features .zui-card__media { + width: 70px; + height: 70px; + } + .features .zui-card__media img { + width: 70px !important; + height: 70px !important; + } + .features .zui-card__title { + font-size: 15px !important; + } + .features .zui-card__desc { + font-size: 12px !important; + } } diff --git a/src/views/callus.vue b/src/views/callus.vue index 4f6c347..444e1b1 100644 --- a/src/views/callus.vue +++ b/src/views/callus.vue @@ -2,17 +2,12 @@ -

+

  记账平台   健康档案   茅台预约

◄目录►
-
-   记账平台 -   健康档案 -   茅台预约 -
联系我们 资料下载 @@ -152,3 +147,39 @@ } + diff --git a/src/views/less/home-page.less b/src/views/less/home-page.less index 3a1a177..f0d8feb 100644 --- a/src/views/less/home-page.less +++ b/src/views/less/home-page.less @@ -1,4 +1,5 @@ .home-page { + overflow-x: hidden; .banner { text-align: center; padding: 180px 20px; @@ -186,27 +187,34 @@ } } -@media (max-width: 420px) { +@media (max-width: 768px) { .home-page { + overflow-x: hidden; + width: 100%; .banner { - padding: 80px 20px; + padding: 60px 15px; h1 { - font-size: 24px; + font-size: 20px; + line-height: 1.4; .br { display: block; } } h3 { font-size: 12px; + line-height: 1.5; + margin-top: 15px; } } .nav { - margin: 35px auto 0 auto; + margin: 20px auto 0 auto; + padding: 0 15px; a { float: none; - width: 270px; - margin: 25px auto; - padding: 32px 20px; + width: 100%; + max-width: 300px; + margin: 15px auto; + padding: 25px 15px; &.zhichou { color: #fff; background: #32ADC6; @@ -221,9 +229,10 @@ } .watermark { color: #fff !important; + font-size: 50px; } .zui-logo { - width: 110px; + width: 100px; display: none; } .zui-logo.mobile { @@ -242,52 +251,56 @@ margin: 0 0 30px 0; } .service{ - padding: 36px 0; + padding: 30px 15px; h1{ - font-size: 24px; - line-height: 35px; + font-size: 22px; + line-height: 32px; } h3{ - font-size: 18px; + font-size: 16px; + line-height: 24px; } h4{ font-size: 14px; - line-height: 24px; + line-height: 22px; margin-top: 20px; } } .features{ - padding: 32px 0; + padding: 25px 15px; ul{ - max-width: 300px; + max-width: 100%; + padding: 0 10px; li{ - margin-top: 0; - padding-left: 55px; + margin-top: 15px; + padding-left: 50px; img{ - width: 35px; + width: 40px; } h4{ - font-size: 18px; + font-size: 16px; } p{ - font-size: 14px; + font-size: 13px; } } } } .apply-hr{ - padding: 25px 0; + padding: 25px 15px; h2{ - font-size: 20px; + font-size: 18px; + line-height: 26px; } h4{ font-size: 14px; - margin-top: 5px; + line-height: 20px; + margin-top: 10px; } } .apply-hr-form{ - padding: 20px 0; + padding: 20px 15px; } } } diff --git a/src/views/resource.vue b/src/views/resource.vue index a3b1cc3..b81ce12 100644 --- a/src/views/resource.vue +++ b/src/views/resource.vue @@ -2,17 +2,12 @@ -

+

  记账平台   健康档案   茅台预约

◄目录►
-
-   记账平台 -   健康档案 -   茅台预约 -
联系我们 资料下载 @@ -48,8 +43,8 @@
安卓APP下载 系统介绍 - PC手册 - H5手册 + 使用手册 +
@@ -310,17 +305,53 @@ download(type) { @media (max-width: 1024px) { .features .zui-card-list { grid-template-columns: repeat(2, 1fr); + padding: 0 20px; } } @media (max-width: 600px) { + .service { + padding: 30px 15px !important; + } + .service h1 { + font-size: 20px !important; + line-height: 28px !important; + } + .service h3 { + font-size: 15px !important; + line-height: 22px !important; + } + .features { + padding: 30px 15px !important; + } .features .zui-card-list { grid-template-columns: 1fr; + gap: 20px; + padding: 0 10px; } .features .zui-card { - align-items: flex-start; + min-height: auto; + padding: 16px !important; + } + .features .zui-card__media { + width: 90px !important; + height: 90px !important; } .features .zui-card__media img { - width: 80px; + width: 90px !important; + height: 90px !important; + } + .features .zui-card__title { + font-size: 16px !important; + } + .features .zui-card__actions { + flex-direction: column; + gap: 8px; + } + .features .zui-button-link { + width: 100%; + min-width: auto; + padding: 8px 12px; + font-size: 13px; } }