layout布局修改，标签卡，列表组件封装

hejianhao

2025-03-31 8790f99a94733c7c3836706c75a77f9bbb15c2ca

 src/layouts/index.vue

@@ -3,23 +3,24 @@
    <!-- 判断是否在空白页打开 -->
    <template v-if="!isOneself">
      <div class="app-wrapper">
        <div class="left">
        <div class="left" :style="{ width: isFold ? '100px' : '258px' }">
          <!-- 系统标题 -->
          <div class="system-title">
            <div class="image">
              <img src="../assets/logo.jpg" alt="" srcset="" />
            </div>
            <div class="title">职评网管理系统</div>
            <div v-if="!isFold" class="title">实验室流程</div>
          </div>
          <!-- 左侧菜单 -->
          <div class="sidebar-container">
            <ElMenu />
          </div>
          <div v-if="!isFold" class="sidebar-left-bg"></div>
          <div v-if="!isFold" class="sidebar-bottom-bg"></div>
        </div>
        <!-- 右侧展示内容 -->
        <div class="main-container">
          <HeaderNav class="header-main" />
          <div v-if="nowRouteName" class="router_name">{{ nowRouteName }}</div>
          <AppContent class="app-main" />
        </div>
      </div>
@@ -35,6 +36,7 @@
import ElMenu from './components/ElMenu/index.vue'
import HeaderNav from './components/HeaderNav.vue'
import AppContent from './components/AppContent.vue'
import { mapState } from 'vuex'
export default {
  data() {
    return {
@@ -43,6 +45,9 @@
      // 获取当前页面名称
      nowRouteName: '',
    }
  },
  computed: {
    ...mapState(['isFold'])
  },
  components: {
    ElMenu,
@@ -77,66 +82,98 @@
  height: 100%;
  width: 100%;
  display: flex;
  background-image: url('../assets/public/layoutsBG.png');
  background-size: cover;
  background-position: center;

  .left {
    width: 200px;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: white;
    transition: width 0.3s ease-in-out;

    // 系统标题
    .system-title {
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      align-items: center;
      background-color: white;
      height: 50px;
      padding: 0px 10px;
      height: 240px;
      box-sizing: border-box;

      .image {
        width: 40px;
        height: 40px;
        margin-top: 40px;
        width: 100px;
        height: 100px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .title {
        font-weight: 700;
        margin-top: 7px;
        font-weight: bold;
        line-height: 43px;
        font-size: 25px;
      }
    }

    // 左侧菜单
    .sidebar-container {
      z-index: 2;
      padding: 0 19px;
      overflow-y: auto;
      flex: 1;
      background-color: white;
      box-shadow: 0px 3px 13px 0px rgba(94, 131, 245, 0.1);

      ::v-deep .el-menu {
        border-right: unset !important;
      }
    }

    .sidebar-left-bg {
      z-index: 1;
      position: absolute;
      top: 338px;
      left: 0;
      width: 183px;
      height: 316px;
      background: #FFFCE5;
      opacity: 0.56;
      filter: blur(76.141290103688px);
    }

    .sidebar-bottom-bg {
      z-index: 1;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 129px;
      height: 289px;
      background: #66FFFF;
      opacity: 0.4;
      filter: blur(76.141290103688px);
    }
  }

  .main-container {
    flex: 1;
    display: flex;
    flex-direction: column;

    .header-main {
      background-color: white;
      height: 50px;
    }

    .router_name {
      padding-top: 8px;
      padding-left: 23px;
      font-size: 24px;
      font-weight: bold;
      height: 70px;
    }

    .app-main {
      height: calc(100% - 120px);
      flex: 1;
      overflow: auto;
      border-radius: 10px;
      margin: 16px 23px;
      padding: 10px 21px 0 21px;
    }
  }