SSMWeb/src/views/admin1/index.vue

<template>
  <div class="admin">
    <div class="common-layout">
      <el-container>
        <el-aside :style="{ width: AsideWidth }">
          <Aside @changeAsideWidth="changeAsideWidth" />
        </el-aside>
        <el-container>
          <el-header>
            <headerComponen />
          </el-header>
          <el-main>
              <el-row v-show="store.isRows" @changRow="changRowStatus" justify="center" align="middle">
                  <el-col :span="9">
                      <el-card >
                        <div class="image">
                          <img class="image " src="@/assets/images/welcome.png">
                        </div>
                      </el-card>
                  </el-col>
              </el-row>
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
    <router-view />
  </div>
</template>
<script setup>
import {onMounted, provide, ref} from 'vue'
import {useRouter} from 'vue-router'
import headerComponen from '@/components/header.vue'
import Aside from '@/components/Aside.vue'
import {useStore} from "@/store/index.js";

const Router = useRouter()
const AsideWidth = ref('64px')
const store = useStore()
const isRow = ref(store.isRows)

provide("isRow", isRow);

const on = onMounted(() => {
  if (Router.currentRoute.value.path === "/admin1") {
    store.isRows = true;
  }
});

const changeAsideWidth = (val) => {
  if (val) return (AsideWidth.value = "64px");
  return (AsideWidth.value = "200px");
};

// 更改Row的欢迎展示状态
const changRowStatus = (val) => {
  this.isRow.value = val;
  store.SAVE_ROW(val);
};
</script>
<style lang="less" scoped>
.el-row {
  margin: 90px !important;
}

.welcome {
  display: flex;
  align-items: center;
  justify-items: space-between;
}

.admin {
  width: 100%;
  height: 100%;

  :deep(.common-layout) {
    height: 100%;
  }

  :deep(.el-container) {
    height: 100%;
  }

  :deep(.el-header) {
    background-color: var(--el-color-primary-light-7);
  }

  :deep(.el-aside) {
    transition: width 0.2s;
    background-color: var(--el-color-primary-light-8);
  }
}

.el-header {
  height: 50px !important;
}
</style>