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

feat: IP形象的调整

Browse Source
This commit is contained in:
zoujing
2026-01-21 11:33:26 +08:00
parent 226ddf8305
commit d78368b4ec
5 changed files with 51 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
client-configs.json
View File

@@ -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
}
}

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

@@ -4,8 +4,10 @@
<!-- 隐藏 -->
<view class="flex-full h-full flex flex-items-center flex-justify-center">
<!-- ChatTopWelcome不在可视区：显示并添加动画；在可视区：隐藏 -->
<view v-show="show" :class="['w-32 h-32', { 'image-animated': show }]" :style="getStyle"></view>
<!-- ChatTopWelcome不在可视区：显示并添加动画；在可视区：隐藏 v-show="show" class="image-animated" -->
<SpriteAnimator :src="spriteStyle.ipSmallImage" :frameWidth="spriteStyle.frameWidth"
:frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
:displayWidth="spriteStyle.displayWidth" :fps="16" />
<text v-show="show" :class="[
'font-size-14 font-500 color-171717 ml-10',
{ 'text-animated': show },
@@ -21,6 +23,7 @@
<script setup>
import { ref, defineProps, computed, defineExpose } from "vue";
import { getCurrentConfig } from "@/constant/base";
import SpriteAnimator from "@/components/Sprite/SpriteAnimator.vue";
const props = defineProps({
mainPageDataModel: {
@@ -37,19 +40,17 @@ const initPageImages = computed(() => {
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");

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

@@ -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,6 +23,7 @@
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);

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

@@ -3,17 +3,9 @@ v
<view class="welcome-content border-box p-12">
<view class="wrap rounded-20">
<view class="flex flex-items-center flex-justify-between border-box pl-12 pr-12">
<!-- <view class="ip" :style="getStyle"></view> -->
<SpriteAnimator
class="welcome-animator"
:src="spriteStyle.welcomeImageUrl"
:frameWidth="spriteStyle.frameWidth"
:frameHeight="spriteStyle.frameHeight"
:totalFrames="spriteStyle.totalFrames"
:columns="spriteStyle.columns"
:displayWidth="spriteStyle.displayWidth"
:fps="16"
/>
<SpriteAnimator :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
:frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
:displayWidth="spriteStyle.displayWidth" :fps="16" />
<view class="welcome-text font-size-14 font-500 font-family-misans-vf color-171717 line-height-24">
{{ welcomeContent }}
</view>
@@ -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);

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

@@ -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);
}
}