diff --git a/src/pages/index/components/chat/ChatMainList/index.vue b/src/pages/index/components/chat/ChatMainList/index.vue index 1c7f483..624bf74 100644 --- a/src/pages/index/components/chat/ChatMainList/index.vue +++ b/src/pages/index/components/chat/ChatMainList/index.vue @@ -2,7 +2,7 @@ - + @@ -15,7 +15,7 @@ @scrolltolower="handleScrollToLower" > - + emits("openDrawer"); - /// =============事件函数↓================ const handleTouchEnd = () => { clearTimeout(holdKeyboardTimer.value); diff --git a/src/pages/index/components/chat/ChatTopNavBar/index.vue b/src/pages/index/components/chat/ChatTopNavBar/index.vue index c5e81dc..2bedfe8 100644 --- a/src/pages/index/components/chat/ChatTopNavBar/index.vue +++ b/src/pages/index/components/chat/ChatTopNavBar/index.vue @@ -1,14 +1,32 @@ diff --git a/src/pages/index/components/chat/ChatTopNavBar/styles/index.scss b/src/pages/index/components/chat/ChatTopNavBar/styles/index.scss index 7249b0e..ce97c48 100644 --- a/src/pages/index/components/chat/ChatTopNavBar/styles/index.scss +++ b/src/pages/index/components/chat/ChatTopNavBar/styles/index.scss @@ -1,16 +1,29 @@ -.nav-bar { - display: flex; - align-items: center; - height: 44px; - padding: 0 15px; +// 图片从0%到100%动画 +.image-animated { + animation: logo-scale 0.3s ease-in-out; +} - .nav-item { - width: 24px; - height: 24px; - margin-right: 10px; +@keyframes logo-scale { + 0% { + transform: scale(0); } - .nav-item-icon { - width: 100%; - height: 100%; + 100% { + transform: scale(1); + } +} + +// 文字从0%到100%动画,从左到右 +.text-animated { + animation: text-fade-in 0.3s ease-in-out; +} + +@keyframes text-fade-in { + 0% { + opacity: 0; + transform: translateX(-20px); + } + 100% { + opacity: 1; + transform: translateX(0); } } diff --git a/src/static/scss/height.scss b/src/static/scss/height.scss index b041705..48d2d61 100644 --- a/src/static/scss/height.scss +++ b/src/static/scss/height.scss @@ -9,3 +9,15 @@ .h-80 { height: 80px; } + +.h-44 { + height: 44px; +} + +.h-32 { + height: 32px; +} + +.h-24 { + height: 24px; +} diff --git a/src/static/scss/margin.scss b/src/static/scss/margin.scss index fca2cb4..195ec81 100644 --- a/src/static/scss/margin.scss +++ b/src/static/scss/margin.scss @@ -59,6 +59,10 @@ margin-bottom: 10px; } +.ml-10 { + margin-left: 10px; +} + .m-12 { margin: 12px; } diff --git a/src/static/scss/width.scss b/src/static/scss/width.scss index 00e014c..b96ad81 100644 --- a/src/static/scss/width.scss +++ b/src/static/scss/width.scss @@ -6,6 +6,14 @@ width: 100vw; } +.w-24 { + width: 24px; +} + +.w-32 { + width: 32px; +} + .w-50 { width: 50%; }