new_school_ecology_manage/src/App.vue

<template>
  <div class="body-box" v-if="isShowHeader">
    <SidevarItem></SidevarItem>
    <div class="content">
      <Navbar></Navbar>
      <!-- <router-view></router-view> -->

      <router-view v-slot="{ Component, route }">
        <transition name="animation" mode="out-in">
          <component :is="Component" :key="route.path" />
        </transition>
      </router-view>
    </div>
  </div>
  <div class="body-box" v-else>
    <router-view></router-view>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount, onMounted, watch } from "vue";
import Navbar from "@/layout/Navbar.vue";
import SidevarItem from "@/layout/SidevarItem.vue";
import { useRouter } from "vue-router";

import { storeToRefs } from "pinia";
import { useCounterStore } from "@/stores/index";
const store = useCounterStore();

const router = useRouter();
const isShowHeader = ref(true);

// 监听路由判断是否显示导航条
watch(
  () => router.currentRoute.value,
  (newValue) => {
    // console.log(newValue);
    store.SETMENU(newValue.fullPath);
    isShowHeader.value = newValue.meta.showHeader;
  },
  { immediate: true, deep: true },
);

const tableData = reactive({
  list: [],
});
onBeforeMount(async () => {
  // console.log('App/onBeforeMount');
});
</script>

<style lang="scss">
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: unset;
  overflow: auto;
}

.el-dialog {
  border-radius: 5px !important;
  padding: 0 !important;
  .el-dialog__header {
    border-radius: 5px 5px 0 0;
    background: rgba(237, 241, 245, 1);
    font-weight: 600;
    height: 56px;
    margin: 0;
    padding: 0 0 0 20px;
    display: flex;
    align-items: center;
    .el-dialog__headerbtn {
      outline: none;
      top: 4px;
    }
  }
  .el-dialog__body {
    padding: 20px 20px 0 20px;
    .el-input {
      width: 400px;
    }
    .el-textarea {
      width: 400px;
    }
    .el-select {
      width: 400px;
    }
    .options {
      display: flex;
      flex-direction: row-reverse;
      .el-form-item__content {
        margin-left: 0 !important;
        flex: none;
      }
    }
  }
}

.is-message-box {
  .el-message-box__header {
    .el-message-box__headerbtn {
      outline: none;
    }
  }

  .el-message-box__btns {
    .el-button {
      outline: none;
    }
    .el-button--primary {
      background-color: rgba(61, 81, 232, 1);
      border: 0.5px solid rgba(61, 81, 232, 1);
    }

    .el-button--primary:hover {
      background-color: rgb(119, 133, 239);
      border: 0.5px solid rgb(119, 133, 239);
    }
  }
}

*::-webkit-scrollbar-track {
  background-color: #fff;
}

*::-webkit-scrollbar {
  background-color: #57b2ff;
  height: 0;
  width: 0;
}

*::-webkit-scrollbar-thumb {
  background: #57b2ff;
  border-radius: 4px;
  height: 0;
  width: 0;
}

// 进度条颜色
#nprogress .bar {
  background-color: rgb(111, 182, 184) !important;
}

/* 自定义图片预览列表样式 */
.img-preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  :deep(.el-upload-list) {
    display: none;
  }
  // 上传图片样式
  .img-item {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #eee;
    .preview-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      cursor: zoom-in;
    }
    /* 删除按钮样式 */
    .delete-btn {
      position: absolute;
      top: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.3s;
    }
    &:hover .delete-btn {
      opacity: 1;
    }
  }
  .upload-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    // padding: 8px 16px;
    border: 1px dashed #d9d9d9;
    border-radius: 4px;
    cursor: pointer;
    color: #666;
    transition: all 0.3s;
    width: 140px;
    height: 140px;
    &:hover {
      border-color: #409eff;
      color: #409eff;
    }
    .upload-txt {
      font-size: 14px;
    }
    .el-upload {
      width: 140px;
      height: 140px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .el-upload-list {
      display: none;
    }
  }
}

.viewer-container,      /* v-viewer 根容器 */
.el-image-viewer__wrapper, /* Element 预览层 */
.photo-preview-modal    /* vue-photo-preview 根容器 */
{
  z-index: 9999 !important; /* 远高于所有弹窗/表格 */
  position: fixed !important; /* 脱离文档流，不继承父层级 */
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}
</style>
<style scoped lang="scss">
.body-box {
  display: flex;
  width: 100%;

  .content {
    min-width: calc(100% - 200px);
    max-width: calc(100% - 63px);
    width: 100%;
    height: 100vh;
    background-color: rgba(238, 238, 238, 1);

    :deep(.el-dialog__header .el-dialog__headerbtn) {
      outline: none;
    }
  }
}

/* 过度动画配置代码 */
.animation-enter-from,
.animation-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
.animation-enter-to,
.animation-leave-from {
  opacity: 1;
}
.animation-enter-active {
  transition: all 0.7s ease;
}
.animation-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.6, 0.6, 1);
}
</style>