diff --git a/src/components/BottomNav.vue b/src/components/BottomNav.vue index 89e3216..ffd7fe8 100644 --- a/src/components/BottomNav.vue +++ b/src/components/BottomNav.vue @@ -12,6 +12,7 @@ class="nav-image" :class="{ 'nav-image-active': isActive('/mymatching') }" /> +
+ + + + @@ -139,8 +144,8 @@ const backgroundImage = computed(() => { } .nav-image { - width: 40px; - height: 40px; + width: 50px; + height: 50px; object-fit: contain; transition: all 0.3s ease; } @@ -149,6 +154,28 @@ const backgroundImage = computed(() => { transform: translateY(-50px); } +.nav-text { + font-size: 12px; + color: white; + margin-top: 4px; + transition: all 0.3s ease; +} + +.nav-text-active { + color: white; + font-weight: bold; +} + +/* 最左边小球向右偏移 */ +.nav-item:first-child { + transform: translateX(10px); +} + +/* 最右边小球向左偏移 */ +.nav-item:last-child { + transform: translateX(-10px); +} + /* 移动端适配 */ @media (max-width: 768px) { .bottom-nav { @@ -163,13 +190,17 @@ const backgroundImage = computed(() => { } .nav-image { - width: 35px; - height: 35px; + width: 45px; + height: 45px; } .nav-image-active { transform: translateY(-40px); } + + .nav-text { + font-size: 11px; + } } @media (max-width: 480px) { @@ -185,12 +216,16 @@ const backgroundImage = computed(() => { } .nav-image { - width: 30px; - height: 30px; + width: 40px; + height: 40px; } .nav-image-active { - transform: translateY(-35px); + transform: translateY(-20px); + } + + .nav-text { + font-size: 10px; } } @@ -206,12 +241,16 @@ const backgroundImage = computed(() => { } .nav-image { - width: 25px; - height: 25px; + width: 35px; + height: 35px; } .nav-image-active { transform: translateY(-30px); } + + .nav-text { + font-size: 9px; + } } \ No newline at end of file