1.优化列展示功能

loulijun2021

2023-01-04 0c6473bcff72275f79cbc14843937ed8b26c6801

 src/layout/components/AppMain.vue

@@ -1,10 +1,37 @@
<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">

    <!--    1.初始类型 fade-transform-->
    <div v-if="$store.state.settings.animationType==='fade-transform'">
      <transition name="fade-transform" mode="out-in">
        <keep-alive :include="cachedViews">
          <router-view :key="key" />
        </keep-alive>
      </transition>
    </div>
    <!--2.无类型 none-->
    <div v-else-if="$store.state.settings.animationType==='none'">
      <keep-alive :include="cachedViews">
        <router-view :key="key" />
      </keep-alive>
    </transition>
    </div>
    <!--3.展开折叠类型  el-collapse-transition-->
    <div v-else-if="$store.state.settings.animationType==='el-collapse-transition'">
      <el-collapse-transition>
        <keep-alive :include="cachedViews">
          <router-view :key="key" />
        </keep-alive>
      </el-collapse-transition>
    </div>
    <!--4.剩下的类型 -->
    <div v-else>
      <transition :name="$store.state.settings.animationType">
        <keep-alive :include="cachedViews">
          <router-view :key="key" />
        </keep-alive>
      </transition>
    </div>

  </section>
</template>

@@ -26,13 +53,13 @@
<style lang="scss" scoped>
.app-main {
  /* 50= navbar  50  */
  min-height: calc(100vh - 90px);
  min-height: calc(100vh - 100px);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.fixed-header+.app-main {
.fixed-header + .app-main {
  padding-top: 50px;
}

@@ -42,7 +69,7 @@
    min-height: calc(100vh - 84px);
  }

  .fixed-header+.app-main {
  .fixed-header + .app-main {
    padding-top: 84px;
  }
}