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

<template>
  <!-- <router-view></router-view> -->
  <router-view v-slot="{ Component }">
    <transition name="ranimate">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<script setup lang="ts">
import { provide, onMounted } from 'vue'
import { useStore } from '@/store/index'
import { ElNotification, NotificationParamsTyped } from 'element-plus'
const { setAsyncRoutesMark } = useStore()
window.addEventListener('beforeunload', () => beforeunloadFn())
const beforeunloadFn = (() => {
  setAsyncRoutesMark(false)
})

// 消息提示弹窗
provide<GlobalPopup>('globalPopup', {
  showSuccess: (message?: string) => {
    notificationTiop({
      message: message || '成功',
      type: 'success',
      title: "提示",
      duration: 2000
    })
  }, //!SECTION 成功
  showError: (message?: string) => notificationTiop({
    message: message || '失败',
    type: 'error',
    title: "提示",
    duration: 2000
  }), //!SECTION 失败
  showWarning: (message: string) => notificationTiop({
    message,
    type: 'warning',
    title: "提示",
    duration: 2000
  }), //!SECTION 警告
  showInfo: (message: string) => notificationTiop({
    message,
    type: 'info',
    title: "提示",
    duration: 2000
  }), //!SECTION 文本
})

const notificationTiop = (options: NotificationParamsTyped) => {
  ElNotification.closeAll()
  ElNotification(options)
}
 
onMounted(() => {
  // 重置 primary 主题颜色
  document.body.style.setProperty('--el-color-primary', '#075985')
  document.body.style.setProperty('--el-color-primary-light-3', '#518baa')
  document.body.style.setProperty('--el-color-primary-light-5', '#83acc2')
  document.body.style.setProperty('--el-color-primary-light-7', '#b5cdda')
  document.body.style.setProperty('--el-color-primary-light-8', '#cddee7')
  document.body.style.setProperty('--el-color-primary-light-9', '#e6eef3')
  document.body.style.setProperty('--el-color-primary-dark-2', '#06476a')
})

</script>

<style lang="scss">
html,
body,
#app,
.layouts {
  width: 100%;
  height: 100%;
  overflow: hidden;
  min-width: 800px;
}
* {
  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;
}

.drawerVisClass {
  .el-drawer__body {
    padding: 0 !important;
  }
}

// 重置样式
.el-loading-mask {
  z-index: 1900 !important;
}
</style>