feat: IP形象的调整

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,
+    "ipSmallImageWidth": 128,
-    "ipSmallImageHeight": 3744,
+    "ipSmallImageHeight": 128,
-    "ipLargeImageStep": 147,
+    "ipSmallTotalFrames": 117,
-    "ipSmallImageStep": 117,
+    "ipSmallColumns": 1
-    "ipLargeTime": 4,
-    "ipSmallTime": 4
   },
   "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,
+    "ipSmallImageWidth": 128,
-    "ipSmallImageHeight": 3744,
+    "ipSmallImageHeight": 128,
-    "ipLargeImageStep": 147,
+    "ipSmallTotalFrames": 117,
-    "ipSmallImageStep": 117,
+    "ipSmallColumns": 1
-    "ipLargeTime": 4,
-    "ipSmallTime": 4
   },
   "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,
+    "ipSmallImageWidth": 128,
-    "ipSmallImageHeight": 4736,
+    "ipSmallImageHeight": 128,
-    "ipLargeImageStep": 71,
+    "ipSmallTotalFrames": 148,
-    "ipSmallImageStep": 148,
+    "ipSmallColumns": 1
-    "ipLargeTime": 4,
-    "ipSmallTime": 6
   }
 }

src/pages/index/components/chat/ChatTopNavBar/index.vue

@@ -4,8 +4,10 @@
 
     <!-- 隐藏 -->
     <view class="flex-full h-full flex flex-items-center flex-justify-center">
-      <!-- ChatTopWelcome不在可视区：显示并添加动画；在可视区：隐藏 -->
+      <!-- ChatTopWelcome不在可视区：显示并添加动画；在可视区：隐藏  v-show="show" class="image-animated" -->
-      <view v-show="show" :class="['w-32 h-32', { 'image-animated': show }]" :style="getStyle"></view>
+      <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 = {
+  return {
-    "--ipSmallImageStep": images.ipSmallImageStep ?? config.ipSmallImageStep,
+    ipSmallImage: images.ipSmallImage ?? config.ipSmallImage,
-    "--ipSmallImageHeight": images.ipSmallImageHeight ?? config.ipSmallImageHeight,
+    frameWidth: images.ipSmallImageWidth ?? config.ipSmallImageWidth,
-    "--ipSmallTime": images.ipSmallTime ?? config.ipSmallTime,
+    frameHeight: images.ipSmallImageHeight ?? config.ipSmallImageHeight,
-    backgroundImage: `url(${images.ipSmallImage ?? config.ipSmallImage})`,
+    totalFrames: images.ipSmallTotalFrames ?? config.ipSmallTotalFrames,
-    backgroundRepeat: "no-repeat",
+    columns: images.ipSmallColumns ?? config.ipSmallColumns,
-    backgroundSize: "32px auto",
+    displayWidth: 32,
-    backgroundPosition: "0 0",
   };
-  console.log("top nav bar image style:", style);
-  return style;
 });
 
 const showDrawer = () => uni.$emit("SHOW_DRAWER");

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,
+  animation: logo-scale 0.3s ease-in-out;
-    sprite-play calc(var(--ipSmallTime) * 1s) steps(var(--ipSmallImageStep))
-      infinite;
 }
 
 @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);
   }
-}
+}

src/pages/index/components/chat/ChatTopWelcome/index.vue

@@ -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 :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
-        <SpriteAnimator
+          :frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
-          class="welcome-animator"
+          :displayWidth="spriteStyle.displayWidth" :fps="16" />
-          :src="spriteStyle.welcomeImageUrl"
-          :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',
+    ipLargeImage: images.ipLargeImage ?? config.ipLargeImage,
-    frameWidth: 395,
+    frameWidth: images.ipLargeImageWidth ?? config.ipLargeImageWidth,
-    frameHeight: 335,
+    frameHeight: images.ipLargeImageHeight ?? config.ipLargeImageHeight,
-    totalFrames: 71,
+    totalFrames: images.ipLargeTotalFrames ?? config.ipLargeTotalFrames,
-    columns: 1,
+    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);
 

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