📦 村庄页乡源树图标更换，文字颜色动画

src/common/components/parts/HomeLargeTitle.vue

@@ -4,7 +4,13 @@
       <Image :src="icon" :width="75" :height="46" mode="widthFix" />
     </slot>
     <Width :width="15" />
-    <Text :text="title" fontConfig="h4" :color="active ? 'text.titleLight' : 'text.title'" fontFamily="SongtiSCBlack" />
+    <Text 
+      :text="title" 
+      :color="active ? 'text.titleLight' : 'text.title'"
+      :innerClass="titleColorAnim && !active ? 'home-title-color-anim' : ''"
+      fontConfig="h4" 
+      fontFamily="SongtiSCBlack" 
+    />
   </Touchable>
 </template>
 
@@ -12,7 +18,6 @@
 import Image from '@/components/basic/Image.vue';
 import Text from '@/components/basic/Text.vue';
 import Touchable from '@/components/feedback/Touchable.vue';
-import FlexRow from '@/components/layout/FlexRow.vue';
 import Width from '@/components/layout/space/Width.vue';
 
 const props = defineProps({
@@ -32,6 +37,39 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  titleColorAnim: {
+    type: Boolean,
+    default: false,
+  },
 });
 const emit = defineEmits(['click']);
-</script>
+
+defineOptions({
+  options: {
+    styleIsolation: 'shared',
+  },
+});
+</script>
+
+<style>
+@keyframes titleColorAnim {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 200% 50%;
+  }
+}
+.home-title-color-anim {
+  background: linear-gradient(90deg, #62422f, #55989a, #62422f);
+  background-size: 300% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  animation: titleColorAnim 2s ease-in-out infinite;
+}
+</style>

src/pages/home/village/index.vue

@@ -22,11 +22,12 @@
         </FlexRow>
       </FlexCol>
       <template v-else>
-        <FlexRow center :padding="[0,30]" gap="gap.md">
+        <FlexRow center :padding="[0,30]">
           <HomeLargeTitle title="村社名片" :active="tab === 'card'" @click="tab = 'card'" />
-          <HomeLargeTitle title="乡源树" :active="tab === 'tree'" @click="tab = 'tree'">
+          <Width :width="30" />
+          <HomeLargeTitle title="乡源树" titleColorAnim :active="tab === 'tree'" @click="tab = 'tree'">
             <template #icon>
-              <Image src="https://xy.wenlvti.net/app_static/images/village/TreeIconAmin.gif" :width="45" :height="46" mode="heightFix" />
+              <Image src="https://xy.wenlvti.net/app_static/images/village/TreeIconAmin1.gif" :width="34" :height="50" mode="heightFix" />
             </template>
           </HomeLargeTitle>
         </FlexRow>
@@ -69,6 +70,7 @@ import FrameButton from '@/common/components/FrameButton.vue';
 import CommonRoot from '@/components/dialog/CommonRoot.vue';
 import { navTo } from '@/components/utils/PageAction';
 import { useFollow } from './composeabe/Follow';
+import Width from '@/components/layout/space/Width.vue';
 
 const tab = ref('card');
 const villageStore = useVillageStore();