diff --git a/src/components/Header.vue b/src/components/Header.vue index 5a30ed6..9c78c11 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -5,7 +5,7 @@

  记账平台   健康档案 -   茅台预约 +   智聪物联

◄目录►
diff --git a/src/components/less/header.less b/src/components/less/header.less index 0988099..1f8781f 100644 --- a/src/components/less/header.less +++ b/src/components/less/header.less @@ -27,25 +27,29 @@ margin: 0; display: flex; align-items: center; - gap: 8px; + gap: 12px; } .@{prefix}-logo-text a{ color: var(--color-text); text-decoration: none; margin: 0; - padding: 10px 18px; + padding: 12px 22px; + font-size: 15px; font-weight: 600; - background: rgba(53, 163, 186, 0.06); - border-radius: 8px; - transition: all 0.2s ease; + background: rgba(102, 126, 234, 0.08); + border-radius: 10px; + transition: all 0.3s ease; display: inline-block; line-height: 1.4; + border: 1px solid transparent; } .@{prefix}-logo-text a:hover{ - color: #35A3BA; - background: rgba(53, 163, 186, 0.12); + color: #667eea; + background: rgba(102, 126, 234, 0.15); + border-color: rgba(102, 126, 234, 0.2); text-decoration: none; - transform: translateY(-1px); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15); } .@{prefix}-button{ float: right; @@ -118,7 +122,7 @@ display: flex; align-items: center; justify-content: flex-start; - gap: 8px; + gap: 10px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; @@ -129,19 +133,21 @@ a { display: inline-block; margin: 0; - padding: 6px 10px; - font-size: 11px; - font-weight: 500; + padding: 7px 14px; + font-size: 12px; + font-weight: 600; color: var(--color-text); - background: rgba(53, 163, 186, 0.08); - border-radius: 6px; + background: rgba(102, 126, 234, 0.1); + border-radius: 8px; transition: all 0.2s ease; white-space: nowrap; flex-shrink: 0; + border: 1px solid rgba(102, 126, 234, 0.15); } a:hover, a:active { - background: rgba(53, 163, 186, 0.15); - color: #35A3BA; + background: rgba(102, 126, 234, 0.2); + color: #667eea; + border-color: rgba(102, 126, 234, 0.3); text-decoration: none; transform: translateY(-1px); } @@ -153,25 +159,49 @@ display: flex !important; align-items: center; justify-content: center; - font-size: 12px; - height: 36px; - line-height: 36px; + font-size: 13px; + height: 38px; + line-height: 38px; 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; + min-width: 70px; + padding: 0 16px; + font-weight: 600; + color: #fff; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border: none; + border-radius: 10px; cursor: pointer; - transition: all 0.2s ease; + transition: all 0.3s ease; order: 2; + box-shadow: 0 3px 12px rgba(102, 126, 234, 0.3); + position: relative; + overflow: hidden; + + &::before { + content: '\2630'; // 汉堡菜单图标 + margin-right: 6px; + font-size: 16px; + } + + &::after { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + transition: left 0.5s ease; + } + + &:hover::after { + left: 100%; + } } .@{prefix}-rightcol:active { - background: rgba(53, 163, 186, 0.18); - border-color: rgba(53, 163, 186, 0.4); - transform: scale(0.98); + background: linear-gradient(135deg, #5a6fd9 0%, #684094 100%); + box-shadow: 0 2px 8px rgba(102, 126, 234, 0.35); + transform: scale(0.96); } .@{prefix}-logo-line { display: none; diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue index 4da227a..82f8f98 100644 --- a/src/views/HomePage.vue +++ b/src/views/HomePage.vue @@ -14,10 +14,10 @@ - +
-

记账专家 健康帮手 预约助手 万物互联

-

满足您的记账需求 健康记录 茅台预约 物联网建设

+

记账专家 健康帮手 万物互联

+

满足您的记账需求 健康记录 物联网建设

无需下载,永久免费! @@ -80,13 +80,13 @@

满足健康档案记录需求

-
  • +
  • 产品服务
    @@ -113,9 +113,9 @@

    健康档案管理服务

    -

    +

    物联网平台建设服务

    @@ -214,9 +214,10 @@ margin: 0 auto; padding: 0; display: grid; - grid-template-columns: repeat(4, minmax(200px, 250px)); - gap: 25px; - max-width: 1200px; + grid-template-columns: repeat(3, minmax(240px, 300px)); + gap: 30px; + max-width: 1100px; + justify-content: center; } .zui-card { @@ -224,19 +225,19 @@ flex-direction: column; align-items: center; text-align: center; - padding: 28px 18px; + padding: 35px 25px; border: 2px solid transparent; - border-radius: 16px; + border-radius: 18px; background: #fff; - box-shadow: 0 4px 20px rgba(0,0,0,0.08); - min-height: 240px; + box-shadow: 0 6px 25px rgba(0,0,0,0.08); + min-height: 280px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; /* 移除遮盖 */ - padding-left: 18px !important; + padding-left: 25px !important; position: relative !important; &::before { @@ -245,15 +246,15 @@ top: 0; left: 0; right: 0; - height: 3px; + height: 4px; background: linear-gradient(90deg, #35A3BA, #6AC2B5); transform: scaleX(0); transition: transform 0.3s ease; } &:hover { - transform: translateY(-6px); - box-shadow: 0 12px 35px rgba(53, 163, 186, 0.18); + transform: translateY(-8px); + box-shadow: 0 15px 40px rgba(53, 163, 186, 0.2); border-color: rgba(53, 163, 186, 0.3); &::before { @@ -267,15 +268,15 @@ } .zui-card__media { - width: 120px; - height: 120px; - margin-bottom: 18px; + width: 140px; + height: 140px; + margin-bottom: 22px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(53, 163, 186, 0.05), rgba(106, 194, 181, 0.05)); - border-radius: 18px; - padding: 8px; + border-radius: 20px; + padding: 10px; } .zui-card__media img { @@ -286,21 +287,21 @@ top: auto !important; left: auto !important; object-fit: contain; - border-radius: 16px; + border-radius: 18px; transition: all 0.3s ease; } .zui-card__title { - margin: 12px 0 8px; - font-size: 18px; + margin: 12px 0 10px; + font-size: 20px; color: #1f2a37; - font-weight: 600; + font-weight: 700; } .zui-card__desc { - font-size: 13px; + font-size: 14px; color: #666; - line-height: 1.5; + line-height: 1.6; } } diff --git a/src/views/callus.vue b/src/views/callus.vue index e55afa5..31c154f 100644 --- a/src/views/callus.vue +++ b/src/views/callus.vue @@ -33,7 +33,7 @@

    免费使用

  • -

    满足您的记账需求、健康记录、茅台预约、物联网建设

    +

    满足您的记账需求、健康记录、物联网建设

    diff --git a/src/views/resource.vue b/src/views/resource.vue index b9dbaec..b4c615d 100644 --- a/src/views/resource.vue +++ b/src/views/resource.vue @@ -19,7 +19,7 @@

    下载专区

    -

    满足您的记账需求、健康记录、茅台预约

    +

    满足您的记账需求、健康记录

    @@ -73,31 +73,6 @@
    - -
  • -
    -
    茅台预约平台
    -
    -
    -

    茅台预约平台

    -

    茅台预约得力助手

    -
    -
    -
    -
  • @@ -468,11 +443,14 @@ download(type) { .card-icon-wrapper { flex: 0 0 auto; + width: 100%; padding: 25px; + border-radius: 20px 20px 0 0; } .card-content { padding: 25px 20px; + border-radius: 0 0 20px 20px; } .zui-card__title { @@ -519,16 +497,21 @@ download(type) { } .card-icon-wrapper { + width: 100%; padding: 20px; + border-radius: 16px 16px 0 0; + text-align: center; } .zui-card__media { width: 90px; height: 90px; + margin: 0 auto; } .card-content { padding: 20px 15px; + border-radius: 0 0 16px 16px; } .zui-card__title {