提交动画插件

fhKeeper/formulahousekeeper/customerBuler-crm/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@element-plus/icons-vue": "^2.3.1",
         "@zmjs/form-design": "^0.1.16",
+        "animate.css": "^4.1.1",
         "axios": "^1.6.7",
         "echarts": "^5.5.0",
         "element-plus": "^2.5.6",
@@ -1138,6 +1139,11 @@
       "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.32.7.tgz",
       "integrity": "sha512-ziv35kaYELFw4suWlotz/Xsl1/1LhWAbwFoD3zIgCgP9gXGECEsAM4GhiB0T0xZdmQjyv6hmAzO280g0+n4vGw=="
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "node_modules/ansi-regex": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",

fhKeeper/formulahousekeeper/customerBuler-crm/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
     "@zmjs/form-design": "^0.1.16",
+    "animate.css": "^4.1.1",
     "axios": "^1.6.7",
     "echarts": "^5.5.0",
     "element-plus": "^2.5.6",

fhKeeper/formulahousekeeper/customerBuler-crm/src/App.vue

@@ -1,5 +1,10 @@
 <template>
-  <router-view></router-view>
+  <!-- <router-view></router-view> -->
+  <router-view v-slot="{ Component }">
+    <transition name="ranimate">
+      <component :is="Component" />
+    </transition>
+  </router-view>
 </template>
 
 <script setup lang="ts">
@@ -60,4 +65,20 @@ body,
 * {
   font-family: '微软雅黑';
 }
+/* home 页面的动画 */
+.router_animate-enter-active {
+    animation: slideInLeft 0.5s;
+}
+.router_animate-leave-active {
+    animation: slideOutLeft 0s;
+}
+
+/* app 路由动画 */
+.ranimate-enter-active {
+  animation: fadeIn 1s;
+}
+ 
+.ranimate-leave-active {
+  animation: fadeIn 0s;
+}
 </style>

fhKeeper/formulahousekeeper/customerBuler-crm/src/main.ts

@@ -3,6 +3,7 @@ import { createPinia } from 'pinia'
 import ElementPlus from 'element-plus'
 import "./TailWindCss/index.css";
 import 'element-plus/dist/index.css'
+import 'animate.css/animate.min.css' //引入动画
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import App from './App.vue'

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/home.vue

@@ -5,7 +5,12 @@
         <Header></Header>
       </el-header>
       <el-main>
-        <router-view />
+        <!-- <router-view /> -->
+        <router-view v-slot="{ Component }">
+          <transition name="router_animate">
+            <component :is="Component" />
+          </transition>
+        </router-view>
       </el-main>
     </el-container>
   </div>

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/thread/index.vue

@@ -1,83 +1,21 @@
 <template>
-  <div ref="parentDiv" class="parent">
-    <div v-for="(item, index) in items" :key="index" v-show="visibleItems.includes(index)" class="child">
-      {{ item.content }}
+  <div class="bg-gray-200 h-full flex">
+    <div class="p-5 w-80 pr-0">
+      <div class="bg-white w-full h-full p-3 shadow-md rounded-md">
+        线索管理
+      </div>
+    </div>
+    <div class="flex-1 bg-gray-200 p-5">
+      <div class="bg-white w-full h-full p-3 shadow-md rounded-md">222</div>
     </div>
   </div>
 </template>
 
 
 <script setup lang="ts">
-import { ref, onMounted, watchEffect } from 'vue';
-
-// 假设这是你的数据
-const items = ref([
-  { content: 'Item1' },
-  { content: 'Item2' },
-  { content: 'Item3' },
-  { content: 'Item4' },
-  { content: 'Item5' },
-  { content: 'Item6' },
-  { content: 'Item7' },
-  { content: 'Item9' },
-  { content: 'Item10' },
-  { content: 'Item11' },
-  { content: 'Item12' },
-  { content: 'Item13' },
-  // 添加更多项...
-]);
-
-// 用于存储可见项的索引
-const visibleItems = ref<number[]>([]);
-
-// 父div和子div的引用
-const parentDiv = ref<HTMLElement | null>(null);
-
-// 计算并更新可见项
-const updateVisibleItems = () => {
-  if (!parentDiv.value) return;
-  
-  let totalWidth = 0;
-  const children:any = parentDiv.value.children;
-  visibleItems.value = [];
 
-  for (let i = 0; i < children.length; i++) {
-    const childWidth = children[i].offsetWidth + parseInt(getComputedStyle(children[i]).marginRight, 16);
-    
-    // console.log(parentDiv.value.offsetWidth, '<=== parentDiv.value.offsetWidth')
-    // console.log(totalWidth, childWidth, '<=== ')
-
-    if (totalWidth + childWidth > parentDiv.value.offsetWidth) break;
-    
-    totalWidth += childWidth;
-    visibleItems.value.push(i);
-    // console.log('执行语法', visibleItems.value)
-  }
-};
-
-// 组件挂载后和窗口大小改变时更新可见项
-onMounted(() => {
-  updateVisibleItems();
-  window.addEventListener('resize', updateVisibleItems);
-});
-
-watchEffect(() => {
-  updateVisibleItems();
-});
 </script>
 
 
-<style scoped>
-.parent {
-  display: flex;
-  overflow: hidden;
-  width: 100%; /* 可以根据实际情况调整 */
-}
-
-.child {
-  margin-right: 10px; /* 根据实际情况调整 */
-  padding: 5px; /* 根据实际情况调整 */
-  text-wrap: nowrap;
-}
-</style>
+<style scoped></style>