Avatar头像实现

avatar：

<template>
  <el-dropdown>
    <span class="el-dropdown-link">
      <el-avatar shape="square" :size="40" :src="squareUrl" />
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>安全退出</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>

</template>

<script setup>
import { ref } from 'vue'

const squareUrl=ref("http://www.java1234.com/gg/avatar.jpg")

</script>

<style lang="scss" scoped>

</style>

导入avatar

import Avatar from '@/views/layout/header/avatar'

样式：

.navbar-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

Footer实现

footer index.vue

<template>
  <div class="footer">
    Copyright © 2012-2022 Java知识分享网 版权所有&nbsp;&nbsp;<a href="http://www.java1234.vip" target="_blank">www.java1234.vip</a>
  </div>
</template>

<script>

</script>

<style lang="scss" scoped>
.footer{
  padding: 20px;
  display: flex;
  align-items: center;
}
</style>

默认Home主页实现

home index.vue

<template>
  <div class="home">
    欢迎使用，Java1234微信小程序商城后台管理
  </div>

</template>

<script>
export default {
  name: "index"
};
</script>

<style lang="scss" scoped>
.home{
  padding: 40px;
  font-size: 30px;
  font-weight: bold;
}
</style>