zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 首页动画调整

Browse Source
This commit is contained in:
duanshuwen
2025-11-12 18:50:40 +08:00
parent 5cb3a903ff
commit b2ad6403c1
5 changed files with 65 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
client-configs.json
View File

@@ -5,7 +5,15 @@
"name": "智念",
"placeholder": "快告诉智念您在想什么~",
"loginDesc": "您好，欢迎来到智念科技",
"logo": "https://oss.nianxx.cn/mp/static/version_101/login/dh_logo.png"
"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",
"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
},
"duohua": {
"clientId": "2",
@@ -13,7 +21,15 @@
"name": "朵朵",
"placeholder": "快告诉朵朵您在想什么~",
"loginDesc": "您好，欢迎来到朵花温泉",
"logo": "https://oss.nianxx.cn/mp/static/version_101/login/dh_logo.png"
"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",
"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
},
"tianmu": {
"clientId": "4",
@@ -21,6 +37,14 @@
"name": "沐沐",
"placeholder": "快告诉沐沐您在想什么~",
"loginDesc": "您好，欢迎来到天沐温泉",
"logo": "https://oss.nianxx.cn/mp/static/version_101/login/tm_logo.png"
"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",
"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
}
}

20
src/pages/index/components/chat/ChatTopNavBar/index.vue
View File

@@ -7,7 +7,8 @@
<!-- ChatTopWelcome不在可视区：显示并添加动画；在可视区：隐藏 -->
<view
v-show="show"
:class="['ip w-32 h-32', { 'image-animated': show }]"
:class="['w-32 h-32', { 'image-animated': show }]"
:style="getStyle"
></view>
<text
v-show="show"
@@ -23,6 +24,7 @@
<script setup>
import { ref, defineProps, computed, defineExpose } from "vue";
import { getCurrentConfig } from "@/constant/base";
const props = defineProps({
mainPageDataModel: {
@@ -33,9 +35,19 @@ const props = defineProps({
const show = ref(false);
const logoImageUrl = computed(
() => props.mainPageDataModel.initPageImages?.logoImageUrl
);
const getStyle = computed(() => {
const config = getCurrentConfig();
return {
"--ipSmallImageStep": config.ipSmallImageStep,
"--ipSmallImageHeight": config.ipSmallImageHeight,
"--ipSmallTime": config.ipSmallTime,
backgroundImage: `url(${config.ipSmallImage})`,
backgroundRepeat: "no-repeat",
backgroundSize: "32px auto",
backgroundPosition: "0 0",
};
});
const showDrawer = () => uni.$emit("SHOW_DRAWER");

13
src/pages/index/components/chat/ChatTopNavBar/styles/index.scss
View File

@@ -1,13 +1,8 @@
.ip {
background-image: url("https://oss.nianxx.cn/mp/static/version_101/dh/dh_small.png");
background-repeat: no-repeat;
background-size: 32px auto;
background-position: 0 0;
}
// 图片从0%到100%动画
.image-animated {
animation: logo-scale 0.3s ease-in-out, sprite-play 2s steps(117) infinite;
animation: logo-scale 0.3s ease-in-out,
sprite-play calc(var(--ipSmallTime) * 1s) steps(var(--ipSmallImageStep))
infinite;
}
@keyframes logo-scale {
@@ -26,7 +21,7 @@
100% {
/* 117 帧 × 每帧高度约 32px，终点应为 -(117-1)*32 = -5421px */
background-position: 0 -3802px;
background-position: 0 calc(var(--ipSmallImageHeight) * -1px);
}
}

17
src/pages/index/components/chat/ChatTopWelcome/index.vue
View File

@@ -5,7 +5,7 @@ v
<view
class="flex flex-items-center flex-justify-between border-box pl-12 pr-12"
>
<view class="ip"></view>
<view class="ip" :style="getStyle"></view>
<view
class="welcome-text font-size-14 font-500 font-family-misans-vf color-171717 line-height-24"
>
@@ -20,6 +20,7 @@ v
<script setup>
import { defineProps, computed, getCurrentInstance, defineExpose } from "vue";
import { getCurrentConfig } from "@/constant/base";
import ChatMoreTips from "../ChatMoreTips/index.vue";
const props = defineProps({
@@ -48,7 +49,19 @@ const props = defineProps({
},
});
const initPageImages = computed(() => props.mainPageDataModel.initPageImages);
const getStyle = computed(() => {
const config = getCurrentConfig();
return {
"--ipLargeImageStep": config.ipLargeImageStep,
"--ipLargeImageHeight": config.ipLargeImageHeight,
"--ipLargeTime": config.ipLargeTime,
backgroundImage: `url(${config.ipLargeImage})`,
backgroundRepeat: "no-repeat",
backgroundSize: "158px auto",
backgroundPosition: "0 0",
};
});
const welcomeContent = computed(() => props.mainPageDataModel.welcomeContent);
const guideWords = computed(() => props.mainPageDataModel.guideWords);

9
src/pages/index/components/chat/ChatTopWelcome/styles/index.scss
View File

@@ -6,11 +6,8 @@
flex: 0 0 158px;
width: 158px;
height: 134px;
background-image: url("https://oss.nianxx.cn/mp/static/version_101/dh/dh.png");
background-repeat: no-repeat;
background-size: 158px auto;
background-position: 0 0;
animation: sprite-play 2s steps(40) infinite;
animation: sprite-play calc(var(--ipLargeTime) * 1s)
steps(var(--ipLargeImageStep)) infinite;
}
@keyframes sprite-play {
@@ -20,6 +17,6 @@
100% {
/* 40 帧 × 每帧高度约 139px，终点应为 -(40-1)*139 = -5421px */
background-position: 0 -5424px;
background-position: 0 calc(var(--ipLargeImageHeight) * -1px);
}
}