index.vue

<template>
  <section id="business_container">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cachedViews">
        <router-view :key="key" />
      </keep-alive>
    </transition>
  </section>
</template>

<script>
export default {
  name: "Business",
  watch: {
    $route() {
      if (this.$route.path.startsWith("/review")) {
        this.$store.commit("setMode", "display");
      } else {
        this.$store.commit("setMode", "normal");
      }
    },
  },
  created: () => {
    console.log("进入业务交易界面");
  },
  computed: {
    cachedViews() {
      return this.$store.state.TagsView.cachedViews;
    },
    key() {
      return this.$route.path;
    },
  },
};
</script>

<style>
#business_container {
  flex: 1;
  box-shadow: 0 1px 15px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);
}
#business_container .eContainer, #business_container .eContainer-search{
  box-sizing: border-box;
  height: 100%;
  width: 85%;
  margin: 0 auto;
  padding-top: 40px;
}



@media screen and (min-width: 2561px) {
    
#business_container .eContainer {
     width: 85%;
    }
}

@media screen and (min-width: 1921px) and (max-width: 2560px) {
   
    #business_container .eContainer {
     width: 90%;
    }
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {
   
#business_container .eContainer {
     width: 93%;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1440px) {
   
#business_container .eContainer {
     width: 95%;
    }
}

@media screen and (max-width: 1199px) {
   
#business_container .eContainer {
     width: 100%;
    }
}



#business_container .eContainer {
  background-color: #ffffff;
  box-shadow: 0 1px 15px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);
}
#business_container .eContainer .eContainer, 
#business_container .eContainer .eContainer-search, 
#business_container .eContainer-search .eContainer, 
#business_container .eContainer-search .eContainer-search{
  width: 100%;
  margin: 0;
  padding-top: 0;
  background-color: unset;
  box-shadow: unset;
}
/*
#business_container .eibs-tab {
  padding: 40px;
}
*/
#business_container .eibs::before, #business_container .eibs-tab::before,
#business_container .eibs::after, #business_container .eibs-tab::after {
  content: "";
  display: block;
  clear: both;
}
</style>