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="welcome">
                    <el-image
                      :src="featureState.property"
                      fit="cover"
                      :style="{
                        height: featureState.asideimgHeight,
                        width: featureState.width,
                      }"
                    >
                    </el-image>
                    <div>
                      <h4>
                        欢迎登录系统，{{ store.$state.current_userInfo.role }}
                      </h4>
                    </div>
                  </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, vShow } 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);

const featureState = reactive({
  property: "https://s2.loli.net/2023/05/25/TDfPRtyHaXj3ihF.png",
  asideimgHeight: (document.body.clientHeight - 200) / 2 + "px",
  width: 100 + "%",
});

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;
  flex-direction: column;
  align-items: center;
  justify-items: self-end;
}

.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>