renli-pc/src/App.vue

<template>
  <div id="app">
    <transition name="el-zoom-in-top">
    </transition>
    <div v-if="isRouterAlive">
      <!-- include="services,collectionList,reatment" -->
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>
<script>
import app from "./style/app.css";
import ele from "./style/ele.css";
import main from "./style/main.css";
import { isOperateFun } from "./app.js";
export default {
  head() {
    return {
      meta: [
        {
          hid: "description",
          "http-equiv": "Content-Security-Policy",
          content: "upgrade-insecure-requests",
        },
      ],
    };
  },
  name: "App",
  provide() {
    return {
      reload: this.reload,
    };
  },
  data() {
    return {
      isRouterAlive: true,
    };
  },
  created() {
    isOperateFun();
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
  },
  watch: {
    $route(to, from) {
      if (to != from) {
        this.transitionName = "slide-top";
        document.title = this.$route.meta.title + " - 门店业务";
      }
    },
  },
};
</script>

<style>
/* ::-webkit-scrollbar {
     width: 0 !important;
   } */
/* ::-webkit-scrollbar {
    height: 0 !important;
   } */

.margin-left {
  margin-left: 10px;
}

.margin-right {
  margin-right: 10px;
}

.margin-top {
  margin-top: 10px;
}

.margin-bottom {
  margin-bottom: 10px;
}

.padding-left {
  padding-left: 10px;
}

.padding-right {
  padding-right: 10px;
}

.padding-top {
  padding-top: 10px;
}

.padding-bottom {
  padding-bottom: 10px;
}

.el-dialog {
  margin-top: 10vh !important;
  /* max-height: 90vh !important; */
}

.el-button {
  line-height: normal;
}

.el-table .cell {
  line-height: normal;
}

* {
  -webkit-box-orient: vertical;
  margin: 0;
  padding: 0;
}

#app {
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.display-mod {
  width: 95%;
  height: 100%;
  margin: 10px auto;
  background: white;
}

.mod {
  position: relative;
}

.el-main {
  min-width: 550px;
  width: 100%;
  overflow: auto;
  height: 100%;
  padding: 0;
}

.header_flex {
  display: flex;
  justify-content: space-between;
  height: 38px;
  margin-bottom: 5px;
}

.header_flex .el-input__inner:focus {
  border-color: #f78989;
}

.searchDiv {
  width: 200px;
}

/* 下拉选择框样式 */
/* .el-select .el-input.is-focus .el-input__inner,
.el-pagination__sizes .el-input .el-input__inner:hover,
.el-select .el-input__inner:focus {
    border-color: #ff4949;
} */
/*设置当前页码的样式，及鼠标移上其他页码时的样式,以及左右箭头鼠标移上的样式*/

.el-pager li.active,
.el-pager li:hover,
.el-pagination button:hover {
  color: #ff4949;
}

/* 弹窗 取消 确定按钮样式 */
.confirmbtnFalses {
  background: #f78989;
  border: none;
}

.confirmbtnFalses:hover {
  border-color: #f78989;
  background: #f78989;
}

.cancelbtnFalses:hover {
  border-color: #d4d2d2;
  color: black;
}

.cancelbtnFalses {
  background: #dbdbdb;
}

/* 下拉文字选中样式 */
/* li.el-select-dropdown__item.selected {
    color: #ff4949;
} */

/* 全局Switch 开关样式 打开时文字位置设置*/
.demo .el-switch__label {
  position: absolute;
  display: none;
  /*字体在开关中显示*/
  color: #fff;
}

.demo .el-switch__label--right {
  z-index: 1;
  right: 6px;
}

/*关闭时文字位置设置*/
.demo .el-switch__label--left {
  z-index: 1;
  left: 9px;
}

/*显示文字*/
.demo .el-switch__label.is-active {
  display: block;
}

.demo.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 50px !important;
}

/*全局input样式*/
input {
  width: 180px;
  height: 30px;
  border-radius: 3px;
  border: 1px solid rgb(247, 137, 137);
  outline: none;
}

input,
.el-input:focus {
  color: #f78989;
  border: 1px solid #f78989;
}

/*全局checkbox选中时的样式*/
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #fd4c4c;
  border-color: #f78989;
}

/*全局表头筛选 */
.el-table th > .cell.highlight {
  /* color: #ff4949; */
  color: white;
}

.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #ff4949;
}

/*  */
/* 全局下拉框 */
.el-cascader {
  max-width: 220px;
}

.el-select {
  max-width: 220px;
}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 400ms;
  position: absolute;
}

.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
</style>