diff --git a/client-configs.json b/client-configs.json index 21e12be..b2cb202 100644 --- a/client-configs.json +++ b/client-configs.json @@ -7,13 +7,15 @@ "loginDesc": "您好，欢迎来到智念科技", "logo": "https://oss.nianxx.cn/mp/static/version_101/login/dh_logo.png", "ipLargeImage": "https://oss.nianxx.cn/mp/static/version_101/zn/zn_large.png", + "ipLargeImageWidth": 395, + "ipLargeImageHeight": 335, + "ipLargeTotalFrames": 71, + "ipLargeColumns": 1, "ipSmallImage": "https://oss.nianxx.cn/mp/static/version_101/dh/dh_small.png", - "ipLargeImageHeight": 19687, - "ipSmallImageHeight": 3744, - "ipLargeImageStep": 147, - "ipSmallImageStep": 117, - "ipLargeTime": 4, - "ipSmallTime": 4 + "ipSmallImageWidth": 128, + "ipSmallImageHeight": 128, + "ipSmallTotalFrames": 117, + "ipSmallColumns": 1 }, "duohua": { "clientId": "2", @@ -23,13 +25,15 @@ "loginDesc": "您好，欢迎来到朵花温泉", "logo": "https://oss.nianxx.cn/mp/static/version_101/login/dh_logo.png", "ipLargeImage": "https://oss.nianxx.cn/mp/static/version_101/dh/dh_large.png", + "ipLargeImageWidth": 263, + "ipLargeImageHeight": 210, + "ipLargeTotalFrames": 147, + "ipLargeColumns": 1, "ipSmallImage": "https://oss.nianxx.cn/mp/static/version_101/dh/dh_small.png", - "ipLargeImageHeight": 19687, - "ipSmallImageHeight": 3744, - "ipLargeImageStep": 147, - "ipSmallImageStep": 117, - "ipLargeTime": 4, - "ipSmallTime": 4 + "ipSmallImageWidth": 128, + "ipSmallImageHeight": 128, + "ipSmallTotalFrames": 117, + "ipSmallColumns": 1 }, "tianmu": { "clientId": "4", @@ -39,12 +43,14 @@ "loginDesc": "您好，欢迎来到天沐温泉", "logo": "https://oss.nianxx.cn/mp/static/version_101/login/tm_logo.png", "ipLargeImage": "https://oss.nianxx.cn/mp/static/version_101/tm/tm_large.png", + "ipLargeImageWidth": 395, + "ipLargeImageHeight": 335, + "ipLargeTotalFrames": 71, + "ipLargeColumns": 1, "ipSmallImage": "https://oss.nianxx.cn/mp/static/version_101/tm/tm_small.png", - "ipLargeImageHeight": 9514, - "ipSmallImageHeight": 4736, - "ipLargeImageStep": 71, - "ipSmallImageStep": 148, - "ipLargeTime": 4, - "ipSmallTime": 6 + "ipSmallImageWidth": 128, + "ipSmallImageHeight": 128, + "ipSmallTotalFrames": 148, + "ipSmallColumns": 1 } } \ No newline at end of file diff --git a/src/pages/index/components/chat/ChatTopNavBar/index.vue b/src/pages/index/components/chat/ChatTopNavBar/index.vue index 99702df..2c9d6c3 100644 --- a/src/pages/index/components/chat/ChatTopNavBar/index.vue +++ b/src/pages/index/components/chat/ChatTopNavBar/index.vue @@ -4,8 +4,10 @@ - - + + { const show = ref(false); const config = getCurrentConfig(); -const getStyle = computed(() => { + +const spriteStyle = computed(() => { const images = initPageImages.value; - const style = { - "--ipSmallImageStep": images.ipSmallImageStep ?? config.ipSmallImageStep, - "--ipSmallImageHeight": images.ipSmallImageHeight ?? config.ipSmallImageHeight, - "--ipSmallTime": images.ipSmallTime ?? config.ipSmallTime, - backgroundImage: `url(${images.ipSmallImage ?? config.ipSmallImage})`, - backgroundRepeat: "no-repeat", - backgroundSize: "32px auto", - backgroundPosition: "0 0", + return { + ipSmallImage: images.ipSmallImage ?? config.ipSmallImage, + frameWidth: images.ipSmallImageWidth ?? config.ipSmallImageWidth, + frameHeight: images.ipSmallImageHeight ?? config.ipSmallImageHeight, + totalFrames: images.ipSmallTotalFrames ?? config.ipSmallTotalFrames, + columns: images.ipSmallColumns ?? config.ipSmallColumns, + displayWidth: 32, }; - console.log("top nav bar image style:", style); - return style; }); const showDrawer = () => uni.$emit("SHOW_DRAWER"); diff --git a/src/pages/index/components/chat/ChatTopNavBar/styles/index.scss b/src/pages/index/components/chat/ChatTopNavBar/styles/index.scss index e11f0f7..28c29a9 100644 --- a/src/pages/index/components/chat/ChatTopNavBar/styles/index.scss +++ b/src/pages/index/components/chat/ChatTopNavBar/styles/index.scss @@ -1,30 +1,18 @@ // 图片从0%到100%动画 .image-animated { - animation: logo-scale 0.3s ease-in-out, - sprite-play calc(var(--ipSmallTime) * 1s) steps(var(--ipSmallImageStep)) - infinite; + animation: logo-scale 0.3s ease-in-out; } @keyframes logo-scale { 0% { transform: scale(0); } + 100% { transform: scale(1); } } -@keyframes sprite-play { - 0% { - background-position: 0 0; - } - - 100% { - /* 117 帧 × 每帧高度约 32px，终点应为 -(117-1)*32 = -5421px */ - background-position: 0 calc(var(--ipSmallImageHeight) * -1px); - } -} - // 文字从0%到100%动画，从左到右 .text-animated { animation: text-fade-in 0.3s ease-in-out; @@ -35,8 +23,9 @@ opacity: 0; transform: translateX(-20px); } + 100% { opacity: 1; transform: translateX(0); } -} +} \ No newline at end of file diff --git a/src/pages/index/components/chat/ChatTopWelcome/index.vue b/src/pages/index/components/chat/ChatTopWelcome/index.vue index c11e73e..200b823 100644 --- a/src/pages/index/components/chat/ChatTopWelcome/index.vue +++ b/src/pages/index/components/chat/ChatTopWelcome/index.vue @@ -3,17 +3,9 @@ v - - + {{ welcomeContent }} @@ -65,42 +57,15 @@ const config = getCurrentConfig(); const spriteStyle = computed(() => { const images = initPageImages.value; return { - welcomeImageUrl: 'https://oss.nianxx.cn/mp/static/version_101/zn/zn_large.png', - frameWidth: 395, - frameHeight: 335, - totalFrames: 71, - columns: 1, + ipLargeImage: images.ipLargeImage ?? config.ipLargeImage, + frameWidth: images.ipLargeImageWidth ?? config.ipLargeImageWidth, + frameHeight: images.ipLargeImageHeight ?? config.ipLargeImageHeight, + totalFrames: images.ipLargeTotalFrames ?? config.ipLargeTotalFrames, + columns: images.ipLargeColumns ?? config.ipLargeColumns, displayWidth: 158, }; }); - // "ipLargeImage":"https://oss.nianxx.cn/mp/static/version_101/dh/dh_large.png", - // "ipLargeImageWidth": 395, - // "ipLargeImageHeight": 335, - // "ipLargeTotalFrames": 71, - // "ipLargeColumns": 1, - - // "ipSmallImage":"https://oss.nianxx.cn/mp/static/version_101/dh/dh_small.png", - // "ipSmallImageWidth": 395, - // "ipSmallImageHeight": 335, - // "ipSmallTotalFrames": 71, - // "ipSmallColumns": 1 - -const getStyle = computed(() => { - const images = initPageImages.value; - const style = { - "--ipLargeImageStep": images.ipLargeImageStep ?? config.ipLargeImageStep, - "--ipLargeImageHeight": images.ipLargeImageHeight ?? config.ipLargeImageHeight, - "--ipLargeTime": images.ipLargeTime ?? config.ipLargeTime, - backgroundImage: `url(${images.ipLargeImage || config.ipLargeImage})`, - backgroundRepeat: "no-repeat", - backgroundSize: "158px auto", - backgroundPosition: "0 0", - }; - console.log("welcome image style:", style); - return style; -}); - const welcomeContent = computed(() => props.mainPageDataModel.welcomeContent); const guideWords = computed(() => props.mainPageDataModel.guideWords); diff --git a/src/pages/index/components/chat/ChatTopWelcome/styles/index.scss b/src/pages/index/components/chat/ChatTopWelcome/styles/index.scss index 43b1cd7..a73f949 100644 --- a/src/pages/index/components/chat/ChatTopWelcome/styles/index.scss +++ b/src/pages/index/components/chat/ChatTopWelcome/styles/index.scss @@ -1,32 +1,3 @@ .wrap { background-color: rgba(255, 255, 255, 0.5); -} - -.ip { - position: relative; - flex: 0 0 158px; - width: 158px; - height: 134px; - animation: sprite-play calc(var(--ipLargeTime) * 1s) - steps(var(--ipLargeImageStep)) infinite; - &::before { - content: ""; - position: absolute; - background-color: #f9fcfd; - top: 0; - left: 0; - right: 0; - height: 3px; - } -} - -@keyframes sprite-play { - 0% { - background-position: 0 0; - } - - 100% { - /* 40 帧 × 每帧高度约 139px，终点应为 -(40-1)*139 = -5421px */ - background-position: 0 calc(var(--ipLargeImageHeight) * -1px); - } -} +} \ No newline at end of file