diff --git a/src/components/Header.vue b/src/components/Header.vue index 8d96002..84580ae 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -6,6 +6,7 @@   记账平台   健康档案   茅台预约 +   智聪物联
◄目录►
diff --git a/src/components/img/logo.png b/src/components/img/logo.png index e09f046..7b58c3d 100644 Binary files a/src/components/img/logo.png and b/src/components/img/logo.png differ diff --git a/src/components/less/button.less b/src/components/less/button.less index ef417f9..d272128 100644 --- a/src/components/less/button.less +++ b/src/components/less/button.less @@ -3,22 +3,27 @@ .@{prefix}-button{ color: #fff; font-size: 14px; - line-height: 50px; - border-radius: 10px; - background: linear-gradient(135deg, #00b8ff, #007bff); + font-weight: 500; + line-height: 40px; + height: 40px; + border-radius: 8px; + background: linear-gradient(135deg, #35A3BA 0%, #0ea5b7 100%); border: none; - min-width: 190px; - box-shadow: 0 0 0 rgba(0, 212, 255, 0); + min-width: 100px; + padding: 0 20px; + box-shadow: 0 2px 8px rgba(53, 163, 186, 0.25); transition: all .2s ease; .cursor(); } .@{prefix}-button:hover{ - background: linear-gradient(135deg, #00c2ff, #0088ff); - box-shadow: 0 0 12px rgba(0, 212, 255, 0.5); + background: linear-gradient(135deg, #3db0c8 0%, #12b0c3 100%); + box-shadow: 0 4px 12px rgba(53, 163, 186, 0.35); + transform: translateY(-1px); } .@{prefix}-button:active{ - background: linear-gradient(135deg, #00a8f0, #006fe6); - transform: translateY(1px); + background: linear-gradient(135deg, #2d96aa 0%, #0c98a8 100%); + box-shadow: 0 2px 6px rgba(53, 163, 186, 0.3); + transform: translateY(0); } diff --git a/src/components/less/header.less b/src/components/less/header.less index 76fd64a..b9a1303 100644 --- a/src/components/less/header.less +++ b/src/components/less/header.less @@ -2,45 +2,57 @@ .@{prefix}-header { width: 100%; - height: 100px; - background: rgba(255,255,255,0.75); - backdrop-filter: saturate(180%) blur(8px); + height: 70px; + background: rgba(255,255,255,0.95); + backdrop-filter: saturate(180%) blur(12px); box-shadow: 0 4px 14px rgba(16,24,40,0.08); - position: sticky; + position: fixed; top: 0; - z-index: 100; + left: 0; + z-index: 1000; .float-clear; .@{prefix}-logo{ - width: 135px; - height: 100px; - margin: 0 0 0 20px; + width: 300px; + height: 70px; + margin: 0 0 0 10px; float: left; } .@{prefix}-logo-text{ float: left; - height: 100px; + height: 70px; color: #36A4BB; font-size: 16px; - // padding-top: 28px; - line-height: 100px; + line-height: 70px; text-align: center; - margin: 0 0 0 0px; + margin: 0; + display: flex; + align-items: center; + gap: 8px; } .@{prefix}-logo-text a{ color: var(--color-text); text-decoration: none; - margin: 0 8px; + margin: 0; + padding: 10px 18px; font-weight: 600; + background: rgba(53, 163, 186, 0.06); + border-radius: 8px; + transition: all 0.2s ease; + display: inline-block; + line-height: 1.4; } .@{prefix}-logo-text a:hover{ - color: var(--color-accent); - text-decoration: underline; + color: #35A3BA; + background: rgba(53, 163, 186, 0.12); + text-decoration: none; + transform: translateY(-1px); } .@{prefix}-button{ float: right; line-height: 40px; - margin: 30px 30px 0 0; - min-width: 100px; + height: 40px; + margin: 15px 8px 0 0; + min-width: 90px; } .@{prefix}-rightcol{ display: none; @@ -49,8 +61,8 @@ .@{prefix}-logo-line { width: 1px; - height: 45px; - top: 30px; + height: 35px; + top: 18px; left: 10px; float: left; position: relative; @@ -58,22 +70,72 @@ } } +@media (max-width: 1024px) and (min-width: 769px) { + .@{prefix}-header{ + .@{prefix}-logo-text{ + display: none !important; + } + .@{prefix}-rightcol{ + display: flex !important; + } + } +} + +@media (min-width: 1025px) { + .@{prefix}-header{ + .@{prefix}-rightcol{ + display: none !important; + } + } +} + @media (max-width: 768px) { .@{prefix}-header{ - height: 60px; + height: 100px; + display: flex; + flex-wrap: wrap; + align-items: flex-start; + padding: 10px 0; + background: rgba(255,255,255,0.98); + box-shadow: 0 2px 12px rgba(16,24,40,0.1); .zui-logo{ - height: 60px; - width: 100px; - margin: 0 0 0 10px; + height: 45px; + width: 200px; + max-width: calc(100% - 100px); + margin: 0 0 0 12px; + order: 1; } .@{prefix}-logo-text{ - height: 60px; - line-height: 60px; - font-size: 10px; + display: block !important; + width: 100%; + height: 40px; + line-height: 20px; + font-size: 12px; margin: 0; + padding: 0 12px; + order: 3; + text-align: left; + display: flex; + align-items: center; + justify-content: flex-start; + gap: 12px; a { - margin: 0 4px; - font-size: 10px; + display: inline-block; + margin: 0; + padding: 6px 12px; + font-size: 12px; + font-weight: 500; + color: var(--color-text); + background: rgba(53, 163, 186, 0.08); + border-radius: 6px; + transition: all 0.2s ease; + white-space: nowrap; + } + a:hover, a:active { + background: rgba(53, 163, 186, 0.15); + color: #35A3BA; + text-decoration: none; + transform: translateY(-1px); } } .@{prefix}-button{ @@ -83,34 +145,28 @@ display: flex !important; align-items: center; justify-content: center; - font-size: 14px; - float: right; - line-height: 35px; - margin: 12px 10px 0 0; - min-width: 60px; - padding: 0 12px; - font-weight: bold; - color: #fff; - background: linear-gradient(135deg, #35A3BA, #0088ff); - border-radius: 6px; + font-size: 12px; + height: 36px; + line-height: 36px; + margin: 5px 12px 0 auto; + min-width: 50px; + padding: 0 10px; + font-weight: 500; + color: #35A3BA; + background: rgba(53, 163, 186, 0.1); + border: 1.5px solid rgba(53, 163, 186, 0.3); + border-radius: 8px; cursor: pointer; - box-shadow: 0 2px 6px rgba(53, 163, 186, 0.3); transition: all 0.2s ease; + order: 2; } .@{prefix}-rightcol:active { - transform: scale(0.96); - box-shadow: 0 1px 3px rgba(53, 163, 186, 0.4); + background: rgba(53, 163, 186, 0.18); + border-color: rgba(53, 163, 186, 0.4); + transform: scale(0.98); } .@{prefix}-logo-line { display: none; } } } - -@media (min-width: 769px) { - .@{prefix}-header{ - .@{prefix}-rightcol{ - display: none !important; - } - } -} diff --git a/src/components/less/logo.less b/src/components/less/logo.less index ec3fbd9..b9a54ad 100644 --- a/src/components/less/logo.less +++ b/src/components/less/logo.less @@ -1,5 +1,5 @@ .zui-logo { - width: 150px; - height: 52px; + width: 100px; + height: 40px; cursor: pointer; } diff --git a/src/components/less/page.less b/src/components/less/page.less index 2f512e2..0d14c5b 100644 --- a/src/components/less/page.less +++ b/src/components/less/page.less @@ -20,6 +20,7 @@ width: 100%; min-height: 100%; margin: 0 auto; + padding-top: 70px; font-family: "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif; background: var(--color-bg); color: var(--color-text); @@ -117,6 +118,7 @@ @media (max-width: 600px) { .zui-page { overflow-x: hidden; + padding-top: 100px; } } @media (min-width: 1200px) {