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 :body-style="{ textAlign: 'center' }">
                        <el-image :src="backimage.src"
                                  fit="cover"
                                  :style="{height: backimage.autoHeigth,width: backimage.width}"
                        >
                        </el-image>
                        <span>欢迎登录系统，{{store.$state.current_userInfo.role}}</span>
                      </el-card>
                  </el-col>
              </el-row>
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
    <router-view />
  </div>
</template>
<script setup>
import {onMounted, provide, reactive, 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)

const backimage = reactive({
  src:"https://s2.loli.net/2023/05/25/TDfPRtyHaXj3ihF.png",
  autoHeigth: (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;
  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>