vue项目--后台管理系统（day8）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情

上一篇文章我们完成了侧边栏下拉菜单的编写，接下来我们讲完成整个管理系统的主题页面Main.vue组件

1. 这个主题页面大致样式如下图所示，我们将会把他分为好几块部分来写，拆分成组件然后都引入到一个页面组合起来

2. 首先是这个Admin管理员组件

• 这里我们用到了Element-ui里面的el-card组件，具体的官网链接如：element-plus.gitee.io/zh-CN/compo… ，这个组件就是一个框，把页面划分开发的功能，然后我们需要在框里面写自己的内容
• el-card卡片代码复制粘贴之后，我们要完成里面 的内容，首先是一个头像以及Admin,和一个超级管理员，我们在网上下载完图片后引入，头像使用border-radius使其变为圆角，然后图片标签和另一个内容标签采用flex布局，使其显示在同一行上，然后下面两行是登录时间以及登录地点，这里同理也是flex布局，然后字体采用灰色小字体。然后这个卡片我们添加了shadow属性，他的可选值有 always--一直保持阴影，hover--鼠标经过显示阴影，never--从不显示阴影，他的默认值是always,但是这里我们选择hover鼠标经过显示阴影，样式上会好看一些。
• 具体的代码如下所示：

<el-card shadow="hover">
        <div class="user">
          <img :src="userImg" />
          <div class="userinfo">
            <p class="name">Admin</p>
            <p class="access">超级管理员</p>
          </div>
        </div>
        <div class="login-info">
          <p>上次登录时间：<span>2022-5-19</span></p>
          <p>上次登录地点：<span>XXXX</span></p>
        </div>
      </el-card>

这样我们就完成了超级管理员这个卡片组件了。